The First Steps: Setting Up My Developer Portfolio

Every developer needs a portfolio. It's our digital handshake. But getting from a folder of code on your computer to a live website on a professional domain can feel overwhelming. I was in that exact spot just a few days ago.

Here's my complete process, from development all the way to deployment. Let's get it done. 🚀

Step 1: Build a Portfolio (duh!)

Obviously, the first step to having a portfolio website is... building it. For me, this started with the design. I wanted a clean, intuitive look with a bit of creative elements that would put my projects front and center without too many distractions.

This is where many people (including me) can get stuck in a loop. I drafted so many different layouts and versions that I’m pretty sure even Figma was like- “Just build something already!”

Once I finally settled on a design, it was time for the development stage. I decided to build the site with React and Tailwind CSS. The main reason was simple: they were the technologies I was actively learning, and I believe the best way to solidify a new skill is to build something meaningful with it.

It turned out to be the perfect choice. Using React let me break down my portfolio into reusable components (like the header, project cards, and footer), which made the code much easier to manage. And Tailwind CSS was a lifesaver for someone like me who loves to constantly tweak the design. The utility-first approach meant I could make tiny visual changes quickly without ever leaving my HTML.

I mean look at this div element, what atrocities it must have endured…

Step 2: Hosting the Portfolio on Vercel

Wouldn’t life be easier if we could just build awesome projects on our PC and have the world experience them right away? Well, back to reality.

My portfolio was developed, and now it was time to deploy it. There are many free and easy-to-use platforms out there, but I went with Vercel because it’s one of the most popular and dependable ones.

For hosting, you can either use the Vercel CLI or connect it directly to a GitHub repository. I recommend the latter; it’s incredibly simple to set up. All I had to do was create a GitHub repo for my portfolio, log in to Vercel, and import it. Vercel handles the rest, including automatic updates.

Now, Vercel fetches the code directly from GitHub. I just have to worry about making changes when a new idea for a design tweak hits me at 1 AM, and then git push. It feels like magic.

Step 3: Something Feels Missing- A Personal Domain

At this point, my portfolio was deployed for the world to see. I took a deep breath of contentment... and then I looked at the URL. Seeing my portfolio live at a domain ending in .vercel.app, I realized the goal was still unachieved.

The first thought hit me: “I have to get a personal domain.” This was instantly followed by a second thought: “But that costs money!”

Luckily, as a student, I could get a free domain name for one year through the GitHub Student Developer Pack (GSDP). I explored the offers from registrars like Name.com and Namecheap, signed up via the GSDP, and bought my very first domain. Oh, I couldn’t have been happier.

Step 4: Connecting the Dots

I was so excited to have my new domain, subratdwivedi.dev, but it was just a name. It wasn't connected to the portfolio I had hosted on Vercel yet. I braced myself, thinking this part would be complicated, but it turned out to be surprisingly straightforward.

First, I went over to my Vercel project Dashboard > Settings > Domains, and typed in my new domain name. Vercel then gave me the exact "directions" I needed—an A Record (an IP address) and a CNAME Record (for the www version).

Grabbing these values, I logged back into my Name.com account and went to the Manage DNS Records page. Then all I had to do was create new records at Name.com and paste in the values from Vercel.

After saving the changes, there's a short waiting period called "DNS propagation" (basically, waiting for the internet's address book to update). I nervously refreshed the page for a few minutes, and then I decided to just try it.

I opened a new tab, typed in subratdwivedi.dev, hit Enter... and there it was. My own portfolio, live on my own domain. That feeling was incredible.

Conclusion

And there you have it! From a simple folder of code on my computer to a polished portfolio live on a professional .dev domain.

My biggest takeaway from this process is that building your online home isn't as daunting as it seems. With amazing free tools like Vercel and the GitHub Student Developer Pack, the barrier to entry is lower than ever. All it takes is a little curiosity and the willingness to connect the dots.

Of course, a portfolio is just one half of the story. In my next post, I'll cover Part 2: how I set up this very blog using Hashnode and connected it to a subdomain. Stay tuned!

I hope my experience can act as a guide and encouragement for you. If you have any questions, drop them in the comments below!