From HTML to 3D: Why I Rebuild My Portfolio with React, Vite, Tailwind & FrontQL

#webdev #react #typescript #portfolio

“A portfolio isn’t just a website. It’s your story, your brand, your invitation to connect.” – Every web developer ever (including me)

Introduction: Why I Rebuilt My Portfolio from Scratch

Back in early 2022, my developer journey started with a humble, single-page website: a few lines of HTML, home-baked CSS, and a hint of JavaScript. I hosted it on GitHub Pages at RD's Portfolio. It did the job: showcasing projects, sharing my bio, and providing a contact method. But as my skills (and ambitions) grew, the limitations of this static site became glaringly obvious.

Fast forward to 2025. I rebuilt my personal site from the ground up as a 3D, interactive experience Aetheria. This wasn’t just a “glow up” for my developer identity. It’s a testament to how modern web technologies like React, Vite, TypeScript, Tailwind CSS v4.0, Three.js (via React Three Fiber), FrontQL, and even vanilla CSS can unlock new creative and functional possibilities.

In this post, you’ll trace my journey step by step, see how and why my development stack evolved, and get a walkthrough of my new portfolio with code and design insights.

Ready to go from “static site” to “interactive 3D web presence”? Let’s jump in.

TL;DR

Old Portfolio: Simple HTML/CSS/JS; hosted free on GitHub Pages. Easy to launch, but limited in interactivity and maintainability.

New Portfolio: Built as a serverless React app (Vite, TypeScript, Tailwind CSS v4.0 + vanilla CSS, 3D via Three.js/React Three Fiber) with dynamic content (FrontQL API for backendless queries). Deployed on Vercel for instant updates and global speed.

Key Takeaway: Embracing modern web tools let me tell my story with richer visuals, better UX, and easier site management.

Why Level Up? My Motivation to Move Beyond Static HTML Portfolio Sites

My original GitHub Pages site taught me the fundamentals:

Hosting a free site: No servers or credit cards. Just push to github pages branch and my site was live.
Using core web skills: HTML for structure, CSS for style, and a few lines of JavaScript for interactions.

But after a year in the web industry, I wanted more...

Efficiency: Repeating HTML for every new project or experience became a chore. Changing a color or font meant hunting through raw CSS.
Type safety & maintainability: I caught myself making silly JS errors—only seeing them in the browser. Refactoring was scary.
Performance: Despite being simple, my site wasn’t optimized, with neither lazy loading nor code splitting.
Modern Interactivity: No dark mode, animations, or dynamic data—unless I hacked it in.

I also noticed that the most impressive portfolios (from several “Best Portfolio” lists) were moving towards interactive, component-driven UIs. Some even included live 3D scenes that made you pause and explore.

The lesson? If you want your portfolio to stand out and “tell your story” not just in words but with explorable design, then there’s a better (and more fun) tech stack.

Where I Started: Anatomy of a GitHub Pages Portfolio

Let’s look at what went right (and wrong) with my v1 portfolio.

The Good

Zero cost: No servers, no surprises.
Markdown-friendly: For beginners, you can even design a simple portfolio in Markdown, as GitHub will serve up your README as a home page.
Accessible: Deploy via Git (push to a branch), visit your .github.io URL, done!

The Limitations

Manual HTML editing: Every update meant diving back into raw code. No components, no templates.
Basic forms: You could add a , but processing submissions required third-party tools (like Formspree) or APIs and more often, nothing happened at all.
No smart data: If my tech stack changed, I had to find-and-replace throughout the site.
No build process: All CSS and JS was loaded, no code splitting or tree shaking.
Limited interaction: Hover effects and toggles? Sure, but no animations, modals, or live 3D magic.

A Look at the Source: Static Portfolio Example

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio | Ritanjit</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Ritanjit</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#experience">Experience</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <section id="about">...</section>
  <section id="projects">...</section>
  <section id="experience">...</section>
  <section id="contact">...</section>
  <footer>© 2023 Ritanjit. Hosted on GitHub Pages.</footer>
  <script src="main.js"></script>
</body>
</html>

Notice: Everything is in one file; “components” are hand-built sections, and updating navigation or content in one place means updating in several files by hand.

Why this stack: Breakdown of the tools I used.

Fast, Fluid & Maintainable - My new stack isn’t just more powerful - it saves time, prevents bugs, supercharges site performance, and makes dynamic features trivial.

Vite: Lightning-Fast Builds & “Just Works” Developer Experience

Why I chose it? Vite is so instant, I’ve forgotten what it’s like to wait on a build.
How its so fast? Vite provides instant local dev server launches, hot module replacement (HMR), and production builds that are significantly smaller/faster than Create React App or Webpack. Fun Fact: In my benchmark, Vite was 58% faster at startup than CRA for a TypeScript + React app.

React + TypeScript: Components, Type Safety, and Happiness

Why TypeScript? Because the future you will thank you for catching typos and bad data before they ship.
With Re-usable components, it means updates or new pages are painless.
Hot reload is delightful, just update a component and see it propagate instantly.

Tailwind CSS v4.0: The Next Evolution of Styling

Why you ask? Because you write less CSS and get more out of every class.
With 3D transforms and container queries, you can animate in 3D, adapt layouts to any container size, and use utilities like rotate-x-*, scale-z-*, @container without using any plugins required.
The cherry on top: Use built-in imports and true CSS variables to share design tokens sitewide.

/* globals.css */
@import "tailwindcss";
@theme {
  --brand-blue: oklch(0.8 0.12 250);
  --header-font: 'Inter', sans-serif;
}
/* 3D rotation: */
.card { @apply rotate-x-12 scale-z-110 transition-all; }

FrontQL: The Serverless Backend Solution

What is it? A revolutionary tech to build Full Stack apps using only frontend tools, with direct SQL access, scalable workflows, and zero backend.
Why? I can insert new contact messages, fetch project data, or even live stats by using SQL directly in the frontend, without requiring my own backend.
Is it Secure? With role-based access and declarative rules, it ensures proper permission management and abstraction of backend operations like scaling and authentication.

async function getUsers() {
  const response = await Api.sql("/users", {
    body: {
      sql: "SELECT * FROM users WHERE id=?",
      params: ["{id}"],
    },
    session:
      "eyJIkpXVCJ9.eyJpZN30.8q8fdsKs9...",
  });

  return response;
}

Three.js and React Three Fiber: Bringing Your Story to Life

“Nothing says ‘future-proof’ like a 3D hero section that is responsive to both desktop and mobile screens.”

Three.js renders real-time 3D graphics, but what truly unlocked productivity was React Three Fiber (R3F), a renderer that makes 3D just another React component.

Usage: Hero section, project previews, 3D globe, or interactive timeline animations.

Performance: Lazy loaded and tuned for devices. R3F makes it easy to display a static fallback if WebGL isn’t supported (progressive enhancement).

Code Structure Example:

// Inside Hero3D.tsx
<Canvas>
  <ambientLight />
  <MyAnimatedModel />
  <OrbitControls />
</Canvas>

Final Takeaways & Advice

If your site feels hard to update, or can’t express your new ideas, that’s a signal to modernize.
Don’t be intimidated by the latest tools. Vite, React, Tailwind v4.0, and FrontQL are actually simpler (and safer) than the jQuery/DOM setup I started with.
Lean on utility-first CSS and component-driven UI to maximize creativity and speed.
Start small, iterate fast and document your milestones with others, not in code, but in design and the storytelling. The feedback will both inspire and shape your next version.

Thanks for reading! I hope my journey inspires your next leap, whether it’s a single Tailwind utility, a React hook, or your first spinning cube on the web.

Happy building and even happier storytelling :)