Blog

Building My Portfolio: Lessons Learned and Design Decisions

Gurkeerat
portfolio
web-design
development
personal-project
A behind-the-scenes look at building my personal portfolio website, including design decisions, technical choices, and lessons learned throughout the development process.

Building My Portfolio: A Developer’s Journey

Creating a personal portfolio is one of the most important projects for any developer. It’s not just a showcase of your work—it’s a reflection of your skills, personality, and attention to detail. Today, I want to share the story behind building my own portfolio and the lessons I learned along the way.

The Planning Phase

Before writing a single line of code, I spent considerable time planning:

Goals and Objectives

  • Showcase my work in an engaging, professional manner
  • Demonstrate technical skills through the site itself
  • Create a memorable experience that reflects my personality
  • Ensure accessibility and performance across all devices

Design Philosophy

I wanted the portfolio to feel:

  • Clean and minimal - Let the content speak for itself
  • Interactive but not overwhelming - Subtle animations and transitions
  • Professional yet personal - Show my work while maintaining approachability

Technical Decisions

Framework Choice: Astro

I chose Astro for several reasons:

  1. Performance First - Zero JavaScript by default means faster loading
  2. Content-Driven - Perfect for a portfolio with project showcases
  3. Modern Developer Experience - Great tooling and TypeScript support
  4. SEO Optimized - Static generation ensures excellent search engine performance

Styling Approach

  • CSS Custom Properties for theming and consistency
  • Mobile-first design with progressive enhancement
  • Semantic HTML for accessibility and SEO
  • Custom components for reusability

Key Features Implemented

1. Dark/Light Theme Toggle

// Theme persistence and system preference detection
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

2. Responsive Design

  • Mobile-first approach with breakpoints at 50em and 60em
  • Flexible grid systems that adapt to different screen sizes
  • Touch-friendly interactions for mobile devices

3. Performance Optimizations

  • Image optimization with proper sizing and formats
  • Lazy loading for non-critical content
  • Minimal JavaScript with progressive enhancement

Challenges and Solutions

Challenge 1: Content Management

Problem: How to easily manage and update project information?

Solution: Astro’s content collections with markdown files for each project, making updates simple and version-controlled.

Challenge 2: Performance vs. Interactivity

Problem: Balancing performance with engaging interactions?

Solution: Used Astro’s island architecture to add interactivity only where needed, keeping the core experience fast.

Challenge 3: Cross-browser Compatibility

Problem: Ensuring consistent experience across browsers?

Solution: Progressive enhancement with fallbacks and thorough testing across different browsers and devices.

Lessons Learned

1. Start with Content

Before diving into design, I should have finalized all content first. This would have saved time on layout adjustments later.

2. Performance is King

Every decision should consider performance impact. Users expect fast, responsive websites.

3. Accessibility is Non-Negotiable

Building with accessibility in mind from the start is much easier than retrofitting later.

4. Mobile Experience Matters

Most users will first see your portfolio on mobile. Design for mobile first, then enhance for desktop.

Future Improvements

Looking ahead, I plan to:

  • Add a blog section (which I’m working on now!)
  • Implement search functionality for projects
  • Add more interactive elements while maintaining performance
  • Integrate analytics to understand user behavior

Conclusion

Building my portfolio was more than just a technical project—it was a learning experience that taught me about:

  • User experience design and the importance of first impressions
  • Performance optimization and the impact of technical decisions
  • Content strategy and how to present information effectively
  • Personal branding and finding the right balance between professional and personal

The portfolio is never truly “finished”—it’s a living project that evolves with my skills and experiences. And that’s exactly how it should be.