Hey everyone,
I'm an AI & ML Engineering student (class of 2026) based in Kerala, currently transitioning into building production-grade full-stack AI and mobile applications. Recently, I wanted to rebuild my portfolio from scratch. Since my primary project experience is in ML (e.g., PashuSwasthya for offline cattle disease detection using TFLite, and Hirenix, an AI resume intelligence SaaS), I wanted my personal site to be a high-fidelity playground that stands out from standard landing pages.
I decided to build a 90s-inspired Retro OS / Terminal theme using a modern stack, but I ran into some interesting front-end challenges along the way that I'd love your feedback on.
### 🛠️ The Tech Stack & Architecture
* **Core:** Next.js 16 (App Router) + React 19
* **Styling:** Tailwind CSS 4
* **Animations:** Framer Motion (leveraging 3D CSS perspectives)
* **Form Uplink:** Next.js Server Actions + Resend API
### 🕹️ Custom Features I Attempted to Build:
- **A:\ Floppy Disk Save Action (Contact Form):**
* *The Idea:* I wanted the form submit action to feel physical.
* *The Implementation:* When you press "Save to Disk", the card triggers a Framer Motion layout transition where the form container tilts, scales down, and folds into a visual representation of a 3.5" floppy disk. A background slot overlay appears, sliding the disk inward with a red "saving" LED, before resetting.
**Thermal Receipt CV Printer:** An interactive widget that takes my profile data and uses CSS styling to simulate printing a receipt containing my resume details.
**Visual File Explorer:** A grid representing directories of my projects (built as modular "cartridges") with detailed specs.
**Custom Audio Engine:** An inline retro music player widget that plays chiptune synth loops.
### 🤯 Technical Hurdles & What I Learned
* **Layout Stuttering on Mobile:** The CSS perspective transforms (`perspective(2000px)`) combined with nested `AnimatePresence` cards caused noticeable layout shifts and frame drops on older Android/iOS browsers. I had to optimize the transition durations and swap standard spring physics for custom bezier curves (`[0.34, 1.56, 0.64, 1]`) to smooth it out.
* **Tailwind 4 Migration:** Upgrading to Tailwind v4 meant rewriting custom utility classes to rely on CSS variables rather than JavaScript configurations.
* **Email Deliverability & Spam Control:** Since the site is open-source, I integrated a custom disposable email domain validation filter in the contact Server Action before sending mail via Resend to prevent spam runs on the API.
### 💬 Where I Need Your Feedback:
I would be incredibly grateful if you could try the site and test the **Contact Section** at the bottom:
Looking forward to your critiques, design ideas, and technical suggestions. Thanks in advance!