Skip to content

dil-mezzy/optimuswrites.work.gd

BranchesTags

Repository files navigation

OptimusWrites - Professional Tech Blog

A modern, fully-featured tech blogging website with advanced functionality, animations, and professional design focused on DevOps, Cloud Computing, AI, and Software Development.

🚀 Features

Core Functionality

  • ✅ Modern Design: Dark theme with purple/indigo gradients and smooth animations
  • ✅ Fully Responsive: Perfect on desktop, tablet, and mobile devices
  • ✅ SEO Optimized: Meta tags, Open Graph, Twitter Cards, Schema.org markup
  • ✅ PWA Ready: Installable as a Progressive Web App with manifest.json
  • ✅ RSS Feed: Subscribe via RSS (feed.xml)
  • ✅ Fast Loading: Optimized assets and minimal dependencies

Interactive Features

  • ✅ Live Search: Real-time blog post filtering with debounce
  • ✅ Table of Contents: Auto-generated for blog posts
  • ✅ Social Sharing: Twitter, LinkedIn, Facebook, HN, Reddit
  • ✅ Comments System: GitHub Discussions integration (utterances)
  • ✅ Dark/Light Mode: Theme toggle with localStorage
  • ✅ Reading Progress: Visual scroll indicator for blog posts
  • ✅ Keyboard Shortcuts: Ctrl+K (search), ESC (clear), Ctrl+/ (scroll top)

Blog Enhancements

  • ✅ Related Posts: Intelligent post recommendations
  • ✅ Reading Time: Estimated time to read
  • ✅ Code Highlighting: Syntax highlighting with copy buttons
  • ✅ Print Support: Print-friendly blog posts
  • ✅ Smooth Animations: Intersection Observer for fade-ins

Pages

  • ✅ Homepage with featured posts
  • ✅ About page with animations (stats, timeline, tech orbit)
  • ✅ Privacy Policy
  • ✅ Terms of Service
  • ✅ 7 Comprehensive blog posts
  • ✅ 404 & 502 error pages

📁 Project Structure

optimuswrites.work.gd/
├── index.html                  # Homepage with blog listing
├── about.html                  # About page with animations
├── privacy.html                # Privacy policy
├── terms.html                  # Terms of service
├── 404.html                    # Error page
├── 502.html                    # Server error page
├── manifest.json               # PWA manifest
├── feed.xml                    # RSS feed
├── sitemap.xml                 # SEO sitemap
├── robots.txt                  # Search engine instructions
├── favicon.svg                 # Site icon
├── deploy.sh                   # Deployment script
├── css/
│   └── style.css              # Main stylesheet (1,894 lines)
├── js/
│   ├── main.js                # Core functionality
│   ├── about.js               # About page animations
│   ├── enhancements.js        # Advanced features
│   └── blog-enhancements.js   # Blog-specific features
└── blog/
    ├── kubernetes-deployment-guide.html
    ├── ai-llm-applications.html
    ├── aws-cost-optimization.html
    ├── microservices-architecture.html
    ├── docker-optimization.html
    ├── zero-trust-security.html
    └── real-time-data-pipelines.html

⚡ Quick Start

Local Development

# Clone the repository
git clone https://github.com/dil-mezzy/optimuswrites.work.gd.git
cd optimuswrites.work.gd

# Start local server (choose one)
python -m http.server 8000
# or
npx http-server
# or
php -S localhost:8000

# Visit http://localhost:8000

Deploy to Production

# Make deploy script executable
chmod +x deploy.sh

# Deploy (auto-syncs with Git)
./deploy.sh

🎨 Customization

Changing Colors

Edit the CSS variables in css/style.css:

:root {
    --primary-color: #6366f1;      /* Indigo */
    --secondary-color: #8b5cf6;    /* Purple */
    --accent-color: #ec4899;       /* Pink */
    --dark-bg: #0f172a;            /* Dark Navy */
    --dark-card: #1e293b;          /* Slate */
    --text-primary: #f8fafc;       /* Light */
    --text-secondary: #cbd5e1;     /* Gray */
}

Adding Your Information

  1. Update social links in all HTML files
  2. Change email to your email address
  3. Modify About page content in about.html
  4. Update hero section with your tagline
  5. Customize GitHub repo in js/blog-enhancements.js for comments

Adding New Blog Posts

  1. Copy an existing blog post as a template
  2. Update metadata (title, description, date, keywords)
  3. Add Open Graph and Twitter Card tags
  4. Include the blog-enhancements.js script
  5. Add post to homepage and update feed.xml
  6. Update sitemap.xml with new URL

Example blog post structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Post Title - OptimusWrites</title>
    <meta name="description" content="Your post description">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Your Post Title">
    <meta property="og:description" content="Your post description">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://www.optimuswrites.work.gd/blog/your-post.html">
    
    <!-- Twitter Card -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="Your Post Title">
    
    <!-- Include all CSS and fonts -->
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">...</nav>
    
    <!-- Article -->
    <article class="blog-post-content">
        <h1>Your Post Title</h1>
        <div class="post-meta">
            <span><i class="fas fa-calendar"></i> April 15, 2026</span>
            <span><i class="fas fa-tag"></i> Category</span>
        </div>
        
        <!-- Content with H2 and H3 headings -->
        <h2>Section 1</h2>
        <p>Content...</p>
        
        <h2>Section 2</h2>
        <p>Content...</p>
    </article>
    
    <!-- Footer -->
    <footer class="footer">...</footer>
    
    <!-- Scripts -->
    <script src="/js/main.js"></script>
    <script src="/js/blog-enhancements.js"></script>
</body>
</html>

🎯 JavaScript Features

Keyboard Shortcuts

  • Ctrl/Cmd + K: Focus search box
  • ESC: Clear search
  • Ctrl/Cmd + /: Scroll to top
  • ↑↑↓↓←→←→BA: Easter egg (Konami code)

Auto-Generated Features

The blog-enhancements.js automatically adds to blog posts:

  • Table of Contents: Auto-generated from H2/H3 headings
  • Social Share Buttons: Twitter, LinkedIn, Facebook, HN, Reddit
  • Related Posts: Customizable recommendations
  • Comments: GitHub Discussions integration
  • Reading Time: Auto-calculated
  • Print Button: Print-friendly version

📱 PWA (Progressive Web App)

The website can be installed as an app:

  1. Visit the website on mobile
  2. Look for "Add to Home Screen" prompt
  3. Install and use like a native app

Features:

  • Offline-capable (service worker ready)
  • App icon and splash screen
  • Standalone window
  • Theme color customization

🎨 Theme System

Dark/Light Mode

Users can toggle between dark and light themes:

  • Button appears in bottom-right corner
  • Preference saved to localStorage
  • Smooth transition animations

To customize light theme, edit in js/blog-enhancements.js:

[data-theme="light"] {
    --dark-bg: #ffffff;
    --dark-card: #f8fafc;
    --text-primary: #1e293b;
    // ... more variables
}

📊 Analytics Integration

Add Google Analytics by inserting before </head>:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

🔐 Security Best Practices

  1. HTTPS: Always use SSL certificate
  2. CSP Headers: Configure Content Security Policy
  3. Regular Updates: Keep dependencies current
  4. Input Validation: Sanitize any user inputs
  5. Backup: Regular automated backups

📝 Blog Post Checklist

Before publishing a new post:

  • SEO meta description added
  • Open Graph tags configured
  • Twitter Card tags added
  • Proper heading hierarchy (H1, H2, H3)
  • Code blocks have syntax highlighting
  • Images optimized and have alt text
  • Reading time is auto-calculated
  • Social share buttons appear
  • Comments section loads
  • Related posts configured
  • Added to homepage
  • Updated feed.xml
  • Updated sitemap.xml
  • Tested on mobile

🌐 SEO Checklist

  • ✅ Unique title tags for each page
  • ✅ Meta descriptions (150-160 characters)
  • ✅ Meta descriptions
  • ✅ Semantic HTML structure
  • ✅ Alt text for images
  • ✅ Sitemap (add sitemap.xml)
  • ✅ Robots.txt (add robots.txt)
  • ✅ Schema markup (consider adding)

📧 Newsletter Integration

The newsletter form is currently set to show an alert. To integrate with a service:

  1. Choose a provider (Mailchimp, ConvertKit, Buttondown, etc.)
  2. Update the form action in js/main.js
  3. Add proper form handling

Example for Mailchimp:

<form action="https://your-mailchimp-url" method="POST">
    <input type="email" name="EMAIL" placeholder="Enter your email" required>
    <button type="submit" class="btn btn-primary">Subscribe</button>
</form>

🔐 Security Recommendations

  1. Keep dependencies updated
  2. Use HTTPS (SSL certificate)
  3. Implement CSP headers
  4. Regular backups
  5. Validate user inputs if adding forms

📚 Resources

🆘 Common Issues

Images not loading

  • Check image paths are correct
  • Ensure images are uploaded to server
  • Verify file permissions

Hamburger menu not working

  • Ensure js/main.js is loaded
  • Check browser console for errors
  • Verify Font Awesome is loaded

Styles not applying

  • Clear browser cache
  • Check CSS file paths
  • Verify CSS files are uploaded

📄 License

This template is free to use and modify for your personal or commercial projects.

🤝 Contributing

Feel free to customize and improve this blog template. Share your improvements with the community!

Happy Blogging! 🎉

For questions or support, visit optimuswrites.work.gd

About

Tech Blogging Website

www.optimuswrites.work.gd/

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages