How I Rebuilt My Portfolio and Solved Deployment Woes With AI

How I Rebuilt My Portfolio and Solved Deployment Woes With AI

Utilized a weekend to understand how powerful AI is at this point.

Last weekend, I finally decided to revamp my portfolio, which had been sitting as a static site on GitHub Pages for a long time. Honestly, it took me four years to gather the motivation to rebuild it—mostly because I'd rather spend my time reading how Uber or Netflix scaled their systems. But the truth was, I couldn't ignore it any longer, especially after recruiters saw it and... well, let’s say it didn’t make the best impression.

I'm writing this blog to share how I revamped my entire portfolio website using, React, Tailwind CSS, and Framer Motion with the significant help of ChatGPT and Deepseek.

Tech Stack and Initial Setup

I wanted my portfolio to be modern yet simple, elegant, and responsive. React was an obvious choice for the front end, allowing me to create dynamic components effortlessly. Having previously worked with Bootstrap for styling, I wanted to try something new, and Tailwind had been on my radar for a while. I must say, Tailwind is a game-changer—it significantly speeds up styling without cluttering the HTML with endless class names.

To enhance the visual experience, I also integrated Framer Motion for subtle animations, making the transitions and interactions feel smoother and more engaging.

Building the Contact Form and Security Concerns

A portfolio website isn’t complete without a way for visitors to reach out. To implement this, I initially integrated EmailJS, which enabled client-side email sending. Everything worked smoothly until I realized that client-side secrets are never fully secure.

Hacker trying to steal API keys

This led me to move my email-sending service to a Node.js + Express microservice, ensuring better security and control over sensitive information.

Deployment Challenges

Once the front-end and back-end were ready, it was time for deployment. Many platforms offer generous free-tier deployments for both client-side and server-side applications. I initially deployed my React front end on Vercel and my Node.js backend on Render.

The deployments were successful, but I soon encountered an unexpected issue—Render had a huge cold start time. And by huge, I mean over 35-40 seconds! (Yeah, that’s huge.) My front end had a 5-second timeout to gracefully allow users to retry sending emails if a request timed out. However, once my friends and connections started testing my portfolio, I received multiple reports about the email feature not working. That’s when I discovered Render’s cold start problem. Users faced failures even after considerable retries (more than 7, if you do the math), which resulted in a terrible user experience.

 A tired user struggling with endless retries

To fix this, I needed a better hosting solution for my email service.

Exploring Better Deployment Options

While searching for alternatives, I came across several interesting platforms I had not heard of before. Here are some of the best ones I found:

1. Cloudflare Workers 🌩️

  • Why? Serverless, globally distributed, and near-zero cold start time.

  • Best For: Lightweight APIs that need fast execution and high availability.

  • Pricing: Free tier with 100K requests per day. (This was the best)

2. Fly.io ✈️

  • Why? Deploys full-fledged apps as firecracker micro-VMs, reducing cold starts.

  • Best For: Backend services needing a persistent and low-latency environment.

  • Pricing: The free tier includes 3 shared CPU VMs with 256MB RAM.

3. Railway 🚄

  • Why? Simple Docker-based deployment with better cold start times than Render.

  • Best For: Hobby projects and quick API hosting.

  • Pricing: Free tier with $5 credit.

4. Supabase Edge Functions 🔥

  • Why? It uses Deno (faster cold starts than Node.js) and integrates well with databases.

  • Best For: If you plan to extend your email API with database interactions later.

  • Pricing: The free tier offers 500K function invocations per month.

5. Vercel Serverless Functions

  • Why? You already use Vercel for the front end, so it's easy to integrate.

  • Best For: Quick, serverless Node.js functions that trigger emails.

  • Pricing: The free tier includes 100GB bandwidth and 100K executions per month.

Best Pick for You?

If you want ultra-fast response timesCloudflare Workers Obvious choice in my case If you want full control over your backendFly.io or Railway
If you need a simple integration with your front endVercel Serverless Functions

Migrating to Cloudflare Workers

After researching, I chose Cloudflare Workers for my email service due to its near-zero cold start and ease of deployment. It eliminated the email failure issue and significantly improved the user experience of my portfolio!

However, since Cloudflare Workers do not natively support Node.js, I had to refactor my backend from a Node.js + Express setup to a simple fetch request-based service. This required some restructuring, but in the end, it was worth it for the performance boost and seamless execution.

Final Thoughts

This was a truly fruitful learning experience. I learnt more about React, Tailwind, various deployment platforms, and EmailJS, and firsthand witnessed the prowess of two powerful AIs — ChatGPT and Deepseek.

Here are links to the repo, as I’ve made my portfolio codebase public in case anyone wants to use it:

🔗 Front-end: GitHub Repo
🔗 Email Worker: GitHub Repo
🔗 Live Portfolio: Live link to my portfolio website

Let me know if you’ve faced similar issues while deploying your projects! 🚀
Also, if you're working on something similar or want to know how I set up my Cloudflare Worker, feel free to reach out!
Thanks for reading this far—I truly appreciate it! 🙌