Edward Tshepo Sibeko - Software Engineer | Founder | Technical Leader

Personal portfolio website showcasing my journey as a software engineer, founder of Writon AI text processor, and technical leader. Features modern design, technical blog, and professional experience.

🌟 Features

• Modern Design: Clean, professional aesthetic with light/dark theme support
• Responsive Layout: Optimized for all devices and screen sizes
• Theme Switching: Automatic system preference detection with manual toggle
• Technical Blog: Insights on AI development, software engineering, and software innovation
• SEO Optimized: Comprehensive meta tags, structured data, and search engine optimization
• Performance Focused: Optimized CSS, preloaded resources, and efficient loading

🚀 Live Website

Visit the live website at: https://etsibeko-dev.github.io/

📁 Project Structure

etsibeko-dev.github.io/
├── index.html              # Main portfolio page
├── style.css              # Main stylesheet with theme support
├── script.js              # JavaScript functionality
├── blog/
│   ├── index.html         # Blog listing page
│   ├── blog.css          # Blog-specific styles
│   └── posts/            # Individual blog posts
│       ├── building-writon-ai-text-processor.html
│       └── ai-next-phase-human-evolution.html
├── assets/
│   ├── images/           # Logo and images
│   └── files/           # Resume and documents
├── sitemap.xml          # SEO sitemap
├── robots.txt           # Search engine directives
├── .nojekyll           # GitHub Pages configuration
├── .gitignore          # Git ignore rules
└── README.md           # Project documentation

🛠️ Technologies Used

• HTML5: Semantic markup with accessibility features
• CSS3: Modern styling with CSS Grid, Flexbox, and custom properties
• JavaScript: Vanilla JS for theme switching and interactions
• GitHub Pages: Static site hosting
• SEO: Comprehensive meta tags, structured data (JSON-LD), and sitemap

🎨 Design System

Color Palette

• Primary Blue: #1877f2
• Light Blue: #42a5f5
• Dark Blue: #0d47a1
• Accent Green: #42b883
• Accent Orange: #ff9800

Typography

• Clean, readable fonts optimized for web
• Consistent hierarchy and spacing
• Responsive text sizing

Theme Support

• Light Mode: Clean, professional appearance
• Dark Mode: Modern dark theme with proper contrast
• Auto-detection: Respects user's system preference
• Manual Toggle: Floating theme switcher button

📱 Responsive Design

• Mobile First: Optimized for mobile devices
• Tablet Support: Enhanced layouts for medium screens
• Desktop: Full-featured experience for large screens
• Touch Friendly: Appropriate touch targets and interactions

🔍 SEO Features

• Meta Tags: Comprehensive title, description, and keyword tags
• Open Graph: Social media sharing optimization
• Twitter Cards: Enhanced Twitter sharing
• Structured Data: JSON-LD schema markup for search engines
• Sitemap: XML sitemap for search engine crawling
• Robots.txt: Search engine crawling directives
• Canonical URLs: Prevents duplicate content issues

⚡ Performance Optimizations

• CSS Variables: Efficient theme switching without repaints
• Preloaded Resources: Critical CSS and images preloaded
• Optimized Images: Compressed and properly sized
• Minimal JavaScript: Lightweight, efficient code
• Efficient Selectors: Optimized CSS selectors and specificity

🚀 Deployment

This website is automatically deployed to GitHub Pages:

1. Repository: etsibeko-dev/etsibeko-dev.github.io
2. Branch: main
3. Domain: https://etsibeko-dev.github.io/
4. Build: Static HTML/CSS/JS (no build process required)

Local Development

To run locally:

# Clone the repository
git clone https://github.com/etsibeko-dev/etsibeko-dev.github.io.git

# Navigate to the directory
cd etsibeko-dev.github.io

# Start a local server
python3 -m http.server 8000

# Or use Node.js
npx serve .

# Or use PHP
php -S localhost:8000

📝 Content

Portfolio Sections

• Introduction: Professional overview and background
• Projects: Featured work including Writon AI
• Blog: Technical insights and development experiences
• Contact: Professional links and resume

Blog Posts

• Building Writon: Journey of creating an AI text processor
• AI Evolution: Academic insights on artificial intelligence

🔧 Customization

Adding New Blog Posts

1. Create HTML file in blog/posts/
2. Follow existing structure and SEO meta tags
3. Update sitemap.xml with new URL
4. Add to blog index page

Modifying Themes

1. Update CSS variables in :root selector
2. Modify [data-theme="dark"] overrides
3. Test both light and dark modes
4. Ensure accessibility compliance

Performance Monitoring

• Use browser dev tools to monitor performance
• Test with Lighthouse for SEO and performance scores
• Optimize images and CSS as needed

📊 Analytics & Monitoring

The website is optimized for:

• Google Search Console: For search performance monitoring
• Google Analytics: For visitor insights (if implemented)
• Lighthouse: For performance and SEO scoring
• Core Web Vitals: For user experience metrics

🤝 Contributing

This is a personal portfolio website. For suggestions or issues:

1. Open an issue on GitHub
2. Provide detailed description
3. Include screenshots if applicable

📄 License

This project is for personal portfolio use. All content and design are original work by Edward Tshepo Sibeko.

📞 Contact

• Website: https://etsibeko-dev.github.io/
• LinkedIn: https://www.linkedin.com/in/etsibeko/
• GitHub: https://github.com/etsibeko-dev

---

Built with ❤️ by Edward Tshepo Sibeko