azure-portfolio
Hannan AhmadBuild a fully professional, modern portfolio website for a developer named Hannan Ahmad, specializing in Web Development, 3D Animation, and 3D Design. 1. Design Style Dark premium theme (black / charcoal base) Neon gradient accents (blue, purple, cyan) High-end UI/UX (Awwwards-level design) Smooth animations and transitions Minimal but premium layout 2. 3D Experience Use Three.js for interactive 3D elements 3D model in hero section (mouse + touch responsive) Objects must rotate and react to cursor movement Smooth lighting, shadows, and reflections Mobile touch interaction support 3. Website Sections Hero Section Name: Hannan Ahmad Title: Web Developer & 3D Designer Animated 3D object background CTA buttons (Contact / View Work) About Section Short professional introduction of Hannan Ahmad Services Web Development 3D Animation 3D Design Portfolio Project grid with hover 3D tilt effects Filter categories Contact Section Include contact form (Name, Email, Message) 4. Contact Information (IMPORTANT) Add clickable social/contact icons: WhatsApp: +923160395445 → Direct chat link: https://wa.me/923160395445� Email: hannix847@gmail.com → mailto link Instagram: hanni_ahmadx11 → https://instagram.com/hanni_ahmadx11� X (Twitter): @khalidaper91733 → https://twitter.com/khalidaper91733� Facebook: https://www.facebook.com/share/1DoCLQRne7/� All icons must be modern, clean SVG or Font Awesome, with hover glow and smooth animation. 5. UI/UX Requirements Fully responsive (mobile, tablet, desktop) Sticky glassmorphism navbar Smooth scrolling navigation Hover glow effects on buttons and icons Clean spacing and premium layout 6. 3D & Animation Interactive 3D hero object (Three.js) Mouse/touch responsive rotation GSAP or Framer Motion animations Scroll-based effects (fade, parallax, slide) Portfolio cards with 3D hover tilt 7. Tech Stack Three.js (3D) React preferred (or clean HTML/CSS/JS) GSAP or Framer Motion Fully production-ready structure Goal Create a premium, high-converting portfolio website for Hannan Ahmad that showcases skills in Web Development and 3D design with modern interactive UI and fully functional contact/social integration.
Comments (0)
Sign in to leave a comment
Project Tasks10
Implement Theme and Structure
As a visitor, I want to experience a consistent dark premium theme across all pages so that the site feels cohesive and professional. Implement the global color palette (#121212 background, #1E1E2E surface, #FFFFFF text, #00FFFF accent, #6A6A8E muted), typography, glassmorphism navbar, neon gradient accents, and shared layout structure based on the mock-design pages. Remove any scaffold pages not needed (e.g., login, signup, welcome, dashboard/ai-assistant, dashboard/settings pages that are not part of the portfolio). Ensure the theme matches all 7 design pages exactly.
Implement Contact Form API
As a visitor, I want my contact form submission to be securely received so that Hannan Ahmad can respond to my inquiry. Implement a FastAPI endpoint to receive, validate, and store contact form submissions (Name, Email, Message) in the database, with CAPTCHA verification and HTTPS support.
Implement Portfolio Management API
As an admin, I want to add, edit, and delete portfolio projects via an API so that I can manage the portfolio content dynamically. Implement FastAPI CRUD endpoints for portfolio projects (title, description, category, media URLs), with admin authentication.
Build Home Page
As a visitor, I want to see the Home page with an interactive 3D hero section so that I am immediately captivated by Hannan Ahmad's portfolio. Implement the Hero section displaying 'Hannan Ahmad' and 'Web Developer & 3D Designer' with an animated Three.js 3D object background reacting to mouse/touch movements, CTA buttons ('Contact' and 'View Work'), neon cursor trails, and scroll-based parallax effects. Base implementation on the existing Home (v2) JSX design.
Build About Page
As a visitor, I want to read Hannan Ahmad's professional bio on the About page so that I understand his background and expertise. Implement the About section with a short professional introduction, smooth fade-in animations via GSAP or Framer Motion, and responsive layout. Base implementation on the existing About (v2) JSX design.
Build Services Page
As a visitor, I want to browse Hannan's service offerings on the Services page so that I can evaluate his capabilities. Implement the Services section listing Web Development, 3D Animation, and 3D Design with hover glow effects, animated card entries, and responsive grid layout. Base implementation on the existing Services (v2) JSX design.
Build Portfolio Page
As a visitor, I want to filter and view Hannan's projects on the Portfolio page so that I can explore his work by category. Implement a project grid with 3D hover tilt effects (Vanilla Tilt / custom Three.js), category filter buttons, smooth transition animations, and project card previews. Base implementation on the existing Portfolio (v2) JSX design.
Build Contact Page
As a visitor, I want to send a message and connect via social media on the Contact page so that I can reach Hannan Ahmad easily. Implement the contact form (Name, Email, Message fields) with CAPTCHA, clickable social/contact icons for WhatsApp (+923160395445), Email (hannix847@gmail.com), Instagram (hanni_ahmadx11), X/Twitter (@khalidaper91733), and Facebook, all with hover glow animations. Base implementation on the existing Contact (v2) JSX design.
Implement Submissions Review API
As an admin, I want to retrieve and review contact form submissions via an API so that I can manage incoming messages from the dashboard. Implement FastAPI endpoints to list, view, and mark submissions as read/responded, with admin authentication.
Build Admin Dashboard Page
As an admin (Hannan Ahmad), I want to access a dashboard to view contact form submissions and manage portfolio projects so that I can keep the portfolio up to date. Implement the Admin/Dashboard page with views for submission review, project listing, add/edit project forms, and message review. Base implementation on the existing Dashboard (v2) and Admin (v2) JSX designs.
Hannan Ahmad
Web Developer & 3D Designer
Crafting immersive digital experiences through cutting-edge web development, interactive 3D animation, and thoughtful design. Let’s bring your vision to life.
About Me
I’m Hannan Ahmad, a passionate Web Developer and 3D Designer dedicated to crafting immersive digital experiences that push creative boundaries. With expertise spanning modern front-end frameworks, real-time 3D rendering, and motion design, I bring ideas to life through code and creativity. My work combines technical precision with artistic vision, delivering high-performance websites and captivating 3D visuals that leave lasting impressions.
Services
Delivering end-to-end digital solutions that combine technical expertise with creative vision to build memorable experiences.
Web Development
Building high-performance, responsive web applications with modern frameworks and cutting-edge technologies. From dynamic SPAs to full-stack solutions that deliver exceptional user experiences.
Learn More3D Animation
Crafting immersive 3D animations and motion graphics that bring brands to life. Specializing in real-time WebGL experiences, cinematic sequences, and interactive storytelling.
Learn More3D Design
Creating stunning 3D models, environments, and visual assets for web, games, and marketing. From concept to render, delivering photorealistic and stylized 3D artwork.
Learn MoreSelected Projects
A curated showcase of web development, 3D animation, and design work crafted with precision and creativity.
Get In Touch
Have a project in mind? Let’s create something extraordinary together.
No comments yet. Be the first!