/Personal-Portfolio-Website-v5

This is a portfolio website I created to showcase my work. I’m always striving to create something unique and innovative. If you like it, be sure to give it a star.

Primary LanguageTypeScript

Personal Portfolio Website - V5

Description

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.

Introduction

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.

Features

  • 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.

Getting Started

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.

environment variables:

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"

how to get key 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

how to get key Gmail:

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

Installation

  1. Clone the repository
git clone https://github.com/SyedMoin-lab/Personal-Portfolio-Website-v5.git
  1. Navigate to the repository directory
cd Personal-Portfolio-Website-v5
  1. Install the dependencies
npm install
  1. Run the development server
npm run dev

Usage React Email Template

  1. Run the development server
npm run email dev
  1. Open your browser and go to http://localhost:3000/email

Built With

Contributing

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.

References Design and Inspiration