A custom-built portfolio created with Next.js to showcase your skills and work with very smooth animations and user friendly interface and experience, and to connect with a wider range of potential clients.
- Typescript
- Strongly typed.
- Husky, Eslint, Prettier Configured.
- Smooth animation using framer-motion
- Well-optimized and performant (with a score between 95 - 100)
- Sendgrid Support to receive emails from the contact form
- Built-in API routes (you do not need a custom backend)
- Support for google analytics
- Google reCaptcha integration
- Formik integration.
- Responsive design
- Built-in color generator (but you can still add your own).
- Auto fetch GitHub projects (9 with highest stars)
- Very customizable.
- PNPM as a default package manager for fast and efficient disk space usage.
- Code well organized, Customizable, and scalable.
- Next.Js
- Formik
- Framer-motion
- Figma
- TypeScript
- Vscode with the help of these amazing extensions extensions.json
- Additional packages you can find on package.json
- Recaptcha Sitekey and SecretKey, grab yours here
- GitHub personal access token (classic) This one is optional only if you want auto-fetch repositories, you can create one here with read:user and repo permissions, Make sure it's a Classic personal token and not a Fine-grained personal access token.
The code to get GitHub repositories and their relevant components won’t be added if you don’t specify the GitHub token in the environment.
- Google Analytics ID (Same for GitHub access token, it is optional if you want to include Google Analytics)
- A Sendgrid API key is necessary to receive the emails from the contact form.
All data on the project is located under the folder data/ located here
NOTE: You need to fill the technologies array in technologies.ts for the typescript check
Before proceeding, make sure you have Nodejs and NPM installed.
- Install PNPM package:
npm install -g pnpm- Install dependencies:
pnpm install- Copy the .env.example to a new file called .env.development.local
This file is only used locally, please use the variable inside it as a reference when deploying
- Fill the necessary environment variables on .env.developement.local file
- Run the project
pnpm devMake sure to set the necessary environment variables in your production environment.
- Install Vercel CLI:
pnpm i -g vercel- Deploy to Vercel
vercel#Add --prod if you want to deploy to production
Alternatively, You can create a GitHub repo from this template, and make the necessary modifications locally and push it to the repo, then link Vercel with your newly created repository.
- Build the project:
pnpm build- Start the server on production:
pnpm start- Astro build version
- Support for the app folder and the current beta features of next.js 13 (once it's stable)
- Add support for the telegram bot (receiving contact emails in telegram)
- Support for sentry for performance and error tracking and monitoring
This project is licensed under the MIT License - see the LICENSE.md file for more details