public 3d-motion repository

modern-portfolio

// sanidhyy/modern-portfolio

Modern Portfolio using Next.js and Framer Motion.

$ git log --oneline --stat

stars:245forks:98updated:2026-05-16

README.md

readonly

Modern Portfolio using Next.js and Framer Motion

:notebook_with_decorative_cover: Table of Contents

Folder Structure
Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Buy Me a Coffee
Follow Me
Learn More
Deploy on Vercel
Give A Star
Star History
Give A Star

:bangbang: Folder Structure

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

:toolbox: Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env.local file in root folder.
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"

Create an account at Resend and add + verify a sending domain.
Create an API key at Resend API Keys with Sending access. Copy it to RESEND_API_KEY.
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).
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.
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.
Open terminal in root directory. Run npm install --legacy-peer-deps or pnpm install --legacy-peer-deps.
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.

:raising_hand: Need Help?

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

:camera: Screenshots:

:gear: Tech Stack

:wrench: Stats

:raised_hands: Contribute

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.