This portfolio is crafted using Next.js
- Nextjs.js : A React-based, open-source framework for building efficient and scalable web applications.
- Tailwind CSS : A utility-first CSS framework for rapid UI development.
- TypeScript: A typed superset of JavaScript that provides enhanced tooling and developer productivity.
- Framer motion: A React animation library that brings motion to your user interfaces.
- Nodemailer: A Node.js library facilitating easy email integration with features like attachment handling, HTML content, and support for various email services.
Feel free to use it as a template for your own portfolio or any other projects. You are granted the freedom to modify, distribute, and use the code for any purpose, unleashing your creativity without any restrictions.
If you have any improvements, ideas or find any bugs, don't hesitate to submit a pull request or open an issue.
- Do not push your Nodemailer pass on Github as it can give access to your google email. Use
.env
file - Use Nextjs api routes for nodemailer transporters and send mail function as they only run on server and cannot expose your google app variables to client.
- Go to your Google Mail app or any other Google App.
- Click on your
Profile
- Click on
Manage your Google Account
- Go to
Security
- Under
How you sign in Google
go to2-Step Verification
- Under
2-Step Verification
go toApp passwords
- Create an app (e.g., portfolio-nodemailer), and copy the generated password securely. Use it as the value for the
NODEMAILER_PASS
variable and your email as the value forNODEMAILER_USER
variable in.env
file. [Note: Passwords are not visible once closed; if forgotten, delete the old app and create a new one.]
- The project automatically generates sitemap.xml and robots.txt files within the public folder by leveraging the project's file structure. This process is initiated through the scripts located at src/scripts/generateSitemap.mjs, executed either after the project is built or by running the command
pnpm sitemap
. - It's important to note that dynamic routes, identified by file or folder names in square brackets (e.g., [segmentName], [id], or [slug]), are excluded from the sitemap.xml.
- To facilitate Google Search Console verification, you can insert the Google Site Verification tag content within the
src/data/siteMetadata.mjs
file.
pnpm install
pnpm dev
Open http://localhost:3000 with your browser to see the portfolio.