This is my personal portfolio website. I made this website to showcase my projects and skills. I also made this website to learn more about web development with Slick animation using GSAP and Frammer Motion.
Having a personal portfolio website is a must for a developer. It is a place where you can showcase your projects and skills. It is also a place where you can tell people about yourself. This repository is provides to you a template for your personal portfolio website. You can use this template to make your own personal portfolio website. You can also use this template to learn more about web development with Slick animation using GSAP and Frammer Motion. Don't forget to give this repository a star if you find this repository useful.
- Responsive Design - This website is responsive to all screen sizes.
- Slick Animation - This website uses slick animation using GSAP and Frammer Motion.
- Dark Mode - This website has a dark mode feature using Next Themes.
- Personal Information - This website has a personal information section where you can tell people about yourself.
- Skills - This website has a skills section where you can tell people about your skills.
- Projects - This website has a projects section where you can showcase your projects.
- Contact - This website has a contact section where people can contact you.
- Customize Email Template - This website has a customize email template using React Email.
- Spotify API - This website has a Spotify API integration where you can show what you are listening to.
- Node Mailer - This website has a Node Mailer integration where you can send an email to yourself.
- Shadcn/ui - This website has a Shadcn/ui integration where you can use the Shadcn/ui component.
before you start, make sure you have installed the following applications:
Setup your environment variables in the .env.local file. You can see the example in the .env.local.example file. You can also see the instructions below.
NEXT_PUBLIC_EMAIL="Your Email Gmail"
NEXT_PUBLIC_PASSWORD="Your Password Generate App Gmail"
NEXT_PUBLIC_CLIENT_ID_SPOTIFY="Your Client ID Spotify"
NEXT_PUBLIC_CLIENT_SECRET_SPOTIFY="Your Client Secret Spotify"
NEXT_PUBLIC_REFRESH_TOKEN_SPOTIFY="Your Refresh Token Spotify"
1. Go to https://developer.spotify.com/dashboard/applications
2. Click Create an app
3. Fill in the application name and description
4. Click Edit Settings
5. Add http://localhost:3000/callback to Redirect URIs
6. Click Save
7. Click Show Client Secret
8. Copy Client ID and Client Secret
9. Click Get Token
10. Click Request Token
11. Copy Refresh Token
1. Go to https://myaccount.google.com/security
2. Click Signing in to Google
3. Click App passwords
4. Select Other (Custom name) and click Generate
5. Copy the password that appears
- Clone the repository
git clone https://github.com/aafrzl/v2.portfolio-aafrzl.my.id.git- Navigate to the repository directory
cd v2.portfolio-aafrzl.my.id- Install the dependencies
npm install- Run the development server
npm run dev- Run the development server
npm run email dev- Open your browser and go to http://localhost:3000/email
- Next.js
- React
- Tailwind CSS
- GSAP
- Framer Motion
- Next Themes
- React Email
- Spotify API
- Node Mailer
- Vercel
- Shadcn/ui
Contributions are always welcome! If you have any ideas, suggestions, bug reports, or contributions, please contact me. You can also contact me if you want to be a collaborator.