Design Concepts
izarooni.com has gone through 3 design revisions. Coming up with a unique design that matches your personality while showcasing your skills and projects is no easy feat. I'm not an experienced front-end developer, I prefer the back-end, it's where I started to learn programming. I don't remember how long it took for the design to evolve from the first revision, all I can say is it has been at least 4 years (as of writing this in June, 2021).
Revision #1
Inspired by someone in my family, I wanted a design that simply showed who I am. Having my own domain and website was cool enough to me and I knew coming up with a unique design isn't something that can happen immediately.
I had to think about what projects I even wanted to show. I started with older websites I made half a decade ago that are written like a blog.
The core of the website was built using a PHP framework, CodeIgniter. It's lightweight, easy to use and most importantly, in a programming language I'm familiar with (PHP).
I had to think about what projects I even wanted to show. I started with older websites I made half a decade ago that are written like a blog.
The core of the website was built using a PHP framework, CodeIgniter. It's lightweight, easy to use and most importantly, in a programming language I'm familiar with (PHP).
Revision #2
The first design had too much white space. Nothing eye catching, nothing to leave an impression. I had an idea to use an abstract layout to show my projects. Basically, thumbnails are shown in a grid-type fashion, but instead of having each cell the same width and height, each thumbnail image keeps its original aspect ratio to destroy the uniform look.
Revision #3
After leaving the website alone for several months I suddenly had an idea for a new design. Given that this website isn't large or complicated, I also decided to use a new framework, Remix.
Due to my lack of skills in UX and UI design, I decided to try and keep the content visible on the main page, before the fold.
The fold represents the line in which content is cut off in the viewport. Anything you see when a page loads, without scrolling is considered "before the fold".
Of course, with more projects means more space taken and inevitably scrolling. A cool new thing I learned was sticky content, awesome! This allows me to keep the left column stuck on the page while allowing the right column to scroll. This way I can show my name and external links while being able to showcase as many projects as I'd like.
The right column contains thumbnails for each project. To make more projects visible at once, the max-height is capped while the width is fluid. To spice up the design and user-interaction, upon hovering or clicking, the thumbnail is expanded to show the full image.
Due to my lack of skills in UX and UI design, I decided to try and keep the content visible on the main page, before the fold.
The fold represents the line in which content is cut off in the viewport. Anything you see when a page loads, without scrolling is considered "before the fold".
Of course, with more projects means more space taken and inevitably scrolling. A cool new thing I learned was sticky content, awesome! This allows me to keep the left column stuck on the page while allowing the right column to scroll. This way I can show my name and external links while being able to showcase as many projects as I'd like.
The right column contains thumbnails for each project. To make more projects visible at once, the max-height is capped while the width is fluid. To spice up the design and user-interaction, upon hovering or clicking, the thumbnail is expanded to show the full image.