Molly Portfolio Website
Creating a pixel perfect website
Objective
The goal of this project was to create a visually engaging and professional portfolio website to showcase the creative work of a graphic designer. The main focus was on building a smooth, responsive, and user-friendly experience that adapted seamlessly across different screen sizes, ensuring her designs were always presented at their best on any device.
Set up
The setup made collaboration and feedback cycles fast and efficient, while allowing me to strengthen my understanding of frameworks and the deployment process. I used Next.js to structure it as a multi-page application and optimize performance. Tailwind to match the designer’s Figma specifications and maintain visual consistency across components.
The website was deployed to Vercel, to leverage its seamless integration with Next.js for automatic deployments and preview links.
Challenges
One of the main challenges was creating a pixel-perfect website using Tailwind’s utility classes. I had to be flexible with the default utilities and create custom classes to match the Figma design across different devices.
Another key challenge was understanding how layouts behave across various device widths, as well as the differences between development, production, and the live site.
Learnings
Learning 1
This project gave me valuable, industry-like experience by working closely with a graphic designer. Through constant communication, feedback, and small iterative improvements, I learned how to align technical implementation with the design.
Learning 2
I improved my skills by setting up the project from scratch, organizing imagery, defining style guides, and creating custom variables. While this was primarily a front-end project, I also implemented a small backend to integrate a third-party API for the contact form logic.
Outcome
This experience strengthened my understanding of how the Next.js App Router system works. Gave me more insight of deployment process and highlighted the importance of testing and fine-tuning before delivering a polished live site. I also learned more about which frameworks to use when I want to build fast, optimized, and user-friendly multi-page websites. Overall it reinforced the importance of precision, collaboration, visual quality, and maintaining a continuous feedback loop so I could gain the required experience for production workflows.
