PortfolioAI - AI & Machine Learning Engineer Portfolio

A modern, interactive portfolio website showcasing AI and Machine Learning expertise. Built with React, TypeScript, and Vite, featuring animated neural network visualizations and a sleek dark theme.

🚀 Features

• Interactive Neural Network Animation - Dynamic canvas-based visualization in the hero section
• Responsive Design - Optimized for all devices with Tailwind CSS
• Modern UI/UX - Clean, professional design with smooth animations
• Project Showcase - Dedicated sections for featured AI/ML projects
• Skills Visualization - Animated progress bars for technical skills
• Contact Integration - Ready for Supabase backend integration
• SEO Optimized - Proper meta tags and semantic HTML structure

🛠️ Tech Stack

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS, PostCSS, Autoprefixer
• Icons: Lucide React
• Backend Ready: Supabase integration setup
• Development: ESLint, TypeScript ESLint
• Build Tool: Vite with React plugin

📋 Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/Jonatasdotdev/PortfolioAI.git
   cd PortfolioAI

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 to view the portfolio

📜 Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint for code quality checks

🎨 Customization

Personal Information

Update the following components with your information:

• src/components/Hero.tsx - Name, title, and social links
• src/components/About.tsx - Personal description and background
• src/components/Skills.tsx - Technical skills and proficiency levels
• src/components/Projects.tsx - Portfolio projects and descriptions
• src/components/Experience.tsx - Work experience and achievements
• src/components/Contact.tsx - Contact information and form

Styling

• Colors and themes can be customized in tailwind.config.js
• Global styles are in src/index.css
• Component-specific styles use Tailwind utility classes

Neural Network Animation

The animated background in the hero section can be customized by modifying:

• Number of nodes and connections
• Animation speed and colors
• Canvas dimensions and effects

🔧 Configuration Files

• vite.config.ts - Vite configuration
• tailwind.config.js - Tailwind CSS configuration
• tsconfig.json - TypeScript configuration
• eslint.config.js - ESLint rules and settings
• postcss.config.js - PostCSS plugins

📱 Sections Overview

1. Header - Navigation menu with smooth scrolling
2. Hero - Animated introduction with neural network background
3. About - Personal background and expertise overview
4. Skills - Technical skills with animated progress indicators
5. Projects - Featured AI/ML projects with descriptions and links
6. Experience - Professional experience and achievements
7. Contact - Contact form and social media links
8. Footer - Additional links and copyright information

🌐 Deployment

Build for Production

npm run build

The built files will be in the dist directory, ready for deployment to any static hosting service.

Recommended Hosting Platforms

• Vercel
• Netlify
• GitHub Pages
• AWS S3 + CloudFront

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

📞 Support

If you have any questions or need help customizing the portfolio, feel free to:

• Open an issue on GitHub
• Contact the maintainer
• Check the documentation