Ali Portfolio

byAli Gohar

# Build a Premium AI Engineer Portfolio Website Build a world-class, modern, fully responsive portfolio website for me. The design should feel like the portfolio of an AI Research Engineer at OpenAI, Anthropic, Google DeepMind, or Microsoft Research. Do NOT use a generic portfolio template. Create a unique, premium-looking design with smooth animations, excellent typography, glassmorphism, subtle gradients, and a professional dark theme with an optional light mode. ## Tech Stack * Next.js 15 (App Router) * React * TypeScript * Tailwind CSS * Framer Motion * Lucide Icons * Shadcn/UI * Responsive Design * SEO Optimized * Accessibility compliant * Fast loading * Clean reusable components --- # Color Theme Primary: * #2563EB * #3B82F6 Accent: * #06B6D4 Background: * #020617 * #0F172A Cards: * Glassmorphism with backdrop blur Typography: * Inter * Space Grotesk --- # Hero Section Create an eye-catching hero section. Include: Large animated heading Hi, I'm # Ali Gohar Animated typing effect rotating between: * AI Engineer * Machine Learning Engineer * Agentic AI Developer * NLP Researcher * Computer Vision Engineer * AI Researcher Professional introduction emphasizing research, AI systems, and production-grade ML. Buttons: * Download Resume * View Projects * Contact Me On the right side create an animated illustration related to AI (neural network, robotics, particles, holographic UI, etc.). Add floating particles and animated background. --- # Navigation Sticky navbar Sections: Home About Experience Projects Research Publications Skills Leadership Contact Resume Smooth scrolling. Highlight current section. --- # About Section Professional summary. Mention that I recently completed a Bachelor's in Artificial Intelligence from Ghulam Ishaq Khan Institute (GIKI). Explain my interests: * Agentic AI * Large Language Models * Multi-Agent Systems * RAG * Deep Learning * Computer Vision * NLP * AI Research Include a professional photo placeholder. --- # Statistics Section Animated counters. Examples: 5+ AI Projects 2 Research Publications 2 Research Internships Founder of AI Frontier Society Hackathon Director Thousands of lines of AI code --- # Experience Timeline Beautiful vertical timeline. Include: ## Precision Medicine Lab Research Intern Worked on DART Agentic AI Mistral Phi-2 Human-in-the-loop Biomedical AI --- ## University of Europe for Applied Sciences Research Intern DermaSpectraNet EfficientNet Medical Imaging Deep Learning --- # Featured Projects Create premium project cards. Each card contains: Image placeholder Project title Tech stack badges Description Achievements GitHub button Live Demo button Read More button Projects: 1. DART (Debate Agentic Research Tool) * Agentic AI * LangGraph * Multi-Agent Debate * RAG * Mistral * Phi-2 2. PrecisionPen * Flask * CrewAI * Cohere * AI Writing Assistant 3. Smart Attendance * YOLOv8 * OpenCV * Deep Learning 4. NAFSIYAT AI * Mental Health AI * Transformers * FastAPI * PostgreSQL * NLP 5. Natural Mouse * Computer Vision * Eye Tracking * OpenCV Each project card should have hover animations and expandable details. --- # Publications Beautiful publication cards. Include: Paper title Conference Year Abstract Citation PDF Button DOI placeholder --- # Skills Create categorized skill cards. Machine Learning Deep Learning Natural Language Processing Computer Vision Generative AI Agentic AI Backend Databases DevOps Programming Languages Use animated progress bars and skill badges. Include: Python C++ TensorFlow PyTorch Scikit-learn OpenCV YOLO Transformers BERT GPT LangChain LangGraph FAISS Flask FastAPI PostgreSQL Git GitHub Docker Linux Hugging Face n8n Prompt Engineering --- # Leadership Professional cards. Founder & President AI Frontier Society Director National Agentic AI Hackathon Workshop Instructor LLMs GenAI C++ Leadership timeline with achievements. --- # Certifications Display cards with certificate placeholders. --- # Resume Section Embedded resume viewer. Download Resume button. --- # Contact Professional contact form. Fields: Name Email Subject Message Include validation. Also include: Phone Email GitHub LinkedIn Location Social icons. --- # Footer Professional footer. Quick Links Social Links Copyright Back-to-top button. --- # Animations Use Framer Motion extensively. Fade animations Slide animations Reveal on scroll Parallax Floating elements Hover glow Card tilt Animated counters Typing effect Gradient borders Background particles Mouse-follow effect Smooth page transitions Loading animation --- # Additional Features Dark/Light Mode SEO metadata Open Graph tags Favicon Sitemap robots.txt Structured data Performance optimized Lazy loading Responsive on all devices Accessibility support --- # Admin-Friendly Data Structure Store all portfolio content in separate JSON or TypeScript data files so future edits don't require modifying UI components. --- # Code Quality Generate production-ready code. Follow best practices. Use reusable components. No placeholder lorem ipsum. Well-commented code. Proper folder structure. No unnecessary dependencies. --- # Deliverables Generate the complete project including: * Full Next.js application * All components * Responsive layouts * Tailwind configuration * TypeScript types * Animation logic * Data files * SEO setup * README with installation instructions * Package.json * Public assets placeholders * Deployment-ready code for Vercel The final website should look like a premium AI engineer portfolio suitable for applying to companies like OpenAI, Anthropic, Google DeepMind, Microsoft, NVIDIA, Meta AI, and research labs. It should prioritize professionalism, readability, smooth user experience, and polished visual design over flashy effects.