Welcome to my personal portfolio website! This is a modern, responsive, and interactive showcase of my journey as an aspiring Software Engineer, Full-Stack Developer, and AI & ML Enthusiast. Built with cutting-edge technologies, this site highlights my projects, skills, education, certifications, and provides an easy way to get in touch.
🌟 Live Demo: tejasfolio.vercel.app
Hi, I'm Tejas Patil 👋, a passionate and dedicated developer based in Pune, India. Currently pursuing my Bachelor of Engineering in Computer Engineering at Savitribai Phule Pune University. I specialize in full-stack development, AI/ML applications, and scalable software solutions.
This portfolio website serves as a comprehensive digital resume, featuring:
- Interactive Hero Section with smooth animations
- About Me highlighting my journey and key skills
- Project Showcase with live demos and GitHub links
- Technical Skills categorized by expertise areas
- Education & Certifications timeline with clickable certificates
- AI-Powered Contact Form for seamless communication
Driven by innovation and a thirst for knowledge, I thrive on building impactful applications that solve real-world problems. Whether it's optimizing database performance, architecting RESTful APIs, or implementing AI-driven automation, I'm always eager to tackle new challenges.
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Dark/Light Mode: Seamless theme switching with next-themes
- Smooth Animations: Powered by Framer Motion for engaging interactions
- Accessible Components: Built with Radix UI primitives via ShadCN UI
- Intelligent Contact Form: Uses Google's Genkit and Gemini models for message processing
- Automated Email Sending: Integrated with Resend API for reliable email delivery
- Smart Flow Management: Custom Genkit flows for handling user inquiries
- Hero Section: Animated introduction with call-to-action buttons
- About Section: Personal journey and key technology areas
- Projects Gallery: Card-based layout with hover effects and project details
- Skills Matrix: Categorized technical competencies with visual icons
- Education Timeline: Interactive timeline with certificate previews
- Contact Form: Real-time validation and AI-powered message handling
- TypeScript: Full type safety for robust development
- ESLint: Code quality and consistency enforcement
- Hot Reload: Instant feedback during development
- SEO Optimized: Meta tags and structured data for better search visibility
- Next.js 15+: App Router, React Server Components, optimized performance
- React 18: Functional components, hooks, concurrent features
- TypeScript: Static typing for better code quality
- Tailwind CSS: Utility-first CSS framework
- ShadCN UI: Beautiful, accessible components built on Radix UI
- Framer Motion: Declarative animations and gestures
- Genkit: Open-source framework for AI-powered apps
- @genkit-ai/googleai: Integration with Google's Gemini models
- Resend: Email API for contact form submissions
- Firebase: Hosting, authentication, and real-time database
- Vercel: Deployment platform with global CDN
- Node.js 18+: JavaScript runtime
- npm: Package management
- ESLint: Code linting
- VS Code: Recommended IDE
- Node.js: Version 18.x or later (LTS recommended)
- npm: Comes bundled with Node.js
- Git: For cloning the repository
-
Clone the Repository
git clone https://github.com/Tejas164321/TejasFolio.git cd TejasFolio -
Install Dependencies
npm install
-
Environment Configuration
Create a
.env.localfile in the root directory:# Resend API Key for email functionality RESEND_API_KEY=your_actual_resend_api_key_here # Google AI API Key for Genkit and Gemini models GOOGLE_API_KEY=your_actual_google_ai_api_key_here
⚠️ Security Note: Never commit.env.localto version control. It's already in.gitignore. -
Start Development Server
npm run dev
The application will be available at
http://localhost:3000. -
Optional: Genkit Development Server
# Start Genkit UI for flow testing npm run genkit:dev # Or with auto-reload npm run genkit:watch
Access the Genkit Developer UI at
http://localhost:4000.
npm run dev: Start the Next.js development servernpm run genkit:dev: Launch Genkit development UInpm run genkit:watch: Genkit UI with file watchingnpm run build: Create production buildnpm run start: Start production servernpm run lint: Run ESLint for code qualitynpm run typecheck: TypeScript type checking
- Hero Section: Introduction and primary CTAs
- About: Personal background and expertise areas
- Projects: Portfolio of completed work with demos
- Skills: Technical competencies overview
- Education: Academic background and certifications
- Contact: Get in touch via AI-powered form
To personalize for your own use:
- Update personal information in component files
- Replace project data in
src/components/sections/projects-section.tsx - Add your certificates to
public/certificates/ - Modify contact details in
src/components/sections/contact-section.tsx - Update social links and resume download
TejasFolio/
├── app/ # Next.js App Router
│ ├── favicon.ico
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── src/
│ ├── ai/ # AI and Genkit configuration
│ │ ├── dev.ts
│ │ ├── genkit.ts
│ │ └── flows/
│ │ └── sendMessageFlow.ts
│ ├── components/
│ │ ├── layout/ # Layout components
│ │ │ ├── footer.tsx
│ │ │ └── header.tsx
│ │ ├── sections/ # Page sections
│ │ │ ├── about-section.tsx
│ │ │ ├── contact-section.tsx
│ │ │ ├── education-section.tsx
│ │ │ ├── hero-section.tsx
│ │ │ ├── projects-section.tsx
│ │ │ └── skills-section.tsx
│ │ ├── theme-provider.tsx
│ │ ├── theme-toggle.tsx
│ │ └── ui/ # ShadCN UI components
│ ├── hooks/
│ │ ├── use-mobile.tsx
│ │ └── use-toast.ts
│ └── lib/
│ └── utils.ts
├── public/ # Static assets
│ ├── certificates/ # Certification images
│ ├── project-images/ # Project screenshots
│ └── resume/
│ └── Tejas-Patil-Resume.pdf
├── docs/
│ └── blueprint.md # Project documentation
├── .env.local # Environment variables (not committed)
├── .gitignore
├── components.json # ShadCN configuration
├── next.config.ts # Next.js configuration
├── package.json
├── tailwind.config.ts # Tailwind CSS config
├── tsconfig.json # TypeScript config
└── README.md # This file
This project is licensed under the MIT License - see the LICENSE file for details.
Your Personal Portfolio