8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

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.

HomeAboutCertificationsContact
Home

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

Ali Portfolio

Introduction

The Ali Portfolio project aims to create a world-class, modern, fully responsive portfolio website for Ali Gohar, an AI Research Engineer. The design will reflect the professional standards of leading AI research institutions such as OpenAI, Anthropic, Google DeepMind, and Microsoft Research. The portfolio will feature smooth animations, excellent typography, glassmorphism, subtle gradients, and a professional dark theme with an optional light mode.

System Overview

The Ali Portfolio website will be a comprehensive showcase of Ali Gohar's skills, projects, publications, and professional experiences. It will be built using the latest web technologies to ensure responsiveness, accessibility, and performance optimization. The website will include various sections such as About, Experience, Projects, Research, Publications, Skills, Leadership, and Contact, each designed to highlight Ali's expertise and achievements in the field of AI.

Page 2 of 5

Functional Requirements as Story Points

  • As a User, I should be able to view a large animated heading introducing Ali Gohar.
  • As a User, I should see an animated typing effect rotating between Ali's professional titles.
  • As a User, I should be able to download Ali's resume.
  • As a User, I should be able to view Ali's projects and contact him through the website.
  • As a User, I should experience smooth scrolling and a sticky navbar highlighting the current section.
  • As a User, I should be able to view Ali's professional summary and interests in AI.
  • As a User, I should see animated counters displaying Ali's achievements.
  • As a User, I should be able to explore Ali's experience through a vertical timeline.
  • As a User, I should be able to view detailed project cards with hover animations.
  • As a User, I should be able to view publication cards with details and download options.
  • As a User, I should be able to view categorized skill cards with animated progress bars.
  • As a User, I should be able to view leadership achievements in a timeline format.
  • As a User, I should be able to view certification placeholders.
  • As a User, I should be able to interact with a professional contact form.
  • As a User, I should experience smooth animations and transitions throughout the website.
  • As an Admin, I should be able to update portfolio content through JSON or TypeScript data files.

User Personas

  • Visitor: Individuals interested in Ali's work, including potential employers, collaborators, and peers in the AI research community.
  • Admin: Ali Gohar, who will manage and update the portfolio content.
Page 3 of 5

Core User Flows

  • Visitor navigates to the homepage -> views animated hero section -> explores sections via sticky navbar -> downloads resume or contacts Ali.
  • Admin updates portfolio content -> modifies JSON/TypeScript data files -> changes reflect on the live website without altering UI components.

Visuals Colors and Theme

  • primary: #2563EB
  • primary_light: #3B82F6
  • secondary: #06B6D4
  • accent: #FF5733 (vibrant pop color for CTAs)
  • highlight: #FFC300 (warm color for hover states)
  • bg: #020617
  • surface: rgba(15, 23, 42, 0.8)
  • text: #FFFFFF
  • text_muted: #A0AEC0
  • border: rgba(255, 255, 255, 0.2)
Page 4 of 5

Signature Design Concept

The homepage will feature an interactive AI-themed hero section. The hero will include a large animated heading with Ali's name and rotating professional titles. On the right, an animated illustration of a neural network will dynamically change as users hover over it, revealing different AI concepts like robotics, particles, and holographic UI. Floating particles and an animated background will enhance the immersive experience. The design will use Framer Motion for smooth animations and transitions, creating a captivating first impression.

Landing Hero Motion Brief: The hero section will feature a continuously moving 2D composition built with CSS and motion/react. The animation will start with inputs (AI concepts) gathering around a central neural network illustration. As the network processes these inputs, it transforms into a holographic UI, symbolizing Ali's expertise in AI. The animation will loop every 10 seconds, with hover interactions revealing additional AI concepts.

Interaction Model & Motion Direction

  • Intended Interaction Model: Animated
  • The landing page will feature moderate scroll-triggered reveals, hover transitions, and spring physics on interactive elements, providing a polished and engaging user experience.

Non-Functional Requirements

  • The website must be responsive on all devices.
  • It should be optimized for fast loading and performance.
  • The design must be accessible and SEO compliant.
  • The code should follow best practices and be well-documented.
Page 5 of 5

Tech Stack

  • Frontend: Next.js 15 (App Router), React, TypeScript, Tailwind CSS, Framer Motion, Lucide Icons, Shadcn/UI
  • Backend: Not specified (assumed to be static content)
  • Database: Admin-friendly data structure using JSON or TypeScript data files
  • Deployment: Vercel

Assumptions and Constraints

  • The website will primarily serve as a portfolio and not require complex backend functionalities.
  • All content updates will be managed through JSON or TypeScript data files.
  • The design will prioritize professionalism and readability over flashy effects.

Glossary

  • AI: Artificial Intelligence
  • NLP: Natural Language Processing
  • RAG: Retrieval-Augmented Generation
  • SEO: Search Engine Optimization
  • UI: User Interface
  • UX: User Experience
Home design preview
Admin: Access Data Files
Admin: Edit JSON Content
Admin: Update TypeScript Data
Admin: Save Changes
Deploy: Push Update
Home: View Live Changes
Home design preview
Admin: Access Data Files
Admin: Edit JSON Content
Admin: Update TypeScript Data
Admin: Save Changes
Deploy: Push Update
Home: View Live Changes