Skip to content

helaouichourouk/cheportfolioproject

Repository files navigation

Portfolio

This portfolio is crafted using Next.js

🖥️ Technologies Used

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

✉️ Setup Nodemailer

Create Nodemailer User and Password

  1. Go to your Google Mail app or any other Google App.
  2. Click on your Profile
  3. Click on Manage your Google Account
  4. Go to Security
  5. Under How you sign in Google go to 2-Step Verification
  6. Under 2-Step Verification go to App passwords
  7. 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 for NODEMAILER_USER variable in .env file. [Note: Passwords are not visible once closed; if forgotten, delete the old app and create a new one.]

✨ Seo

  1. 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.
  2. 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.
  3. Update google site verification code with your own inside /src/data/siteMetaData.mjs. Can be created for free using your google email id at https://search.google.com/search-console/welcome

🛠️ Development setup

Step 1 - Install dependencies

pnpm install

Step 2 - Run the development server

pnpm dev

Open http://localhost:3000 with your browser to see the portfolio.