A stunning, cinematic portfolio website showcasing 7+ years of expertise in AI, Blockchain, Full Stack Development, Chatbots, and Mobile Applications.
- Cinematic Design: Movie-like animations and visual effects
- Interactive Particle Background: Dynamic particle system with mouse interaction
- Project Showcase: Detailed project cards with image galleries and live previews
- Interactive Map: Mapbox integration showing location and availability
- Responsive Design: Optimized for all device sizes
- Contact Integration: Built-in contact form with multiple communication channels
- Performance Optimized: Fast loading with smooth animations
Ready to collaborate? Get in touch through any of the following channels:
- Primary: isaiasmoney2@gmail.com
- Secondary: expencive425@outlook.com
- React 18 with TypeScript
- Vite for fast development and building
- Tailwind CSS for styling and animations
- Mapbox GL JS for interactive maps
- Lucide React for icons
- Modern CSS animations and effects
- Core Technologies: HTML5, CSS3, JavaScript (ES6+), TypeScript
- Frameworks & Libraries: React.js, Next.js, Framer Motion
- Styling: Tailwind CSS, CSS-in-JS, Responsive Design
- State Management: Redux, Context API, Zustand
- UI/UX: Component-based architecture, Accessibility (a11y)
- Runtime & Frameworks: Node.js, Express.js
- Real-time Communication: WebSockets, Socket.io
- Authentication: OAuth 2.0, Passport.js, JWT
- Validation: Zod, Joi, Express Validator
- Programming Languages: Python, JavaScript/TypeScript
- API Development: RESTful APIs, GraphQL
- Containerization: Docker, Docker Compose
- Orchestration: Kubernetes, Docker Swarm
- Cloud Platforms: AWS (EC2, S3, Lambda), Google Cloud Platform, Microsoft Azure
- Web Servers: Nginx, Apache
- CI/CD: GitHub Actions, GitLab CI, Jenkins
- Monitoring: CloudWatch, Prometheus, Grafana
- Relational Databases: MySQL, PostgreSQL
- NoSQL Databases: MongoDB, Firebase Firestore
- Database Design: Schema design, Indexing, Query optimization
- ORMs: Prisma, Mongoose, Sequelize
- Real-time Databases: Firebase Realtime Database
- E-commerce Solutions: Shopify, Magento, WooCommerce
- Content Management: WordPress, Custom CMS
- Payment Integration: Stripe, PayPal, Square
- Inventory Management: Custom solutions, Third-party integrations
- SEO Optimization: Technical SEO, Performance optimization
- Version Control: Git, GitHub, GitLab
- Testing: Jest, Cypress, React Testing Library
- Package Managers: npm, yarn, pnpm
- Build Tools: Webpack, Vite, Rollup
- Code Quality: ESLint, Prettier, Husky
- Project Management: Agile, Scrum, Kanban
- Clone or download the project files
- Install dependencies:
npm install
- Configure Mapbox (Optional):
- Get a free API key from Mapbox
- Create
.env.localfile and add your token:
VITE_MAPBOX_ACCESS_TOKEN=your_mapbox_token_here
- See MAPBOX_SETUP.md for detailed instructions
- Start development server:
npm run dev
- Build for production:
npm run build
src/
├── components/ # Reusable UI components
│ ├── features/ # Feature-specific components
│ │ ├── ParticleBackground.tsx
│ │ ├── HeroSection.tsx
│ │ ├── ProjectCard.tsx
│ │ ├── ProjectModal.tsx
│ │ ├── ProjectsSection.tsx
│ │ ├── SkillsSection.tsx
│ │ ├── TestimonialsSection.tsx
│ │ └── ContactSection.tsx
│ └── layout/ # Layout components
│ ├── Header.tsx
│ └── Footer.tsx
├── constants/ # Application constants and data
│ └── projects.ts
├── types/ # TypeScript type definitions
│ └── index.ts
└── App.tsx # Main application component
- Open
src/constants/projects.ts - Add new project object to the
projectsarray:
{
id: 'unique-project-id',
title: 'Project Name',
category: 'AI' | 'Blockchain' | 'App' | 'Chatbot' | 'Fullstack',
description: 'Detailed project description...',
shortDescription: 'Brief description for cards',
technologies: ['React', 'Node.js', 'MongoDB'],
liveUrl: 'https://your-live-site.com',
githubUrl: 'https://github.com/your-username/repo',
userCount: '10,000+',
images: [
'image-url-1',
'image-url-2',
// ... up to 6 images
],
featured: true | false
}Edit the contact details in:
src/components/features/HeroSection.tsxsrc/components/features/ContactSection.tsxsrc/components/layout/Footer.tsx
The project uses Tailwind CSS with custom animations. Main color schemes are defined per category:
- AI: Blue to Cyan gradient
- Blockchain: Yellow to Orange gradient
- Apps: Green to Emerald gradient
- Chatbots: Purple to Pink gradient
- Full Stack: Red to Rose gradient
Interactive particle system that responds to mouse movement and creates dynamic connections between particles.
Detailed project view with:
- Image gallery with navigation
- Full project description
- Technology stack display
- Live site and GitHub links
- User statistics
Multi-method contact system including:
- Email integration
- whatsapp link
- Telegram link
- Form submission with status feedback
Custom CSS animations for:
- Fade-in effects
- Slide-up transitions
- Floating elements
- Shimmer effects
- Hover transformations
The portfolio is fully responsive and optimized for:
- Desktop (1200px+)
- Tablet (768px - 1199px)
- Mobile (320px - 767px)
- Optimized images with lazy loading
- Efficient particle system
- Smooth 60fps animations
- Fast Vite build system
- Minimal bundle size
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lintThis project is open source and available under the MIT License.
Feel free to fork this project and customize it for your own portfolio. If you create improvements, pull requests are welcome!
For business inquiries, project collaborations, or technical consultations, please use the primary email address or connect via LinkedIn for the fastest response.
Built with ❤️ by TAO-STAR