A modern, responsive portfolio website built with Next.js, React, and Tailwind CSS to showcase professional skills, projects, and experience.
- Responsive Design: Optimized for all screen sizes from mobile to desktop
- Dark/Light Mode: Toggle between dark and light themes
- Smooth Animations: Page transitions and UI animations using Framer Motion
- Interactive UI Components: Dynamic and engaging user interface elements
- Multiple Sections:
- Home: Introduction and social links
- About: Personal background and technologies
- Projects: Showcase of development work
- Experience: Professional work history
- Education: Academic background
- Frontend Framework: Next.js with React
- Styling: Tailwind CSS
- Animations: Framer Motion
- Typography: Google Fonts (Montserrat)
- Icons: Custom SVG components
- Deployment: [Deployment platform]
- Node.js (v14.0.0 or later)
- npm or yarn
-
Clone the repository:
git clone https://github.com/lloydlegaspi/Portfolio-Website.git cd Portfolio-Website -
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.
Portfolio-Website/
├── public/
│ ├── images/ # Project and profile images
│ ├── All-Texts/ # Text content and resources
│ └── favicon.ico
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Next.js page components
│ └── styles/ # CSS and styling files
├── package.json
└── README.md
To use this portfolio template for yourself:
- Update personal information in the relevant components
- Replace project images and descriptions in the projects directory
- Modify skills and technologies in
Technologies.js - Update experience and education details in their respective components
- Fonts from Google Fonts
- Icons from Iconify
- Original design and development by CodeBucks
Made with ❤️ by John Lloyd Legaspi