Ctrl+K
Design an ultra-creative developer portfolio that looks like it belongs in a top design agency: LAYOUT CONCEPT: - Break traditional web conventions with asymmetric grid system - Overlapping sections using CSS Grid and absolute positioning - Diagonal cuts between sections using clip-path CSS - Geometric shapes as visual separators (triangles, circles, hexagons) - Content containers at various angles for dynamic visual interest VISUAL DESIGN: - Bold color palette: #ff6b6b (coral), #4ecdc4 (teal), #45b7d1 (blue), #96ceb4 (mint) - Typography mix: Playfair Display (serif) for large headings, Inter (sans) for body - High-contrast black and white photography with color overlays - Custom illustrated icons and hand-drawn elements - Duotone image effects using the brand color palette HERO SECTION: - Split diagonal layout: large portrait photo on left (60%), animated text on right (40%) - Photo: black and white with coral color overlay on hover - Text animations: glitch effects on name, color-changing job title, kinetic typography - Background: animated geometric shapes floating and rotating slowly - Interactive elements: mouse movement affects shape positions PROJECT SHOWCASE: - Masonry layout (Pinterest-style) with varying card heights - Projects as polaroid-style cards with drop shadows and slight rotations (-5° to +5°) - Handwritten fonts for project titles (Caveat or similar) - Each card: project image, handwritten title, tech stack as sketched icons - Hover effects: cards straighten and lift with 3D transforms - Click interaction: expand to full-screen overlay with project details - Categories: Web Design, Brand Identity, Digital Art, Code Experiments INTERACTIONS: - Parallax scrolling: background elements move at different speeds - Custom animated cursor: changes size and color based on hover targets - Smooth page transitions between sections using GSAP or similar - Micro-interactions: buttons squish on click, links underline on hover - Scroll-triggered animations: elements slide in from different directions CREATIVE ELEMENTS: - Hand-drawn doodles as navigation arrows and bullet points - Animated SVG illustrations that react to mouse proximity - Background: subtle video loop or animated gradient patterns - Custom loading screen with brand animation (geometric shapes forming logo) - Interactive "easter eggs" hidden throughout the site ABOUT SECTION: - Comic book style layout with speech bubbles for personal story - Illustrated timeline showing career progression as a visual journey - Interactive skill meters designed as hand-drawn progress bars - Personal photos in polaroid frames scattered around the content - "Fun facts" section with playful icons and animations CONTACT SECTION: - Creative form design: labels as handwritten notes, inputs as sketch boxes - Animated send button that transforms into a paper airplane - Contact info displayed as business card design with letterpress effect - Social media links as hand-drawn social icons with hover animations - Background: animated constellation connecting contact methods DESIGN DETAILS: - Torn paper edges between sections - Watercolor brush stroke backgrounds for text sections - Vintage postage stamp elements for project categories - Hand-lettered quotes and testimonials throughout - Grunge textures and distressed elements for artistic flair This should feel more like an interactive art installation than a traditional website! - Initial Deployment
32cb5a1
verified