An interactive, animated, and AI-augmented developer portfolio built with Next.js, React, and TailwindCSS. It features a custom site-wide glassmorphism design system, an automated image carousel on project cards, and a floating context-aware conversational assistant trained on Suraj's professional resume.
An interactive chatbot helper powered by an LLM that is configured to:
- Act as a professional agent representing Suraj's background.
- Answer questions regarding his MERN Stack expertise, MCA studies at Chitkara University, and details of projects like MediCare Pro and NPS Vision.
- Support UI actions like page scrolling, navigation, and highlighting.
- Fall back gracefully to static resume responses if the AI service goes offline.
Project cards feature a custom image slider component (corosel.tsx) that:
- Automatically transitions project showcase screenshots every 3 seconds.
- Dynamically resets the auto-play timer upon manual swipes, drags, or navigation button clicks.
- Is fully responsive and adapts aspect ratios dynamically.
An interactive, theme-adaptive resume display module (resume-display.tsx) built using Framer Motion:
- Staggered reveals for technical skills, experience, and educational background.
- One-click resume download routing to a customized PDF (
Suraj_Joshi_Resume.pdf). - Clean separation of data files from UI presentation.
- Framework: Next.js & React (TypeScript)
- Styling: TailwindCSS with smooth gradients and site-wide glassmorphic panel backdrops.
- Animations: Framer Motion transitions (scroll animations, fade-up text, morphing chat bubble).
- SEO & Performance: Automated
sitemap.xmlandrobots.txtgeneration during production builds.
- Frontend: React.js, Redux, Responsive Web Design, HTML5, CSS3, JavaScript
- Backend: Node.js, Express.js, Socket.io (Real-Time), RESTful APIs, JWT Authentication
- Databases & Caching: PostgreSQL, MongoDB, MySQL, Redis Caching
- Tools: Git & GitHub, Postman
- Hosting / Deployment: Vercel, Railway
A full-stack PERN application supporting secure authentication, doctor schedules, patient records, and real-time appointment bookings.
- Tech Stack: React.js, Node.js, Express.js, PostgreSQL, Socket.io, Redis Caching
- Live Demo: MediCare Pro Live
- Repository: Source Code
An augmented reality (AR) product viewer catalog enabling customers to preview 3D products in real-time in their room space via camera access.
- Tech Stack: React.js, Express.js, MongoDB, AR.js
- Live Demo: NPS Vision Live
- Repository: Source Code
git clone https://github.com/joshi9604/portfolio.git
cd portfolionpm installCreate a .env.local file based on .env.example to configure mail settings and API keys for the AI chatbot assistant.
npm run devOpen http://localhost:3000 with your browser to see the portfolio live.
npm run buildThis compiles the application, runs static page rendering, and automatically generates sitemap/robots.txt configurations.