A stunning, responsive portfolio website showcasing GenAI, RAG, and LLMOps expertise with cutting-edge technologies, featuring smooth animations, dark/light mode support, and modern UI components. Optimized for GenAI/RAG/LLMOps internship opportunities.
- GenAI-Focused Content: Showcasing RAG applications, LLM fine-tuning, and production ML systems
- Interactive Metrics: Real-time project metrics (accuracy, latency, ROUGE scores) displayed with animated cards
- Featured Projects: Gradient-bordered cards highlighting DoCopilot, FLAN-T5, and RoBERTa projects
- Floating Resume Download: Easy-access resume button with animated tooltips
- Responsive Design: Fully responsive across all devices and screen sizes
- Dark/Light Mode: Seamless theme switching with system preference detection
- Smooth Animations: Powered by Framer Motion for delightful user interactions
- Modern UI Components: Custom-built components with shadcn/ui
- Performance Optimized: Fast loading times with Next.js 15 optimizations
- TypeScript: Full type safety throughout the application
- Interactive Elements: Engaging hover effects and micro-interactions
- SEO Optimized: Meta tags and structured data for GenAI/RAG engineer visibility
- Next.js 15 - React framework with App Router and Turbopack
- TypeScript 5 - Type-safe JavaScript
- React 19 - UI library with latest features
- Tailwind CSS 4 - Utility-first CSS framework
- shadcn/ui - Re-usable component library
- Framer Motion - Production-ready motion library
- Aceternity UI - 3D effects and advanced components
- Lucide React - Beautiful SVG icon library
- React Icons - Popular icon library
- next-themes - Theme management
- React Hook Form - Form validation
- Zod - TypeScript-first schema validation
- clsx - Conditional className utility
- tailwind-merge - Merge Tailwind classes
- Background:
#F8F7F2(Warm white) - Text Primary:
#1F2937(Dark gray) - Text Secondary:
#6B7280(Medium gray) - Accent Blue:
#3B82F6(Primary actions) - Success Green:
#10B981(Backend technologies) - Warning Yellow:
#F59E0B(Database technologies) - Purple:
#8B5CF6(AI/ML technologies)
- Background:
#0A0A0A(Deep black) - Text Primary:
#F9FAFB(Off white) - Text Secondary:
#D1D5DB(Light gray) - Accent Blue:
#60A5FA(Primary actions) - Success Green:
#34D399(Backend technologies) - Warning Yellow:
#FBBF24(Database technologies) - Purple:
#A78BFA(AI/ML technologies)
- Aurora Effects: Multi-color gradients with transparency
- Card Backgrounds: Subtle gradients with blur effects
- Interactive Elements: Dynamic color transitions
portfolio_ts/
├── app/
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── About.tsx # About section with CGPA stats
│ │ ├── Achievements.tsx # Google cert, Coursera, HF models
│ │ ├── Approach.tsx # Development approach
│ │ ├── CodingStats.tsx # GitHub & LeetCode stats
│ │ ├── Contact.tsx # Contact form
│ │ ├── Education.tsx # VIT Bhopal education
│ │ ├── FloatingResumeButton.tsx # Animated resume download
│ │ ├── Footer.tsx # Footer component
│ │ ├── Hero.tsx # GenAI Engineer hero section
│ │ ├── Navbar.tsx # Navigation header
│ │ ├── Projects.tsx # Projects with metrics & featured badges
│ │ └── Skills.tsx # 9 LLMOps skills + ML/DL/Full-Stack
│ ├── api/
│ │ └── send-email/
│ │ └── route.ts # Email API endpoint
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout with SEO
│ └── page.tsx # Home page
├── components/
│ └── ui/ # shadcn/ui components
├── lib/
│ └── utils.ts # Utility functions
├── public/ # Static assets
│ ├── docopilot.png # RAG project image
│ ├── flan-t5.png # Dialogue summarizer image
│ ├── roberta-banking.png # Intent classifier image
│ └── Resume.pdf # Resume file
└── components.json # shadcn/ui config
-
Clone the repository
git clone https://github.com/noviciusss/portfolio_ts.git cd portfolio_ts -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
- GenAI Engineer & RAG Specialist positioning
- Animated name with gradient text effects
- LinkedIn/GitHub hover cards with stats
- Call-to-action buttons
- Background gradient mesh effects
- Interactive profile card with EvervaultCard effect
- Live statistics: 2+ years, 10+ projects, 8.45 CGPA
- GenAI-focused professional summary
- Resume-aligned content for internship optimization
- 9 LLMOps & GenAI skills: LangChain, LangGraph, Agno, Vector DBs, FastAPI, Hugging Face, Prompt Engineering, MLflow/W&B, Gradio/Streamlit
- 5 categorized sections: LLMOps, ML/DL, Languages, Full-Stack, Tools
- Progress indicators with skill levels
- Interactive hover effects with descriptions
- Technology icons from react-icons
- Featured badge system for GenAI projects
- Metric cards displaying project results (accuracy, latency, ROUGE scores)
- Gradient borders on featured cards (DoCopilot, FLAN-T5, RoBERTa)
- 3D pin container effects with hover animations
- Real project images: docopilot.png, flan-t5.png, roberta-banking.png
- Technology tags with color coding
- Live demo and GitHub links
- Google IT Support Certificate with Credly verification
- Applied ML in Python - Coursera completion
- Published Hugging Face models (dialogue summarizer, intent classifier)
- VIT Bhopal academic excellence (8.45 CGPA)
- Animated FAB (Floating Action Button) appearing on scroll
- Gradient background with pulse animation
- Tooltip showing "GenAI Engineer & RAG Specialist"
- Smooth expand/collapse on hover
- Downloads Resume.pdf with custom filename
- Functional contact form with Resend integration
- Social media links (LinkedIn, GitHub)
- Location: Pratapgarh, U.P.
- Professional email
The project uses next-themes for theme management. Themes are configured in the root layout and can be customized in tailwind.config.js.
- Uses Tailwind CSS for styling
- Custom CSS variables for theme colors
- Responsive design patterns
- Animation configurations
- Image optimization with Next.js Image component
- Component memoization for expensive renders
- Lazy loading for below-fold content
- Optimized animations with
will-changeproperties
The portfolio is fully responsive with breakpoints:
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically on every push
The project can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- Heroku
- Digital Ocean
- Lighthouse Score: 95+ across all metrics
- Core Web Vitals: Optimized for excellent user experience
- SEO: Structured data and meta tags
- Accessibility: WCAG 2.1 compliant
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Samarth Pratap Singh - GenAI Engineer & RAG Specialist
- Portfolio: portfolio-noviciusss.vercel.app
- GitHub: @noviciusss
- LinkedIn: Samarth Pratap Singh
- Hugging Face: @noviciusss
- Location: Pratapgarh, U.P., India
- Education: BTech CSE, VIT Bhopal (8.45 CGPA)
- shadcn/ui for the amazing component library
- Framer Motion for smooth animations
- Tailwind CSS for the utility-first approach
- Next.js for the incredible framework
⭐ Star this repository if you found it helpful!