Here is the folder structure of this app.

modern-portfolio/
  |- app/
    |-- about/
    |-- api/
    |-- contact/
    |-- services/
    |-- testimonials/
    |-- work/
    |-- globals.css
    |-- layout.tsx
    |-- page.tsx
    |-- template.tsx
  |- components/
    |-- Avatar.tsx
    |-- Bulb.tsx
    |-- Circles.tsx
    |-- Header.tsx
    |-- Nav.tsx
    |-- ParticlesContainer.tsx
    |-- ProjectsBtn.tsx
    |-- ServiceSlider.tsx
    |-- Socials.tsx
    |-- TestimonialSlider.tsx
    |-- TopLeftImg.tsx
    |-- Transition.tsx
    |-- WorkSlider.tsx
  |- lib/
    |-- contact.ts
  |- public/
  |- .env.example
  |- .env/.env.local
  |- .gitignore
  |- environment.d.ts
  |- eslint.config.mjs
  |- netlify.toml
  |- next.config.ts
  |- package.json
  |- pnpm-lock.yaml
  |- pnpm-workspace.yaml
  |- postcss.config.mjs
  |- tsconfig.json
  |- variants.ts

1. Make sure Git and NodeJS is installed.

2. Clone this repository to your local computer.

3. Create .env.local file in root folder.

4. Contents of .env.local:

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED="1"

# resend
RESEND_API_KEY="re_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
RESEND_FROM_EMAIL="Your Name <me@example.com>"
CONTACT_TO_EMAIL="contact@example.com"
CONTACT_SITE_URL="https://awersome-portfolio.netlify.app"
RESEND_TEMPLATE_CONTACT_USER="contact-thank-you"
RESEND_TEMPLATE_CONTACT_ADMIN="contact-admin"

# google recaptcha v3
NEXT_PUBLIC_RECAPTCHA_SITE_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
RECAPTCHA_SECRET_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
RECAPTCHA_MIN_SCORE="0.5"

5. Create an account at Resend and add + verify a sending domain.

6. Create an API key at Resend API Keys with Sending access. Copy it to RESEND_API_KEY.

7. Set RESEND_FROM_EMAIL to an address on that verified domain. Set CONTACT_TO_EMAIL to the inbox that should receive new contact notifications (required). Set CONTACT_SITE_URL to your site's public URL (no trailing slash).

8. In Resend Templates, create two templates and Publish each.

   Template 1 — thank you to the user

   • Name: contact-thank-you
   • Variables: USER_NAME, USER_MESSAGE, SITE_URL

   Template 2 — new message to admin

   • Name: contact-admin
   • Variables: USER_NAME, USER_EMAIL, USER_MESSAGE, SITE_URL

   Copy each template's alias into RESEND_TEMPLATE_CONTACT_USER and RESEND_TEMPLATE_CONTACT_ADMIN.

9. Create a Google reCAPTCHA v3 project. Choose Score based (v3), add your production domain(s) and localhost, then copy the Site key to NEXT_PUBLIC_RECAPTCHA_SITE_KEY and the Secret key to RECAPTCHA_SECRET_KEY.

10. Open terminal in root directory. Run npm install --legacy-peer-deps or pnpm install --legacy-peer-deps.

11. Now the app is fully configured 👍 and you can start it with npm run dev or pnpm dev.

NOTE: Ensure you don't share these keys publicly.

If you run into issues during installation or setup:

• GitHub Discussions — Open a Q&A discussion for setup and troubleshooting help.
• Email — sanidhyyy@gmail.com
• Discord — @sanidhyy

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

Useful resources and dependencies that are used in Modern Portfolio.

• @tailwindcss/postcss: ^4.3.3
• @tsparticles/engine: ^4.4.0
• @tsparticles/react: ^4.4.0
• @types/node: ^26.6.4
• @types/react: ^19.3.0
• @types/react-dom: ^19.3.0
• eslint: ^9.39.5
• eslint-config-next: 16.4.0
• framer-motion: ^14.0.0
• next: 16.4.0
• postcss: ^8.5.28
• react: 19.3.0
• react-countup: ^6.4.2
• react-dom: 19.3.0
• react-google-recaptcha-v3: ^1.11.0
• react-hot-toast: ^2.6.1
• react-icons: ^5.7.0
• resend: ^6.28.1
• swiper: ^14.3.0
• tailwindcss: ^4.3.3
• tsparticles: ^4.4.0
• typescript: ^6.0.3

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

You can also give this repository a star to show more people and they can use this repository.

(back to top)