Building This Portfolio: Lessons Learned

Building a portfolio sounds simple — until you actually do it. Here's what I learned along the way, including the mistakes I made and how I fixed them.

Lesson 1: Environment Variables Will Humble You

Everything worked perfectly on localhost. Then I deployed to Vercel and... nothing. The contact form failed silently. reCAPTCHA threw errors.

The problem? I forgot to add my environment variables to Vercel. Your local `.env` file doesn't magically appear in production. You have to manually add each variable in your hosting platform's dashboard.

Tip: Set up your production environment variables BEFORE you deploy, not after you're debugging why everything is broken.

Lesson 2: reCAPTCHA Domains Are Strict

Even after adding my environment variables, reCAPTCHA still failed. Turns out, Google reCAPTCHA requires you to whitelist every domain that will use your keys — including your Vercel preview URLs.

I had to add: - `localhost` (for development) - My production domain - `vercel.app` (for preview deployments)

Tip: When using third-party services with domain restrictions, add ALL your domains upfront.

Lesson 3: Accessibility Isn't Optional

I initially built the site without thinking much about accessibility. Then I learned about ARIA attributes, skip links, and keyboard navigation. Adding these after the fact took more time than if I'd built them in from the start.

What I added: - Skip to main content link - Proper ARIA labels on interactive elements - Focus indicators for keyboard users - `aria-current="page"` for navigation - Live regions for form status messages

Tip: Build with accessibility in mind from day one. It's easier than retrofitting.

Lesson 4: Mobile Navigation Is Its Own Beast

Desktop nav is easy — just a row of links. Mobile nav requires state management, animations, click-outside-to-close behavior, and making sure links actually close the menu when clicked.

I used React's `useState` for the toggle and added an effect to close the menu on route changes. Simple in hindsight, but it took some iteration.

Lesson 5: Ship It, Then Improve

I could have spent another month adding features. Instead, I launched with a solid foundation and a plan to iterate. A live portfolio that's 90% polished beats a perfect portfolio that never ships.

Final Thoughts

Building this portfolio taught me more than any tutorial could. Real projects have real problems — domain issues, environment variables, edge cases. That's where the learning happens.

If you're building your own portfolio, my advice: start simple, deploy early, and fix problems as they come. You'll learn more from debugging production issues than from following along with a YouTube video.

Good luck!