✍️ Introduction

Building my personal portfolio website wasn’t just a project — it was a reflection of my journey as an end-to-end developer. From sketching the layout to deploying it live, every step taught me something new. In this blog, I’ll share the complete behind-the-scenes of how I built my site — the tools I used, the decisions I made, and the lessons I learned along the way.

🎯 1. Planning the Foundation

Before touching a single line of code or opening any design tool, I asked myself three questions:

• What do I want to showcase?

• Who is my audience?

• What action should a visitor take?

Once I had clarity, I listed out the core sections:

• Home

• About Me

• Services

• Projects

• Blog

• Contact

Simple, clean, and purposeful.

🎨 2. Designing the UI

I used Figma for wireframing and UI design. My goal was a minimal yet bold look — something that reflects my personality and professionalism.

Key design decisions:

• Used a dark theme for a premium feel

• Maintained consistent padding, spacing, and font sizes

• Designed mobile-first to ensure responsiveness from the start

One mistake I made early on: I tried too many fonts. It messed up the brand vibe. So I stuck to just one primary font and used weights (bold, medium, regular) to differentiate.

🛠️ 3. Development – Turning Design into Reality

Once the UI was ready, I moved into development. I chose WordPress with Elementor Pro — mainly because it allowed me to bring the exact visual experience I had imagined, while still keeping things flexible and lightweight.

Here’s how I approached it:

• Set up a clean, fast-loading base with the Astra theme

• Rebuilt each section visually using Elementor

• Used global colors and typography to maintain brand consistency

• Tweaked layout and spacing using custom CSS where needed

• Focused heavily on responsiveness — mobile-first design was a priority throughout

This process wasn’t about dragging and dropping — it was about carefully crafting every section to match the experience I had in mind.

🔍 4. On-Page SEO & Performance Optimization

A beautiful site is useless if no one sees it. So, I focused on SEO and speed.

SEO steps I took:

• Added proper H1–H2 hierarchy

• Wrote unique meta titles + descriptions for each page

• Used SEO-friendly URLs (like /projects instead of /page-id=5)

• Added alt tags to all images using Hinglish + Hindi keywords (since my audience is India-based)

Performance steps:

• Installed caching plugin (LiteSpeed Cache)

• Minified CSS & JS

• Used lazy loading for images

• Final site loads in under 2.5 seconds 🚀

🌐 5. Domain, Hosting & Going Live

I bought my domain from Hostinger and used their hosting (which I highly recommend for beginners). After connecting the domain and uploading files, the moment my site went live was honestly unreal.

I also added:

• Google Analytics

• Google Search Console

• Custom 404 page & Thank You page

🧠 6. What I Learned (and You Should Know)

• Don’t overdesign — keep things clean and user-first

• Mobile view is not optional — test it always

• Page speed really matters

• Visitors should know in 3 seconds: who you are, what you do, and how to contact you

🙌 7. Conclusion

Building my portfolio website wasn’t just ticking tasks off a checklist — it was a hands-on journey that refined my skills as an end-to-end developer. From design thinking to performance optimization, every stage helped me grow.

Whether you’re a freelancer, job-seeker, or someone exploring web development, having your own site is still the best way to stand out. The structure may evolve, but the effort you put into your digital presence speaks louder than any resume.

If this post helped you or gave you any ideas, feel free to connect or drop me a message. Every line of this site reflects my personal learning and creative process — and that’s what makes it truly mine.