A production-grade, high-performance portfolio showcasing the intersection of immersive web design, full-stack engineering, and autonomous agent systems. Built with a focus on performance, scalability, and premium user experience (UX).
- 3D Visualization: Real-time interactive 3D globe background powered by Three.js and React Three Fiber.
- Performance-First Animations: Butter-smooth micro-interactions and scroll-synchronized animations orchestrated via GSAP (GreenSock Animation Platform) with
ScrollTrigger. - Dynamic UX: Custom cursor tracking, magnetic buttons, and responsive layouts designed for a premium, editorial aesthetic.
- Autonomous Systems: Showcasing capabilities in building "Agentic AI" workflows—intelligent systems that move beyond simple prompts to autonomous execution.
- Modern Tech Stack: Leveraging advanced LLM orchestration for automated business workflows and customer-centric AI agents.
- Framework: Developed with React 19 and Vite for lightning-fast HMR and optimized production bundles.
- Design System: Atomic design principles implemented using Radix UI primitives and Tailwind CSS, ensuring accessibility (a11y) and rapid theme iteration.
- Type Safety: Strictly typed codebase using TypeScript, minimizing runtime errors and enhancing developer productivity.
├── src/
│ ├── components/ # Atomic UI components and 3D primitives
│ │ ├── ui/ # Accessible Shadcn-inspired Radix components
│ │ ├── Navigation/ # Fluid navigation orchestration
│ │ └── Globe/ # Three.js canvas implementation
│ ├── sections/ # High-level page orchestration
│ │ ├── Hero/ # Immersive entry experience
│ │ ├── About/ # Animated journey timeline
│ │ ├── AgenticAI/ # Specialized AI solutions showcase
│ │ └── ... # Project, Services, Contact
│ ├── hooks/ # Custom React hooks (useMobile, useScroll, etc.)
│ ├── lib/ # Utility functions and GSAP configurations
│ └── main.tsx # Application entry point
├── public/ # Optimized static assets
└── tailwind.config.js # Design system tokens and extensions-
Clone the repository:
git clone https://github.com/Ismail-Khan-Dev/Portfolio-Web-Designer.git cd Portfolio-Web-Designer -
Install dependencies:
npm install
-
Start development server:
npm run dev
-
Build for production:
npm run build
The application is optimized for deployment on Vercel or Netlify.
- Simply connect the GitHub repository to your preferred hosting provider.
- Build Command:
npm run build - Output Directory:
dist
This project is licensed under the MIT License - see the LICENSE file for details.
Designed with ❤️ by Ismail Sajid
Building the web's most effective digital experiences.