A responsive personal portfolio for Zarrar Shaikh, founder of Reyndex and a senior platform, backend, and DevOps engineer. Built with React 18, TypeScript, Tailwind CSS, Framer Motion, and Spline, it covers 9+ years of experience, skills, contact details, and 29 projects with dark/light themes and interactive media.
- Dark Mode First: Default dark theme with toggle functionality stored in localStorage
- Layered Background: Animated dot field with a deferred Spline 3D scene
- Responsive Design: Mobile-first approach with smooth transitions across all devices
- Project Catalog: 29 projects across Packages, AI/ML, Web, Integrations, Hackathons, Motion Design, and Writing
- Smooth Animations: Powered by Framer Motion for fluid UI interactions
- Modern Tech Stack: React.js functional components, Tailwind CSS, TypeScript
- Frontend: React.js 18 with TypeScript
- Styling: Tailwind CSS with a CSS-variable light/dark theme
- Animations: Framer Motion and a lazy-loaded Spline scene
- Typography: Archivo, Space Grotesk, and JetBrains Mono
- Icons: Lucide React and React Icons
- Build Tool: Vite for fast development and optimized builds
- Deployment: Static production output in
dist/
The portfolio features a sophisticated Space/AI aesthetic with:
- Color Palette: Neutral light/dark surfaces with blue primary accents
- Background: Animated dot field layered with a Spline 3D scene
- Typography: Archivo for body copy, Space Grotesk for display text, and JetBrains Mono for code-style text
- Animations: Section transitions, interactive card states, and reduced-motion fallbacks
- Glassmorphism: Backdrop blur effects and subtle transparency
- Hero: Animated introduction with key highlights and call-to-action
- About: Personal information, professional summary, and hobbies
- Experience: Timeline of professional work history with detailed achievements
- Projects: Filterable catalog of 29 projects with links and inline media
- Skills: Categorized technology stack with animated skill badges
- Education: Academic background and competitive achievements
- Contact: Location, email, LinkedIn, and other social profiles
- Node.js 18+ and npm
- Git
-
Clone the repository
git clone https://github.com/Zlash65/zlash.space.git cd zlash.space -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser
- Navigate to
http://localhost:5173 - The site will automatically reload when you make changes
- Navigate to
npm run buildThis creates an optimized build in the dist folder ready for deployment.
No environment variables are required for this static portfolio site.
- Responsive Hero Image: 512px and 1024px AVIF sources with progressive JPEG fallbacks
- Prioritized LCP Asset: The hero portrait is preloaded with explicit dimensions and high fetch priority
- Responsive Project Images: 640px and 1200px AVIF card sources use PNG fallbacks and load lazily as they approach the viewport
- Deferred 3D Background: Spline is dynamically imported, mounted during browser idle time, and skipped when reduced motion is requested
- Production Build: Vite minifies and tree-shakes the application
Theme colors are HSL variables in src/index.css. The semantic colors in tailwind.config.js reference these variables.
:root {
--background: 0 0% 99%;
--foreground: 240 10% 3.9%;
--primary: 221 83% 53%;
}
.dark {
--background: 0 0% 1%;
--foreground: 0 0% 98%;
--primary: 217 91% 60%;
}- Create component in
src/components/ - Import and add to
src/App.tsx - Add navigation link in
src/components/Header.tsx
Animation variants are defined in each component using Framer Motion. Adjust timing and easing in the transition objects.
This project is open source and available under the MIT License.