personal-portfolio

byAbdullah Jameel

Build a premium personal portfolio website for me called “ADEEL SHARIF”. IMPORTANT: Use the uploaded photo of me as the main visual reference and hero background. Do NOT generate or replace my face. Use my uploaded image exactly as provided. DESIGN STYLE: Create an ultra-premium Apple-inspired personal website with: - Minimal luxury aesthetic - Liquid Glass / glassmorphism UI - Smooth translucent glass cards - Subtle blur and reflections - Soft gradients - Black / white / dark gray color palette - Large cinematic typography - Lots of clean negative space - Smooth premium animations - Subtle parallax effects - Soft hover interactions - Elegant micro-animations - Fully responsive on iPhone, Android, tablet and desktop The website must NOT look like a generic AI-generated template. It should feel like a professionally designed Apple-style personal website made by a top UI/UX designer. HERO SECTION: Use my uploaded portrait as the full-screen background/hero image. Create a cinematic split/blur effect around the image: - Keep my face sharp and natural - Background can have subtle blur and glass distortion - Add a very soft dark gradient overlay for readability - Add subtle floating glass particles/light reflections - Do not alter my face, body, clothing or appearance Hero text: “ADEEL SHARIF” Small subtitle: “Digital Creator • Social Media • Lifestyle” Add a minimal glass button: “Explore My World ↓” SOCIAL MEDIA SECTION: Create a premium glass section titled: “CONNECT WITH ME” Add exactly TWO social media cards. 1. Instagram Username: @adeelishere Use the official Instagram logo. Button: “Follow on Instagram” 2. TikTok Username: @mr.adeelishere Use the official TikTok logo. Button: “Follow on TikTok” Each card should be a floating translucent glass card with: - Social media logo - Username - Platform name - Premium hover animation - Clickable link - Smooth magnetic/scale hover effect Use these links: Instagram: https://www.instagram.com/adeelishere/ TikTok: https://www.tiktok.com/@mr.adeelishere NAVIGATION: Create a very minimal floating glass navigation bar at the top. Logo/text: ADEEL.SHARIF Navigation: Home Socials About Make the navbar transparent glass with backdrop blur and subtle border. ABOUT SECTION: Create a short elegant section: “More than a profile. A digital identity.” Add a short modern paragraph describing me as a digital creator and social media personality. Do not invent fake achievements, companies, statistics or awards. VISUAL EFFECTS: Add premium effects such as: - Liquid glass distortion - Glass reflections - Cursor-following light - Subtle background glow - Smooth scroll - Fade/slide reveal animations - Hover depth - Very subtle 3D movement - Parallax hero image - Glass morphing transitions Keep animations smooth and elegant. Do NOT make them excessive. BACKGROUND: The uploaded photo should remain the main identity of the website. Create a cinematic layered background using the same photo: - Main photo layer - Slightly blurred enlarged photo behind it - Dark gradient - Very subtle glass/liquid distortion This should create a premium depth effect without changing my actual photo. TYPOGRAPHY: Use a modern Apple-style font such as Inter, SF Pro-style system font, or another premium clean sans-serif. Use large bold typography for headings and thin/light typography for secondary text. MOBILE FIRST: The website must look especially premium on iPhone screens. Make sure: - No horizontal scrolling - Hero image is properly cropped - Text remains readable - Social cards stack beautifully - Navigation becomes a clean mobile glass menu - Animations remain smooth on mobile - Fast loading TECHNICAL REQUIREMENTS: Build the complete working website, not a mockup. Use: - React - TypeScript - Tailwind CSS - Framer Motion or an equivalent animation library - Clean reusable components - Responsive design - Optimized image loading - Semantic HTML - SEO metadata - Open Graph metadata Add a custom favicon using the initials: “AS” Website branding: ADEEL.SHARIF Do not add unnecessary sections, fake testimonials, fake statistics, pricing, blog posts or contact forms. FINAL GOAL: When someone opens the website, it should immediately feel like a high-end personal website created by a professional designer — similar to the visual quality and simplicity of an Apple product website, with premium liquid-glass aesthetics. The uploaded photo, my identity, and the two social media accounts are the main focus. Make the final result extremely clean, cinematic, modern, luxurious and minimal.