Create a stunning, modern personal portfolio website for a professional web developer. The design should be clean, visually appealing, and fully responsive across all devices. The portfolio must use a modern UI/UX approach with smooth animations and transitions for an engaging user experience. The tech stack includes HTML5, CSS3 (TailwindCSS preferred), JavaScript (or React for SPA), and optional Framer Motion for animations. Key Features & Sections: Header & Navigation Sticky navigation bar with a transparent background that turns solid on scroll. Smooth scrolling to page sections. Animated hamburger menu for mobile view. Hero Section Full-screen hero with a high-quality background image or gradient. Animated introduction text (e.g., “Hi, I’m Kennedy” with typing or fade-in effect). Call-to-action button with hover effects (e.g., “View My Work”). Option for a Lottie animation or SVG illustration. About Me Section Profile photo in a circular frame with a hover zoom effect. Short bio with highlighted keywords using gradient text. Animated skill bars or icons with hover interactions. Skills Section Grid layout of skills with modern iconography. Hover effect: scale-up + shadow. Optional animated progress bars or radial charts for proficiency. Portfolio / Projects Section Grid or masonry layout for project cards. Each project card includes an image, title, description, and tech stack badges. On hover: smooth scale-up effect with overlay and “View Project” button. Modal or lightbox popup for project details. Services Section (Optional) Three to four cards for services offered (e.g., Web Development, App Development, UI/UX Design). Animated entry with fade-up or slide-in. Contact Section Modern form with floating labels and glassmorphism background. Integration with EmailJS or Formspree for email sending. Social media icons with hover animations (e.g., scale + color change). Footer Minimalistic footer with copyright. Quick links and social media icons. Modern Styling Guidelines Use TailwindCSS for fast and consistent styling. Implement Glassmorphism or Neumorphism elements for a modern feel. Use gradients (bg-gradient-to-r) for section headers or hero background. Smooth hover effects with transition-all duration-300 ease-in-out. Include dark mode toggle with smooth color transitions. Animations & Transitions Animate section entrances on scroll using AOS (Animate On Scroll) or Framer Motion. Button hover effects: subtle scaling + shadow pop. Typing effect for the hero text using Typed.js or CSS keyframes. Smooth page transitions when navigating sections. Technical Requirements Responsive design (mobile-first). SEO-friendly structure with proper meta tags. Performance optimized (lazy loading images, compressed assets). Deployable on GitHub Pages, Vercel, or Netlify. Color Palette & Fonts Modern gradient tones (e.g., purple → blue, teal → cyan). Use Google Fonts like Poppins, Inter, or Roboto for a clean look. Bonus Features Downloadable resume button. Interactive theme switcher (dark/light). Optional Parallax scrolling effect in the hero section. Personal Details Section Title: "Personal Details" or "More About Me". Display a different high-quality image (e.g., you working on a laptop, coding environment, or professional setting). Layout: Left side: Image with a modern frame (rounded corners, shadow, or glassmorphism). Right side: A structured list of personal information in two columns, such as: Full Name Date of Birth Location Email Phone Languages Each detail has an icon (use Lucide or Font Awesome) and a hover animation. Add Download CV button styled with gradient and hover transition. Animations: Image: Fade-in from left. Details: Slide-in from right with a delay for each row. Button: Scale-up on hover with subtle glow. Styling Ideas Use TailwindCSS classes: grid md:grid-cols-2 gap-8 p-6 bg-white/10 rounded-2xl backdrop-blur-lg shadow-lg. Font: Poppins or Inter for readability. Add gradient text headers using bg-gradient-to-r from-purple-500 to-cyan-400 bg-clip-text text-transparent. - Initial Deployment
b08f6aa
verified
metadata
title: latest-portfolio
emoji: 🐳
colorFrom: pink
colorTo: yellow
sdk: static
pinned: false
tags:
- deepsite
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference