About the Portfolio
This is a comprehensive personal portfolio website built for André Ruperto, a Developer and Data Scientist. The portfolio serves as a professional showcase for projects, skills, and experiences in Development, Data Science, Machine Learning, and Process Automation.Live Website
Visit the live portfolio at andreruperto.dev
GitHub Repository
Explore the source code on GitHub
What Makes This Portfolio Special?
This isn’t just a static website - it’s a full-stack application with powerful features:Interactive UI
Modern React interface with smooth animations and video player
Dynamic Content
Projects managed via admin panel and stored in PostgreSQL
Real-time Data
Live GitHub activity integration showing contribution statistics
Contact System
Integrated contact form with dual email notifications
Admin Panel
JWT-authenticated admin area for content management
Responsive Design
Beautiful UI that works perfectly on all devices
Who Is This For?
- Developers
- Recruiters & Clients
- Students
If you’re a developer looking to build your own portfolio, this project demonstrates:
- Modern React patterns with TypeScript
- Full-stack architecture with Express backend
- Database integration with Prisma ORM
- Authentication and authorization
- Email integration
- Responsive design with Tailwind CSS
Key Highlights
Modern Technology Stack
Built with cutting-edge technologies for optimal performance and developer experience:- Frontend: React 18, TypeScript, Vite, Tailwind CSS
- Backend: Express.js with ESM modules
- Database: PostgreSQL with Prisma ORM
- UI Components: shadcn/ui library
- Authentication: JWT tokens
- Email: Resend API integration
Professional Features
Hero Section with Video
Hero Section with Video
An engaging hero section featuring an introductory video with play/replay functionality, social media links, and downloadable resume/presentations.
Project Showcase
Project Showcase
Dynamic project cards loaded from the database, featuring full-page image viewer, technology tags, and GitHub links.
Contact Form
Contact Form
Integrated contact form with email notifications, form validation, and user feedback - sends both notification emails and confirmation emails.
GitHub Activity
GitHub Activity
Real-time integration showing contribution graph, streak statistics, and animated snake visualization.
Admin Panel
Admin Panel
Secure admin area with JWT authentication for managing projects and previewing email templates.
Next Steps
Explore Features
Check out the Features page to learn about all the capabilities of this portfolio.
Understand the Tech Stack
Read about the Technology Stack to see why these technologies were chosen.
Get Started
Follow the Installation Guide to set up the portfolio locally.
Explore the Architecture
Dive into the Architecture to understand how everything works together.
Documentation Structure
This documentation is organized into several sections:- Overview: Introduction, features, and technology stack
- Getting Started: Installation, setup, development, and deployment
- Architecture: Deep dive into frontend, backend, and database structure
- Features: Detailed guides for each major feature
- Components: UI components and animation system
- API Reference: Complete API documentation for all endpoints
This portfolio is actively maintained and updated with new features. Check the GitHub repository for the latest changes.