7 months ago
🎨 UI/UX Design Prompt — Portfolio Website for KOUAKOU DOUAM DUHAUB Goal: Design a high-end, developer-centric portfolio website that reflects a modern, polished, and unique identity. This portfolio must stand out from typical templates, showcasing the full technical journey, professional experience, and personal brand of a Fullstack Developer specialized in TypeScript, React, Node.js, and modern web technologies. 🔑 Key Objectives: Modern and clean UI, with a distinct tech-savvy aesthetic. Design must feel like a curated digital product, not just a resume. Highly interactive but with natural, elegant animations. Designed with scalability and mobile responsiveness in mind. Ensure performance, accessibility (WCAG), and clean layout hierarchy. 🧠 Design Vibe / Aesthetic Direction: Minimalist with flair – sharp, airy, modular. Mix of glassmorphism, soft shadows, and subtle gradients. Bold, readable typography with developer-friendly fonts. Switchable Dark/Light Mode with personality. Soft micro-interactions, scroll effects, and smooth transitions (Framer Motion-inspired). 📐 Page Sections & Functionality: Hero Section Full-screen intro with a soft animated background (e.g., particles, gradients, or glass layer). Headline: "Hi, I'm Douam — Fullstack Developer specialized in performant web applications using TypeScript, React & Node.js." Subheadline + animated tech stack slider or floating badges (React, Next.js, Node, Firebase, etc). Include an “Available for collaboration” status badge. Tech Stack Section Create a radial skill wheel or horizontal interactive slider. Skills grouped by Frontend / Backend / DevOps / Testing Tools. Hover states with mastery level indicators ("Expert", "Proficient", etc). Subtle icon animations per skill group. Experience Timeline Smooth vertical scroll timeline or interactive slider with expand-on-click details. Each experience includes: Role, dates, company. Stack tags. Key contributions. Code preview or short project GIF if applicable. Well-defined chronological flow with visual differentiation between roles. Projects Showcase Break away from classic grids. Use modular project cards or staggered blocks. Each card includes: Screenshot mockup (styled browser window or floating card). Stack tags. Hover effects with preview or “See More” modal view. Buttons: View Live • Source Code • Tech Stack. Highlight at least one “Featured Project” with spotlight style and scroll parallax. About Me Split layout: photo/avatar + short bio + timeline of background. Subsections: “Who I Am” – brief intro. “What Drives Me” – values with illustrative icons. “My Background” – educational path timeline. Contact Section Beautiful, minimal contact form. Input animations (on focus glow, label transitions). CTA: "Let’s build something great together." Include direct channels: Email, LinkedIn, GitHub, WhatsApp. 💡 Bonus Ideas to Include Terminal-style interactive command line (e.g., typing portfolio highlights). Live chat bubble styled like a dev terminal window. Loading screen mimicking code editor booting animation. Clean mobile-first design that feels like a native app. Language switcher (FR/EN) optional if space allows. 🎨 Design Language Typography: Sora, Inter, or JetBrains Mono. Color Palette: Neutral base (dark gray/white) with bold tech accents (indigo, cyan, lime, or purple). Styling: Large rounded corners (2xl). Fluid layout grid. Soft shadows and consistent padding. Framer Motion-level transitions. ⚙️ Performance & Accessibility Prioritize speed and responsiveness (to be implemented on Next.js + Vercel). WCAG-compliant contrast and color use. Keyboard-friendly design with clear focus states. Final Note: This website must feel like a tool created by a developer, for developers, not just a design showcase. It should capture the personality, passion, and technical maturity of the profile, with intuitive UX and standout visual identity