A modern, minimalist portfolio website built with Next.js 15, TypeScript, and Tailwind CSS v4. Features a unique camera/viewfinder-inspired design with smooth animations and interactive elements.
- Custom cursor with interactive animations
- Camera viewfinder-inspired interface
- Responsive design with Tailwind CSS
- Dynamic project showcase
- Photography gallery with filtering
- Contact form with modern UI components
- Loading screen animations
- SEO optimized with Next.js metadata
- Next.js 15
- TypeScript
- React 19
- Tailwind CSS v4
- Lucide Icons
- Radix UI Components
- Motion for animations
- Geist Font Family
- Clone the repository
git clone https://github.com/MohammedADev/portfolio.git- Install dependencies with Bun
bun install- Start the development server
bun devOpen http://localhost:3000 in your browser to view the portfolio.
portfolio/
├── app/ # Next.js app router pages and layouts
│ ├── about/ # About page with skills and experience
│ ├── projects/ # Project showcase page
│ ├── gallery/ # Photography portfolio
│ └── contact/ # Contact form page
├── components/ # Reusable React components
│ ├── ui/ # UI components (buttons, inputs, etc.)
│ └── layout/ # Layout components
├── lib/ # Utility functions and metadata configuration
└── public/ # Static assets and images
Layout: Main layout component with custom cursor and viewfinder overlayNavigation: Side navigation with animated iconsCustomCursor: Interactive cursor animationViewfinderOverlay: Camera-inspired UI overlayLoadingScreen: Animated loading transitions
The project uses Tailwind CSS v4 with custom animations and a dark theme. Key features include:
- Custom color schemes with CSS variables
- Responsive design patterns
- Interactive hover states
- Smooth transitions and animations
- Gradient text effects
- Glass-morphism elements
- Update metadata in
lib/metadata.ts - Modify theme colors in
app/globals.css - Add/edit projects in
app/projects/page.tsx - Customize gallery categories in
app/gallery/page.tsx
# Format code
bun run format
# Run linting
bun run lint
# Build for production
bun run build
# Start production server
bun startThis project is licensed under the MIT License with Attribution Requirement - see the LICENSE.md file for details.
Attribution Requirement: If you use or modify this portfolio template, you must include a visible attribution link to the original author in your website's footer or about section.
Mohammed A. - work@mohammedabdelaziz.com
Project Link: https://github.com/MohammedADev/portfolio