From bb9e8c9b819a4f8681b88d40513931f9047a4db5 Mon Sep 17 00:00:00 2001 From: "Khoa.vo" Date: Sat, 25 Apr 2026 23:03:54 +0700 Subject: [PATCH] feat: update portfolio with Simmonds Ltd design, light/dark theme, improved navigation - Add Simmonds Ltd inspired design with grid patterns - Light/Dark theme toggle (default: light) - Center VNDK logo on main landing page - Move view mode toggle to Selected Works section - Highlight Download CV button with phosphor green - Remove duplicate view toggles from nav bar - Update Professional Journey with longer descriptions - Update README with new features --- .gitignore | 5 + README.md | 45 +- src/App.jsx | 1143 +++++++++++++++++++++++++++----------------- src/index.css | 169 ++++++- tailwind.config.js | 46 +- 5 files changed, 932 insertions(+), 476 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..575ef4c --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules/ +dist/ +.DS_Store +.env +*.local \ No newline at end of file diff --git a/README.md b/README.md index 7f70c1d..e243543 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,33 @@ -# Portfolio +# KHOA.VO Portfolio -My personal portfolio website built with React, Vite, and Tailwind CSS. Features dual-mode navigation - a creative editorial design view and a developer terminal interface, along with a specialized Print-Ready A4 CV crafted in a high-contrast editorial aesthetic. +Personal portfolio website featuring dual personas (Creative & IT), inspired by Simmonds Ltd design aesthetics. ## Live Site - **Main**: https://khoavo.myds.me -- **Creative Works**: https://portfolio.khoavo.myds.me +- **Creative Works**: https://portfolio.khoavo.myds.me (redirects to main) + +## Features + +### Creative Side +- **Three viewing modes**: Grid, List, Minimal +- **Image effects**: Grayscale + pixelated + blur → Full color on hover +- **Enhanced project modal**: Keyboard navigation (ESC, Arrow keys) +- **Professional Journey**: Longer, more detailed for HR/readability + +### IT Side +- **Retro desktop UI**: Draggable windows +- **CRT screen effects**: Scanlines, vignette +- **Idle screensaver**: 5s timeout with animated logo + +### Design +- **Simmonds Ltd inspired**: Dark/light theme, grid patterns, phosphor green accents +- **Typography**: Syne (display) + IBM Plex Mono +- **Default theme**: Light + +### Print CV +- Separate print-optimized A4 format +- Concise professional journey ## Tech Stack @@ -28,22 +50,9 @@ npm run dev npm run build ``` -## Preview +## Print CV -```bash -npm run preview -``` - -## Deployment - -Deployed on Synology NAS via Docker. - -## AI Agent Optimization (AIO) - -This portfolio is heavily optimized for Agentic SEO. It includes: -- **JSON-LD Structured Data**: Explicitly defining `Person`, `jobTitle`, `knowsAbout`, and `seeks` (seeking job opportunity) metadata injected securely into ``. -- **AI-Friendly `robots.txt`**: Access explicitly granted to major LLM scrapers such as `GPTBot`, `PerplexityBot`, `ClaudeBot`, and `Google-Extended`. -- **`llms.txt` Endpoint**: Available directly at `/llms.txt`, exposing an exact markdown-structured context endpoint purely for LLM ingestors to natively understand my professional profile. +Press the "Download CV" button or use `window.print()` to generate the PDF CV. ## License diff --git a/src/App.jsx b/src/App.jsx index f7146c2..f995f31 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,12 @@ import React, { useState, useEffect, useRef } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; +import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion'; import { Terminal, Code, Database, Cloud, Cpu, Mail, Phone, ExternalLink, Github, Linkedin, Download, Eye, ChevronRight, ArrowLeft, Layers, Sparkles, Briefcase, - Zap, Globe, Palette, Monitor, Server, Terminal as TerminalIcon + Zap, Globe, Palette, Monitor, Server, Terminal as TerminalIcon, + Folder, FileText, Code2, User, X, Square, Maximize2, + Sun, Moon } from 'lucide-react'; import PrintPortfolio from './PrintPortfolio'; import './print.css'; @@ -34,24 +36,51 @@ const CREATIVE_DATA = { projects: [ { id: 1, + title: "FASHION Pipeline: Ideas 2 Execution", + category: "AI Video Creation", + image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2026/04/Gemini_Generated_Image_vmk4e2vmk4e2vmk4-1-scaled.png", + description: "End-to-end AI fashion workflow from concept to video. Ideas -> System prompt instructions -> Scale up structures for repeatable production. Building a complete creative pipeline.", + link: "https://portfolio.khoavo.myds.me/2026/04/25/fashion-pipeline-ideas-2-execution/", + year: "2026" + }, + { + id: 2, title: "The Language of Poetry & Literature", category: "AI Generated Art", image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2025/08/i2i_1756355661_62547902.png", - description: "Exploring the ethereal boundary between reality and imagination through AI-generated visuals. Created with Stable Diffusion, ComfyUI, and custom LoRA training to capture the intangible essence of poetic imagery.", + description: "Exploring the ethereal boundary between reality and imagination through AI-generated visuals. Capturing the feeling of looking through glass — that quiet distance between the outside world and the person inside.", link: "https://portfolio.khoavo.myds.me/2025/08/28/the-language-of-poetry-and-literature/", year: "2025" }, { - id: 2, + id: 3, + title: "Evolving My AI Art Workflow: Better Control", + category: "AI Generated Art", + image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2025/08/537657171_24322581567428756_3673426611845520713_n.jpg", + description: "Iterating on AI image generation process with new combinations for precise control over final output, particularly when training LoRA models for consistent character generation.", + link: "https://portfolio.khoavo.myds.me/2025/08/27/evolving-my-ai-art-workflow-tweaking-for-better-control/", + year: "2025" + }, + { + id: 4, title: "Delux Perfume – Fineline 2025 Launch", category: "AI Branding & Video", image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2025/08/Delux-Perfume_red.png", - description: "End-to-end creative strategy and art direction for premium perfume launch. From AI-generated mood boards and product visuals to cinematic video production, creating a cohesive brand narrative for Southeast Asia market.", + description: "End-to-end creative strategy and art direction for premium perfume launch. From AI-generated mood boards and product visuals to cinematic video production for Southeast Asia market.", link: "https://portfolio.khoavo.myds.me/2025/08/11/giving-art-direction-to-a-brand-a-case-study/", year: "2025" }, { - id: 3, + id: 5, + title: "Behind the Prompt – AI Video Creation", + category: "AI Video Creation", + image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2025/07/94afe9e65b1ceeee.jpg", + description: "Creating Apple-style AI advert entirely from text prompt. Journey into AI video creation - ever wondered how a skincare commercial can be made entirely from a single structured prompt?", + link: "https://portfolio.khoavo.myds.me/2025/07/31/%f0%9f%8c%b8%e2%9c%a8-behind-the-prompt-my-journey-into-ai-video-creation-%e2%9c%a8%f0%9f%8c%b8/", + year: "2025" + }, + { + id: 6, title: "AI Studio Photography", category: "AI-Generated Branding", image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2025/07/img_0317.jpg", @@ -60,153 +89,190 @@ const CREATIVE_DATA = { year: "2025" }, { - id: 4, + id: 7, + title: "A Photo with Feeling is Hard", + category: "AI Generated Art", + image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2025/07/img_0327-1.png", + description: "When people see your work, they don't ask what prompt you used. They ask: Why does this FEEL different? Exploring the emotional depth in AI-generated imagery.", + link: "https://portfolio.khoavo.myds.me/2025/07/27/%e2%9c%a8-a-beautiful-photo-is-easy-a-photo-with-feeling-is-hard/", + year: "2025" + }, + { + id: 8, title: "NAVIGATOR – ASIAMARINE Magazine", category: "Editorial Design", image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2020/10/navigator-vol1_page_001.webp", - description: "Complete editorial design for Vietnam's premier yacht market publication. Art direction, layout design, and visual storytelling for a luxury marine sector brand reaching high-net-worth readers across Asia.", + description: "Complete editorial design for Vietnam's premier yacht market publication. Art direction, layout design, and visual storytelling for a luxury marine sector brand.", link: "https://portfolio.khoavo.myds.me/2020/10/20/navigator/", year: "2020" }, { - id: 5, - title: "PetroVietnam – PCT Corporate Identity", - category: "Brand Identity & 3D", - image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2017/04/cip_mockup2.png", - description: "Comprehensive corporate identity for PetroVietnam Transportation. 3D vehicle visualization, logo design, stationery system, and POSM materials creating a cohesive national brand presence.", - link: "https://portfolio.khoavo.myds.me/2017/04/10/petrovietnam-pct/", - year: "2017" - }, - { - id: 6, + id: 9, title: "Skyxx – Animated Poster Series", category: "Motion Graphics", image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2019/04/aash-3-scaled.jpg", - description: "Award-winning weekly animated poster series for entertainment events. Dynamic motion graphics with 3D elements, pushing creative boundaries under tight deadlines while maintaining exceptional quality.", + description: "Award-winning weekly animated poster series for entertainment events. Dynamic motion graphics with 3D elements under tight deadlines.", link: "https://portfolio.khoavo.myds.me/2019/02/17/skyxx-poster-animation/", year: "2019" + }, + { + id: 10, + title: "PetroVietnam – PCT Corporate Identity", + category: "Brand Identity & 3D", + image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2017/04/cip_mockup2.png", + description: "Comprehensive corporate identity for PetroVietnam Transportation. 3D vehicle visualization, logo design, stationery system, and POSM materials.", + link: "https://portfolio.khoavo.myds.me/2017/04/10/petrovietnam-pct/", + year: "2017" } ], experience: [ { - role: "AI Creative Lead", + role: "AI CREATIVE LEAD", company: "Phibious Vietnam", period: "2025 - Present", - location: "Ho Chi Minh City", + location: "Ho Chi Minh City, Vietnam", highlights: [ - "Spearheaded the transformation of video production workflows via AI and automation, achieving a 60% measurable gain in output volume", - "Acted as a creative multiplier, leading regional stakeholders and cross-functional teams to automate end-to-end content lifecycles", - "Designed and deployed Agentic AI systems and custom frameworks for rapid concept-to-video prototyping, serving global Fortune 500 brands", - "Drove Regional Enablement by establishing SOPs and mentoring 20+ producers on prompt engineering, AI ethics, and workflow standardization" + "Spearheaded the transformation of video production workflows via AI and automation, achieving a 60% measurable gain in output volume across all regional campaigns.", + "Acted as a creative multiplier, leading regional stakeholders and cross-functional teams (marketing, digital, and creative) to automate end-to-end content lifecycles from concept to delivery.", + "Designed and deployed Agentic AI systems and custom frameworks for rapid concept-to-video prototyping, serving global Fortune 500 brands including premium beauty, fashion, and consumer goods sectors.", + "Standardized end-to-end AI video production SOPs—ranging from AI-led scripting and storyboarding to automated localization—ensuring brand compliance across Southeast Asian markets.", + "Drove Regional Enablement by establishing SOPs and mentoring 20+ producers on prompt engineering, AI ethics, and workflow standardization.", + "Pioneered the integration of ComfyUI, FLUX, and Stable Diffusion into traditional creative workflows, reducing concept-to-execution time by 70%.", + "Collaborated with international creative directors to translate brand visions into AI-augmented visual narratives that maintain emotional authenticity while achieving production scale." ] }, { - role: "eCommerce Design Lead", + role: "ECOMMERCE DESIGN LEAD", company: "Procter & Gamble (P&G)", period: "2020 - 2025", - location: "Ho Chi Minh City", + location: "Ho Chi Minh City, Vietnam", highlights: [ - "Led visual strategy for eCommerce platforms across Hair Care category, directly impacting millions of consumers in SEA", - "Managed end-to-end design projects from concept to execution, aligning with global marketing strategies", - "Spearheaded the digital transformation of brand assets for omnichannel retail experiences", - "Mentored junior designers and established design standards adopted across the regional team" + "Led visual strategy for eCommerce platforms across Hair Care category (Head & Shoulders, Pantene, Clear), directly impacting millions of consumers in Southeast Asia through digital shelf optimization.", + "Managed end-to-end design projects from concept to execution, aligning with global marketing strategies while adapting for local market nuances across 6 SEA markets.", + "Spearheaded the digital transformation of brand assets for omnichannel retail experiences, bridging the gap between physical retail and D2C eCommerce touchpoints.", + "Collaborated with global brand teams to localize and scale omnichannel retail experiences for P&G's premium beauty portfolio.", + "Mentored junior designers and established design standards adopted across the regional team, creating a unified visual language for SEA markets.", + "Led the development of modular design systems enabling 3x faster content adaptation for new product launches across markets.", + "Pioneered data-informed creative approaches, using consumer insights to drive visual decisions that increased conversion rates by measurable percentages." ] }, { - role: "Production Creative Lead", + role: "PRODUCTION CREATIVE LEAD", company: "INN SaiGon", period: "Dec 2019 - Nov 2020", - location: "Ho Chi Minh City", + location: "Ho Chi Minh City, Vietnam", highlights: [ - "Directed photography production for food, product, and event projects with 30+ client accounts", - "Established comprehensive brand guidelines and visual standards ensuring consistency across deliverables", - "Optimized post-production workflows, reducing turnaround time by 40%" + "Directed photography production for food, product, and event projects with 30+ client accounts across hospitality, F&B, and luxury retail sectors.", + "Established comprehensive brand guidelines and visual standards ensuring consistency across all client deliverables.", + "Optimized post-production workflows using advanced retouching techniques and batch processing, reducing turnaround time by 40%.", + "Built and managed a multi-disciplinary team of photographers, stylists, and retouchers for high-profile shoots.", + "Implemented quality control frameworks that reduced post-production errors by 40%, improving client satisfaction scores.", + "Developed innovative lighting and styling approaches that became signature INN aesthetics for premium hospitality campaigns." ] }, { - role: "Regional Head of Design", + role: "REGIONAL HEAD OF DESIGN", company: "ASIAMARINE", period: "2018 - 2019", - location: "Ho Chi Minh City", + location: "Ho Chi Minh City, Vietnam", highlights: [ - "Led design team creating digital marketing assets, web graphics, and editorial content for luxury yacht brand", - "Delegated projects to junior designers while maintaining quality control and brand consistency", - "Collaborated with international teams to localize content for Asian markets" + "Led design team creating digital marketing assets, web graphics, and editorial content for Vietnam's premier luxury yacht brand.", + "Delegated projects to junior designers while maintaining quality control and brand consistency across all touchpoints.", + "Collaborated with international teams to localize content for Asian markets, adapting luxury messaging for cultural resonance.", + "Created multi-channel visual campaigns spanning print, digital, and event activations that elevated ASIAMARINE's regional presence.", + "Developed the visual identity system that defined ASIAMARINE's premium positioning in the for regional marine lifestyle sector." ] }, { - role: "Senior Graphic Designer", + role: "SENIOR GRAPHIC DESIGNER", company: "EMG - Element Management Group", period: "2017 - 2018", - location: "Ho Chi Minh City", + location: "Ho Chi Minh City, Vietnam", highlights: [ - "Created impactful designs for print and digital campaigns for global luxury and lifestyle brands", - "Expert in photo sourcing, advanced image retouching, and brand identity development", - "Delivered corporate identity packages for multinational clients" + "Created impactful designs for print and digital campaigns for global luxury and lifestyle brands including hospitality, automotive, and premium retail.", + "Expert in photo sourcing, advanced image retouching, and brand identity development for both regional and international clients.", + "Delivered corporate identity packages for multinational clients seekingVietnam market entry.", + "Collaborated with international creative directors to adapt global campaigns for local market sensibilities.", + "Developed production-ready artwork for offset and digital print, ensuring color accuracy across media." ] } - ], - awards: [ - { title: "Best Digital Campaign", year: "2024", organization: "P&G SEA Digital Awards" }, - { title: "Outstanding Art Direction", year: "2019", organization: "Vietnam Design Awards" } ] }; // --- IT PERSONA DATA --- const IT_DATA = { title: "Full-Stack Developer & DevOps", - summary: "9-month intensive coding journey from zero to production. Built 5+ deployed applications including video streaming platforms, AI image generators, and music players. Proficient in modern web frameworks, containerization, and cloud deployment. Self-taught developer with a creative background bringing unique problem-solving perspective.", + summary: "14-month intensive coding journey from zero to production. Built 10+ deployed applications including video streaming platforms, AI tools, and media players. Proficient in modern web frameworks, containerization, and cloud deployment. Self-taught developer with a creative background bringing unique problem-solving perspective.", journey: [ { month: "MAY '24", title: "The Spark", description: "First deep dive into Next.js. Abandoned manual CSS for Tailwind efficiency." }, - { month: "JUL '24", title: "First Production App", description: "Built kv-pix AI image generator with multi-provider support (Google Whisk, Meta AI, Grok)." }, + { month: "JUL '24", title: "First Production App", description: "Built apix AI image generator with multi-provider support (Google Whisk, Meta AI, Grok)." }, { month: "SEP '24", title: "Full-Stack Mastery", description: "Created KV-Tube YouTube platform with Go backend + Next.js. Dockerized for Synology NAS." }, { month: "NOV '24", title: "The AI Pivot", description: "Fully embraced AI coding. Cursor and v0 became primary development engine." }, { month: "DEC '24", title: "Rust Exploration", description: "Built Spotify clone with Rust Axum backend. Advanced system architecture." }, + { month: "MAR '25", title: "Netflix Clone", description: "Built kv-netflix Android TV + Web app with Kotlin Multiplatform." }, { month: "PRESENT", title: "Vibe Ascended", description: "Building complex apps through high-level prompting and intuition." } ], skills: { - languages: ["TypeScript", "JavaScript", "Go", "Rust", "Python", "HTML/CSS", "SQL"], - frontend: ["React", "Next.js", "Vite", "Tailwind CSS", "Shadcn", "Framer Motion", "Zustand", "PWA"], - backend: ["Node.js", "Go (Gin)", "Rust (Axum)", "Express", "REST APIs", "WebSocket"], - ai: ["LLM Integration", "Cursor AI", "v0", "Replit AI", "Ollama", "Prompt Engineering", "Multi-Provider AI APIs"], - devops: ["Docker", "Docker Compose", "GitHub Actions", "Forgejo CI/CD", "Synology NAS", "Nginx", "SQLite"], - tools: ["Git", "VS Code", "Figma", "Postman", "MongoDB", "Prisma", "ffmpeg"] + languages: ["TypeScript", "JavaScript", "Go", "Rust", "Python", "Kotlin", "HTML/CSS", "SQL"], + frontend: ["React", "Next.js", "Vite", "Tailwind CSS", "Shadcn", "Framer Motion", "Zustand", "PWA", "Jetpack Compose"], + backend: ["Node.js", "Go (Gin)", "Rust (Axum)", "Express", "REST APIs", "WebSocket", "Ktor"], + ai: ["LLM Integration", "Cursor AI", "v0", "Replit AI", "Ollama", "Prompt Engineering", "Multi-Provider AI APIs", "ComfyUI"], + devops: ["Docker", "Docker Compose", "GitHub Actions", "Forgejo CI/CD", "Synology NAS", "Nginx", "SQLite", "Git"], + tools: ["Git", "VS Code", "Figma", "Postman", "MongoDB", "Prisma", "ffmpeg", "Android Studio"] }, projects: [ { - name: "KV-Tube", - description: "YouTube-like video streaming platform with HLS support, subscriptions, watch history, and PWA. Deployed on Synology NAS via Docker.", + name: "kv-netflix", + description: "StreamFlow Netflix - Android TV + Web App built with Kotlin Multiplatform. Movie streaming with trailer preview, custom playlists, and offline download support.", + tech: ["Kotlin", "Compose Multiplatform", "Android TV", "Web", "PWA"], + github: "https://git.khoavo.myds.me/vndangkhoa/kv-netflix" + }, + { + name: "kv-tube", + description: "YouTube-like video streaming platform with HLS support, subscriptions, watch history, comments, and PWA. Deployed on Synology NAS via Docker.", tech: ["Go (Gin)", "Next.js", "TypeScript", "SQLite", "Docker", "HLS.js", "PWA"], github: "https://git.khoavo.myds.me/vndangkhoa/kv-tube" }, { - name: "Spotify Clone", + name: "spotify-clone", description: "Full-featured Spotify-like music player with YouTube Music integration, real-time lyrics, custom playlists, and PWA support.", tech: ["React (Vite)", "Rust (Axum)", "TailwindCSS", "YouTube API", "PWA"], github: "https://git.khoavo.myds.me/vndangkhoa/spotify-clone" }, { - name: "kv-pix (APIx)", + name: "neko", + description: "Go-based media server with streaming capabilities and user management. Deployed on NAS.", + tech: ["Go", "SQLite", "Docker", "HLS"], + github: "https://git.khoavo.myds.me/vndangkhoa/neko" + }, + { + name: "kv-download", + description: "Universal video downloader API supporting multiple platforms with batch processing.", + tech: ["Go", "yt-dlp", "Docker"], + github: "https://git.khoavo.myds.me/vndangkhoa/kv-download" + }, + { + name: "kv-tiktok-download", + description: "Douyin/TikTok video download API with batch processing, watermarks removal, and metadata extraction.", + tech: ["Python", "FastAPI", "yt-dlp"], + github: "https://git.khoavo.myds.me/vndangkhoa/kv-tiktok-download" + }, + { + name: "apix", description: "AI Image Generator powered by Google Whisk, Meta AI, and Grok. Multi-provider support with prompt library and history.", tech: ["Next.js 14", "TypeScript", "Tailwind", "Zustand", "Docker"], github: "https://git.khoavo.myds.me/vndangkhoa/apix" }, { - name: "IT CV Portfolio", - description: "This terminal-style interactive resume with typing animations and system aesthetics.", + name: "kv-cv", + description: "This terminal-style interactive resume with retro desktop UI and draggable windows.", tech: ["React", "Vite", "Tailwind", "Framer Motion", "TypeScript"], - github: "https://git.khoavo.myds.me/vndangkhoa/it-cv" - }, - { - name: "kv-tiktok-download", - description: "Douyin/TikTok video download API with batch processing support.", - tech: ["Python", "FastAPI", "yt-dlp"], - github: "https://git.khoavo.myds.me/vndangkhoa/kv-tiktok-download" + github: "https://git.khoavo.myds.me/vndangkhoa/kv-cv" } ], experience: [ - { role: "Creative Technology", company: "Phibious Vietnam", period: "2025 - Present", highlights: ["Bridge between creative and technical teams", "Develop interactive prototypes and AI-powered tools", "Automate creative workflows with custom scripts", "Build internal tools for design team productivity"] }, - { role: "Freelance Developer", company: "Self-Employed", period: "2024 - Present", highlights: ["Built 5+ production web applications deployed on cloud and NAS", "Integrated AI capabilities (image generation, video processing) into client solutions", "Implemented CI/CD pipelines with GitHub/Forgejo Actions", "Dockerized applications for easy deployment on various platforms"] } + { role: "Creative Technology", company: "Phibious Vietnam", period: "2025 - Present", highlights: ["Bridge between creative and technical teams", "Develop interactive prototypes and AI-powered tools", "Automate creative workflows with custom scripts", "Build internal tools for design team productivity", "Deploy AI apps on enterprise infrastructure"] }, + { role: "Freelance Developer", company: "Self-Employed", period: "2024 - Present", highlights: ["Built 10+ production web applications deployed on cloud and NAS", "Integrated AI capabilities (image generation, video processing) into client solutions", "Implemented CI/CD pipelines with GitHub/Forgejo Actions", "Dockerized applications for easy deployment on various platforms"] } ], github: "https://git.khoavo.myds.me/vndangkhoa", forgejo: "https://git.khoavo.myds.me/vndangkhoa" @@ -223,202 +289,135 @@ const VndkLogo = ({ size = 36, vnColor = "#1A1A1A", dkColor = "#00FF94", classNa ); -// 1. LANDING PAGE - Overlay Hover Effect -const LandingPage = ({ onSelect }) => { - const [isHoveringIT, setIsHoveringIT] = useState(false); +// 1. LANDING PAGE - Simmonds Ltd Style +const LandingPage = ({ onSelect, darkMode, toggleTheme }) => { + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const checkMobile = () => setIsMobile(window.innerWidth < 768); + checkMobile(); + window.addEventListener('resize', checkMobile); + return () => window.removeEventListener('resize', checkMobile); + }, []); return ( - {/* Creative Side Content - Always visible */} -
- {/* Background Mesh Gradient */} -
-
-
-
- - {/* Background Pattern */} -
- - {/* Main Content */} -
- - {/* Name - Masked Reveal Animation */} -
- - Vo Nguyen Dang Khoa - -
- - {/* Tagline */} - - Where Design Meets Intelligence - - - {/* Title */} - - Creative Manager & AI Innovation Lead - - - {/* Enter Button (Desktop only) */} - + {/* Theme Toggle */} + - {/* Mobile Choices (Consolidated in center) */} -
- - -

- Select a persona to enter -

-
- -
- - {/* Hint - fades on hover */} + {/* Simmonds Ltd Inspired Grid Structure */} +
+ {/* Horizontal Lines */} +
+
+ + {/* Vertical Lines - 4 Column Structure (Simplified on mobile) */} +
+ {!isMobile &&
} +
+ + {/* Subtle Dots at Intersections */} + {[20, 80].map(y => (isMobile ? [25, 75] : [25, 50, 75]).map(x => ( +
+ )))} +
+ + {/* Main Content */} +
- - - Hover right to preview Developer side - - + {/* Logo Section */} + + + + + {/* Tagline */} + + where design meets intelligence + + + {/* CTA Buttons */} +
+ onSelect('creative')} + initial={{ opacity: 0, x: -20 }} + animate={{ opacity: 1, x: 0 }} + transition={{ delay: 0.8 }} + className="group relative" + > + + Creative Portfolio + + + + + onSelect('it')} + initial={{ opacity: 0, x: 20 }} + animate={{ opacity: 1, x: 0 }} + transition={{ delay: 1 }} + className="group relative" + > + + IT Portfolio + + + +
- - {/* IT Side - Slides in on hover (desktop only) */} - setIsHoveringIT(true)} - onMouseLeave={() => setIsHoveringIT(false)} - onClick={() => onSelect('it')} - > - {/* Vertical Strip Label (for peek state) */} - {!isHoveringIT && ( - - - DEVELOPER SIDE // PREVIEW - - - )} - - {/* Grid Pattern */} -
- - {/* Content */} -
-
- - -

- DEVELOPER -

-

- FULL-STACK & DEVOPS -

- -

- 9-month coding journey.
- Built 5+ production applications.
- Self-taught with AI-powered development. -

- - - - {/* Code Preview */} -
-
const stack = ["Go", "Rust", "TS"];
-
const deployed = 5;
-
const vibe = "S-Tier";
-
-
+ + {/* Floating Meta Information */} +
+
+ Art Direction
AI Engineering
Full Stack Dev
- - - - - {/* Minimal Signature Header */} - -
- KHOA.VO +
+ Based in HCMC
Vietnam
© 2026
- +
); }; -// --- ANIMATION LOADERS --- - const CreativeLoader = ({ onComplete }) => { const preRef = useRef(null); @@ -476,11 +475,11 @@ const CreativeLoader = ({ onComplete }) => { return (
@@ -488,7 +487,7 @@ const CreativeLoader = ({ onComplete }) => { {/* Skip Button */} @@ -538,11 +537,17 @@ const TerminalBootLoader = ({ onComplete }) => { }; // 2. CREATIVE SIDE - Editorial Gallery -const CreativeSide = ({ onBack, onSwitch }) => { +const CreativeSide = ({ onBack, onSwitch, darkMode, toggleTheme }) => { const [isLoading, setIsLoading] = useState(true); const [showScrollTop, setShowScrollTop] = useState(false); const [activeProject, setActiveProject] = useState(null); const [visibleProjects, setVisibleProjects] = useState([]); + const [viewMode, setViewMode] = useState('grid'); + + const bgClass = "bg-[var(--bg-primary)]"; + const textClass = "text-[var(--text-primary)]"; + const subTextClass = "text-[var(--text-secondary)]"; + const borderClass = "border-[var(--border)]"; useEffect(() => { const handleScroll = () => { @@ -552,6 +557,28 @@ const CreativeSide = ({ onBack, onSwitch }) => { return () => window.removeEventListener('scroll', handleScroll); }, []); + // Keyboard navigation for modal + useEffect(() => { + if (!activeProject) return; + const projects = CREATIVE_DATA.projects; + const currentIndex = projects.findIndex(p => p.id === activeProject.id); + + const handleKeyDown = (e) => { + if (e.key === 'Escape') setActiveProject(null); + if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { + const nextIndex = (currentIndex + 1) % projects.length; + setActiveProject(projects[nextIndex]); + } + if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { + const prevIndex = (currentIndex - 1 + projects.length) % projects.length; + setActiveProject(projects[prevIndex]); + } + }; + + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [activeProject]); + const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }; @@ -573,26 +600,27 @@ const CreativeSide = ({ onBack, onSwitch }) => { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} - className="min-h-screen bg-[#FAFAFA] text-[#1A1A1A]" + className={`min-h-screen ${bgClass} ${textClass}`} > {/* Navigation */} -