How I Built and Customized My First Portfolio Blog with Vercel

April 9, 2025

👁️ ... views

Creating your first portfolio website might sound overwhelming, but I promise it doesn’t have to be. This is the story of how I — Ritu Raj Singh, a final-year BCA student from Manipal University Jaipur, created and customized my very first blog/portfolio site with the help of open-source templates, GitHub, and Vercel.

🚀 Starting Point: The Portfolio Blog Template

I came across an awesome starter template called Portfolio Blog Starter hosted on Vercel Templates. It came with a clean layout and minimal setup — perfect for a beginner like me.

🛠️ Step 1: Forking and Deploying

  • I clicked "Use Template" to clone the project into my GitHub.
  • Then I connected my GitHub repo to Vercel, which automatically deployed my website.
  • The best part? No backend or manual hosting needed — Vercel took care of everything.

✍️ Step 2: Setting Up Locally

  • I cloned the repo into VS Code.
  • Installed dependencies using: 
    pnpm install
  • Ran the dev server locally: 
    pnpm dev

And boom! I could now see my site running locally at localhost:3000.

🎨 Step 3: Customizing the Portfolio Section

My first task was to edit the portfolio text on the homepage. I found the relevant file in:

app/page.tsx

I replaced the placeholder bio with:

<p className="mb-4">
  {`I'm Ritu Raj Singh, a final-year BCA student at Manipal University Jaipur, deeply immersed in
  the data analytics domain. I thrive on uncovering actionable insights from data using Python, 
  SQL, and BI tools, while also leveraging AI-driven solutions to enhance productivity.`}
</p>

This section now tells the world what I’m passionate about — data analytics, Python, and learning AI!

📎 Step 4: Attaching My Resume

I wanted to add a link to my resume hosted on Google Drive. Here's the minimal code I used:

<a
  href="https://drive.google.com/file/d/10Qj6a-7ORpS81mXQMj7_F8dQfqj2Xl-K/view?usp=drive_link"
  target="_blank"
  rel="noopener noreferrer"
  className="inline-block mt-2 text-sm font-medium text-neutral-300 hover:text-white transition-colors"
>
  📄 View My Resume
</a>

🖤 Styling Tip

I removed the default blue button and used simple gray text that becomes white on hover — perfect for a clean dark-themed UI.

📝 What I Learned

  • How to deploy a site in minutes with Vercel
  • Making my first code edits in React/Next.js using TypeScript
  • Updating content dynamically and customizing my own bio
  • Adding a Google Drive resume link with clean styling

🌱 My Takeaway

As someone just starting out in the tech world, building this site gave me a huge confidence boost. It showed me that even as a beginner, I can take control of my personal brand and showcase my learning journey.

This is just the beginning!

Thanks for reading 💙

Feel free to connect with me LinkedIn