pa4080/animated-portfolio

Animated Portfolio

This project is based on the Lama Dev's YouTube tutorial Animated Portfolio Website with React & Framer Motion. Here is a Next.js 13 version of the project from the tutorial, also it uses Tailwind CSS, Shadcn/UI and some additional features.

Features and technologies in use

• Next.js 14
  • Server actions
  • Custom React hooks
• Tailwind CSS, custom theme
• Sass CSS
• Shadcn/UI components
• Dark, light and system mode
• Framer Motion
• Parallax images with scrolling
• SVG animation
• Custom fonts and logo
• Resend for email sending
• Form validation with React hook form and Zod
• Google reCaptcha v3 for spam prevention

References and credits

• Animated Portfolio Website with React & Framer Motion

• Safak at GitGub: Animated Portfolio

This is a Next.js project bootstrapped with create-next-app and hosted on Vercel.

Getting Started Dev

Install the dependencies:

npm install

In addition you may want to create a Vercel project and link it to the repository then you can manage the environment variables from the Vercel admin panel.

Run the development server:

npm run dev

Open http://localhost:3001 with your browser to see the result.

Reference manual

• TailwindCSS: Using with Preprocessors
• Framer Motion
• SVG Repo
• Email
  • Resend currently in use
  • Resend YouTube Tutorial by Brett Westwood
  • React email
  • Sending Emails with Nodemailer in Next.js 2023
  • EmailJs
• reCaptcha
  • Google reCaptcha Admin
  • Google reCaptcha Guides
  • Add Google ReCAPTCHA V3 In A Next.Js Form currently in use
  • npm: react-google-recaptcha-v3 currently in use
  • npm: next-recaptcha-v3
  • Integrate Google reCAPTCHA v2 With Next.js 13
  • Integrate Google reCAPTCHA v3 With Next.js 13