How I Built My Personal Developer Portfolio from Scratch (with HTML, CSS & Love)

As developers, we often focus on building things for others—but building something for yourself is just as important. In this post, I’ll walk you through how I built my personal portfolio site from scratch, the choices I made, and what I learned along the way.

📍 Live Site: josephjo.me

🚀 Why I Built It

I wanted a central place to showcase my skills, projects, and provide an easy way for people (recruiters, collaborators, curious devs) to learn about me. I also wanted something lightweight, fast, and search-engine friendly.

🛠️ Tech Stack

HTML & CSS – No frameworks, just good old-fashioned markup and styles.
Responsive Design – Built mobile-first.
Custom Animations – Subtle transitions for a modern feel.
Self-hosted via GitHub Pages / Cloudflare Tunnel (for now).

💡 Design Philosophy

Keep it clean and minimal
Highlight my skills and personality
Use accessible colors and fonts
Optimize load speed and SEO

⚙️ SEO & Performance Tips

Here are a few tricks I used to improve my visibility:

✅ Custom meta tags for title, description, and social share previews
✅ Used alt tags and semantic HTML
✅ Sitemap.xml and robots.txt included
✅ No unnecessary JavaScript — lightning-fast loads

I’m still working on getting backlinks (which help with Google ranking), but just launching it taught me a lot about how SEO actually works.

🔗 Lessons Learned

Even a one-page site can be powerful if it’s focused.
Good SEO isn’t just about keywords—structure, speed, and clarity matter too.
Sharing your site in the right places (like GitHub README, forums, Dev.to!) builds credibility and organic visibility.