A modern, responsive portfolio website showcasing my journey as a Full-Stack Developer and DevOps Engineer.
- 🎨 Modern Design: Clean, professional interface with smooth animations
- 🌓 Theme Support: Dark and light mode with seamless transitions
- 📱 Fully Responsive: Optimized for desktop, tablet, and mobile devices
- ⚡ Performance Optimized: Built with Next.js 15 and React 19
- 🎯 Interactive Sections: Hero, About, Skills, Projects, Hackathons, and Contact
- 📧 Contact Form: Direct inquiry system with form validation
- 🚀 Live Project Demos: Links to deployed applications and GitHub repositories
- ♿ Accessible: WCAG compliant with proper semantic HTML
- Framework: Next.js 15.2.4 (React 19)
- Styling: Tailwind CSS 4.1.9 with custom animations
- UI Components: Radix UI primitives
- Icons: Lucide React
- Fonts: Playfair Display, Source Sans 3
- Theme: Next-themes for dark/light mode
- Database: MongoDB 6.18.0
- API Routes: Next.js API routes
- Form Handling: React Hook Form with Zod validation
- Language: TypeScript 5
- Build Tool: Next.js with Turbopack
- Linting: ESLint with Next.js config
- Package Manager: npm
ansh-portfolio/
├── app/ # Next.js 13+ App Router
│ ├── api/ # API routes
│ │ ├── contact/ # Contact form endpoint
│ │ └── hire/ # Hire form endpoint
│ ├── projects/ # Projects page
│ ├── hire/ # Hire me page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # Reusable React components
│ ├── layout/ # Layout components
│ │ ├── Header.tsx # Navigation header
│ │ └── Footer.tsx # Site footer
│ ├── sections/ # Page sections
│ │ ├── HeroSection.tsx
│ │ ├── AboutSection.tsx
│ │ ├── SkillsSection.tsx
│ │ ├── ProjectsSection.tsx
│ │ ├── HackathonsSection.tsx
│ │ └── ContactSection.tsx
│ ├── ui/ # UI primitives (Radix + custom)
│ └── theme-provider.tsx # Theme context provider
├── lib/ # Utility functions
├── types/ # TypeScript type definitions
├── public/ # Static assets
│ ├── *.png # Project screenshots
│ └── Ansh-model.png # Profile image
├── hooks/ # Custom React hooks
├── data/ # Static data files
└── styles/ # Additional stylesheets
- Node.js 18+
- npm
- MongoDB (for contact form)
-
Clone the repository
git clone https://github.com/AnshTank/ansh-portfolio.git cd ansh-portfolio -
Install dependencies
npm install --legacy-peer-deps
-
Set up environment variables
cp .env.local.example .env.local
Add your MongoDB connection string and other required variables.
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
npm run build
npm start- Hero: Introduction with animated background and call-to-action
- About: Personal background and professional journey
- Skills: Technical expertise with interactive skill cards
- Projects: Featured projects with live demos and source code
- Hackathons: Competition achievements and innovative solutions
- Contact: Direct communication form with validation
- ConsultBridge: AI-powered consultancy platform
- HOP-11: Nurse handoff optimization system (Hackathon Winner)
- MindMingle: Mental wellness social platform
- Vacation Rental App: Full-stack booking platform
- Financial Literacy Platform: Educational fintech solution
This project is licensed under the MIT License - see the LICENSE.md file for details.
Ansh Tank - Full-Stack Developer & DevOps Engineer
- 🌐 Portfolio: anshtank.me
- 💼 LinkedIn: linkedin.com/in/anshtank9
- 🐙 GitHub: github.com/AnshTank
- 📧 Email: anshtank9@gmail.com
⭐ Star this repository if you found it helpful!