I’m a Full‑Stack Engineer building modern, performant web experiences.
Check out my work, blog posts, and open‑source projects.

Portfolio – kartikey.is-a.dev
A live showcase of my projects, blog, and résumé.

This is a modern, interactive developer portfolio showcasing projects, skills, and experience. It features smooth animations, a dark/light theme, blog integration, and an AI-powered chatbot assistant knowledgeable about the portfolio's owner.

• Interactive UI: Smooth page transitions and animations using Framer Motion.
• Responsive Design: Adapts seamlessly to desktop, tablet, and mobile devices.
• Dark/Light Mode: User-selectable theme with persistence using localStorage.
• Project Showcase: Displays featured projects and categorized project lists with links to live demos and source code.
• Skills Visualization: Highlights technical skills with proficiency indicators.
• AI Chatbot: An integrated chatbot powered by Google Gemini via Supabase Edge Functions, capable of answering questions about Kartikey's experience based on provided context.
• Blog Integration: Fetches and displays blog posts dynamically from Hashnode.
• Contact Form: Integrated with EmailJS for easy communication.
• Resume Viewer: Direct link to view/download the resume PDF.
• Particle Background: Engaging background animation using Three.js and React Three Fiber.

• Frontend:
  • React 18
  • Vite
  • JavaScript
  • Tailwind CSS
  • Framer Motion (Animations)
  • React Router (Routing)
  • React Hook Form (Form Handling)
  • Lucide React (Icons)
  • React Three Fiber / Drei (3D Particles)
  • React Markdown
• Backend & Services:
  • Supabase:
    • Edge Functions (Serverless chatbot backend)
    • Database (Storing chat sessions)
  • Google Gemini AI: Powers the chatbot's conversational abilities.
  • EmailJS: Handles contact form submissions.
  • Hashnode API: Fetches blog posts.
• Development Tools:
  • ESLint (Linting)
  • npm (Package Management)

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone https://github.com/awesome-kartikey/kartikey-portfolio-ai.git
   cd kartikey-portfolio-ai

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the project root and add the following variables:

   # EmailJS Credentials (See EMAIL_SETUP.md)
   VITE_EMAILJS_SERVICE_ID=YOUR_EMAILJS_SERVICE_ID
   VITE_EMAILJS_TEMPLATE_ID=YOUR_EMAILJS_TEMPLATE_ID
   VITE_EMAILJS_PUBLIC_KEY=YOUR_EMAILJS_PUBLIC_KEY
   VITE_RECIPIENT_EMAIL=YOUR_EMAIL_ADDRESS_FOR_CONTACT_FORM
   
   # Supabase Credentials (For Chatbot)
   VITE_SUPABASE_URL=YOUR_SUPABASE_PROJECT_URL
   VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
   
   # Hashnode Credentials (For Blog)
   VITE_HASHNODE_HOST=YOUR_HASHNODE_PUBLICATION_HOST # e.g., yourusername.hashnode.dev
   
   # Gemini API Key (Used in Supabase Function - Set this in Supabase Dashboard)
   # In your Supabase project dashboard -> Project Settings -> Functions -> chatbot -> Secrets
   # Add a secret named GEMINI_API_KEY with your Google AI Studio Gemini API key value.

   • See EMAIL_SETUP.md for EmailJS setup details.
   • You need a Supabase account and project for the chatbot.
   • You need a Hashnode account and publication host for the blog.
   • You need a Google AI Studio API key (for Gemini Flash) for the chatbot backend.

4. Deploy Supabase Functions: If you haven't set up the Supabase CLI, follow the Supabase Local Development Guide. Link your local project to your Supabase project:

   supabase link --project-ref YOUR_PROJECT_REF

   Deploy the functions:

   supabase functions deploy --no-verify-jwt
   # Or deploy a specific function:
   # supabase functions deploy chatbot --no-verify-jwt

   Note: Ensure the Gemini API Key secret is set in the Supabase dashboard as mentioned in step 3.

5. Start the development server:

   npm run dev

   The application should now be running on http://localhost:5173 (or another port if 5173 is busy).

6. Build for production:

   npm run build

   This command creates a dist folder with the optimized production build.

Navigate the portfolio using the navigation bar:

• Home: Landing page with hero section, tech stack, and overview.
• About: Detailed information about Kartikey Kumar.
• Projects: Showcase of featured projects and a categorized list of all projects.
• Skills: Overview of technical skills and expertise.
• Blog: Dynamically loaded blog posts from Hashnode.
• Contact: Contact form to send messages via EmailJS.
• AI Chatbot: Click the chat bubble (bottom-right) to interact with the AI assistant. Ask questions about Kartikey's skills, projects, or experience.
• Theme Toggle: Switch between light and dark modes using the sun/moon icon.
• View Resume: Button to open the PDF resume in a new tab.

• GitHub: awesome‑kartikey
• LinkedIn: kartikey‑kumar
• Twitter: @awesome_kartike

• Frontend: React, Vite, Tailwind CSS, Framer Motion
• Backend: Node.js, Supabase, Vercel Functions
• Analytics: Vercel Analytics (track resume & contact clicks)

• Download: Kartikey Kumar Resume (PDF)

Feel free to explore, star, or fork any of my repos.
Open an issue if you have suggestions or want to collaborate.