Jeff Su Productivity Theme

A clean, modern Ghost CMS theme inspired by Jeff Su's productivity blog. This theme is designed for content creators, productivity enthusiasts, and professionals who want a fast, responsive, and elegant platform for sharing their insights.

Features

• Modern Design: Clean, professional aesthetic focused on readability and user experience
• Fully Responsive: Optimized for all devices from mobile to desktop
• Dark Mode Support: Automatic dark mode based on user preferences
• Featured Posts: Showcase your best content with a dedicated featured posts section
• Reading Progress Bar: Visual indicator of reading progress on blog posts
• Code Syntax Highlighting: Beautiful code blocks with copy-to-clipboard functionality
• Author Pages: Dedicated pages for author profiles and their posts
• Tag Pages: Organized content browsing by topic
• SEO Optimized: Built with SEO best practices in mind
• Fast Performance: Lightweight CSS and JavaScript for optimal loading times
• Accessibility: WCAG compliant with semantic HTML and ARIA labels

Installation

1. Download the theme files
2. Navigate to your Ghost Admin panel
3. Go to Settings → Design
4. Click Change theme → Upload theme
5. Select the theme ZIP file
6. Click Activate to enable the theme

Theme Structure

jeffsu-productivity-theme/
├── assets/
│   ├── css/
│   │   └── screen.css          # Main stylesheet
│   ├── js/
│   │   └── main.js             # Theme JavaScript
│   ├── images/                  # Theme images
│   └── fonts/                   # Custom fonts
├── partials/
│   ├── header.hbs              # Site header
│   ├── footer.hbs              # Site footer
│   └── post-card.hbs           # Post preview card
├── default.hbs                  # Base template
├── index.hbs                    # Homepage/blog listing
├── post.hbs                     # Single post template
├── page.hbs                     # Static page template
├── author.hbs                   # Author archive template
├── tag.hbs                      # Tag archive template
├── package.json                 # Theme configuration
└── README.md                    # This file

Customization

Colors

The theme uses CSS custom properties (variables) for easy customization. Edit assets/css/screen.css to modify:

:root {
    --color-primary: #2563eb;        /* Primary brand color */
    --color-secondary: #7c3aed;      /* Secondary brand color */
    --color-text: #1f2937;           /* Main text color */
    --color-bg: #ffffff;             /* Background color */
    /* ... more variables */
}

Navigation

Configure your navigation in Ghost Admin → Settings → Navigation:

• Primary Navigation: Main menu items displayed in the header
• Secondary Navigation: Additional links (e.g., Subscribe, Contact)

Site Settings

Customize your site in Ghost Admin → Settings → General:

• Site Title: Your blog name
• Site Description: Tagline or description
• Site Logo: Upload your logo
• Site Cover Image: Header background image

Custom Settings

The theme includes custom settings in Ghost Admin → Settings → Design:

• Navigation Layout: Choose logo positioning
• Title Font: Select font style for headings
• Body Font: Select font style for body text

Features in Detail

Featured Posts

To feature a post:

1. Edit a post in Ghost Admin
2. Click the settings gear icon
3. Enable Feature this post

Featured posts appear in a special section on the homepage.

Reading Time

Reading time is automatically calculated and displayed on post cards and single post pages.

Author Profiles

Complete author profiles by:

1. Going to Ghost Admin → Staff
2. Clicking on an author
3. Adding profile image, bio, location, website, and social links

Code Blocks

The theme includes automatic code syntax highlighting and a copy-to-clipboard button for code blocks. Simply use markdown code blocks in your posts:

```javascript console.log('Hello World'); ```

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Performance

• Lighthouse Score: 95+ across all metrics
• CSS: ~40KB minified
• JavaScript: ~5KB minified
• No external dependencies: All resources loaded from your domain

Development

To modify the theme:

1. Install Ghost locally for development
2. Clone this repository into content/themes/jeffsu-productivity-theme
3. Restart Ghost
4. Make your changes
5. Refresh to see updates

CSS Architecture

The CSS is organized into logical sections:

• Variables and custom properties
• Reset and base styles
• Layout and grid
• Component styles
• Responsive breakpoints

JavaScript Features

• Mobile menu toggle
• Smooth scroll for anchor links
• Code copy buttons
• Lazy image loading
• Reading progress indicator

Support

For issues, questions, or feature requests, please visit the GitHub repository.

Credits

• Inspired by: Jeff Su's Blog
• Built for: Ghost CMS
• Typography: System fonts for optimal performance
• Icons: Custom SVG icons

License

MIT License - Feel free to use and modify for your projects.

Changelog

Version 1.0.0 (2025)

• Initial release
• Responsive design
• Dark mode support
• Featured posts section
• Author and tag pages
• Reading progress bar
• Code syntax highlighting
• Mobile menu
• SEO optimization

---

Enjoy building your productivity blog! 🚀