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
alttags 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.
🙌 Want to Build Yours?
Feel free to view the source or get inspiration:
📎 Portfolio: josephjo.me
I’d love feedback, or if you’ve built something similar, drop it below — I’m always curious to see how others approach their digital “business card.”
Thanks for reading! 🚀