Designing, Developing, and Deploying my Portfolio
The process of planning, designing, and developing the site you’re viewing right now. :D
- Role: UI/UX Designer & Front-End Developer
- Tools: Figma | HTML | CSS | JavaScript
- Timeline: 4 Weeks (Approx. 60 working hours)
Overview:
The goal of this project was to design and build a portfolio to showcase my UI/UX and front-end capabilities. I majored in video game design, so many of my existing works are tailored to the gaming industry; with this project, I demonstrated my ability to apply those skills outside of that scope. To showcase those core skills, I chose to build the site structure, layouts, and code manually, without relying on any site-builders, templates, or AI generation, despite the hit to my timeline.
Design:
I heavily prioritize pre-production on all my projects; having the big picture in mind keeps my designs modular and cohesive, and keeps me collaboration-ready, even while working on an individual project. This continued here as I designed the aesthetics to be “approachable but professional.” I chose this theme to make the site reflect me, while remaining useful for future users, which led to design choices like the occasional jokes I’ve thrown in, and the use of rounded boxes over boxes with sharp corners. My color palette was informed by the colors of my Logo, which was itself based on my favorite painting, The Great Wave off Kanagawa. Speaking of the logo, to make it I hand-traced a vector over the original artwork so I could precisely control the colors and integrate my branding while keeping the image scalable.
The greatest challenge I faced while designing was my About Me page. My initial design had big spacing problems (see left) that made the layout feel off-kilter. During site development I went back and looked at my inspiration images and, over many iterations, successfully identified and addressed three core issues:
- Grid Structure: Flipped the page orientation entirely and changed the column ratio from 1:2 to 3:1, significantly improving distribution of content.
- Visual Clutter: I reduced clutter by replacing the heavy buttons with minimalist, line-separated link text
- Container Stretching: Corrected spacing issues to balance visual hierarchy.
The big lightbulb moment was flipping the layout. From there, everything clicked into place.
Development:
I wrote the website’s front-end code by hand to authentically showcase my design capabilities without the time-saving shortcuts of a WordPress template or an AI-generated layout. I also wanted to save monetary cost by deploying and hosting the site myself for free, rather than paying a hosting service.
The biggest challenge that came with coding the front-end was structuring the DOM of more complex elements to be responsive and cohesive, even on monitors larger than my own. I had to put extra work into ensuring the grid elements on my home page and about me page maintain vertical and horizontal cohesion. Originally, I thought I could just implement the grids the same way on each page, which led to the text on the about me page having horrible vertical spacing. The end solution was to set up the grid on the about me page as a 2x1, containing two columns with all the actual elements of the page inside them. The column’s gap property let me precisely adjust the page’s vertical spacing, while the grid maintained the spacing and horizontal widths of each column. The columns were an unintuitive solution for me because my instinct was to change properties on the grid and its items, rather than circumventing the limitations of those properties entirely.
Takeaways:
Scope & Time Management: Initially, I attempted to build a dual-purpose site covering both UI/UX and game design (as seen in early wireframe navigation). I realized mid-development that this split focus diluted the user experience for recruiters seeking either role. Scrapping the game design elements and strictly constraining my project scope and personal focus to UI/UX created a much stronger, single-purpose user journey. I also realized what a trap “productive procrastination” can be when my timeline was delayed by refining aesthetic polish before fully establishing the MVP. To prevent future scope creep, I now work from a rigid priority list that keeps my daily tasks aligned with the core project focus.
Modularity: It was incredible how much more streamlined the process became by utilizing modularly designed assets and assigning properties like font size and colors to variables. I had an understanding of modular design’s value was from a game design perspective, but hadn’t expected just how much more streamlined modularity made UI design. Most eye-opening was how useful this design structure would be for maintaining consistency across larger, collaborative projects.
“Playtesting” value: At the start of this project I underestimated the power of human feedback, believing there to be little benefit for a project with this small a scope. However, even with the help of AI reviewing my pages for errors, there were structural redundancies that did not get caught until the development stage. While these issues were eventually caught, collaboration and feedback during preproduction and design would have saved time that was wasted on elements I ended up scrapping.