This is a modern, responsive blog system integrated with your personal portfolio website. The blog features SEO optimization, pagination, search functionality, categories, tags, and a professional sidebar.

blog/
├── index.html              # Main blog listing page
├── blog-styles.css         # All blog styling
├── blog-script.js          # Blog functionality (search, pagination, etc.)
├── posts/
│   ├── post-1.html        # My Journey to Becoming a Software Engineer
│   ├── post-2.html        # Java Programming Complete Beginner Guide
│   ├── post-3.html        # How I Built My Personal Portfolio Website
│   ├── post-4.html        # Building an AI Voice Assistant Using ESP32
│   ├── post-5.html        # Modern Web Development in 2026
│   ├── post-6.html        # How Developers Should Use GitHub Professionally
│   ├── post-7.html        # Getting Started with Arduino and ESP32
│   ├── post-8.html        # Essential Skills Every Software Engineer Needs
│   ├── post-9.html        # How AI is Changing Software Development
│   └── post-10.html       # How to Build a Professional Developer Portfolio
└── assets/
    ├── featured-1.jpg     # Featured post image
    ├── blog-2.jpg         # Java post image
    └── [other post images]

• Hero Section: Eye-catching banner with search functionality
• Featured Post: Highlighted article with larger preview
• Blog Grid: Responsive grid of all blog posts
• Pagination: Navigate through blog posts with page numbers
• Sidebar Widgets:
  • Categories (with post count)
  • Recent Posts
  • Popular Posts
  • Tags Cloud
  • Author Information
  • Newsletter Subscription

• Hero Image Section: Large featured image with overlay
• Post Metadata: Date, category, reading time
• Table of Contents: Auto-generated navigation
• Article Content: Full article with formatting
• Social Share Buttons: Twitter, LinkedIn, Facebook, WhatsApp
• Author Box: Author information and social links
• Related Posts: Suggested reading
• Post Navigation: Previous/Next post links
• Responsive Design: Mobile, tablet, and desktop optimized

• Search: Real-time search across all posts
• Category Filtering: Filter posts by category
• Tag Filtering: Filter posts by tags
• Pagination: 6 posts per page
• Reading Time Estimation: Auto-calculated based on word count
• Newsletter Subscription: Simple subscription form
• Dark Mode: Professional dark theme throughout

Posts are defined in blog-script.js with the following structure:

{
    id: 1,
    title: "Post Title",
    excerpt: "Short description of the post",
    category: "Category Name",
    date: "Month Day, Year",
    readingTime: 10,  // in minutes
    image: "assets/blog-1.jpg",
    tags: ["tag1", "tag2", "tag3"]
}

Edit blog/blog-script.js and add your post to the blogPosts array:

{
    id: 11,
    title: "Your Post Title",
    excerpt: "A brief excerpt about your post...",
    category: "Category Name",
    date: "Month Day, 2026",
    readingTime: 8,
    image: "assets/blog-11.jpg",
    tags: ["tag1", "tag2"]
}

Copy one of the existing post templates (post-1.html, post-2.html, or post-3.html) and customize:

• Change the title and description
• Update the hero image reference
• Modify the category and metadata
• Write your article content
• Update the previous/next post links

Add your post image to the blog/assets/ folder with the name matching your post (e.g., blog-11.jpg).

• Java
• Web Development
• Software Engineering
• IoT
• AI
• Career
• Projects
• Tutorials

Use these or create new ones:

• career
• software-engineering
• java
• programming
• web-development
• portfolio
• html, css, javascript
• github
• git
• version-control
• iot
• esp32
• arduino
• embedded-systems
• ai
• machine-learning
• skills
• professional-development

--blog-primary: #001a2e;
--blog-accent: #598ad4;
--blog-accent-light: rgba(89, 138, 212, 0.1);
--blog-text: #f3f4f6;
--blog-text-muted: #94a3b8;
--blog-bg: #151312;
--blog-surface: #0d192e;
--blog-border: #1e293b;

Edit the :root section in blog-styles.css to change the color scheme.

• Meta descriptions on all pages
• Open Graph tags for social sharing
• Semantic HTML structure
• Proper heading hierarchy
• Image alt text
• Readable URLs
• Mobile-responsive design

• Update meta descriptions for each post
• Add schema.org structured data
• Submit sitemap to search engines
• Use descriptive file names for images
• Optimize images for web

1. Image Optimization

   • Use WebP format when possible
   • Compress images (TinyPNG, ImageOptim)
   • Use appropriately sized images

2. Code Optimization

   • CSS is already minified
   • JavaScript is optimized
   • Use lazy loading for images

3. Caching

   • Enable browser caching
   • Use CDN for static assets

• Desktop: 1024px and above
• Tablet: 768px - 1023px
• Mobile: Below 768px

The blog is linked from the main website navigation:

<a href="blog/index.html">Blog</a>

Consider adding:

• Comment system (Disqus, CommentBox)
• Social sharing plugins
• Email newsletter integration
• Blog analytics
• Full-text search API
• Related posts algorithm
• Reading progress indicator
• Dark/Light theme toggle
• RSS feed

For issues or questions, refer to the individual HTML files for detailed examples.

Created for Muvindu Ransara's Professional Portfolio Software Engineer | Full-Stack Web Developer | Java Developer | IoT & AI Enthusiast