How I Built My Portfolio – Part 1

Hi devs,

Welcome to the behind-the-scenes breakdown of chiristo.dev — my personal developer portfolio and blog.

This post is for developers and curious readers who want to understand how to plan, structure, and build a modern portfolio site. I’ll walk you through the decisions I made, the tools I chose, the folder structure I follow, and how I set things up — along with the thought process behind each choice.

This is not a step-by-step tutorial, but rather a developer’s guide — something you can read through, get inspired by, and adapt for your own projects.

If it gets too long, don’t worry — I’ll split it into parts and continue right where we leave off.

Table of Contents

• Prerequisites
• Why I built chiristo.dev
• Tech stack summary
• Why this tech stack
• My Roadmap
• Folder structure
• What’s Next?

Prerequisites

This blog assumes you have a basic understanding of

• React and component-based development
• Next.js (App Router)
• Firebase fundamentals
• SCSS and CSS Modules

If you’re unfamiliar with any of these, don’t worry. The primary motive of this blog is to showcase how I planned my portfolio and how I structured it from scratch. So, language is not a problem to get started with the things. Additionaly, I’ll keep things beginner-friendly and link resources wherever helpful.

Why I Built chiristo.dev

Like most developers, I wanted a place to:

• Showcase my skills and projects
• Write about what I learn
• Experiment with modern web technologies
• Keep everything clean, scalable, and extendible

I didn’t want to just follow a template. Templates are great for speed, but I wanted something fully custom — a site that reflects how I think about software architecture and developer experience.

“Design inspiration? Yeah, I borrowed the vibe from my senior dev — but the Figma file is all mine, I promise!” 😄

Tech Stack Summary

• Framework: Next.js (App Router)
• Styling: SCSS Modules
• Theming: next-themes
• Backend Service: Firebase (Firestore, Hosting, Auth)

Why This Tech Stack

• Next.js (App Router)

  I picked Next.js because I had future plans like blogs and an admin dashboard. It supports server-side rendering, client-side interactions, and SEO — all things I needed. Compared to Vite or CRA, it's just more scalable and production-ready.

• Firebase

  I didn’t want just static hosting. I’ll be using Firestore and maybe Cloud Storage later, so Firebase gives me a proper backend setup. That’s why I skipped Vercel.

My Roadmap

I strictly want to develop this portfolio for various release cycles. So I came up with proper versioning and release cycles. I followed 3 week personal spirint for my 1st and 2nd version and I successfully deployed it. Soon I’ll start to work on the version 3. Here’s the draft version 1, version 2 and version 3 features

✅ Version 1 Goals (completed):

• Build the core homepage layout
• Add sections: About, Skills, Projects, Contact
• Implement dark/light mode
• Make the site fully responsive
• Set up Firebase Hosting and Auto deployment feature

✅ Version 2 (completed):

• Add a blog section with dynamic routing
• Use MDX for blog posts to support React components
• Integrate Cloudstorage and Firestore for blog content management
• Implement SEO best practices for blog posts
• Improve accessibility (ARIA roles, keyboard navigation)
• Run Lighthouse performance audits and improve scores

🚧 Version 3 (soon):

• Add a newsletter signup feature
• Implement blog post categories and tags
• Add pagination for blog posts
• Implement search functionality for blog posts
• Add user authentication for blog comments
• Add Google Analytics for tracking
• Authenticated admin panel to manage blog posts (protected)

Folder Structure Overview

I followed this folder structure

chiristo.dev/
├── public/                 # Static assets
├── src/
│   ├── app/                # App Router structure (routing)
│   ├── assets/             # svg assets
│   ├── components/         # Reusable UI components
│   ├── hooks/              # Custom hooks
│   ├── data/               # Static content
│   ├── sections/           # Page-level layout blocks
│   ├── errors/             # Global error boundaries
│   ├── services/           # Firebase setup and utils
│   ├── styles/             # Global SCSS + variables
│   └── utils/              # Shared helper functions
├── .gitignore/   
├── package.json   
├── package-lock.json 
├── README.md
└── etc.,

Each folder is cleanly separated to follow the Single Responsibility Principle — every directory has its own job.

That said, feel free to tweak the structure based on your own project needs — like I mentioned earlier, this is just a guide, not a strict tutorial.

What’s Next?

In the next blog post (Part 2), I’ll cover:

• 🔄 How I set up next-themes for theming
• 🎨 How I use .module.scss and shared SCSS variables
• 🧩 My approach to building components and sections
• 🔥 Firebase setup details (Firestore, Hosting, Auth)

Thanks for reading!