← Back to post list

How I built my portfolio website

How I Built My Portfolio Website

Introduction

As a QA developer transitioning deeper into automation and development, I realized I needed a strong personal portfolio—not just to showcase my work, but to demonstrate my practical skills. Instead of using a no-code builder, I decided to build my portfolio site from scratch to challenge myself and learn along the way.

This article walks through my process, decisions, and lessons learned.

Why I Decided to Build My Own Portfolio

I had three main goals:

  • Showcase my QA and automation projects
  • Demonstrate real development skills
  • Create something I can continuously improve

Using templates would have been faster, but building it myself gave me hands-on experience—which is how I learn best.

Planning the Portfolio

Before writing any code, I outlined what I actually needed:

Core Sections

  • Home (Introduction + personal branding)
  • About Me
  • Projects
  • Skills
  • Contact

Key Considerations

  • Clean and minimal design
  • Fast loading speed
  • Mobile responsiveness
  • Easy to update later

Choosing the Tech Stack

I intentionally kept things simple:

  • HTML – Structure
  • CSS – Styling
  • JavaScript – Interactivity
  • GitHub Pages / Vercel – Deployment

I avoided heavy frameworks at first because I wanted to fully understand the fundamentals.

Building the UI

Step 1: Layout

I started with a basic layout:

  • Header (navigation)
  • Main content sections
  • Footer

I used Flexbox and Grid to structure the layout.

Step 2: Styling

I focused on:

  • Neutral color palette
  • Consistent spacing
  • Readable typography

I also made sure the design looks clean on both desktop and mobile.

Showcasing My Projects

This was the most important section.

For each project, I included:

  • Project title
  • Short description
  • Tech stack used
  • GitHub/demo link

Since I work in QA, I made sure to highlight:

  • Test automation scripts
  • Bug reports
  • Real-world testing scenarios

Adding Interactivity

To make the site feel modern, I added:

  • Smooth scrolling
  • Hover effects
  • Simple animations

Nothing too complex—just enough to improve user experience.

Deployment

Once the site was ready, I deployed it.

Steps I followed:

  1. Pushed code to GitHub
  2. Connected repository to deployment platform
  3. Configured domain (optional)
  4. Tested live version

Deployment was surprisingly smooth and fast.

Challenges I Faced

1. Design Decisions

I spent more time than expected deciding how things should look.

Lesson: Start simple, iterate later.

2. Responsiveness

Making the site look good on all screen sizes took effort.

Lesson: Always design mobile-first.

3. Overthinking Features

I initially wanted too many features.

Lesson: Focus on what actually matters—clarity and usability.

What I Learned

Building this portfolio helped me:

  • Strengthen my frontend fundamentals
  • Think like a developer, not just a tester
  • Understand deployment workflows
  • Improve my problem-solving skills

Most importantly, it gave me confidence.

What I’d Improve Next

  • Add a blog section
  • Integrate real project case studies
  • Improve UI/UX with better animations
  • Add analytics to track visitors

Final Thoughts

Building my own portfolio was one of the best decisions I made for my career. It’s more than just a website—it’s proof of my skills and growth.

If you're in QA or transitioning into development, I highly recommend building your own portfolio from scratch. It teaches you far more than any tutorial ever will.

Bonus Tip

Don’t wait until you’re “ready.” Start building, and improve as you go.

That’s where the real learning happens.