It's what you're using right now! This is a
website portfolio I built for myself from scratch. I designed the entire thing on Figma, and I developed
the website in HTML and CSS.
I had never done any web development before, so this was actually a learning experience! I wanted a project to develop a new skill, and I landed on building my own website. I recorded the entire thing as a time lapse, so you can see me learn as I go.
01
The very first thing I did was list out everything that could be incorporated into my website. I spent a long time thinking about what I wanted you to know about me and what I wanted to show. Eventually, I grouped up specific items like projects, drawings, videos, and photos that could be displayed on the site to form a very loose layout of the site.
I settled on three main sections: projects, exploration, and about me.
02
I started the design process by creating an inspiration board, with elements and images I find all over the Internet. I wanted examples of how other people built their websites and portfolios, so I could pick out what aspects resonated with me most.
I had a faint idea about how I wanted to organize the website, but I had no idea how I wanted to do it exactly, so this process was key to making my ideas tangible.
03
With my newfound inspiration, I started creating actual layouts for the websites without any real content. It was important to me that the website flow made sense and displayed everything I wanted to show.
04
Before jumping in, I wanted to settle on one or two color schemes and fonts to design around. I explored a few possible options of each before going with a red-white theme.
05
With my inspo board, wireframes, and color schemes, I was able to prototype a full website relatively quickly. I went through a few iterations as I designed (such as the ones seen below), but worked out the designs seen on the site seen now.
06
Aside from a few tutorials that I skimmed through, I went into development relatively blind.
I considered this part of the challenge, but I didn't anticipate the effort put into making the websites
responsive to multiple screen sizes.
As seen in the video, I spent quite some time trying to force my way into a website that perfectly matched my design.
07
I wasn't satisfied with how I was doing things, so I spent some extra time going back to the
basics and learning concepts like parent-child relationships and flexbox. I decided to essentially start from scratch
with these new concepts in mind, and it changed everything. I was getting much more efficient and developing responsive
screens were a breeze.
08
At this point, it's become kind of meta, because this is the stage I'm doing
right now. I'm designing and developing all remaining pages with their content filled out.
This is the most tedious stage of the project by far.
09
I went back and made any final tweaks to the website, including responsiveness, image changes,
and revising writing. I've also added sections to some projects that felt incomplete.
At this point, the website is ready to ship and deploy.
10
I deployed the site on Firebase, since it was free to use for low-traffic sites. They also have free storage
options for the video links connected to the project pages. I also know it's relatively simple to update the website through Firebase
in the future, including handling server-side changes and databases.
11
I wanted the website to feel intentional and clean. I designed the home page in such a way that anyone could quickly scroll through and get a summary of myself— like a visual resume. If people want to learn more, they can still explore and get all the details.
The development process also provided a lot of insight into what is possible to translate from Figma to a product. I sometimes became frustrated with myself for not making the design easier to digest as a developer. I can already see how designing with the developer in mind can make work flow far better.
