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.
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 massive cold start time. And by massive, 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 multiple retries (more than 7, if you do the math), which resulted in a terrible user experience.
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: 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? 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: 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: Free tier includes 100GB bandwidth and 100K executions per month.
Best Pick for You?
If you want ultra-fast response times → Cloudflare Workers Obvious choice in my case
If you want full control over your backend → Fly.io or Railway
If you need a simple integration with your front end → Vercel 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 completely 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 for me, and I got to explore a lot more about React, Tailwind, various deployment platforms, EmailJS, and of course, the two very 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 would like to know how I set up my Cloudflare Worker, feel free to reach out!
Thanks for reading this far—I truly appreciate it! 🙌