"Build a cinematic, mood-shifting portfolio website that transforms its entire identity based on the user’s selected specialization (Frontend, Mobile, Backend). Treat each theme as a digital universe with its own physics, aesthetics, and personality.
🌈 Core Vision A single-page app that’s three portfolios in one, using theme switching as storytelling. Visitors don’t just scroll—they step into new dimensions.
🎨 Theme 1: ‘The Frontend Garden’ Design Mantra: “Where UI components bloom.” Immersive Features:
Living Background: CSS grid lines that grow like vines, connecting hoverable project cards.
Playground Elements:
A draggable CSS slider controlling background brightness.
A floating “style switcher” panel (CSS variables editor) that changes button shapes (rounded → square → pill).
Glassmorphic windows showing live Codepen embeds of your projects.
Micro-Interactions:
Buttons sprout tiny leaves on hover.
Form inputs auto-validate with confetti bursts.
Scroll-triggered animations where text splits into individual <div> letters.
Easter Egg: Clicking the logo 3 times turns the cursor into a CSS :hover inspector.
Transition Trigger: Clicking “Mobile” causes the screen to fold into a paper airplane and fly into a phone mockup.
📱 Theme 2: ‘App Nebula’ Design Mantra: “A universe inside your pocket.” Immersive Features:
Device Realism:
An iPhone 15 Pro Max mockup with a dynamic OLED-like black background.
Status bar updates in real-time (fake signal bars, battery percentage that drains as the user interacts).
“Lock screen” preview showing notifications for your latest projects.
App Metaphors:
Projects displayed as iOS-style Home Screen icons that wobble in “edit mode.”
A “Settings” page with a toggle to switch between Light/Dark mode (alters the phone’s bezel color).
Swipe-down gesture reveals a “Control Center” with your contact links.
Haptic Illusions:
Buttons depress with Material Design-like ripple animations.
Scrolling through projects triggers subtle “tick” vibrations via CSS translateY jitters.
Transition Trigger: Clicking “Backend” makes the phone screen glitch into terminal code.
🖥️ Theme 3: ‘The Server Labyrinth’ Design Mantra: “Architecture as art.” Immersive Features:
Cyberpunk Infrastructure:
An isometric 3D server farm (Three.js) with blinking node lights representing skills.
Hovering over a server node shows its specs (e.g., “Node.js | 8GB RAM | 99.9% uptime”).
Animated data packets (glowing spheres) travel between servers when projects load.
Terminal Personality:
A persistent CLI at the bottom of the screen logs visitor actions (“[LOG] User clicked ‘Projects’ → fetching repos...”).
Ctrl + K opens a modal where users can type UNIX-style commands (cat bio.txt, ls projects/).
Dark Humor:
404 pages show “API Rate Limit Exceeded” jokes.
Hovering the avatar turns it into a “BSOD” (Blue Screen of Death) parody.
Transition Trigger: Clicking “Frontend” triggers a server explosion that reforms into CSS grid lines.
🌌 Global Features Adaptive Avatar:
Frontend: A designer holding a color palette.
Mobile: A developer swiping on a phone.
Backend: A sysadmin with Matrix-style code rain glasses.
Soundscapes (optional):
Frontend: Subtle pen-on-paper sketching sounds during animations.
Mobile: iOS keyboard clicks during form inputs.
Backend: Server hums and terminal keystrokes.
Smart Loading:
Frontend: Skeleton screens made of wireframe Figma components.
Mobile: iOS-style “spinner” dots that bounce.
Backend: Progress bars disguised as [=====>] 75% terminal commands.
Secret Interactions:
Drawing a star with the mouse in Backend theme unlocks a mini-game to “debug” a server.
Shaking the phone mockup (via device motion) triggers a “Rotate Device” animation.
⚙️ Technical Poetry Animations: GSAP for complex sequences (e.g., phone mockup unfolding).
3D Elements: Three.js for server labyrinths and CSS transforms for isometric grids.
Performance: Lazy-load themes as WebGL shaders or CSS @keyframes.
Accessibility: ARIA labels change with themes (“Entering Mobile universe: 3 tabs available”).
Final Note to AI: "Make the code as creative as the design—experiment with CSS clip-path for theme transitions, Web Audio API for soundscapes, and Intersection Observer for scroll-triggered surprises. Prioritize ‘wow factor’ over convention, but keep the UX intuitive."
I've created a cinematic, mood-shifting portfolio website that transforms its entire identity based on the user's selected specialization. The website features three distinct themes, each with its own unique aesthetics, interactions, and personality.
The code is organized into modular components, with each theme having its own dedicated file. The main page handles the theme switching logic, while the context provider ensures theme state is maintained throughout the application.
To try it out, simply click on the theme switcher buttons at the bottom of the screen to experience each unique digital universe!
The code returns the following error:
Illegal return statement
Revise the code to address the error.
I'll fix the "Illegal return statement" error in the code. The issue is likely in the Three.js implementation in the backend-theme.tsx file.
I've fixed the error in the backend-theme.tsx file. The issue was in the Three.js renderer setup section where there was a duplicated and truncated line of code that was causing the "Illegal return statement" error.
The problematic code had an incomplete line that was trying to set the renderer size again, but it was truncated in the middle, causing the syntax error. I've removed the duplicated and incomplete line, keeping only the correct renderer setup code.
This should resolve the error and allow the application to run properly. The Three.js scene should now render correctly in the Backend theme, showing the 3D server farm with animated data packets as intended.
The code returns the following error:
Illegal return statement
Revise the code to address the error.