⚜️ The Alchemist

"I don't just type code; I orchestrate it."

Welcome to the digital realm of The Alchemist — a next-generation developer portfolio and Resume platform built for the Vibe Coder era.

🔮 Overview

This is not a template. It is a statement. Built with React, Three.js, and Taiwind CSS, this project transforms a simple resume into an interactive storytelling experience.

✨ Features

• 🦾 The Vibe Coder Persona: Radical honesty. Orchestration over syntax. Impact over output.
• 📜 Digital Alchemy Resume: A fully editable, printable resume generator that adapts to your vibe.
  • 👁️ Live Preview: See changes in real-time.
  • 🥡 PDF Export: Generate high-quality A4 PDFs automatically.
  • ⚡ Dynamic Sections: Skills, Hobbies (like Prompt Engineering!), and Experience.
• 🪐 3D Hero Scene: A floating, interactive 3D ring (Ionic Ring) that captivates visitors instantly.
• 🕶️ Minimalist Aesthetic: Gold accents on absolute black. Pure elegance.

🧩 Under the Hood

We use cutting-edge tech to deliver this experience:

🖥️ Cinematic Project Previews (iFrame Power)

Instead of static screenshots, the Projects section uses dynamic <iframe> integration to render live websites as cinematic backgrounds.

• When you hover over a project, the site loads in the background with a darkened filters (grayscale + contrast).
• This gives visitors a real "feel" of the project without leaving the portfolio.

🌌 The Ionic Ring (Three.js)

The floating ring isn't a video. It's a real-time 3D Scene rendered with React Three Fiber.

• It reacts to your mouse movement.
• It provides deep spatial immersion using physically based rendering (PBR).

📄 PDF Generation Engine

We bypass standard browser printing. Using html2pdf.js, we take the DOM element of your resume and rasterize/vectorize it into a perfect A4 PDF, ensuring that what you see is exactly what recruiters get.

🛠️ The Stack

• ⚛️ Framework: React + Vite
• 🎨 Styling: Vanilla CSS (CSS Modules approach) + Tailwind concepts
• 🧊 3D Engine: React Three Fiber / Drei
• 🎬 Animations: Framer Motion
• 📑 PDF Engine: html2pdf.js

⚡ Quick Start

1. 📦 Install the magic:

   pnpm install

2. 🚀 Ignite the server:

   pnpm dev

3. 🌀 Transmute: Open http://localhost:5173 and witness the alchemy.

📝 Usage

1. ✏️ Edit Resume: Go to /the-alchemist (or click "My Resume" on home).
2. 🎛️ Customize: Click the "Open Editor" button at the bottom.
3. 📥 Export: Click "Download PDF" to materialize your resume into a file.

---

Crafted with 🖤 and ✨ by Fazalurrehman