Ultra-high-resolution, premium light-mode web application profile page mockup for "SkillMatch" — a modern skill-matching platform. Clean, professional 2026 enterprise UI/UX style inspired by Linear, Vercel, Supabase, Notion, and Framer. Strict light mode color palette: - Page background: soft gradient #F8FAFC → #FFFFFF - Cards / sections: pure white #FFFFFF with delicate 1px #E2E8F0 borders + subtle soft drop shadow - Primary text / headings / labels: deep navy #052659 - Secondary / muted text: slate gray #475569 / #64748B - Primary buttons / active states / links: vibrant blue #5483B3 - Hover / highlights / subtle accents / progress bars: soft cyan #C1E8FF - Success / save indicators: fresh green #10B981 Full-page layout in a realistic browser window: - Top header / sticky nav bar: "SkillMatch" logo left (#052659), user avatar right (circular, #C1E8FF hover ring), breadcrumb "Home > My Profile" - Main content: centered, card-based layout with generous whitespace Sections from top to bottom: 1. Profile Header Card: - Large circular avatar upload area (placeholder image or camera icon) - Editable full name field (#052659 text) - Job title / role / student status field - Short bio textarea - Location / department tag (pill style #C1E8FF bg) 2. Skills & Proficiency Section: - "My Skills" heading (#052659) - Multi-select tag input for adding skills (e.g., React, Python, Kubernetes) — tags as rounded pills with remove × - For each skill: proficiency level slider or segmented control (Beginner → Intermediate → Expert) with #C1E8FF track + #5483B3 fill - "Add Skill" button (#5483B3 bg, white text, #C1E8FF hover glow) 3. Endorsements / Recommendations: - List of peer endorsements: small avatars + endorser name + skill + comment snippet - "View All Endorsements" link in #5483B3 4. Activity / Stats (optional card): - Small stats: "Help Sessions Given: 12", "Requests Received: 8", "Average Rating: 4.8 ★" in #C1E8FF highlights 5. Action Buttons bottom-right (sticky or in footer): - "Save Changes" primary button (#5483B3 bg, white text, #C1E8FF hover) - "Cancel" secondary button (#E2E8F0 bg, #052659 text) UI details: - Rounded corners 12–20px on all cards/inputs/buttons - Hover states: inputs focus ring #C1E8FF, cards lift + soft #C1E8FF glow - Clean line icons (Lucide/Feather style) tinted #5483B3 / #C1E8FF - Modern sans-serif typography (Inter / SF Pro), excellent spacing & hierarchy - Glassmorphism subtle inner glow on cards, soft layered depth Composition: balanced, centered, cinematic soft natural lighting, vector-sharp, ultra-detailed, 16:9 landscape, presentation-ready for pitch decks / websites. Top title overlay in deep navy #052659 elegant font with subtle #C1E8FF shadow: "SkillMatch – My Profile Page (Light Mode)" Strict color usage: #052659 #5483B3 #C1E8FF + light neutrals only. No dark mode elements.