# Yuvaraj Domain Dark Jujutsu Kaisen-inspired interactive portfolio for Yuvaraj, a full stack developer and M.Sc. Computer Science student. ## Masterplan - Create a “Domain Expansion” portfolio experience that presents Yuvaraj’s profile, skills, project work, training, education, and contact path in a cinematic anime-inspired interface. - Target recruiters, internship coordinators, collaborators, and peers reviewing Yuvaraj’s full-stack and UI/UX capabilities. - Use JJK-flavored naming to make standard portfolio sections memorable: “Sorcerer Profile,” “Innate Techniques,” “Mission Records,” and “Binding Vow.” - Highlight YellowBond as the primary project with a focused product story and PHP/MySQL-based stack. - Provide a working contact form through the GenMB contact-form capability. ## Tech Stack & Architecture - **Runtime/build:** React + TypeScript + Vite. - **Routing:** `react-router-dom` with a single `HashRouter` route in `src/main.tsx`. The app itself is a one-page scrolling portfolio; section navigation uses hash anchors like `#about`, `#skills`, `#projects`. - **Styling:** Tailwind CSS utility classes plus custom theme/animation rules in `src/styles/main.css`. - **Icons:** `lucide-react` for most UI icons; `react-icons/si` for GitHub. - **Class merging:** `src/lib/utils.ts` exports `cn()` using `clsx` + `tailwind-merge`. - **Contact integration:** `index.html` injects the GenMB contact-form SDK at `window.genmb.contactForm.submit`. - **State management:** Local React state only: - `Header.tsx`: dark/light domain mode toggle. - `Projects.tsx`: project modal open/close state. - `Timeline.tsx`: local mission records, simulated loading, empty state. - `EducationContact.tsx`: form state, validation errors, submitting status. - `Toast.tsx`: app-wide toast context via `ToastProvider`. `src/App.tsx` composes the entire page in order: ```tsx

``` Important gotchas: - `Header.tsx` toggles `document.documentElement.classList.toggle('dark', dark)`. Default state is dark, but the app can switch to light if CSS supports it. - Smooth scroll CTAs call `document.getElementById(...).scrollIntoView({ behavior: 'smooth' })`. - `ProjectModal.tsx` manually locks body scroll, handles Escape, and traps Tab focus. Preserve this accessibility behavior when editing. - The portrait in `About.tsx` currently uses a generated placeholder URL from `picsum.photos` with `data-genmb-img`. Replace the `src` if a real portrait is supplied. - Social links in `EducationContact.tsx` currently point to generic `https://github.com/` and `https://www.linkedin.com/`; update to Yuvaraj’s actual profiles when available. ## File Structure ```text index.html # HTML shell, SEO meta, root div, GenMB contact-form SDK injection package.json # Project scripts/dependencies vite.config.ts # Vite configuration tsconfig.json # TypeScript configuration src/main.tsx # React entry; mounts App inside HashRouter src/App.tsx # Page composition and document title/meta setup src/styles/main.css # Tailwind/theme tokens, dark domain visuals, energy particles, custom animations src/lib/utils.ts # cn() helper for safe Tailwind class composition src/types/index.ts # Skill and MissionRecord app data types src/types/genmb.d.ts # Window.genmb contact-form TypeScript declaration src/components/Header.tsx # Sticky desktop header, logo, section links, theme toggle, contact CTA src/components/BottomNav.tsx # Mobile fixed bottom navigation for primary sections src/components/Hero.tsx # Domain Expansion hero, particle field, primary CTAs, technique stats panel src/components/About.tsx # Sorcerer Profile section with portrait frame and profile summary src/components/Skills.tsx # Skill cards and cursed energy progress meters src/components/Projects.tsx # YellowBond feature card, mock browser card, modal trigger src/components/ProjectModal.tsx # Accessible modal with YellowBond architecture details src/components/Timeline.tsx # Mission Records timeline with refresh, clear, skeleton, empty, error states src/components/EducationContact.tsx# Education archive, social links, Binding Vow contact form src/components/ui/Button.tsx # Reusable button variants with loading state and slice animation hook src/components/ui/Card.tsx # Reusable card wrapper with optional interactive/selected states src/components/ui/EmptyState.tsx # Reusable empty-state panel with action src/components/ui/Skeleton.tsx # Loading placeholder src/components/ui/Toast.tsx # Toast provider/hook and toast rendering ``` ## Key Features ### Domain Hero Implemented in `src/components/Hero.tsx`. Requirements: - Section id: `hero`. - Main label: “Domain Expansion: Developer’s Realm.” - Heading: “Hi, I’m Yuvaraj.” - Subheading: “Full Stack Developer | Crafting Digital Cursed Techniques.” - Animated cursed-energy background uses `.energy-field` and repeated `.energy-particle` spans from `src/styles/main.css`. - Primary CTA “Enter the Domain” scrolls to `#about`. - Secondary CTA “Inspect YellowBond” scrolls to `#projects`. ### Sorcerer Profile Implemented in `src/components/About.tsx`. Requirements: - Section id: `about`. - Uses a neon/geometric portrait frame via `.neon-frame`. - Profile text: “An enthusiastic M.Sc. Computer Science student blending technical mastery with creative sorcery. Specialized in full-stack development, UI/UX design, and complex problem-solving.” - Three quick stat cards: `BCA & M.Sc`, `Full Stack`, `UI/UX`. ### Coding Skills & Cursed Energy Implemented in `src/components/Skills.tsx`. Data model: ```ts export type Skill = { id: string; title: string; stack: string[]; level: number; description: string; }; ``` Current skills: - Web Development: HTML, CSS, JS, Bootstrap — 92%. - Backend & Databases: PHP, MySQL — 84%. - Programming: Python Basics, Java — 76%. Each skill is rendered as a neon card with icon, stack pills, and an accessible progress meter using `aria-label`. ### YellowBond Project Domain Implemented in `src/components/Projects.tsx` and `src/components/ProjectModal.tsx`. Requirements: - Section id: `projects`. - Primary project: **YellowBond**. - Tagline: “The Ultimate One-Friend Bond (Locked Permanently).” - Stack pills: PHP, MySQL, HTML, CSS, JavaScript, Bootstrap. - Description emphasizes a single permanent best-friend bond instead of a bloated social platform. - Yellow-themed card uses `warning` token classes such as `border-warning/70`, `text-warning`, `bg-warning/10`. - “Open Project Domain” opens `ProjectModal`. - Modal includes architecture cards: - Backend: PHP + MySQL - Interface: HTML, CSS, JS - UI System: Bootstrap Modal behavior requirements: - Close on Escape. - Close on backdrop mouse down. - Trap keyboard focus inside modal. - Restore focus to the trigger button after close. - Lock `document.body.style.overflow` while open. ### Mission Records Implemented in `src/components/Timeline.tsx`. Data model: ```ts export type MissionRecord = { id: string; organization: string; year: string; role: string; detail: string; }; ``` Current records: - Seyfert Infotech, 2026 — Web Development Intern. - Datanerdz.AI, 2026 — Software Testing. - Nexgen Technology, 2025 — Machine Learning. Interactive behavior: - `Refresh` simulates async loading with a 650ms timeout and skeleton rows. - `Clear View` empties local records and shows `EmptyState`. - Empty state action restores records. - Error UI exists but current reload path is deterministic unless future code throws. ### Education & Binding Vow Contact Implemented in `src/components/EducationContact.tsx`. Education: - Sri Manakula Vinayagar Engineering College. - BCA Graduate ’25. - M.Sc. Computer Science ’27. Contact form: - Section id: `contact`. - Form title: “Establish a Binding Vow.” - Fields: `name`, `email`, `subject`, `message`. - Validation mirrors GenMB connector limits: - `name`: required, max 200 chars. - `email`: required, regex validated. - `subject`: optional, max 500 chars. - `message`: required, max 5000 chars. - On submit: - Validates all fields. - Calls `window.genmb.contactForm.submit({ name, email, subject, message })`. - Shows success/error toast via `useToast`. - Resets form on success. - Shows inline `sectionError` on connector failure. External API surface: - Provided by script in `index.html`. - Method: ```ts window.genmb.contactForm.submit({ name: string, email: string, subject?: string, message: string }) => Promise<{ success: boolean }> ``` - Under the hood it POSTs to `/api/contact/submit` with appId `mz6OeqzTw2zA`. - Timeout: 30 seconds. - Throws for missing fields, invalid email, timeout, or failed response. ## Design Guidelines - **Theme:** Dark “Domain Expansion” interface inspired by Jujutsu Kaisen. - **Palette:** Pure dark backgrounds, electric teal/blue primary accents, crimson destructive highlights, yellow warning accents for YellowBond. - **Primary visual tokens:** Tailwind semantic classes from `main.css`: `bg-background`, `text-foreground`, `bg-card`, `border-border`, `text-primary`, `text-destructive`, `text-warning`. - **Hero atmosphere:** Floating particle spans inside `.energy-field`. - **Typography:** Bold, sharp portfolio headings; hero uses `.anime-title` for stylized title treatment. - **Frames/cards:** Use `Card.tsx` for section content panels. Use `neon-frame` for the portrait. - **Buttons:** Use `Button.tsx` variants: - `primary`: teal/blue, includes `.slice-button`. - `secondary`: bordered dark card style. - `ghost`: transparent hover. - `destructive`: crimson action. - **Responsive behavior:** - Desktop: sticky `Header.tsx` with nav links. - Mobile: `BottomNav.tsx` fixed to bottom; footer has extra bottom padding (`pb-24`) to avoid overlap. - Sections use responsive grids with `lg:grid-cols-*` and `md:grid-cols-*`. - **Motion:** Hover interactions are subtle but sharp: slight upward translation, shadow changes, glow-like borders, active scale. ## App Flow 1. User lands on `#hero`. 2. User clicks “Enter the Domain” to scroll to `#about`, or uses header/bottom nav anchors. 3. User reads profile, then skills with cursed energy meters. 4. User opens YellowBond details: - Click “Open Project Domain.” - Read modal architecture. - Close via button, Escape, or backdrop. 5. User reviews training in `#mission`. - May clear and restore records; this is only a UI demo state and does not persist. 6. User reaches `#contact`. - Reviews education. - Opens social links. - Submits contact form. - Receives toast feedback. Navigation: - Header links: `#about`, `#skills`, `#projects`, `#contact`. - Bottom mobile nav: `#hero`, `#skills`, `#projects`, `#mission`, `#contact`. - `HashRouter` route path is `/`; do not add separate pages unless routing is intentionally expanded. Edge cases: - If GenMB contact connector is unavailable, contact submit throws: “Contact connector is unavailable in this preview.” - Invalid form fields show per-field messages and an error toast. - Modal focus restoration depends on `triggerRef`; preserve the ref on the modal-opening button. - Timeline records are not fetched from a backend. `Refresh` only restores `seedRecords`. ## Conventions - Use PascalCase for React components: `Hero`, `ProjectModal`, `EducationContact`. - Keep shared UI primitives in `src/components/ui`. - Use semantic section ids for anchor navigation: `hero`, `about`, `skills`, `projects`, `mission`, `contact`. - Use `cn()` from `src/lib/utils.ts` for conditional class strings instead of manual string concatenation. - Prefer semantic Tailwind color tokens over hard-coded colors so dark/light mode and theme variables remain consistent. - Keep domain/JJK naming in visible labels, but keep code names practical and descriptive. - For new static data, define a type in `src/types/index.ts` if reused or complex. - For a new section: 1. Create `src/components/NewSection.tsx`. 2. Add a unique section `id`. 3. Import and place it in `src/App.tsx`. 4. Add anchor links in `Header.tsx` and/or `BottomNav.tsx` if it is a primary destination. 5. Use `Card`, `Button`, `EmptyState`, `Skeleton`, and `Toast` rather than duplicating UI patterns. - For a new contact-like async action, use the existing toast pattern from `EducationContact.tsx`: local `submitting` state, validation before async call, success/error toast, and accessible disabled/loading UI. - Avoid introducing global state unless a feature must coordinate across unrelated sections; current architecture is intentionally local-state and single-page. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.