Portfolio Redesign & Engineering
Rebuilding My Portfolio with Custom Code for Speed & Flexibility
Overview and The Motive
I built my first portfolio website around March 2025, right before graduating from university and finishing my software developer internship. Back then, I needed a personal site quickly and chose Framer because it allowed me to design and publish a working website without writing code. Over time, I realized that my original site no longer represented where I was heading as a designer and engineer, which inspired me to rebuild everything from scratch using Next.js.
The original site served its initial purpose, but as my skills grew, I wanted a web presence that truly showed what I am capable of building across both visual design and frontend code.
The Limitations of My Previous Site
My old website was a single page with five stacked sections covering projects, education, skill icons, certificates, and a basic contact area. The opening hero animation was noticeably sluggish, and the projects section simply opened raw links without explaining the reasoning, challenges, or story behind any of the work. The entire page felt like a generic template rather than a thoughtful portfolio, and it did not clearly communicate my focus on high-quality user experience design. You can still explore the original live archive at howardyam.framer.website ↗.
Bridging Design and Code in the Modern Era
During my developer internship, I focused heavily on frontend engineering alongside digital interface design. In an era where anyone can generate basic templates with AI, I believe product designers stand out by mastering both visual craft and real code. Rebuilding my portfolio with custom Next.js components allowed me to move beyond no-code limits and prove that I can take a digital product from initial design all the way to production.
Fusing Personal Branding with the OCEN Identity
When planning the visual direction for this revamp, I decided to blend my personal portfolio with the visual language I developed for OCEN, my agency brand concept. I brought in the same high-contrast monochrome color palette, delicate white inner shadows, and signature italic serif typography set in Fraunces. This created a cohesive editorial identity that feels warm, intentional, and unmistakably personal.
Lightweight Craft and Smooth Micro-Interactions
While I explored heavy experimental canvas effects in other projects, I deliberately kept my main portfolio lightweight so it loads instantly and runs at a smooth sixty frames per second on every device. I engineered custom interactive features including smooth mouse-following cursor indicators, expandable navigation preview drawers, and project hover popovers that cross-fade between static screenshots and animated demonstrations.
What I Learned and What Comes Next
Migrating my site from a Framer landing page to a custom Next.js web application deployed on Vercel gave me complete ownership over every pixel, layout shift, and SEO meta tag. Building this portfolio was also my first time pairing the Framer inspection workflow directly with the Antigravity CLI to translate design ideas into clean React code. The end result is a fast, narrative-driven portfolio that tells the real story behind my work.
