A modern, responsive portfolio website showcasing expertise in Data Science, Machine Learning, and AI. Built with cutting-edge web technologies for optimal performance and user experience.
Live Website: marepallisanthosh.engineer
This portfolio website serves as a comprehensive showcase of skills, projects, and experience in Data Science, Machine Learning, and AI. It features a clean, modern design with smooth animations and responsive layouts that work seamlessly across all devices.
Homepage showcasing modern design, interactive elements, and the new project structure feature
- Responsive Layout: Seamlessly adapts to desktop, tablet, and mobile devices
- Smooth Animations: Framer Motion powered animations with scroll-triggered effects
- Clean UI/UX: Intuitive navigation with modern glass-morphism effects
- Interactive Components: Hover effects and micro-interactions
- Lightning Fast: Built with Vite for instant development and optimized production builds
- SEO Friendly: Proper meta tags, semantic HTML, and sitemap integration
- Progressive Enhancement: Works without JavaScript, enhanced with it
- Lazy Loading: Optimized image loading and code splitting
- Interactive Project Structure: Mermaid.js-powered architecture diagram with pan, zoom, and clickable GitHub links
- Mobile Touch Support: Full touch gesture support for mobile devices (pinch to zoom, drag to pan)
- Contact Form: Integrated email service using Resend API
- Project Showcase: Interactive project cards with live demos and GitHub links
- Skills Visualization: Animated skill bars and technology badges
- Experience Timeline: Professional journey with detailed descriptions
- Resume Download: Direct PDF download functionality
- GitHub Integration: Custom star button with live repository statistics
- React 18.3.1 - Modern UI library with hooks and functional components
- TypeScript 5.6.3 - Type-safe JavaScript for better development experience
- Vite 6.0.0 - Next-generation frontend build tool with HMR
- Tailwind CSS 3.4.17 - Utility-first CSS framework for rapid styling
- Framer Motion 11.13.1 - Production-ready motion library for React
- Node.js - JavaScript runtime for server-side logic
- Resend - Modern email API for contact form submissions
- CORS Enabled - Cross-origin resource sharing for secure API access
- Radix UI - Comprehensive component library for accessibility
- Lucide React - Beautiful & customizable icon library
- Mermaid.js - Interactive diagrams and flowcharts for project structure visualization
- React Hook Form - Performant forms with easy validation
- Recharts - Composable charting library for data visualization
- React Icons - Popular icon packs as React components
- PostCSS - CSS processing with Autoprefixer
- ESBuild - Fast JavaScript bundler and minifier
- Wouter - Minimalist routing for React applications
- Class Variance Authority - Type-safe component variants
- Vercel - Serverless deployment platform with edge functions
- CDN Optimized - Global content delivery for fast loading
- Analytics Ready - Built-in performance monitoring
marepallisanthosh.engineer/
├── client/ # Frontend React application
│ ├── public/ # Static assets
│ │ ├── me.png # Profile image
│ │ ├── horse.png # Brand logo
│ │ ├── portfolio-screenshot.png # Homepage screenshot
│ │ ├── MAREPALLI_SANTHOSH_RESUME99.pdf
│ │ ├── robots.txt # SEO crawler instructions
│ │ └── sitemap.xml # Site structure for search engines
│ └── 📁 src/ # Source code
│ ├── [⚛️ App.tsx](client/src/App.tsx) # Main application component
│ ├── [🎨 index.css](client/src/index.css) # Global styles with Tailwind imports
│ ├── [🚀 main.tsx](client/src/main.tsx) # Application entry point
│ ├── 🧩 components/ # Reusable UI components
│ │ ├── [👤 About.tsx](client/src/components/About.tsx) # About section with personal info
│ │ ├── [🎬 AnimatedSection.tsx](client/src/components/AnimatedSection.tsx) # Scroll-triggered animations
│ │ ├── [📧 Contact.tsx](client/src/components/Contact.tsx) # Contact form with validation
│ │ ├── [💼 Experience.tsx](client/src/components/Experience.tsx) # Professional timeline
│ │ ├── [🦶 Footer.tsx](client/src/components/Footer.tsx) # Site footer with links
│ │ ├── [🧭 Header.tsx](client/src/components/Header.tsx) # Navigation header with GitHub integration
│ │ ├── [🌟 Hero.tsx](client/src/components/Hero.tsx) # Landing section
│ │ ├── [💻 LeetCodeIcon.tsx](client/src/components/LeetCodeIcon.tsx) # Custom LeetCode icon
│ │ ├── [📊 MermaidDiagram.tsx](client/src/components/MermaidDiagram.tsx) # Interactive architecture diagram
│ │ ├── [🚀 Projects.tsx](client/src/components/Projects.tsx) # Project showcase grid
│ │ ├── [🏗️ ProjectStructure.tsx](client/src/components/ProjectStructure.tsx) # Project structure modal
│ │ └── [🛠️ Skills.tsx](client/src/components/Skills.tsx) # Technical skills display
│ ├── 🎣 hooks/ # Custom React hooks
│ │ └── [👁️ useScrollAnimation.ts](client/src/hooks/useScrollAnimation.ts) # Intersection Observer hook
│ └── 🔧 utils/ # Utility functions
│ └── [📨 emailService.ts](client/src/utils/emailService.ts) # Email handling logic
├── 🌐 api/ # Backend API functions
│ ├── [📬 contact.js](api/contact.js) # Contact form handler
│ └── [🏠 index.js](api/index.js) # API entry point
├── 📋 .github/ # GitHub community standards
│ ├── 📝 ISSUE_TEMPLATE/ # Issue templates
│ └── 🔄 pull_request_template.md # PR template
├── [⚡ vite.config.ts](vite.config.ts) # Vite configuration
├── [🎨 tailwind.config.ts](tailwind.config.ts) # Tailwind CSS configuration
├── [📦 package.json](package.json) # Dependencies and scripts
├── [🚀 vercel.json](vercel.json) # Vercel deployment config
├── 📜 LICENSE # MIT License
├── 🤝 CONTRIBUTING.md # Contribution guidelines
├── 🔐 SECURITY.md # Security policy
└── 📖 README.md # Project documentation
- Node.js (v18 or higher)
- npm, yarn, or pnpm
- Git
-
Clone the repository
git clone https://github.com/marepallisanthosh999333/marepallisanthosh.engineer.git cd marepallisanthosh.engineer -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
# Create .env file in the root directory echo "RESEND_API_KEY=your_resend_api_key_here" > .env
-
Start the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
http://localhost:5173
# Start development server with hot reload
npm run dev
# Build for production
npm run build
# Preview production build locally
npm run preview
# Type checking
npm run check
# Build for Vercel deployment
npm run vercel-build- Dynamic typing animation introducing professional role
- Call-to-action buttons for resume and contact
- Smooth scroll navigation to other sections
- Custom GitHub star button with live statistics
- Personal introduction and career journey
- Core values and approach to data science
- Professional philosophy and goals
- Interactive skill cards with proficiency levels
- Technology stack visualization
- Programming languages and tools expertise
- NLTK-powered text processing pipeline
- 88% accuracy on 10,000+ reviews
- TF-IDF feature extraction
- LSTM neural network with TensorFlow
- 5 years of NIFTY 50 historical data
- Time-series forecasting model
- Financial derivatives modeling
- Greeks calculation for risk analysis
- Monte Carlo simulation integration
- Internship experiences and achievements
- Academic projects and research
- Technical leadership and collaboration
- Architecture Visualization: Interactive Mermaid.js flowchart showing complete system architecture
- Clickable GitHub Integration: Direct navigation to source code files from diagram nodes
- Pan & Zoom Controls: Smooth navigation with mouse drag/wheel or touch gestures
- Mobile Optimized: Full touch support with pinch-to-zoom and drag gestures
- Performance Optimized: 60fps animations with hardware acceleration
- Reset Functionality: Double-click/tap to reset view to original position
- Integrated contact form with server-side validation
- Real-time email delivery using Resend API
- Social media and professional links
The project uses a custom Tailwind configuration with:
- Custom color palette
- Extended animations
- Responsive breakpoints
- Component-specific utilities
- React plugin with Fast Refresh
- Path aliases for clean imports
- Proxy setup for API routes
- Production optimizations
- Serverless function for contact API
- Automatic builds from GitHub
- Custom domain configuration
- Performance optimizations
- PageSpeed Insights: 95+ score
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- Bundle Size: Optimized for minimal loading time
- Blog Integration: Add a technical blog section with MDX support
- Dark Mode: Implement system-aware dark/light theme toggle
- Internationalization: Multi-language support (English, Hindi, Telugu)
- PWA Features: Add offline functionality and app-like experience
- Analytics Dashboard: Real-time visitor analytics and performance metrics
- 3D Elements: Interactive 3D models and Three.js integration
- AI Chatbot: Smart assistant for portfolio navigation and Q&A
- Code Playground: Interactive coding examples and demos
- Content Security Policy: XSS protection
- CORS Configuration: Secure API access
- Input Validation: Server-side form validation
- Rate Limiting: API abuse prevention
- HTTPS Enforcement: Secure data transmission
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Semantic HTML: Proper heading hierarchy
- Meta Tags: Social media and search optimization
- Sitemap: XML sitemap for search engines
- Robots.txt: Crawler guidance
- Schema Markup: Structured data for rich snippets
Contributions are welcome! Please read our Contributing Guidelines for details on our code of conduct and the process for submitting pull requests.
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow TypeScript and React best practices
- Use Prettier for code formatting
- Write meaningful commit messages
- Add tests for new features
Security issues should be reported privately. Please see our Security Policy for details on how to report vulnerabilities.
This project is licensed under the MIT License - see the LICENSE file for details.
- React Team for the amazing framework
- Vercel for seamless deployment
- Tailwind CSS for the utility-first approach
- Framer Motion for smooth animations
- Radix UI for accessible components
- Mermaid.js for interactive diagrams
Marepalli Santhosh
- Website: marepallisanthosh.engineer
- Email: [email protected]
- LinkedIn: Connect with me
- GitHub: @marepallisanthosh999333
- LeetCode: @marepallisanthosh999333
Built with React, TypeScript, and Tailwind CSS
© 2025 Marepalli Santhosh. All rights reserved.
© 2025 Marepalli Santhosh. All rights reserved.