A responsive portfolio website built with Next.js and TailwindCSS, based on the freeCodeCamp article.
- Responsive design that works on all devices
- Dark mode support
- SEO optimized with custom meta tags
- Animated hero section with RoughNotation
- GitHub integration to showcase latest repositories
- Contact form for easy communication
- Project showcase with hover effects
- Detailed about and experience pages
- Next.js - React framework with server-side rendering
- TailwindCSS - Utility-first CSS framework
- React Rough Notation - Library for creating animated highlights
- Next Themes - For dark mode support
- Axios - For making API requests
- Node.js (14.x or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/yocodigo/portfolio-website.git- Navigate to the project directory
cd portfolio-website- Install dependencies
npm install
# or
yarn install- Start the development server
npm run dev
# or
yarn dev- Open http://localhost:3000 with your browser to see the result.
Edit the following files to add your personal information:
- Update meta information in
components/ContainerBlock.js - Edit social links in
components/Navbar.jsandcomponents/Footer.js - Modify the hero section in
components/Hero.js - Update project cards in
components/FavouriteProjects.jsandpages/projects.js - Change experience details in
pages/experience.js - Update about page in
pages/about.js - Modify contact information in
pages/contact.js
To fetch your own GitHub repositories, update the GitHub username in pages/index.js:
<LatestCode githubUsername="yocodigo" />You can customize colors and styling in the tailwind.config.js file.
-
Push your code to a GitHub repository
-
Sign up or log in to Vercel
-
Click on "New Project" and import your GitHub repository
-
Keep the default settings and click "Deploy"
-
Wait for the build to complete, and your site will be live!
To use a custom domain:
- Go to your project settings in Vercel
- Navigate to the "Domains" section
- Add your domain and follow the instructions to configure DNS settings
This project is open source and available under the MIT License.