An elegant, responsive developer portfolio website built with modern web technologies. This portfolio showcases professional experience, technical skills, and project work through a visually engaging and smooth user experience.
- Responsive Design: Seamlessly adapts to all device sizes from mobile to desktop
- Smooth Animations: Uses Framer Motion for fluid, sophisticated animations and transitions
- Interactive UI: Engaging user interface with hover effects and visual feedback
- Performance Optimized: Fast loading times with optimized animations and assets
- Accessible: Built with accessibility best practices in mind
- Contact Form: Functional contact system for potential clients or employers
- Modern Aesthetics: Clean, professional design with attention to typography and spacing
- React.js: Core UI library
- Next.js: React framework for server-side rendering and static generation
- TypeScript: Type-safe code
- Framer Motion: Advanced animation library
- Tailwind CSS: Utility-first CSS framework
- Lucide Icons: Simple, clean icon set
- Hero Section: Eye-catching introduction with call-to-action
- About: Personal background and technical philosophy
- Skills: Visual representation of technical capabilities
- Experience: Professional background with timeline view
- Projects: Portfolio of work with filterable categories
- Contact: Form with validation and submission confirmation
- Lazy-loaded components for faster initial page load
- Optimized animations with
will-changeproperty - Responsive images with proper sizing
- Debounced scroll events for smooth scrolling performance
- Efficiently triggered animations based on viewport visibility
- Clone the repository:
git clone https://github.com/yourusername/dev-portfolio.git
cd dev-portfolio- Install dependencies:
npm install
# or
yarn install- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser to see the result.
This portfolio template is designed to be easily customized:
- Personal Information: Update the data in
src/datato include your own details - Color Scheme: Modify the theme colors in the Tailwind configuration
- Projects: Add your own projects with images in the projects section
- Experience: Update the work history with your professional experience
MIT License - feel free to use and modify for your own personal or commercial projects.
- Design inspiration from modern portfolio trends
- Icons provided by Lucide
- Animations powered by Framer Motion
*Built with ❤️ by Aiyoub