š Design Prompt ā One-Page Portfolio (Apple/Frutiger Glass Aesthetic)
Overall Concept
A single-page portfolio with segmented animated tabs (About, Skills, Projects, Contact). The entire interface has a glassmorphism / macOS Big Sur style, with translucent panels, blurred backgrounds, soft shadows, and smooth animations.
š¹ Layout & Structure
Hero Section (Top)
Centered name + tagline (āRechner ā Full Stack Developerā).
Background: subtle gradient aurora (like macOS wallpapers) or soft blurred particles.
Animated typing effect tagline (āCoding ⢠Debugging ⢠Creatingā).
Floating download CV button styled like an iOS button (pill-shaped, glassy).
Navigation (Segmented Tabs)
A floating macOS-style tab bar (rounded, glass effect).
Tabs: About | Skills | Projects | Contact.
Active tab has a subtle glow/blurred highlight.
Tab switch ā smooth slide + fade animation.
Section Designs
About Me
Glassy card with profile photo in a circle frame.
Minimal text bio, with soft fade-in.
Skills
Grid of iOS-style app icons (each skill inside a glassy rounded square).
Hover: subtle bounce + glow.
Projects
Project cards = frosted glass panels with screenshot blurred into the background.
Hover: card expands slightly, project title + links fade in.
Contact
Large, glassy form/input fields with macOS-like focus glow.
Social links (GitHub, LinkedIn) as 3D glass buttons.
š¹ Animation & Effects
Glassmorphism:
Background blur (backdrop-filter: blur(20px))
Transparent white/black with low opacity
Soft shadows for floating look
Tab Transitions:
Smooth horizontal slide with opacity fade.
Hover Effects:
Glow + scale-up animation (like iOS icons).
Background:
Gradient waves / aurora motion / subtle particles.
š¹ Style Guide
Color Palette:
White & black with transparency (rgba(255,255,255,0.2) on dark background).
Accent: Neon blue / cyan glow (like macOS highlight).
Background: Dark gradient (deep navy ā soft purple).
Typography:
Headings: SF Pro Display (Apple system font).
Body: SF Pro Text or Inter.
UI Shapes:
Rounded corners (2xl).
Soft depth shadows.
š¹ Bonus Apple-like Touches
Dark/Light Mode Toggle with smooth transition.
Dock-style project showcase (projects scale up on hover like the macOS dock).
Glass āSpotlight Searchā style contact bar at the bottom.