A modern, responsive portfolio website showcasing my skills, experience, and projects as a Full-Stack Software Engineer and IT Technician.
This portfolio represents a complete professional web presence built with modern web technologies and best practices. It features a sleek, dark-themed design with starry night background effects, smooth animations, and comprehensive sections highlighting my technical expertise and professional journey.
- 🎨 Modern Design: Dark theme with animated starry night background
- 📱 Fully Responsive: Optimized for all devices and screen sizes
- 🚀 Performance Optimized: Fast loading with efficient CSS and JavaScript
- ♿ Accessibility Focused: ARIA labels, semantic HTML, and keyboard navigation
- 🔍 SEO Optimized: Meta tags, Open Graph, and Twitter Cards
- 📊 Live GitHub Integration: Real-time GitHub statistics and activity
- ✨ Smooth Animations: AOS library integration for scroll-triggered animations
- Navigation Bar - Fixed header with smooth scrolling and theme toggle
- Hero Section - Professional introduction with contact details and recent achievements
- About Section - Professional summary and career snapshot
- Skills Section - Interactive skill categories with GitHub activity integration
- Experience Timeline - Professional experience and education history
- Projects Showcase - Featured projects with technology stacks and live demos
- Contact Section - Multiple contact methods and call-to-action
- Footer - Social media links and copyright information
- HTML5 - Semantic markup structure
- CSS3 - Custom styling with CSS Grid and Flexbox
- JavaScript (ES6+) - Interactive functionality and animations
- Bootstrap 5.3 - Responsive framework and components
- AOS (Animate On Scroll) - Scroll-triggered animations
- Font Awesome 6.4 - Icon library
- Google Fonts - Typography (Inter & Fleur De Leah)
- Git & GitHub - Version control and deployment
- GitHub Pages - Static site hosting
- VS Code - Development environment
- GitHub Stats API - Live contribution data
- Vercel GitHub Stats - Repository statistics visualization
- GitHub Streak Stats - Commit streak tracking
- Modern web browser
- Text editor or IDE
- Basic knowledge of HTML, CSS, and JavaScript
-
Clone the repository
git clone https://github.com/Silas-Matabane/Silas-Matabane.github.io.git
-
Navigate to project directory
cd Silas-Matabane.github.io -
Open in your preferred editor
code . -
Launch the website
- Open
index.htmlin your browser, or - Use a local development server like Live Server
- Open
├── index.html # Main HTML file
├── style.css # Primary stylesheet
├── script.js # Main JavaScript functionality
├── css/
│ ├── variables.css # CSS custom properties
│ ├── enhanced-styles.css # Additional component styles
│ └── components/
│ └── cards.css # Card component styles
├── images/ # Image assets
├── Projects/ # Project demos and assets
│ ├── CV/ # CV files and interactive version
│ ├── Vastly Sage/ # Vastly Sage project assets
│ ├── Konecta/ # Konecta project assets
│ └── Bank Card Project/ # Bank card project files
└── README.md # Project documentation
- Smooth Scrolling Navigation - Seamless section transitions
- Animated Skill Pills - Categorized technology display
- Project Tech Stacks - Scrolling technology showcases
- Back to Top Button - Quick navigation enhancement
- Responsive Design - Mobile-first approach
- Lazy Loading - Efficient resource loading
- Optimized Images - Compressed assets for faster loading
- Minified CSS/JS - Reduced file sizes
- CDN Integration - Fast library delivery
- Meta Tags - Comprehensive SEO optimization
- Open Graph - Social media preview optimization
- Twitter Cards - Enhanced Twitter sharing
- Structured Data - Better search engine understanding
The website is built with a mobile-first approach and includes:
- Breakpoints: 576px, 768px, 992px, 1200px
- Flexible Layouts: CSS Grid and Flexbox
- Scalable Typography: Responsive font sizing
- Touch-Friendly: Optimized for mobile interactions
- Primary Blue: #007bff
- Dark Background: #1a1a2e with gradient overlays
- Text Colors: Light/dark theme variants
- Accent Colors: Success, warning, and info variants
- Primary Font: Inter (300-700 weights)
- Accent Font: Fleur De Leah (decorative)
- Scale: Responsive typography with fluid scaling
- Add project assets to
/Projects/[project-name]/ - Update the projects section in
index.html - Add corresponding CSS if needed
- Update CSS variables in
css/variables.css - Modify component styles in respective CSS files
- Test across different screen sizes
- Personal Information: Update in hero and about sections
- Skills: Modify skill categories and technologies
- Experience: Update timeline entries
- Contact Details: Update contact information
This site is deployed using GitHub Pages:
- Push to main branch
- Enable GitHub Pages in repository settings
- Select source: Deploy from main branch
- Custom domain (optional): Configure in repository settings
Visit the live portfolio at: https://silas-matabane.github.io
While this is a personal portfolio, suggestions and improvements are welcome:
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -m 'Add improvement') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
Matabane Mpako Silas
- Email: tetelosilas@gmail.com
- LinkedIn: silas-tetelo-matabane-TT
- GitHub: Silas-Matabane
- Website: silas-matabane.github.io
This project is open source and available under the MIT License.
- Bootstrap Team - For the excellent CSS framework
- AOS Library - For smooth scroll animations
- Font Awesome - For comprehensive icon library
- GitHub - For hosting and version control
- Vercel - For GitHub stats API services
Built with Passion by Silas Matabane - Full-Stack Software Engineer