diff --git a/dist/assets/index-CrIGQTVu.js b/dist/assets/index-C5_7qcB8.js similarity index 95% rename from dist/assets/index-CrIGQTVu.js rename to dist/assets/index-C5_7qcB8.js index 8f38ac2..f220807 100644 --- a/dist/assets/index-CrIGQTVu.js +++ b/dist/assets/index-C5_7qcB8.js @@ -125,7 +125,7 @@ Error generating stack: `+c.message+` * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. - */const eu=Ct("Terminal",[["polyline",{points:"4 17 10 11 4 5",key:"akl6gq"}],["line",{x1:"12",x2:"20",y1:"19",y2:"19",key:"q2wloq"}]]),en={name:"VO NGUYEN DANG KHOA",title:"AI CREATIVE LEAD & SOFTWARE DEVELOPER",dob:"19/01/1993",phone:"0398300340",email:"vonguyendangkhoa@gmail.com",location:"Ho Chi Minh City, Vietnam",portfolio:"khoavo.myds.me",github:"git.khoavo.myds.me/vndangkhoa",summary:"Highly accomplished Creative Leader bridging the gap between artistic direction and high-performance software engineering. With over 9+ years managing brand strategies and digital design, I evaluate and execute technology-driven projects from concept to production. Specialized in merging traditional creative direction with cutting-edge generative AI workflows (ComfyUI, FLUX) and full-stack development (Go, React)."},nS=[{period:"12/2012 - 06/2016",school:"RMIT Vietnam",degree:"Bachelor of Multimedia System Design (Graduated with Excellence)"}],rS=[{category:"Creative & AI Tools",items:"Adobe Creative Suite (Ps, Ai, Id, Pr), ComfyUI, Stable Diffusion, FLUX, Ollama, 3D Animation, Motion Graphics"},{category:"Development Stack",items:"React, Next.js, Go (Gin), Rust (Axum), Python (FastAPI), TypeScript, Tailwind CSS"},{category:"Infrastructure",items:"Docker, SQLite, Synology NAS Deployment, HLS Video Streaming"},{category:"Leadership",items:"Cross-Functional Management, Creative Strategy, Technical Mentorship, Process Optimization"}],iS=[{role:"AI Creative Lead",company:"Phibious Viet Nam",period:"06/2024 - Present",highlights:["Manage highly complex, technology-driven creative projects, merging traditional design with advanced generative AI models and data analytics.","Deploy and utilize ComfyUI, Stable Diffusion, FLUX, and local LLMs (Ollama, LM Studio) to augment design workflows and drive overarching agency strategies.","Lead cross-functional collaboration between traditional designers, copywriters, and data analysts to ensure measurable campaign performance.","Optimize internal design processes by integrating advanced image generation pipelines into daily operations.","Train and mentor the broader agency (including interns) on core AI design competencies and prompt engineering."]},{role:"eCOM Design Lead",company:"Procter & Gamble (P&G) Vietnam",period:"09/2023 - 06/2025",highlights:["Spearheaded strategic design concepts and visual strategies for e-commerce, directly impacting consumer engagement and online sales for Hair Care brands.","Managed end-to-end medium-to-large design projects, actively improving internal design processes and ensuring strict corporate standard compliance.","Collaborated globally across functional geographic boundaries and cross-functional teams to deliver cohesive brand stories."]},{role:"ECOM Graphic Designer (ABM)",company:"P&G Viet Nam",period:"11/2020 - 09/2023",highlights:["Built concepts and executed visual strategy across vast consumer touchpoints including packaging, eCommerce, and social media under the Hair Care Packaging Design Studio.","Leveraged hands-on design mastery to craft illustrations and brand expressions that consistently met high commercial demands.","Ensured brand guidelines and directives were embraced consistently and creatively across all regional platforms."]},{role:"Production Creative Lead",company:"Inn Saigon",period:"12/2019 - 11/2020",highlights:["Led the photography and production team, setting the standard for internal branding deliverables (Food, Product, Events).","Managed project budgets, retouching workflows, and cross-team communications to deliver high-volume outcomes.","Conducted frequent feedback sessions to boost performance and facilitate the development of team members."]},{role:"Regional Head of Design",company:"ASIAMARINE",period:"12/2018 - 12/2019",highlights:["Supervised all creation of concepts and layouts across digital/offline marketing for luxury marine sectors.","Managed independent contractors and junior designers, leveraging creative marketing to develop targeted campaigns."]},{role:"Senior Graphic Designer",company:"EMG",period:"12/2017 - 12/2018",highlights:["Created outstanding digital and print designs, managing corporate identity, merchandise, and digital displays.","Assisted with concept proposals to clients including mockup preparations and asset sourcing."]},{role:"Graphic Artist",company:"Le Meridien Saigon",period:"12/2016 - 12/2017",highlights:["Designed and executed all promotional collateral according to strict Le Meridien brand identity guidelines.","Liaised with external suppliers to ensure creative print quality and deadlines were consistently met."]},{role:"Animation Designer",company:"Adidas Group",period:"06/2016 - 12/2016",highlights:["Developed graphics and animations for production environment simulations (Line Balancing, One Pair Flow).","Compiled and edited video infographics for visual training purposes."]}],sS=[{name:"KV-Tube",tech:"Go (Gin), Next.js, SQLite, Docker, HLS.js",desc:"YouTube-like video streaming platform with HLS support, subscriptions, and Synology NAS deployment."},{name:"Spotify Clone",tech:"React, Rust (Axum), YouTube API",desc:"Full-featured music player with real-time lyrics and custom playlists."},{name:"APIx (kv-pix)",tech:"Next.js 14, TypeScript, Prisma",desc:"AI Image Generator powered by multiple providers (Grok, Meta, Whisk)."}],oS=[{name:"Dung Bui",title:"Senior Manager",company:"Adidas Group",contact:"dung.bui@adidas-group.com"},{name:"Wouter Pasman",title:"Graphic Designer",company:"FreshStudio.vn",contact:"0908074383"},{name:"Tran Nhuan Vu",title:"Marketing Mgr",company:"Element Mgmt",contact:"Vu.tran@element.vn"}],Ee={pageContainer:{width:"210mm",padding:"14mm 16mm",background:"#ffffff",fontFamily:"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",color:"#000000",fontSize:"9pt",lineHeight:"1.5",margin:"0 auto"},header:{borderBottom:"2px solid #000",paddingBottom:"4mm",marginBottom:"4mm"},name:{fontSize:"25pt",fontWeight:900,letterSpacing:"-0.02em",margin:"0 0 4px 0",lineHeight:"1"},title:{fontSize:"11pt",fontWeight:600,color:"#333",margin:"0 0 4mm 0",letterSpacing:"0.05em"},infoGrid:{display:"flex",flexWrap:"wrap",gap:"3mm 8mm",fontSize:"8pt",color:"#444"},sectionTitle:{fontSize:"11pt",fontWeight:800,textTransform:"uppercase",letterSpacing:"0.05em",borderBottom:"1px solid #ccc",paddingBottom:"1.5mm",margin:"5mm 0 3mm 0",color:"#000"},summary:{fontSize:"9pt",lineHeight:"1.5",margin:"0 0 4mm 0",textAlign:"justify"},skillGrid:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"2mm 5mm",marginBottom:"3mm"},experienceItem:{marginBottom:"4mm"},expHeader:{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:"1.5mm"},expRole:{fontSize:"10pt",fontWeight:700,margin:0},expCompany:{fontWeight:600,color:"#333"},expPeriod:{fontSize:"8pt",color:"#555",fontWeight:600},expList:{margin:"0",paddingLeft:"5mm"},expBullet:{marginBottom:"1mm",textAlign:"justify"},projectItem:{marginBottom:"2.5mm"},projectHeader:{fontWeight:700,fontSize:"9.5pt"},projectTech:{fontSize:"7.5pt",color:"#555",fontFamily:"monospace",marginLeft:"2mm"},refGrid:{display:"flex",justifyContent:"space-between",fontSize:"8pt",marginTop:"2mm"}};function aS(){return m.jsxs("div",{style:Ee.pageContainer,children:[m.jsxs("div",{style:Ee.header,children:[m.jsx("h1",{style:Ee.name,children:en.name}),m.jsx("div",{style:Ee.title,children:en.title}),m.jsxs("div",{style:Ee.infoGrid,children:[m.jsxs("span",{children:[m.jsx("strong",{children:"Email:"})," ",en.email]}),m.jsxs("span",{children:[m.jsx("strong",{children:"Phone:"})," ",en.phone]}),m.jsxs("span",{children:[m.jsx("strong",{children:"Location:"})," ",en.location]}),m.jsxs("span",{children:[m.jsx("strong",{children:"Portfolio:"})," ",en.portfolio]}),m.jsxs("span",{children:[m.jsx("strong",{children:"GitHub:"})," ",en.github]}),m.jsxs("span",{children:[m.jsx("strong",{children:"DOB:"})," ",en.dob]})]})]}),m.jsx("p",{style:Ee.summary,children:en.summary}),m.jsx("h2",{style:Ee.sectionTitle,children:"Core Competencies"}),m.jsx("div",{style:Ee.skillGrid,children:rS.map((n,r)=>m.jsxs("div",{children:[m.jsx("strong",{style:{display:"block",fontSize:"9pt",marginBottom:"1mm"},children:n.category}),m.jsx("span",{style:{fontSize:"8.5pt",color:"#333"},children:n.items})]},r))}),m.jsx("h2",{style:Ee.sectionTitle,children:"Work Experience"}),m.jsx("div",{children:iS.map((n,r)=>m.jsxs("div",{style:Ee.experienceItem,children:[m.jsxs("div",{style:Ee.expHeader,children:[m.jsxs("h3",{style:Ee.expRole,children:[n.role," ",m.jsx("span",{style:{fontWeight:400},children:"at"})," ",m.jsx("span",{style:Ee.expCompany,children:n.company})]}),m.jsx("span",{style:Ee.expPeriod,children:n.period})]}),m.jsx("ul",{style:Ee.expList,children:n.highlights.map((s,a)=>m.jsx("li",{style:Ee.expBullet,children:s},a))})]},r))}),m.jsx("h2",{style:Ee.sectionTitle,children:"Software Engineering Projects"}),m.jsx("div",{children:sS.map((n,r)=>m.jsxs("div",{style:Ee.projectItem,children:[m.jsx("span",{style:Ee.projectHeader,children:n.name}),m.jsxs("span",{style:Ee.projectTech,children:["[",n.tech,"]"]}),m.jsx("span",{style:{display:"block",fontSize:"8.5pt",color:"#333",marginTop:"1mm"},children:n.desc})]},r))}),m.jsx("h2",{style:Ee.sectionTitle,children:"Education"}),m.jsx("div",{style:{marginBottom:"6mm"},children:nS.map((n,r)=>m.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[m.jsx("strong",{children:n.school}),m.jsx("span",{children:n.degree}),m.jsx("span",{style:Ee.expPeriod,children:n.period})]},r))}),m.jsx("h2",{style:Ee.sectionTitle,children:"References"}),m.jsx("div",{style:Ee.refGrid,children:oS.map((n,r)=>m.jsxs("div",{children:[m.jsx("strong",{children:n.name}),m.jsx("br",{}),m.jsxs("span",{style:{color:"#555"},children:[n.title,", ",n.company]}),m.jsx("br",{}),m.jsx("span",{children:n.contact})]},r))})]})}const Ut={name:"Vo Nguyen Dang Khoa",phone:"0398300340",email:"vonguyendangkhoa@gmail.com",location:"Ho Chi Minh City, Vietnam",linkedin:"https://www.linkedin.com/in/khoa-vo-76291236/",portfolio:"https://khoavo.myds.me/"},Bt={title:"AI Creative Lead & Motion Designer",summary:"Visionary Creative Leader with 9+ years of expertise bridging brand strategy, digital design, motion graphics, and cutting-edge generative AI. Currently pioneering AI-augmented creative workflows at Phibious, merging traditional art direction with ComfyUI, Stable Diffusion, and FLUX to redefine what's possible in visual storytelling. Previously led eCommerce design at P&G, shaping digital experiences for millions of consumers across Southeast Asia.",tagline:"Where Design Meets Intelligence",skills:[{category:"AI & Generative Design",items:["ComfyUI","Stable Diffusion","FLUX","Midjourney","RunwayML","Ollama","LM Studio","LoRA Training","ControlNet","IP-Adapter"]},{category:"Design & Creative Tools",items:["Adobe Creative Suite","Figma","After Effects","Premiere Pro","Cinema 4D","Blender","Photoshop","Illustrator","InDesign"]},{category:"Motion & Animation",items:["Motion Graphics","3D Animation","Kinetic Typography","Visual Effects","Character Animation","Storyboarding"]},{category:"Brand & Strategy",items:["Brand Identity","Art Direction","Visual Storytelling","Editorial Design","Packaging Design","Strategic Design"]}],projects:[{id:1,title:"The Language of Poetry & Literature",category:"AI Generated Art",image:"https://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.",link:"https://khoavo.myds.me/2025/08/28/the-language-of-poetry-and-literature/",year:"2025"},{id:2,title:"Delux Perfume – Fineline 2025 Launch",category:"AI Branding & Video",image:"https://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.",link:"https://khoavo.myds.me/2025/08/11/giving-art-direction-to-a-brand-a-case-study/",year:"2025"},{id:3,title:"AI Studio Photography",category:"AI-Generated Branding",image:"https://khoavo.myds.me/wp-content/uploads/2025/07/img_0317.jpg",description:"Revolutionary approach to professional studio photography using AI. ComfyUI workflows with custom LoRA to generate studio-quality product and portrait images, reducing production costs by 70%.",link:"https://khoavo.myds.me/2025/07/27/%F0%9F%A7%A0%F0%9F%93%B8-ai-studio-i-can-do-that-too/",year:"2025"},{id:4,title:"NAVIGATOR – ASIAMARINE Magazine",category:"Editorial Design",image:"https://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.",link:"https://khoavo.myds.me/2020/10/20/navigator/",year:"2020"},{id:5,title:"PetroVietnam – PCT Corporate Identity",category:"Brand Identity & 3D",image:"https://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://khoavo.myds.me/2017/04/10/petrovietnam-pct/",year:"2017"},{id:6,title:"Skyxx – Animated Poster Series",category:"Motion Graphics",image:"https://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.",link:"https://khoavo.myds.me/2019/02/17/skyxx-poster-animation/",year:"2019"}],experience:[{role:"AI Creative Lead",company:"Phibious Vietnam",period:"2025 - Present",location:"Ho Chi Minh City",highlights:["Spearhead the integration of generative AI (ComfyUI, Stable Diffusion, FLUX) into creative workflows, reducing production time by 50%","Lead cross-functional teams of designers, copywriters, and data analysts to deliver technology-driven creative campaigns","Developed proprietary AI tools for mood boarding, concept visualization, and rapid prototyping","Created AI-augmented design concepts for digital and physical platforms serving Fortune 500 clients"]},{role:"eCommerce Design Lead",company:"Procter & Gamble (P&G)",period:"2020 - 2025",location:"Ho Chi Minh City",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"]},{role:"Production Creative Lead",company:"INN SaiGon",period:"Dec 2019 - Nov 2020",location:"Ho Chi Minh City",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%"]},{role:"Regional Head of Design",company:"ASIAMARINE",period:"2018 - 2019",location:"Ho Chi Minh City",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"]},{role:"Senior Graphic Designer",company:"EMG - Element Management Group",period:"2017 - 2018",location:"Ho Chi Minh City",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"]}],awards:[{title:"Best Digital Campaign",year:"2024",organization:"P&G SEA Digital Awards"},{title:"Outstanding Art Direction",year:"2019",organization:"Vietnam Design Awards"}]},yr={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.",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:"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:"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"]},projects:[{name:"KV-Tube",description:"YouTube-like video streaming platform with HLS support, subscriptions, watch history, 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",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)",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.",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"}],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"]}],forgejo:"https://git.khoavo.myds.me/vndangkhoa"},Hm=({size:n=36,vnColor:r="#1A1A1A",dkColor:s="#00FF94",className:a=""})=>m.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",width:n,height:n,fill:"none",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round",className:a,children:[m.jsx("path",{stroke:r,d:"M 15 25 L 30 45 L 45 25"}),m.jsx("path",{stroke:r,d:"M 55 45 L 55 25 L 85 45 L 85 25"}),m.jsx("path",{stroke:s,d:"M 15 55 L 30 55 A 10 10 0 0 1 30 75 L 15 75 Z"}),m.jsx("path",{stroke:s,d:"M 55 55 L 55 75 M 85 55 L 55 65 L 85 75"})]}),lS=({onSelect:n})=>{const[r,s]=_.useState(!1);return m.jsxs(pe.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0,y:-50},className:"fixed inset-0 overflow-hidden bg-[#FAFAFA]",children:[m.jsxs("div",{className:"relative w-full h-full flex flex-col items-center justify-center px-6",children:[m.jsxs("div",{className:"absolute inset-0 z-0",children:[m.jsx("div",{className:"absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-slate-100 blur-[120px] opacity-60 animate-pulse"}),m.jsx("div",{className:"absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-slate-200 blur-[120px] opacity-60 animate-pulse",style:{animationDelay:"2s"}})]}),m.jsx("div",{className:"absolute inset-0 opacity-[0.03] bg-[linear-gradient(rgba(0,0,0,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.1)_1px,transparent_1px)] bg-[size:60px_60px]"}),m.jsx("div",{className:"relative z-10 max-w-5xl w-full text-center",children:m.jsxs(pe.div,{initial:{y:30,opacity:0},animate:{y:0,opacity:1},transition:{duration:1,ease:[.22,1,.36,1]},children:[m.jsx("div",{className:"overflow-hidden mb-4 py-2 px-4",children:m.jsx(pe.h1,{initial:{y:"100%"},animate:{y:0},transition:{duration:1.2,ease:[.22,1,.36,1],delay:.2},className:"text-[clamp(2rem,6.5vw,7.5rem)] font-serif font-bold text-[#1A1A1A] tracking-tighter leading-tight whitespace-nowrap",style:{textShadow:"0 2px 4px rgba(0,0,0,0.02)"},children:"Vo Nguyen Dang Khoa"})}),m.jsx(pe.p,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:.8,delay:.8},className:"text-lg md:text-2xl font-serif text-[#1A1A1A]/70 mb-2 italic",children:"Where Design Meets Intelligence"}),m.jsx(pe.p,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.8,delay:1},className:"text-[10px] font-bold tracking-[0.4em] text-[#1A1A1A]/30 uppercase mb-10 md:mb-12",children:"AI Creative Lead & Motion Designer"}),m.jsxs("button",{onClick:()=>n("creative"),className:"hidden md:inline-flex items-center gap-3 px-10 py-5 bg-[#1A1A1A] text-white text-lg font-medium rounded-full hover:bg-black hover:scale-105 transition-all shadow-2xl border-4 border-transparent hover:border-black/5",children:["Explore Portfolio",m.jsx(pe.div,{animate:{x:[0,5,0]},transition:{repeat:1/0,duration:1.5,ease:"easeInOut"},children:m.jsx(kr,{size:22})})]}),m.jsxs("div",{className:"md:hidden flex flex-col gap-4 mt-8",children:[m.jsxs("button",{onClick:()=>n("creative"),className:"flex items-center justify-between px-6 py-5 bg-[#1A1A1A] text-white font-medium rounded-2xl shadow-xl active:scale-[0.98] transition-transform",children:[m.jsxs("span",{className:"flex items-center gap-3",children:[m.jsx(lo,{size:18})," Creative Portfolio"]}),m.jsx(kr,{size:18})]}),m.jsxs("button",{onClick:()=>n("it"),className:"flex items-center justify-between px-6 py-5 border border-[#1A1A1A]/10 text-[#1A1A1A] font-medium rounded-2xl bg-white/50 backdrop-blur-md shadow-sm active:scale-[0.98] transition-transform",children:[m.jsxs("span",{className:"flex items-center gap-3",children:[m.jsx(eu,{size:18})," Developer Side"]}),m.jsx(kr,{size:18})]}),m.jsx("p",{className:"text-[10px] tracking-widest text-[#999] uppercase mt-2 opacity-60",children:"Select a persona to enter"})]})]})}),m.jsx(pe.div,{initial:{opacity:.5},animate:{opacity:r?0:.5},className:"absolute bottom-12 text-sm text-[#BBB] hidden md:block",children:m.jsxs("span",{className:"flex items-center gap-4",children:[m.jsx("span",{className:"w-12 h-px bg-[#BBB]"}),"Hover right to preview Developer side",m.jsx("span",{className:"w-12 h-px bg-[#BBB]"})]})})]}),m.jsxs(pe.div,{className:"absolute inset-y-0 right-0 w-full md:w-[75%] bg-[#0a0a0a] cursor-pointer hidden md:block z-40 border-l border-[#00FF94]/30",initial:{x:"calc(100% - 60px)"},animate:{x:r?"0%":"calc(100% - 60px)"},transition:{duration:.6,ease:[.22,1,.36,1]},onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),onClick:()=>n("it"),children:[!r&&m.jsx(pe.div,{initial:{opacity:0},animate:{opacity:1},className:"absolute left-0 inset-y-0 w-[60px] flex items-center justify-center pointer-events-none",children:m.jsx("span",{className:"rotate-90 text-[10px] tracking-[0.5em] text-[#00FF94]/40 font-mono whitespace-nowrap",children:"DEVELOPER SIDE // PREVIEW"})}),m.jsx("div",{className:"absolute inset-0 opacity-[0.04] bg-[linear-gradient(rgba(0,255,136,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(0,255,136,0.1)_1px,transparent_1px)] bg-[size:25px_25px]"}),m.jsx("div",{className:"relative z-10 w-full h-full flex flex-col items-center justify-center px-8",children:m.jsxs("div",{className:"max-w-md text-center",children:[m.jsx(eu,{size:56,className:"text-[#00FF94] mx-auto mb-6"}),m.jsx("h2",{className:"text-4xl md:text-5xl font-bold text-white font-mono mb-2",children:"DEVELOPER"}),m.jsx("p",{className:"text-[#00FF94]/70 font-mono text-sm tracking-[0.3em] mb-8",children:"FULL-STACK & DEVOPS"}),m.jsxs("p",{className:"text-slate-400 font-mono text-base mb-8 leading-relaxed",children:["9-month coding journey.",m.jsx("br",{}),"Built 5+ production applications.",m.jsx("br",{}),"Self-taught with AI-powered development."]}),m.jsxs("button",{className:"inline-flex items-center gap-2 px-8 py-4 border-2 border-[#00FF94]/40 bg-[#00FF94]/10 text-[#00FF94] font-mono text-base rounded-full hover:bg-[#00FF94]/20 transition-colors",children:["Enter Terminal ",m.jsx(kr,{size:18})]}),m.jsxs("div",{className:"mt-10 font-mono text-sm text-[#00FF94]/40 text-left space-y-2",children:[m.jsxs("div",{children:[m.jsx("span",{className:"text-[#00D9FF]",children:"const"}),' stack = ["Go", "Rust", "TS"];']}),m.jsxs("div",{children:[m.jsx("span",{className:"text-[#00D9FF]",children:"const"})," deployed = 5;"]}),m.jsxs("div",{children:[m.jsx("span",{className:"text-[#00D9FF]",children:"const"}),' vibe = "S-Tier";']})]})]})})]}),m.jsx(pe.div,{initial:{opacity:0},animate:{opacity:r?0:1},transition:{duration:.4},className:"absolute top-8 left-6 md:left-8 z-50 text-[10px] md:text-lg",children:m.jsxs("div",{className:"text-[#1A1A1A] font-serif font-bold tracking-widest flex items-center gap-2",children:["KHOA.VO ",m.jsx("span",{className:"w-4 md:w-8 h-px bg-[#1A1A1A]/30"})]})})]})},uS=({onComplete:n})=>{const r=_.useRef(null);return _.useEffect(()=>{const s=window.innerWidth,a=window.innerHeight,u=Math.floor(s/8)+5,f=Math.floor(a/10)+5;let d=0;const h=()=>{d+=.08;let y="";for(let v=0;v1.5?y+="V":C>.8?y+="N":C>.2?y+="D":C>-.2?y+="K":C>-.8?y+="→":C>-1.2?y+="←":C>-1.8?y+="↑":y+="↓"}y+=` + */const eu=Ct("Terminal",[["polyline",{points:"4 17 10 11 4 5",key:"akl6gq"}],["line",{x1:"12",x2:"20",y1:"19",y2:"19",key:"q2wloq"}]]),en={name:"VO NGUYEN DANG KHOA",title:"AI CREATIVE LEAD & SOFTWARE DEVELOPER",dob:"19/01/1993",phone:"0398300340",email:"vonguyendangkhoa@gmail.com",location:"Ho Chi Minh City, Vietnam",portfolio:"khoavo.myds.me",github:"git.khoavo.myds.me/vndangkhoa",summary:"Highly accomplished Creative Leader bridging the gap between artistic direction and high-performance software engineering. With over 9+ years managing brand strategies and digital design, I evaluate and execute technology-driven projects from concept to production. Specialized in merging traditional creative direction with cutting-edge generative AI workflows (ComfyUI, FLUX) and full-stack development (Go, React)."},nS=[{period:"12/2012 - 06/2016",school:"RMIT Vietnam",degree:"Bachelor of Multimedia System Design (Graduated with Excellence)"}],rS=[{category:"Creative & AI Tools",items:"Adobe Creative Suite (Ps, Ai, Id, Pr), ComfyUI, Stable Diffusion, FLUX, Ollama, 3D Animation, Motion Graphics"},{category:"Development Stack",items:"React, Next.js, Go (Gin), Rust (Axum), Python (FastAPI), TypeScript, Tailwind CSS"},{category:"Infrastructure",items:"Docker, SQLite, Synology NAS Deployment, HLS Video Streaming"},{category:"Leadership",items:"Cross-Functional Management, Creative Strategy, Technical Mentorship, Process Optimization"}],iS=[{role:"AI Creative Lead",company:"Phibious Viet Nam",period:"06/2024 - Present",highlights:["Manage highly complex, technology-driven creative projects, merging traditional design with advanced generative AI models and data analytics.","Deploy and utilize ComfyUI, Stable Diffusion, FLUX, and local LLMs (Ollama, LM Studio) to augment design workflows and drive overarching agency strategies.","Lead cross-functional collaboration between traditional designers, copywriters, and data analysts to ensure measurable campaign performance.","Optimize internal design processes by integrating advanced image generation pipelines into daily operations.","Train and mentor the broader agency (including interns) on core AI design competencies and prompt engineering."]},{role:"eCOM Design Lead",company:"Procter & Gamble (P&G) Vietnam",period:"09/2023 - 06/2025",highlights:["Spearheaded strategic design concepts and visual strategies for e-commerce, directly impacting consumer engagement and online sales for Hair Care brands.","Managed end-to-end medium-to-large design projects, actively improving internal design processes and ensuring strict corporate standard compliance.","Collaborated globally across functional geographic boundaries and cross-functional teams to deliver cohesive brand stories."]},{role:"ECOM Graphic Designer (ABM)",company:"P&G Viet Nam",period:"11/2020 - 09/2023",highlights:["Built concepts and executed visual strategy across vast consumer touchpoints including packaging, eCommerce, and social media under the Hair Care Packaging Design Studio.","Leveraged hands-on design mastery to craft illustrations and brand expressions that consistently met high commercial demands.","Ensured brand guidelines and directives were embraced consistently and creatively across all regional platforms."]},{role:"Production Creative Lead",company:"Inn Saigon",period:"12/2019 - 11/2020",highlights:["Led the photography and production team, setting the standard for internal branding deliverables (Food, Product, Events).","Managed project budgets, retouching workflows, and cross-team communications to deliver high-volume outcomes.","Conducted frequent feedback sessions to boost performance and facilitate the development of team members."]},{role:"Regional Head of Design",company:"ASIAMARINE",period:"12/2018 - 12/2019",highlights:["Supervised all creation of concepts and layouts across digital/offline marketing for luxury marine sectors.","Managed independent contractors and junior designers, leveraging creative marketing to develop targeted campaigns."]},{role:"Senior Graphic Designer",company:"EMG",period:"12/2017 - 12/2018",highlights:["Created outstanding digital and print designs, managing corporate identity, merchandise, and digital displays.","Assisted with concept proposals to clients including mockup preparations and asset sourcing."]},{role:"Graphic Artist",company:"Le Meridien Saigon",period:"12/2016 - 12/2017",highlights:["Designed and executed all promotional collateral according to strict Le Meridien brand identity guidelines.","Liaised with external suppliers to ensure creative print quality and deadlines were consistently met."]},{role:"Animation Designer",company:"Adidas Group",period:"06/2016 - 12/2016",highlights:["Developed graphics and animations for production environment simulations (Line Balancing, One Pair Flow).","Compiled and edited video infographics for visual training purposes."]}],sS=[{name:"KV-Tube",tech:"Go (Gin), Next.js, SQLite, Docker, HLS.js",desc:"YouTube-like video streaming platform with HLS support, subscriptions, and Synology NAS deployment."},{name:"Spotify Clone",tech:"React, Rust (Axum), YouTube API",desc:"Full-featured music player with real-time lyrics and custom playlists."},{name:"APIx (kv-pix)",tech:"Next.js 14, TypeScript, Prisma",desc:"AI Image Generator powered by multiple providers (Grok, Meta, Whisk)."}],oS=[{name:"Dung Bui",title:"Senior Manager",company:"Adidas Group",contact:"dung.bui@adidas-group.com"},{name:"Wouter Pasman",title:"Graphic Designer",company:"FreshStudio.vn",contact:"0908074383"},{name:"Tran Nhuan Vu",title:"Marketing Mgr",company:"Element Mgmt",contact:"Vu.tran@element.vn"}],Ee={pageContainer:{width:"210mm",padding:"14mm 16mm",background:"#ffffff",fontFamily:"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",color:"#000000",fontSize:"9pt",lineHeight:"1.5",margin:"0 auto"},header:{borderBottom:"2px solid #000",paddingBottom:"4mm",marginBottom:"4mm"},name:{fontSize:"25pt",fontWeight:900,letterSpacing:"-0.02em",margin:"0 0 4px 0",lineHeight:"1"},title:{fontSize:"11pt",fontWeight:600,color:"#333",margin:"0 0 4mm 0",letterSpacing:"0.05em"},infoGrid:{display:"flex",flexWrap:"wrap",gap:"3mm 8mm",fontSize:"8pt",color:"#444"},sectionTitle:{fontSize:"11pt",fontWeight:800,textTransform:"uppercase",letterSpacing:"0.05em",borderBottom:"1px solid #ccc",paddingBottom:"1.5mm",margin:"5mm 0 3mm 0",color:"#000"},summary:{fontSize:"9pt",lineHeight:"1.5",margin:"0 0 4mm 0",textAlign:"justify"},skillGrid:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"2mm 5mm",marginBottom:"3mm"},experienceItem:{marginBottom:"4mm"},expHeader:{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:"1.5mm"},expRole:{fontSize:"10pt",fontWeight:700,margin:0},expCompany:{fontWeight:600,color:"#333"},expPeriod:{fontSize:"8pt",color:"#555",fontWeight:600},expList:{margin:"0",paddingLeft:"5mm"},expBullet:{marginBottom:"1mm",textAlign:"justify"},projectItem:{marginBottom:"2.5mm"},projectHeader:{fontWeight:700,fontSize:"9.5pt"},projectTech:{fontSize:"7.5pt",color:"#555",fontFamily:"monospace",marginLeft:"2mm"},refGrid:{display:"flex",justifyContent:"space-between",fontSize:"8pt",marginTop:"2mm"}};function aS(){return m.jsxs("div",{style:Ee.pageContainer,children:[m.jsxs("div",{style:Ee.header,children:[m.jsx("h1",{style:Ee.name,children:en.name}),m.jsx("div",{style:Ee.title,children:en.title}),m.jsxs("div",{style:Ee.infoGrid,children:[m.jsxs("span",{children:[m.jsx("strong",{children:"Email:"})," ",en.email]}),m.jsxs("span",{children:[m.jsx("strong",{children:"Phone:"})," ",en.phone]}),m.jsxs("span",{children:[m.jsx("strong",{children:"Location:"})," ",en.location]}),m.jsxs("span",{children:[m.jsx("strong",{children:"Portfolio:"})," ",en.portfolio]}),m.jsxs("span",{children:[m.jsx("strong",{children:"GitHub:"})," ",en.github]}),m.jsxs("span",{children:[m.jsx("strong",{children:"DOB:"})," ",en.dob]})]})]}),m.jsx("p",{style:Ee.summary,children:en.summary}),m.jsx("h2",{style:Ee.sectionTitle,children:"Core Competencies"}),m.jsx("div",{style:Ee.skillGrid,children:rS.map((n,r)=>m.jsxs("div",{children:[m.jsx("strong",{style:{display:"block",fontSize:"9pt",marginBottom:"1mm"},children:n.category}),m.jsx("span",{style:{fontSize:"8.5pt",color:"#333"},children:n.items})]},r))}),m.jsx("h2",{style:Ee.sectionTitle,children:"Work Experience"}),m.jsx("div",{children:iS.map((n,r)=>m.jsxs("div",{style:Ee.experienceItem,children:[m.jsxs("div",{style:Ee.expHeader,children:[m.jsxs("h3",{style:Ee.expRole,children:[n.role," ",m.jsx("span",{style:{fontWeight:400},children:"at"})," ",m.jsx("span",{style:Ee.expCompany,children:n.company})]}),m.jsx("span",{style:Ee.expPeriod,children:n.period})]}),m.jsx("ul",{style:Ee.expList,children:n.highlights.map((s,a)=>m.jsx("li",{style:Ee.expBullet,children:s},a))})]},r))}),m.jsx("h2",{style:Ee.sectionTitle,children:"Software Engineering Projects"}),m.jsx("div",{children:sS.map((n,r)=>m.jsxs("div",{style:Ee.projectItem,children:[m.jsx("span",{style:Ee.projectHeader,children:n.name}),m.jsxs("span",{style:Ee.projectTech,children:["[",n.tech,"]"]}),m.jsx("span",{style:{display:"block",fontSize:"8.5pt",color:"#333",marginTop:"1mm"},children:n.desc})]},r))}),m.jsx("h2",{style:Ee.sectionTitle,children:"Education"}),m.jsx("div",{style:{marginBottom:"6mm"},children:nS.map((n,r)=>m.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[m.jsx("strong",{children:n.school}),m.jsx("span",{children:n.degree}),m.jsx("span",{style:Ee.expPeriod,children:n.period})]},r))}),m.jsx("h2",{style:Ee.sectionTitle,children:"References"}),m.jsx("div",{style:Ee.refGrid,children:oS.map((n,r)=>m.jsxs("div",{children:[m.jsx("strong",{children:n.name}),m.jsx("br",{}),m.jsxs("span",{style:{color:"#555"},children:[n.title,", ",n.company]}),m.jsx("br",{}),m.jsx("span",{children:n.contact})]},r))})]})}const Ut={name:"Vo Nguyen Dang Khoa",phone:"0398300340",email:"vonguyendangkhoa@gmail.com",location:"Ho Chi Minh City, Vietnam",linkedin:"https://www.linkedin.com/in/khoa-vo-76291236/",portfolio:"https://khoavo.myds.me/"},Bt={title:"AI Creative Lead & Motion Designer",summary:"Visionary Creative Leader with 9+ years of expertise bridging brand strategy, digital design, motion graphics, and cutting-edge generative AI. Currently pioneering AI-augmented creative workflows at Phibious, merging traditional art direction with ComfyUI, Stable Diffusion, and FLUX to redefine what's possible in visual storytelling. Previously led eCommerce design at P&G, shaping digital experiences for millions of consumers across Southeast Asia.",tagline:"Where Design Meets Intelligence",skills:[{category:"AI & Generative Design",items:["ComfyUI","Stable Diffusion","FLUX","Midjourney","RunwayML","Ollama","LM Studio","LoRA Training","ControlNet","IP-Adapter"]},{category:"Design & Creative Tools",items:["Adobe Creative Suite","Figma","After Effects","Premiere Pro","Cinema 4D","Blender","Photoshop","Illustrator","InDesign"]},{category:"Motion & Animation",items:["Motion Graphics","3D Animation","Kinetic Typography","Visual Effects","Character Animation","Storyboarding"]},{category:"Brand & Strategy",items:["Brand Identity","Art Direction","Visual Storytelling","Editorial Design","Packaging Design","Strategic Design"]}],projects:[{id:1,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.",link:"https://portfolio.khoavo.myds.me/2025/08/28/the-language-of-poetry-and-literature/",year:"2025"},{id:2,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.",link:"https://portfolio.khoavo.myds.me/2025/08/11/giving-art-direction-to-a-brand-a-case-study/",year:"2025"},{id:3,title:"AI Studio Photography",category:"AI-Generated Branding",image:"https://portfolio.khoavo.myds.me/wp-content/uploads/2025/07/img_0317.jpg",description:"Revolutionary approach to professional studio photography using AI. ComfyUI workflows with custom LoRA to generate studio-quality product and portrait images, reducing production costs by 70%.",link:"https://portfolio.khoavo.myds.me/2025/07/27/%F0%9F%A7%A0%F0%9F%93%B8-ai-studio-i-can-do-that-too/",year:"2025"},{id:4,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.",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,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.",link:"https://portfolio.khoavo.myds.me/2019/02/17/skyxx-poster-animation/",year:"2019"}],experience:[{role:"AI Creative Lead",company:"Phibious Vietnam",period:"2025 - Present",location:"Ho Chi Minh City",highlights:["Spearhead the integration of generative AI (ComfyUI, Stable Diffusion, FLUX) into creative workflows, reducing production time by 50%","Lead cross-functional teams of designers, copywriters, and data analysts to deliver technology-driven creative campaigns","Developed proprietary AI tools for mood boarding, concept visualization, and rapid prototyping","Created AI-augmented design concepts for digital and physical platforms serving Fortune 500 clients"]},{role:"eCommerce Design Lead",company:"Procter & Gamble (P&G)",period:"2020 - 2025",location:"Ho Chi Minh City",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"]},{role:"Production Creative Lead",company:"INN SaiGon",period:"Dec 2019 - Nov 2020",location:"Ho Chi Minh City",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%"]},{role:"Regional Head of Design",company:"ASIAMARINE",period:"2018 - 2019",location:"Ho Chi Minh City",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"]},{role:"Senior Graphic Designer",company:"EMG - Element Management Group",period:"2017 - 2018",location:"Ho Chi Minh City",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"]}],awards:[{title:"Best Digital Campaign",year:"2024",organization:"P&G SEA Digital Awards"},{title:"Outstanding Art Direction",year:"2019",organization:"Vietnam Design Awards"}]},yr={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.",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:"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:"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"]},projects:[{name:"KV-Tube",description:"YouTube-like video streaming platform with HLS support, subscriptions, watch history, 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",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)",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.",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"}],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"]}],forgejo:"https://git.khoavo.myds.me/vndangkhoa"},Hm=({size:n=36,vnColor:r="#1A1A1A",dkColor:s="#00FF94",className:a=""})=>m.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",width:n,height:n,fill:"none",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round",className:a,children:[m.jsx("path",{stroke:r,d:"M 15 25 L 30 45 L 45 25"}),m.jsx("path",{stroke:r,d:"M 55 45 L 55 25 L 85 45 L 85 25"}),m.jsx("path",{stroke:s,d:"M 15 55 L 30 55 A 10 10 0 0 1 30 75 L 15 75 Z"}),m.jsx("path",{stroke:s,d:"M 55 55 L 55 75 M 85 55 L 55 65 L 85 75"})]}),lS=({onSelect:n})=>{const[r,s]=_.useState(!1);return m.jsxs(pe.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0,y:-50},className:"fixed inset-0 overflow-hidden bg-[#FAFAFA]",children:[m.jsxs("div",{className:"relative w-full h-full flex flex-col items-center justify-center px-6",children:[m.jsxs("div",{className:"absolute inset-0 z-0",children:[m.jsx("div",{className:"absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-slate-100 blur-[120px] opacity-60 animate-pulse"}),m.jsx("div",{className:"absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-slate-200 blur-[120px] opacity-60 animate-pulse",style:{animationDelay:"2s"}})]}),m.jsx("div",{className:"absolute inset-0 opacity-[0.03] bg-[linear-gradient(rgba(0,0,0,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.1)_1px,transparent_1px)] bg-[size:60px_60px]"}),m.jsx("div",{className:"relative z-10 max-w-5xl w-full text-center",children:m.jsxs(pe.div,{initial:{y:30,opacity:0},animate:{y:0,opacity:1},transition:{duration:1,ease:[.22,1,.36,1]},children:[m.jsx("div",{className:"overflow-hidden mb-4 py-2 px-4",children:m.jsx(pe.h1,{initial:{y:"100%"},animate:{y:0},transition:{duration:1.2,ease:[.22,1,.36,1],delay:.2},className:"text-[clamp(2rem,6.5vw,7.5rem)] font-serif font-bold text-[#1A1A1A] tracking-tighter leading-tight whitespace-nowrap",style:{textShadow:"0 2px 4px rgba(0,0,0,0.02)"},children:"Vo Nguyen Dang Khoa"})}),m.jsx(pe.p,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:.8,delay:.8},className:"text-lg md:text-2xl font-serif text-[#1A1A1A]/70 mb-2 italic",children:"Where Design Meets Intelligence"}),m.jsx(pe.p,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.8,delay:1},className:"text-[10px] font-bold tracking-[0.4em] text-[#1A1A1A]/30 uppercase mb-10 md:mb-12",children:"AI Creative Lead & Motion Designer"}),m.jsxs("button",{onClick:()=>n("creative"),className:"hidden md:inline-flex items-center gap-3 px-10 py-5 bg-[#1A1A1A] text-white text-lg font-medium rounded-full hover:bg-black hover:scale-105 transition-all shadow-2xl border-4 border-transparent hover:border-black/5",children:["Explore Portfolio",m.jsx(pe.div,{animate:{x:[0,5,0]},transition:{repeat:1/0,duration:1.5,ease:"easeInOut"},children:m.jsx(kr,{size:22})})]}),m.jsxs("div",{className:"md:hidden flex flex-col gap-4 mt-8",children:[m.jsxs("button",{onClick:()=>n("creative"),className:"flex items-center justify-between px-6 py-5 bg-[#1A1A1A] text-white font-medium rounded-2xl shadow-xl active:scale-[0.98] transition-transform",children:[m.jsxs("span",{className:"flex items-center gap-3",children:[m.jsx(lo,{size:18})," Creative Portfolio"]}),m.jsx(kr,{size:18})]}),m.jsxs("button",{onClick:()=>n("it"),className:"flex items-center justify-between px-6 py-5 border border-[#1A1A1A]/10 text-[#1A1A1A] font-medium rounded-2xl bg-white/50 backdrop-blur-md shadow-sm active:scale-[0.98] transition-transform",children:[m.jsxs("span",{className:"flex items-center gap-3",children:[m.jsx(eu,{size:18})," Developer Side"]}),m.jsx(kr,{size:18})]}),m.jsx("p",{className:"text-[10px] tracking-widest text-[#999] uppercase mt-2 opacity-60",children:"Select a persona to enter"})]})]})}),m.jsx(pe.div,{initial:{opacity:.5},animate:{opacity:r?0:.5},className:"absolute bottom-12 text-sm text-[#BBB] hidden md:block",children:m.jsxs("span",{className:"flex items-center gap-4",children:[m.jsx("span",{className:"w-12 h-px bg-[#BBB]"}),"Hover right to preview Developer side",m.jsx("span",{className:"w-12 h-px bg-[#BBB]"})]})})]}),m.jsxs(pe.div,{className:"absolute inset-y-0 right-0 w-full md:w-[75%] bg-[#0a0a0a] cursor-pointer hidden md:block z-40 border-l border-[#00FF94]/30",initial:{x:"calc(100% - 60px)"},animate:{x:r?"0%":"calc(100% - 60px)"},transition:{duration:.6,ease:[.22,1,.36,1]},onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),onClick:()=>n("it"),children:[!r&&m.jsx(pe.div,{initial:{opacity:0},animate:{opacity:1},className:"absolute left-0 inset-y-0 w-[60px] flex items-center justify-center pointer-events-none",children:m.jsx("span",{className:"rotate-90 text-[10px] tracking-[0.5em] text-[#00FF94]/40 font-mono whitespace-nowrap",children:"DEVELOPER SIDE // PREVIEW"})}),m.jsx("div",{className:"absolute inset-0 opacity-[0.04] bg-[linear-gradient(rgba(0,255,136,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(0,255,136,0.1)_1px,transparent_1px)] bg-[size:25px_25px]"}),m.jsx("div",{className:"relative z-10 w-full h-full flex flex-col items-center justify-center px-8",children:m.jsxs("div",{className:"max-w-md text-center",children:[m.jsx(eu,{size:56,className:"text-[#00FF94] mx-auto mb-6"}),m.jsx("h2",{className:"text-4xl md:text-5xl font-bold text-white font-mono mb-2",children:"DEVELOPER"}),m.jsx("p",{className:"text-[#00FF94]/70 font-mono text-sm tracking-[0.3em] mb-8",children:"FULL-STACK & DEVOPS"}),m.jsxs("p",{className:"text-slate-400 font-mono text-base mb-8 leading-relaxed",children:["9-month coding journey.",m.jsx("br",{}),"Built 5+ production applications.",m.jsx("br",{}),"Self-taught with AI-powered development."]}),m.jsxs("button",{className:"inline-flex items-center gap-2 px-8 py-4 border-2 border-[#00FF94]/40 bg-[#00FF94]/10 text-[#00FF94] font-mono text-base rounded-full hover:bg-[#00FF94]/20 transition-colors",children:["Enter Terminal ",m.jsx(kr,{size:18})]}),m.jsxs("div",{className:"mt-10 font-mono text-sm text-[#00FF94]/40 text-left space-y-2",children:[m.jsxs("div",{children:[m.jsx("span",{className:"text-[#00D9FF]",children:"const"}),' stack = ["Go", "Rust", "TS"];']}),m.jsxs("div",{children:[m.jsx("span",{className:"text-[#00D9FF]",children:"const"})," deployed = 5;"]}),m.jsxs("div",{children:[m.jsx("span",{className:"text-[#00D9FF]",children:"const"}),' vibe = "S-Tier";']})]})]})})]}),m.jsx(pe.div,{initial:{opacity:0},animate:{opacity:r?0:1},transition:{duration:.4},className:"absolute top-8 left-6 md:left-8 z-50 text-[10px] md:text-lg",children:m.jsxs("div",{className:"text-[#1A1A1A] font-serif font-bold tracking-widest flex items-center gap-2",children:["KHOA.VO ",m.jsx("span",{className:"w-4 md:w-8 h-px bg-[#1A1A1A]/30"})]})})]})},uS=({onComplete:n})=>{const r=_.useRef(null);return _.useEffect(()=>{const s=window.innerWidth,a=window.innerHeight,u=Math.floor(s/8)+5,f=Math.floor(a/10)+5;let d=0;const h=()=>{d+=.08;let y="";for(let v=0;v1.5?y+="V":C>.8?y+="N":C>.2?y+="D":C>-.2?y+="K":C>-.8?y+="→":C>-1.2?y+="←":C>-1.8?y+="↑":y+="↓"}y+=` `}return y},g=setInterval(()=>{r.current&&(r.current.textContent=h())},50),x=setTimeout(()=>{clearInterval(g),n()},5e3);return()=>{clearInterval(g),clearTimeout(x)}},[n]),m.jsxs(pe.div,{exit:{opacity:0,scale:1.05,filter:"blur(5px)",transition:{duration:.8,ease:[.76,0,.24,1]}},className:"fixed inset-0 z-[200] bg-[#FAFAFA] flex items-center justify-center overflow-hidden",children:[m.jsx("pre",{ref:r,className:"text-[#1A1A1A] font-mono font-bold italic text-[10px] md:text-xs leading-[10px] md:leading-[12px] opacity-30 select-none whitespace-pre transform scale-110",style:{letterSpacing:"0.15em"}}),m.jsxs("button",{onClick:n,className:"absolute bottom-8 right-8 z-[210] flex items-center gap-2 text-[10px] md:text-xs font-bold tracking-[0.2em] uppercase text-[#1A1A1A]/50 hover:text-[#1A1A1A] transition-colors bg-white/80 px-4 py-2 backdrop-blur-sm rounded",children:["Click to Skip ",m.jsx("span",{className:"opacity-50",children:"→"})]})]})},cS=({onComplete:n})=>{const[r,s]=_.useState([]),a=["INIT SYSTEM KHOA.VO...","MOUNTING VIRTUAL DOM [OK]","LOADING REACT ROOT [OK]","ESTABLISHING AI SUBSYSTEMS...","AI SUBSYSTEMS [ONLINE]","BYPASSING SECURITY PROTOCOLS...","ACCESS GRANTED."];return _.useEffect(()=>{let u=0;const f=setInterval(()=>{u[...d,a[u]]),u++):(clearInterval(f),setTimeout(n,500))},180);return()=>clearInterval(f)},[n]),m.jsx(pe.div,{exit:{opacity:0,scale:1.05,filter:"blur(10px)",transition:{duration:.6,ease:"easeIn"}},className:"fixed inset-0 z-[200] bg-[#0a0a0a] text-[#00FF94] font-mono p-6 md:p-12 flex flex-col justify-end pb-24",children:m.jsxs("div",{className:"space-y-2 opacity-80 text-sm md:text-base",children:[r.map((u,f)=>m.jsxs("div",{children:["> ",u]},f)),r.length ▋"})]})})},dS=({onBack:n,onSwitch:r})=>{const[s,a]=_.useState(!0),[u,f]=_.useState(!1),[d,h]=_.useState(null),[g,x]=_.useState([]);_.useEffect(()=>{const v=()=>{f(window.scrollY>400)};return window.addEventListener("scroll",v),()=>window.removeEventListener("scroll",v)},[]);const y=()=>{window.scrollTo({top:0,behavior:"smooth"})};return _.useEffect(()=>{if(s)return;const v=setTimeout(()=>{x(Bt.projects.map(w=>w.id))},500);return()=>clearTimeout(v)},[s]),m.jsxs(m.Fragment,{children:[m.jsx(Tr,{children:s&&m.jsx(uS,{onComplete:()=>a(!1)})}),m.jsxs(pe.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:"min-h-screen bg-[#FAFAFA] text-[#1A1A1A]",children:[m.jsx("nav",{className:"fixed top-0 left-0 right-0 z-50 bg-[#FAFAFA]/90 backdrop-blur-sm border-b border-[#1A1A1A]/10",children:m.jsxs("div",{className:"max-w-7xl mx-auto px-4 md:px-6 h-16 flex items-center justify-between",children:[m.jsxs("button",{onClick:n,className:"p-2 flex items-center gap-1.5 text-sm md:text-base text-[#1A1A1A]/60 hover:text-[#1A1A1A] transition-colors",children:[m.jsx(bm,{size:18})," ",m.jsx("span",{className:"hidden md:inline",children:"Back"})]}),m.jsx("div",{className:"flex items-center justify-center",children:m.jsx(Hm,{size:36,vnColor:"#1A1A1A",dkColor:"#00FF94"})}),m.jsxs("div",{className:"flex items-center gap-2",children:[m.jsxs("button",{onClick:()=>window.print(),className:"px-3 py-1.5 text-[10px] md:text-xs font-bold uppercase tracking-widest text-[#1A1A1A] border border-[#1A1A1A] rounded-full hover:bg-[#1A1A1A] hover:text-white transition-colors flex items-center gap-2",children:[m.jsx("span",{className:"hidden md:inline",children:"Download CV"}),m.jsx("span",{className:"md:hidden",children:"CV"})]}),m.jsxs("button",{onClick:r,className:"px-4 py-2 text-[10px] md:text-xs text-white bg-[#1A1A1A] border border-[#1A1A1A] rounded-full hover:bg-transparent hover:text-[#1A1A1A] transition-colors flex items-center gap-2",children:[m.jsx(eu,{size:14})," ",m.jsx("span",{className:"hidden md:inline",children:"IT View"}),m.jsx("span",{className:"md:hidden",children:"IT"})]})]})]})}),m.jsx(Tr,{children:u&&m.jsx(pe.button,{initial:{opacity:0,scale:.8,y:20},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.8,y:20},onClick:y,className:"fixed bottom-8 right-6 z-50 p-4 bg-[#1A1A1A] text-white rounded-full shadow-2xl md:hidden",children:m.jsx(kr,{size:20,className:"-rotate-90"})})}),m.jsxs("main",{className:"pt-20",children:[m.jsx("section",{className:"max-w-5xl mx-auto px-6 py-24 md:py-32",children:m.jsxs(pe.div,{initial:{opacity:0,y:30},animate:{opacity:1,y:0},transition:{duration:.8},children:[m.jsx("p",{className:"text-xs tracking-[0.3em] text-[#666] uppercase mb-4",children:Bt.title}),m.jsx("h1",{className:"text-5xl md:text-7xl font-serif font-bold leading-tight mb-4",children:Bt.tagline}),m.jsx("p",{className:"text-2xl md:text-3xl font-serif text-[#666] mb-8",children:Ut.name}),m.jsx("p",{className:"text-lg text-[#666] max-w-2xl leading-relaxed",children:Bt.summary}),m.jsxs("div",{className:"flex flex-wrap gap-4 mt-8 text-sm text-[#999]",children:[m.jsxs("span",{className:"flex items-center gap-1",children:[m.jsx(Zh,{size:14})," ",Ut.location]}),m.jsxs("span",{className:"flex items-center gap-1",children:[m.jsx(Jl,{size:14})," ",Ut.email]}),m.jsxs("span",{className:"flex items-center gap-1",children:[m.jsx(tS,{size:14})," ",Ut.phone]})]})]})}),Bt.awards&&Bt.awards.length>0&&m.jsx("section",{className:"max-w-5xl mx-auto px-6 pb-16",children:m.jsx("div",{className:"flex flex-wrap gap-6",children:Bt.awards.map((v,w)=>m.jsxs(pe.div,{initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{delay:w*.1},className:"flex items-center gap-3 bg-[#F5F5F5] px-4 py-2 rounded-full",children:[m.jsx(lo,{size:14,className:"text-amber-500"}),m.jsx("span",{className:"text-sm font-medium",children:v.title}),m.jsx("span",{className:"text-xs text-[#999]",children:v.year})]},w))})}),m.jsxs("section",{className:"max-w-7xl mx-auto px-6 py-16",children:[m.jsxs(pe.div,{initial:{opacity:0},whileInView:{opacity:1},viewport:{once:!0},className:"flex items-center gap-4 mb-12",children:[m.jsx(eS,{size:20}),m.jsx("h2",{className:"text-2xl font-serif font-bold",children:"Selected Works"})]}),m.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",children:Bt.projects.map((v,w)=>m.jsxs(pe.div,{initial:{opacity:0,y:30},animate:{opacity:g.includes(v.id)?1:0,y:g.includes(v.id)?0:30},transition:{duration:.6,delay:w*.1},className:"group cursor-pointer",onClick:()=>h(v),children:[m.jsxs("div",{className:"relative aspect-[4/3] overflow-hidden bg-slate-200 mb-4",children:[m.jsx("img",{src:v.image,alt:v.title,className:"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"}),m.jsx("div",{className:"absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"}),m.jsx("span",{className:"absolute top-4 right-4 bg-white/90 px-3 py-1 text-xs font-medium",children:v.year})]}),m.jsx("p",{className:"text-xs tracking-widest text-[#666] uppercase mb-1",children:v.category}),m.jsx("h3",{className:"text-lg font-serif font-semibold group-hover:text-[#666] transition-colors",children:v.title})]},v.id))})]}),m.jsxs("section",{className:"max-w-7xl mx-auto px-6 py-16 bg-[#F5F5F5]",children:[m.jsxs(pe.div,{initial:{opacity:0},whileInView:{opacity:1},viewport:{once:!0},className:"flex items-center gap-4 mb-12",children:[m.jsx(lo,{size:20}),m.jsx("h2",{className:"text-2xl font-serif font-bold",children:"Expertise"})]}),m.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8",children:Bt.skills.map((v,w)=>m.jsxs(pe.div,{initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{delay:w*.1},children:[m.jsx("h3",{className:"text-sm font-bold text-[#1A1A1A] mb-4 pb-2 border-b border-[#1A1A1A]/10",children:v.category}),m.jsx("div",{className:"flex flex-wrap gap-2",children:v.items.map(C=>m.jsx("span",{className:"text-xs text-[#666] bg-white px-3 py-1 border border-[#1A1A1A]/10",children:C},C))})]},v.category))})]}),m.jsxs("section",{className:"max-w-5xl mx-auto px-6 py-16",children:[m.jsxs(pe.div,{initial:{opacity:0},whileInView:{opacity:1},viewport:{once:!0},className:"flex items-center gap-4 mb-12",children:[m.jsx(Jw,{size:20}),m.jsx("h2",{className:"text-2xl font-serif font-bold",children:"Professional Journey"})]}),m.jsxs("div",{className:"relative",children:[m.jsx("div",{className:"absolute left-0 top-0 bottom-0 w-px bg-[#1A1A1A]/10"}),m.jsx("div",{className:"space-y-10",children:Bt.experience.map((v,w)=>m.jsxs(pe.div,{initial:{opacity:0,x:-30},whileInView:{opacity:1,x:0},viewport:{once:!0},transition:{delay:w*.1},className:"relative pl-8",children:[m.jsx("div",{className:"absolute left-[-3px] top-2 w-2 h-2 bg-[#1A1A1A] rounded-full"}),m.jsxs("div",{className:"flex flex-col md:flex-row md:items-start gap-2 md:gap-6 mb-2",children:[m.jsx("div",{className:"text-sm font-medium text-[#1A1A1A] shrink-0",children:v.period}),m.jsxs("div",{children:[m.jsx("h3",{className:"text-xl font-bold text-[#1A1A1A]",children:v.role}),m.jsxs("div",{className:"flex items-center gap-2 text-[#666] mt-1",children:[m.jsx("span",{className:"font-medium",children:v.company}),v.location&&m.jsxs(m.Fragment,{children:[m.jsx("span",{className:"text-[#999]",children:"•"}),m.jsx("span",{className:"text-sm",children:v.location})]})]})]})]}),m.jsx("ul",{className:"text-[#666] space-y-2 mt-3",children:v.highlights.map((C,N)=>m.jsxs("li",{className:"leading-relaxed flex items-start gap-2",children:[m.jsx("span",{className:"w-1.5 h-1.5 bg-[#1A1A1A]/30 rounded-full mt-2 shrink-0"}),m.jsx("span",{children:C})]},N))})]},w))})]})]}),m.jsxs("footer",{className:"max-w-7xl mx-auto px-6 py-16 border-t border-[#1A1A1A]/10",children:[m.jsxs("div",{className:"flex flex-col md:flex-row justify-between items-center gap-8",children:[m.jsxs("div",{children:[m.jsx("h3",{className:"text-2xl font-serif font-bold mb-2",children:"Let's Create Together"}),m.jsx("p",{className:"text-[#666]",children:"Open for creative collaborations and opportunities"})]}),m.jsxs("div",{className:"flex gap-4",children:[m.jsx("a",{href:Ut.linkedin,target:"_blank",rel:"noreferrer",className:"p-3 border border-[#1A1A1A]/20 hover:bg-[#1A1A1A] hover:text-white transition-colors",children:m.jsx(Wm,{size:20})}),m.jsx("a",{href:Ut.email,className:"p-3 border border-[#1A1A1A]/20 hover:bg-[#1A1A1A] hover:text-white transition-colors",children:m.jsx(Jl,{size:20})}),m.jsx("a",{href:Ut.portfolio,target:"_blank",rel:"noreferrer",className:"p-3 border border-[#1A1A1A]/20 hover:bg-[#1A1A1A] hover:text-white transition-colors",children:m.jsx(Zh,{size:20})})]})]}),m.jsxs("p",{className:"text-center text-xs text-[#999] mt-12",children:["© ",new Date().getFullYear()," Vo Nguyen Dang Khoa. All rights reserved."]})]})]}),m.jsx(Tr,{children:d&&m.jsx(pe.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm p-8",onClick:()=>h(null),children:m.jsxs(pe.div,{initial:{scale:.9,y:20},animate:{scale:1,y:0},exit:{scale:.9,y:20},className:"bg-[#FAFAFA] max-w-4xl w-full rounded-lg overflow-hidden",onClick:v=>v.stopPropagation(),children:[m.jsx("img",{src:d.image,alt:d.title,className:"w-full h-64 md:h-96 object-cover"}),m.jsxs("div",{className:"p-8",children:[m.jsx("p",{className:"text-xs tracking-widest text-[#666] uppercase mb-2",children:d.category}),m.jsx("h3",{className:"text-2xl font-serif font-bold mb-4",children:d.title}),m.jsx("p",{className:"text-[#666] mb-6",children:d.description}),m.jsxs("a",{href:d.link,target:"_blank",rel:"noreferrer",className:"inline-flex items-center gap-2 text-sm font-medium text-[#1A1A1A] border-b border-[#1A1A1A] pb-1 hover:opacity-60",children:["View Project ",m.jsx(Um,{size:14})]})]})]})})})]})]})},fS=({onBack:n,onSwitch:r})=>{const[s,a]=_.useState(!0),[u,f]=_.useState("about"),[d,h]=_.useState(""),[g,x]=_.useState(!1),y=`> whoami Vo Nguyen Dang Khoa diff --git a/dist/index.html b/dist/index.html index e2a5987..c3452da 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,7 +5,7 @@ Khoa Vo - AI Creative Lead - + diff --git a/src/App.jsx b/src/App.jsx index 9987c32..c2fffe9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -36,54 +36,54 @@ const CREATIVE_DATA = { id: 1, title: "The Language of Poetry & Literature", category: "AI Generated Art", - image: "https://khoavo.myds.me/wp-content/uploads/2025/08/i2i_1756355661_62547902.png", + 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.", - link: "https://khoavo.myds.me/2025/08/28/the-language-of-poetry-and-literature/", + link: "https://portfolio.khoavo.myds.me/2025/08/28/the-language-of-poetry-and-literature/", year: "2025" }, { id: 2, title: "Delux Perfume – Fineline 2025 Launch", category: "AI Branding & Video", - image: "https://khoavo.myds.me/wp-content/uploads/2025/08/Delux-Perfume_red.png", + 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.", - link: "https://khoavo.myds.me/2025/08/11/giving-art-direction-to-a-brand-a-case-study/", + link: "https://portfolio.khoavo.myds.me/2025/08/11/giving-art-direction-to-a-brand-a-case-study/", year: "2025" }, { id: 3, title: "AI Studio Photography", category: "AI-Generated Branding", - image: "https://khoavo.myds.me/wp-content/uploads/2025/07/img_0317.jpg", + image: "https://portfolio.khoavo.myds.me/wp-content/uploads/2025/07/img_0317.jpg", description: "Revolutionary approach to professional studio photography using AI. ComfyUI workflows with custom LoRA to generate studio-quality product and portrait images, reducing production costs by 70%.", - link: "https://khoavo.myds.me/2025/07/27/%F0%9F%A7%A0%F0%9F%93%B8-ai-studio-i-can-do-that-too/", + link: "https://portfolio.khoavo.myds.me/2025/07/27/%F0%9F%A7%A0%F0%9F%93%B8-ai-studio-i-can-do-that-too/", year: "2025" }, { id: 4, title: "NAVIGATOR – ASIAMARINE Magazine", category: "Editorial Design", - image: "https://khoavo.myds.me/wp-content/uploads/2020/10/navigator-vol1_page_001.webp", + 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.", - link: "https://khoavo.myds.me/2020/10/20/navigator/", + 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://khoavo.myds.me/wp-content/uploads/2017/04/cip_mockup2.png", + 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://khoavo.myds.me/2017/04/10/petrovietnam-pct/", + link: "https://portfolio.khoavo.myds.me/2017/04/10/petrovietnam-pct/", year: "2017" }, { id: 6, title: "Skyxx – Animated Poster Series", category: "Motion Graphics", - image: "https://khoavo.myds.me/wp-content/uploads/2019/04/aash-3-scaled.jpg", + 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.", - link: "https://khoavo.myds.me/2019/02/17/skyxx-poster-animation/", + link: "https://portfolio.khoavo.myds.me/2019/02/17/skyxx-poster-animation/", year: "2019" } ],