A state-of-the-art developer portfolio built with a dual Cyber-Technical and Soft Glassmorphic aesthetic, featuring an interactive mock IDE, responsive layouts, persistent light/dark themes, a live UI mode switcher (CYBER vs SOFT), and WCAG 2.1 AA accessibility compliance.
- Dual UI Design Modes (CYBER vs SOFT):
- CYBER Mode: Neo-Brutalist technical console layout with sharp hairline grid borders (rounded-none), blocky industrial buttons, screaming snake case metadata (01 // PROJECT_FILE), and terminal status indicators ([ SYS // ONLINE ]).
- SOFT Mode: Smooth glassmorphic cards (rounded-2xl), pill buttons (rounded-full), soft background blur, and classic 3-dot Mac OS window controls.
- Persistent Theme & Style Provider:
- React Context manages both Light / Dark Mode and Cyber / Soft UI Mode with instant state persistence in browser localStorage.
- Interactive Mock IDE Window:
- Tabbed syntax editor displaying about.md, skills.tsx, and experience.json with active tab switching and syntax highlighting.
- Fully Responsive & Accessible:
- WCAG 2.1 AA compliant keyboard navigation (focus-ring), ARIA tab patterns (role="tablist", role="tabpanel"), screen-reader labels, and robust mobile menu drawer.
- Core: React + TypeScript + Vite
- Styling: Tailwind CSS v4 (CSS-First @theme configuration)
- Icons: React Icons
- Typography: Google Fonts API (Outfit, Inter, Fira Code)
Portfolio/
├── README.md # Project overview & documentation
└── frontend/
├── public/ # Static assets (Favicons, PDFs, robots.txt)
└── src/
├── App.tsx
├── main.tsx
├── index.css # Tailwind configuration, theme tokens & global styles
├── context/
│ ├── TabBarContext.tsx # Tab provider component
│ ├── TabBarContextObject.ts # Tab context instance
│ ├── ThemeContext.tsx # Persistent Theme & UI Mode provider component
│ └── ThemeContextObject.ts # Theme context instance with Theme & UiMode types
├── hooks/
│ ├── useTabBar.ts # Custom tab controller hook
│ └── useTheme.ts # Custom theme & UI mode controller hook
├── data/
│ └── projects.json # Centralized showcase JSON dataset
└── components/
├── layout/
│ ├── Frame.tsx # Viewport layout boundary with dynamic mode borders
│ ├── Navbar.tsx # Sticky header with Theme & UI Mode toggle controls
│ └── NavLinks.tsx # Shared layout link navigator with mode typography
├── hero/
│ ├── Hero.tsx # Responsive fold wrapper
│ ├── TextContent.tsx # Bio headers & code brackets styling
│ ├── SocialIcons.tsx # Accessible social links row with mode styling
│ └── CtaButton.tsx # Interactive CTA button (Pill vs Sharp Cyber block)
├── ide/
│ ├── IdeWidget.tsx # Mock IDE editor outer shell
│ ├── TabBar.tsx # Tab bar selector with SYS status vs Mac OS dots
│ ├── Editor.tsx # Active component router
│ ├── LineNumbers.tsx # Fixed vertical line numbers column
│ ├── CodeElements.tsx # Syntax coloring helpers
│ └── content/ # Tab content (Skills, Experience, About)
└── footer/
├── Footer.tsx # Sub-footer grid coordinator
├── EmailQueries.tsx # Click-to-clipboard email copy utility
├── QuickLinks.tsx # Navigation list links
├── SocialLinks.tsx # Text-based social links
└── Copyright.tsx
- Dual-Axis Theme & UI Mode Architecture: Designed a unified React Theme Provider that orchestrates 4 distinct visual states (Cyber Dark, Cyber Light, Soft Dark, Soft Light). Formulated dynamic CSS Custom Properties and root class toggling (.cyber-mode, .light) to seamlessly morph border radius, typography, and background Obsidian/Navy colors at runtime without layout shifts.
- Persistent State Management: Persisted both color themes (dark / light) and design modes (cyber / soft) in browser localStorage, ensuring user preferences remain consistent across browser sessions.
- Mobile Engineering & Focus Management: Created a keyboard-accessible mobile menu drawer with Escape key listeners, click-outside dismissal handlers, and focus restoration to original toggle refs.
- WCAG 2.1 AA Accessibility Standards: Integrated semantic HTML5 landmarks, visible focus rings (focus-visible:outline-cyber-yellow), screen-reader target labels, and strict 4.5:1 text color contrast compliance across all 4 theme mode combinations.
Kunal Sambyal
