My Portfolio

A sleek, professional portfolio showcasing full-stack skills and leadership.

GitHub RepoLive Demo

Full Description

Built to reflect the capabilities of a Lead Full Stack Developer, this portfolio demonstrates expertise in modern web technologies, CI/CD workflows, and end-to-end deployment.

Key Features

  • Built with React 19, Next.js 15, and Tailwind CSS v4 (zero-config)
  • Fully responsive layout with dark/light theme support using next-themes
  • Animated transitions with Framer Motion
  • Lucide-react icons for a clean, consistent UI
  • Contact form with Formspree integration and Google reCAPTCHA for spam protection
  • Google Analytics integration for traffic insights
  • CI/CD pipeline using GitHub Actions for build & deploy automation
  • Hosted on a custom Cloudflare domain with HTTPS and production performance
  • Developer experience enhancements: ESLint, Prettier, and project-wide linting setup

Tech Stack

  • ⚛️React
  • 🌐Next.js
  • 🎨Tailwind CSS
  • 🎞️Framer Motion
  • 🧩Lucide React
  • 📨Formspree
  • 🔒ReCAPTCHA
  • 🚀GitHub Actions
  • ☁️Cloudflare
  • 📊Google Analytics

Architecture

Frontend
Built entirely with React 19 and Next.js 15, utilizing the App Router for modern routing and React Markdown for rendering rich content.
Static Site Generation
Uses Next.js getStaticProps and getStaticPaths to pre-render project pages at build time for fast performance and SEO benefits.
Theming & UI
Dark and light mode support implemented with next-themes for seamless theme switching, and icons are provided by lucide-react for a consistent UI experience.

Installation

  1. Clone the repo: git clone https://github.com/ParagNaikade/my-portfolio
  2. Install dependencies: yarn install
  3. Start the dev server: yarn dev

Screenshots

My Portfolio screenshot 1My Portfolio screenshot 2

DevOps & Deployment

  • CI/CD: Automated CI/CD using GitHub Actions to build and deploy on every commit.
  • Hosting: Hosted on Cloudflare Pages with a custom domain (paragnaikade.com) and HTTPS enabled.
  • Analytics: Google Analytics integrated to track traffic and user behavior.

Notes

  • Supports SEO optimizations and smooth page transitions.
  • Uses ESLint and Prettier to enforce consistent code style.
  • Contact form protected with Google reCAPTCHA v2 to prevent spam.