Portfolio

My personal portfolio project has built with Next.js, Typescript and TailwindCSS. Website is self-hosted on VPS with Nginx Proxy Manager and docker container. Plausible for analytics is also self-hosted in docker container. Cloudflare is used as DNS provider and for traffic protection.

Demo: Link

Features

• Google reCAPTCHA v3 used to help to protect the sites from fraudulent activities, spam, and abuse
• Scrolling to target feature is added to header navigations
• Intersection observer used to detect view area
• Resend used for SMTP email sending
• React email used for email template
• Next.js with server actions used for SEO optimalization
• React context used for state management
• React Hook form used to create forms
• Zod used for form validation
• Tailwind CSS used for styling
• Framer motion used for animations
• Toast notification use to improve UX
• Responsive design for mobile and desktop as well
• Self-hosted deployement in Docker container
• Nginx Proxy Manager uses as reverse proxy with Let's encrypt for SSL.
• Cloudflare uses as DNS provider and protecting traffic.
• Self-hosted Plausible uses for analytics

How to run from local repository

1. Clone the repository
2. Create .env.local file and add enviromental variables according to the .env.example:

NODE_ENV=development
RESEND_API_KEY=
GOOGLE_RECAPTHCA_SECRET_KEY=

NEXT_PUBLIC_NODE_ENV=development
NEXT_PUBLIC_GOOGLE_RECAPTHCA_SITE_KEY=
NEXT_PUBLIC_PRODUCTION_HOST=https://example.com
NEXT_PUBLIC_PLAUSIBLE_HOST=https://plausible.example.com
NEXT_PUBLIC_GOOGLE_DRIVE_URL=

Rename Dockerfile.example to Dockerfile and add the same variables into the ENV section with the correct values and keys

How to self-hosted with Docker container in the same machine

0. Docker setup:

• Install Docker on your machine.
• You need to have the Dockerfile in the root folder with the same content as it is in this repository already (add ENV according to the previous section). Need to update the next.config.mjs same as it is in this repository also.

1. Build your container: docker build -t nextjs-portfolio .
2. Run your container: docker run -p 3000:3000 nextjs-portfolio
3. Next.js server running at http://localhost:3000/

How to self-hosted with Docker container in Machine-B

0. Docker setup:

• Install Docker on your machine.
• You need to have the Dockerfile in the root folder with the same content as it is in this repository already (add ENV according to the previous section). Need to update the next.config.mjs same as it is in this repository also.

0. Check docker is active: systemctl is-active docker.
1. Build your container: docker build --platform linux/amd64 -t nextjs-portfolio . If you get error: ERROR: Cannot connect to the Docker daemon at unix:///home/path-to-docker/.docker/desktop/docker.sock. Is the docker daemon running?, than you should run the followings: sudo systemctl start docker, sudo systemctl enable docker, export DOCKER_HOST=unix:///var/run/docker.sock. Now you can try to build the image again.
2. Save docker image into *.tar file in the project root folder: docker save -o nextjs-portfolio.tar nextjs-portfolio
3. Copy *.tar file into the Machine-B scp /path-to-tar-file/nextjs-portfolio.tar machine-b-username@192.xxx.x.xx:/path-to-machine-b-folder/
4. Load docker container: docker load -i /path-to-machine-b-folder/nextjs-portfolio.tar
   You can check the does the image exist: docker images
5. Run your container: docker run -d --name nextjs-portfolio -p 3000:3000 nextjs-portfolio
   
6. Next.js server running at http://192.xxx.x.xx:3000/
7. Redeploy new version:
   

• Remove previous container. Run docker container ls than docker container rm -f <container-name>
• Remove previous image. Run docker image ls than docker image rm -f <image-name>

Useful links and informations

• Google reCAPTCHA docs:
  • Google
• Next.js standalone build for Docker:
  • Next.js
  • GitHub
• Scroll to target:
  • ReactHustle
• Cubic Bezier:
  • CSS Portal
  • Cubic Bezier site
• Tooltip mobile handling:
  • GitHub
• React Hook Form usage with UI component needs to has ref={null} property to avoid ref warning:
  • Stackoverflow
  • GitHub
• Self-hosted with cloudflare dns:
  • Cloudflare Archive
  • Cloudflare test redirection
• Self-hosted analytics:
  • Plausible (Community Edition)
    • Plausible
    • Github
  • Umami
    • umami
    • Github
• Self-hosted NGINX Proxy Manager
  • Youtube #1
  • Youtube #2

Dependencies

• Next.js
• React
• React DOM
• Typescript
• Tailwind CSS
• shadcn/ui
• Framer Motion
• Sonner toast
• Lucide icons
• React Intersection Observer
• React Hook Form
• @hookform/resolvers
• Zod
• Resend
• React email
• Google reCAPTCHA v3

Layout