JIT
designing a glassmorphism one-page portfolio for a full stack developer
šŸ 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.
Updated files
v1
the contents sliding is bad, when i go to other tabs there are no contents
Updated files
v2
make the header or hero fixed location, dont make it move, only the about skills projects contact contents will move
Updated files
v3
add proper 15px spacing each cars
Updated files
v4