How I Built an AI-Powered ATS Resume Analyzer with Next.js & BYOK

Edited master_prompt_light.md

I have revised the master prompt to match your new preferences: transitioning the portfolio to a high-end, modern **"Aurora Glass" Light Theme** (completely replacing the Spider-Man theme) and integrating a premium **Blog Section**.

I have created the updated master prompt artifact:
👉 **[master_prompt_light.md](file:///C:/Users/dhava/.gemini/antigravity-ide/brain/ee735269-599a-427f-91de-46fbc359fecb/master_prompt_light.md)**

---

### 🎨 Key Theme & Feature Shifts:

1. **Light "Aurora Glass" Design System**: 
   * Replaces the dark Spidey aesthetic with a clean, luxury porcelain white background (`#f8fafc`).
   * Uses glowing warm ambient blur blobs (soft indigo, peach, violet) floating in the background.
   * Leverages translucent milk-glass cards (`rgba(255, 255, 255, 0.7)`) with metallic outlines, deep shadows, and high blurs.
   * Visual accents shift to vibrant Royal Indigo (`#6366f1`), Aurora Purple (`#8b5cf6`), and Sunlit Amber (`#f59e0b`).
   
2. **Updated Interactive JS Elements**:
   * Custom cursor shifts to a soft Royal Indigo dot with a violet magnetic tracking ring.
   * Floating canvas backgrounds change from red spiderwebs to elegant geometric node nets and floating warm spark particles.
   * All legacy Spider-Man graphics and vectors are replaced with modern abstract folding-cube geometry and tech lines.

3. **Newly Integrated Premium Blog Section ("Digital Brain")**:
   * A 3-column responsive card layout presenting latest insights (e.g., *LLM Integration*, *SEO Fundamentals for AI Engineers*, *Edge Computer Vision*).
   * Fully supported with reading times, category tags, calendar metadata, and modern hover zoom layouts.
   * Includes a dynamic JavaScript fullscreen reader overlay modal (`#blogModal`) that renders articles dynamically in reading formats when clicked.

---

### 📋 Reconstructed Master Generation Prompt (Light Theme + Blog)

```markdown
Act as an elite frontend designer and developer. Create a single-page interactive portfolio and blog website for "Dhaval Prajapati - AI Based Web Developer & Digital Marketing Learner". 

The website must be styled in a premium, ultra-modern "Aurora Glass" light theme. It must feel extremely elegant, responsive, and organic—replacing all legacy Spider-Man elements with clean geometry, floating glassmorphism, and ambient gradient glows.

Follow the exact visual style, layout structure, contents, and dynamic JavaScript features detailed below:

### 1. Visual Style & Theme (Neo-Minimalist Light System)
*   **Palette**: A clean, bright, and harmonious light theme with soft ambient gradients:
    *   `--bg` (Background): Ultra-clean slate off-white (`#f8fafc` or `#f3f4f6`)
    *   `--bg-secondary`: Crisp porcelain white (`#ffffff`)
    *   `--bg-card`: Translucent milk-glass (`rgba(255, 255, 255, 0.7)`)
    *   `--bg-card-hover`: Solid high-contrast white (`rgba(255, 255, 255, 0.95)`)
    *   `--accent-primary` (Active Violet): Modern Royal Indigo (`#6366f1` / `#4f46e5`)
    *   `--accent-secondary` (Aurora Purple): Soft Violet Orchid (`#8b5cf6`)
    *   `--accent-glow`: Soft indigo glow (`rgba(99, 102, 241, 0.15)`)
    *   `--accent-gold` (Warn highlights): Sunlit Amber (`#f59e0b`)
    *   `--text-primary`: Deep charcoal slate (`#0f172a` / `#1e293b`)
    *   `--text-secondary`: Muted stone-blue (`#475569`)
    *   `--text-muted`: Soft silver-slate (`#94a3b8`)
    *   `--glass-border`: Thin metallic outline (`rgba(99, 102, 241, 0.08)`)
    *   `--glass-border-hover`: Highly-defined indigo outline (`rgba(99, 102, 241, 0.25)`)
*   **Typography**:
    *   **Display Font**: 'Outfit' or 'Cabinet Grotesk', sans-serif (used for hero titles, stats, large headers - modern, geometric, capitalized).
    *   **Heading Font**: 'Plus Jakarta Sans', sans-serif (used for sub-headings, cards, and buttons - clean, sophisticated).
    *   **Body Font**: 'Inter', sans-serif (highly readable, clean).
    *   **Mono Font**: 'JetBrains Mono', monospace (used for technical metrics and tags).
*   **Key Styling & Utilities**:
    *   Use smooth, premium cubic-bezier transitions: `0.4, 0, 0.2, 1` (Fast: 0.2s, Smooth: 0.4s, Slow: 0.7s).
    *   Apply `backdrop-filter: blur(24px)` to all glass cards for high visual depth.
    *   Incorporate `@media (prefers-reduced-motion: reduce)` rules for absolute accessibility.

---

### 2. HTML Layout & Structured Sections
Build the single-page layout with the following hierarchy:

#### A. Preloader Screen
*   A fullscreen white preloader container (`#loader`) that blocks page scrolling during load.
*   Contains a rotating abstract geometric morphing ring SVG showing a glowing purple dot orbiting concentric circle contours.
*   A large display percentage counter (`0%` to `100%`) in Outfit.
*   A cycling subtitle showing motivational developer slogans: "Forming pixels...", "Deploying intelligence...", "Setting up the workspace...".

#### B. Header Navigation Bar
*   A fixed header that starts transparent and turns glassmorphic (`rgba(255,255,255,0.85)` with `backdrop-filter` blur and a thin bottom slate border) when scrolled >60px.
*   **Logo**: Displays a sleek geometric folding-cube SVG inside an active purple shadow, with the bold letters "DP" styled in an indigo-to-violet gradient.
*   **Navigation Links**: Clean text links with animated bottom borders (growing outward from the center on hover): Home, About, Skills, Projects, Blog, Contact.
*   **CTA**: A bright indigo-to-purple gradient "Hire Me" button.
*   **Mobile Hamburger Menu**: An animated menu toggle button that morphs into an "X" shape when clicked. Triggers a fullscreen sliding dropdown overlay with a radial indigo glowing background.

#### C. Hero Section
*   A full-screen responsive hero section.
*   **Ambient Backdrops**: Soft, floating background blobs (indigo, peach, and violet) with 80px CSS blur moving slowly behind the content.
*   **Badge**: A rounded glowing capsule displaying a green pulsing indicator dot and "Available for Opportunities" in deep green on a soft green background.
*   **Name & Title**:
    *   Line 1: "Dhaval Prajapati" (Outfit, massive font, slide-up entry).
    *   Line 2: "AI Web Developer" (Styled in full royal indigo with a soft glow shadow).
*   **Typewriter Subtitle**: "I'm a [Role]" where the role types dynamically, deletes, and cycles between:
    1. `Digital Marketing Learner`
    2. `AI Based Web Developer`
    3. `MCA Graduate`
    4. `Problem Solver`
    5. `Digital Marketer`
*   **CTA Buttons**:
    *   "Explore Projects" (Royal indigo button with sliding right arrow icon).
    *   "Read My Blog" (Secondary border button with book/read icon).
    *   "Contact Me" (Outline button).
*   **Hero Stats Grid**: A floating glass capsule showing 3 statistics columns separated by vertical bars:
    *   `8+` Projects
    *   `15+` Technologies
    *   `2` Degrees
*   **Scroll Indicator**: A bouncing downward arrow at the bottom with the text "Scroll Down" in a monospaced font.

#### D. About Section ("Origin Story")
*   **Profile Hero Card**: A large glassmorphic banner containing:
    *   A circular avatar wrapper showing a portrait photo. The avatar features a glowing pulsing boundary ring and a thin rotating orbit ring embedded with active violet dots.
    *   Profile badge: "Available for Opportunities" in solid green.
    *   Biodata: Name ("Dhaval Prajapati"), Subtitle ("AI Based Web Developer"), Location ("Gujarat, India" with location pin icon), and a detailed bio text about building thinking AI-first web applications.
    *   Profile Tags: "AI Web Dev", "Computer Vision", "LLM & AI APIs" featuring tiny purple font-awesome icons.
*   **Origin Grid**: Three equal column cards:
    *   *Who I Am*: Exploring the self-taught developer profile who went all-in on AI.
    *   *What I Do*: Building full-stack web apps layered with machine learning, LLM APIs, and computer vision.
    *   *The Goal*: Striving to land a role combining web development with AI full-time to ship "wow" factor features.
*   **Counter Stats**: Displays animated metric counters counting up from 0 to:
    *   `8` AI-Powered Projects
    *   `15` Technologies
    *   `2` Degrees
    *   `3` ML Models Built
*   **Bottom Grid**: Two columns:
    *   *Education Timeline*: Showing degree timelines with glowing purple dots, vertical timelines, and individual cards:
        1. **Master of Computer Applications (MCA)** - LJ University, Ahmedabad (2024 - 2026) - "Completed" badge.
        2. **Bachelor of Computer Applications (BCA)** - Bholabhai Patel College, KSV University (2021 - 2024) - "Completed" badge.
    *   *Powering Up (Progress Bars)*: Displays progress meters for digital marketing skills:
        *   SEO (20%)
        *   Digital Marketing Fundamentals (25%)
        *   Social Media Marketing (20%)
        *   Content & Email Marketing (15%)

#### E. Skills Section ("The Arsenal")
A grid displaying categories of skill badges. Hovering near a badge triggers an active violet glow shadow:
1.  **Frontend**: HTML5, CSS3, JavaScript, Bootstrap, Responsive Design
2.  **Backend**: PHP, Python, Flask, MySQL, SQLite
3.  **AI / ML**: scikit-learn, OpenCV, NumPy, Groq API, LLaMA 3
4.  **Tools**: Git, GitHub, VS Code, Linux, Canva
5.  **Marketing**: SEO, Google Analytics (Basic), Meta Ads, Content Strategy

#### F. Projects Section ("The Showcase")
Showcases 8 distinct projects styled as glowing 3D perspective tilting cards. Each card displays an icon, code number, project title, descriptive text, tech badge pills, and a footer arrow link:
1.  **StudentConnect+** (01): AI-powered collaborative study room, Kanban, chat platform. (HTML, CSS, JS, PHP, MySQL)
2.  **AI Workout & Diet Planner** (02): ML-based 7-day Indian meal plan LLaMA 3.3 generator via Groq API. (Python, Flask, scikit-learn, Groq)
3.  **Face Recognition Attendance** (03): Webcam few-shot learning attendance auto-logger. (Python, Flask, OpenCV, SQLite)
4.  **Movie Ticket Booking** (04): Full-stack ticketing app, seat selector, PDF generator, and admin panel. (PHP, MySQL, HTML, CSS)
5.  **Car Speed Detector** (05): Arduino + dual IR sensors speed tracking with I2C LCD screen. (Arduino, IR Sensors, I2C LCD)
6.  **Guess the Word** (06 - Featured Live Demo): Wordle-inspired word game with a 6x5 grid and custom keyboard. (HTML, CSS, JavaScript)
7.  **AI Nutrition Planner** (07): Meal planner calculating BMI, BMR, TDEE. (JavaScript, AI API, HTML/CSS)
8.  **NexLoad** (08): Video downloader supporting YouTube and Instagram video fetches. (HTML, CSS, JS, Backend)

#### G. Premium Blog Section ("Digital Brain")
A dedicated grid displaying Dhaval's latest articles and tech insights.
*   **Grid Layout**: A responsive 3-column layout featuring modern glassmorphic cards with smooth scaling zoom hover effects on featured thumbnails.
*   **Article 1: AI Integration in Modern Web Apps**
    *   *Thumbnail*: Clean minimalist abstract SVG code vector in indigo/violet.
    *   *Category Tag*: `AI & Tech`
    *   *Metadata*: `May 24, 2026` • `5 min read`
    *   *Title*: "How to Layer Large Language Models (LLMs) into Production Web Apps"
    *   *Summary*: "A developer's guide to utilizing Groq API and LLaMA 3 to generate fast, highly customized user data securely in real-time."
*   **Article 2: SEO Fundamentals for AI Engineers**
    *   *Thumbnail*: Abstract analytical grid vector with geometric upward charts.
    *   *Category Tag*: `Marketing & Growth`
    *   *Metadata*: `May 12, 2026` • `4 min read`
    *   *Title*: "Bridging the Gap: Why Modern AI Developers Must Understand SEO"
    *   *Summary*: "Exploring key concepts of structured data schemas, crawlability optimization, and analytical tracking that elevate digital reach."
*   **Article 3: Computer Vision at the Edge**
    *   *Thumbnail*: Elegant abstract camera shutter geometric lens vector in amber/violet.
    *   *Category Tag*: `Computer Vision`
    *   *Metadata*: `April 28, 2026` • `6 min read`
    *   *Title*: "Building Lightweight Face Recognition Systems with OpenCV and Flask"
    *   *Summary*: "A deep dive into few-shot learning algorithms, handling live video streams, and writing lightning-fast local attendance loggers."
*   **Interactive Reader Modal**: Clicking any blog post opens a beautifully structured, highly readable fullscreen overlay modal container (`#blogModal`) displaying the complete article text in dynamic markdown-style typography, complete with an index progress bar, social share buttons, and a clean "Close Article" button.

#### H. Digital Marketing Section ("Growth Engine")
Displays interactive marketing competence blocks:
*   *SEO Optimization*: Keyword Research, On-Page SEO, Meta Tags, Link Building.
*   *Analytics & Data*: Google Analytics, GA4, Data Tracking, Performance Metrics.
*   *Social Media & Ads*: Meta Ads, Facebook Marketing, Instagram Marketing, Content Strategy.
*   *Content & Email*: Email Marketing, Copywriting, Content Creation, Mailchimp.

#### I. Contact Section ("Let's Connect")
*   **Status Capsule**: "Open to Entry-Level roles in Web Dev & AI" with a green pulsing dot.
*   **Info Column**:
    *   Intro text: "Let's Start a Conversation" inviting visitors to share ideas or reach out.
    *   Contact cards: Email (`dhavalprajapati4518@gmail.com`), GitHub (`github.com/DhavalMCA`), LinkedIn, and Location (`Gujarat, India`).
    *   Follow links: Social pill links for GitHub, LinkedIn, and Email with vibrant glowing violet circles.
*   **Form Column**: A modern glass card enclosing a feedback form:
    *   Floating label input styling: Labels float above inputs when focused or holding text, and standard lines glow deep indigo.
    *   Fields: Name, Email, Subject, Message.
    *   Submit Button: Full-width indigo button with a send icon, designed to support dynamic states and modern button ripple animations on click.

#### J. Footer & Back to Top
*   **Footer**: Includes the folding geometric logo, navigational quick links, social media buttons, copyright info (Designed & Built by Dhaval Prajapati), and a reflective tech quote: `"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs 💡`.
*   **Back to Top**: A floating circular indigo button in the bottom-right corner that fades in smoothly once scrolled past 400px, clicking it scrolls the window to the top.

---

### 3. Dynamic JavaScript Functionality & Animations
Make the site feel premium and fully interactive by implementing the following custom vanilla JS scripts:

*   **Preloader Timer**: Increments a counter from 0% to 100% (takes ~1-1.4s on desktop, faster on mobile), cycles developer slogans, and then triggers a fade-out animation hiding the loader, enabling body scrolling.
*   **Custom Circular Cursor & Follower**: Desktop-only dual-cursor tracking mouse movements:
    *   Inner Dot (`#cursor`): Indigo, moves instantly to pointer position.
    *   Outer Ring (`#cursor-follower`): Thin violet outline, follows the inner dot with a smooth spring lag (`0.12` interpolation).
    *   Both elements scale up and change colors when hovering over links/buttons, shrink on click, and fade out when leaving the browser window.
*   **`webCanvas` Floating Geometric Aurora Net**: Renders 60 nodes (30 on mobile) floating slowly in 2D space, bouncing off walls. Draw connecting lines between nodes if they are within 160px of each other (higher proximity = brighter line). If a desktop cursor moves, draw glowing violet connection lines between nodes and the mouse position (within 240px). Nodes and lines should be in dynamic colors (`rgba(99, 102, 241, ...)`).
*   **`particleCanvas` Magic Glow Particles**: Renders soft white and warm gold spark particles rising upward with subtle sinus offsets. Periodically emits a shooting star (diagonal glowing line) with fading opacity.
*   **Role Typing Engine**: Cycles through subtitle roles character-by-character. Sets a cursor symbol `|` that blinks via CSS keyframes.
*   **Stat Counters (Intersection Observer)**: Automatically animates metric numbers in the About section from 0 up to their respective targets when they scroll into the viewport.
*   **Active Section Indicator**: Uses scroll event listeners to highlight the current menu link as the user scrolls past different page sections.
*   **3D Perspective Tilt Card**: On hover, calculates relative mouse position on project/marketing/blog cards, tilting them slightly (`perspective(800px) rotateX(...) rotateY(...)`) towards the cursor. Resets smoothly on mouse leave.
*   **Reactive Proximity Badge Glow**: Monitors mouse coordinates across the Skills section. If the cursor gets within 120px of a `.skill-tag`, apply a glowing violet box-shadow proportional to the cursor's proximity.
*   **Secure Email Obfuscation**: Base64-encode the contact email in JS (`ZGhhdmFscHJhamFwYXRpNDUxOEBnbWFpbC5jb20=`) and decode it at runtime using `atob()` when writing to `href` to prevent automated scrapers.
*   **Dynamic Blog Reader Modal**:
    *   Stores the content of each of the 3 articles inside a structured JS object or dataset.
    *   When a "Read Article" card is clicked, populate the fullscreen reader modal (`#blogModal`) with corresponding header, metadata, structured HTML body, and progress reading bar.
    *   Add keydown listeners (Escape key) and touch drag/click handlers to close the modal seamlessly.
*   **Form Ajax Validation & Ripple Effect**:
    *   Injects a CSS `@keyframes` keyframe dynamically for click ripples on the form submit button.
    *   Submits data asynchronously to `/api/contact`. Switches button text to "Sending...", and updates to "Message Sent!" (with green background) or "Error! Try Again" (with red background) before resetting the form.
```