Implementation Plan

Project Setup and Repository Configuration

• Step 1: Initialize Jekyll Project and Base Configuration

  • Task: Set up the basic Jekyll project structure with necessary configuration files, install required dependencies, and configure the project for GitHub Pages.
  • Files:
    • Gemfile: Jekyll and plugin dependencies
    • _config.yml: Basic Jekyll configuration
    • .gitignore: Standard Jekyll gitignore file
    • README.md: Project documentation
  • User Instructions: Install Ruby and Jekyll on your development machine if not already installed.

• Step 2: Configure GitHub Repository and GitHub Actions

  • Task: Set up GitHub repository and create GitHub Actions workflow for automated deployment to GitHub Pages.
  • Files:
    • .github/workflows/jekyll-gh-pages.yml: GitHub Actions workflow configuration
  • User Instructions: Create a new GitHub repository named “cendekiapp.com” and push the initialized project to it. Enable GitHub Pages in the repository settings.

• Step 3: Custom Domain Setup

  • Task: Configure the custom domain cendekiapp.com to work with GitHub Pages.
  • Files:
    • CNAME: File containing domain name for GitHub Pages
  • User Instructions: In your domain registrar, create the following DNS records:
    • A record pointing to GitHub Pages IP addresses
    • CNAME record for www subdomain pointing to your GitHub Pages site

Design System Implementation

• Step 4: Integrate Tailwind CSS with Jekyll

  • Task: Set up Tailwind CSS in the Jekyll project for styling and configure it for dark mode only.
  • Files:
    • package.json: Node.js dependencies
    • tailwind.config.js: Tailwind configuration
    • postcss.config.js: PostCSS configuration
    • assets/css/main.scss: Main stylesheet entry point
  • User Instructions: Run npm install to install Node.js dependencies.

• Step 5: Create Base Layout and Style Components

  • Task: Implement the base layout template and core style components in a dark mode minimalist design.
  • Files:
    • _layouts/default.html: Base layout template
    • _includes/head.html: Head section with meta tags and CSS
    • _includes/header.html: Site header with navigation
    • _includes/footer.html: Site footer with about section and social links
    • assets/css/components: Directory for component styles

• Step 6: Implement Core UI Components

  • Task: Create reusable UI components inspired by Shadcn UI that will be used throughout the site.
  • Files:
    • _includes/components/button.html: Button component
    • _includes/components/card.html: Card component
    • _includes/components/badge.html: Badge component for status indicators
    • _includes/components/timeline.html: Base timeline component
    • assets/js/components.js: JavaScript for interactive components

Core Site Structure

• Step 7: Create Main Navigation and Pages

  • Task: Implement the main navigation menu and create skeleton pages for Home, About, Projects, and Contact.
  • Files:
    • _includes/navigation.html: Navigation component
    • index.md: Homepage
    • about.md: About page
    • projects/index.md: Projects listing page
    • contact.md: Contact page

• Step 8: Implement Homepage with Roadmap

  • Task: Design and implement the homepage with a SPA-style roadmap/timeline of projects.
  • Files:
    • _layouts/home.html: Homepage layout
    • _includes/roadmap.html: Roadmap component for homepage
    • assets/js/roadmap.js: JavaScript for roadmap interactions
    • assets/css/components/roadmap.scss: Roadmap specific styles

• Step 9: Configure Site-wide SEO and Metadata

  • Task: Set up SEO metadata, favicon, social sharing metadata, and Google Analytics integration.
  • Files:
    • _includes/seo.html: SEO meta tags component
    • _includes/analytics.html: Google Analytics integration
    • assets/favicon: Favicon files
    • robots.txt: Search engine directives

Project Pages and Timeline Implementation

• Step 10: Create Project Collection and Data Structure

  • Task: Set up Jekyll collections for projects and configure the data structure for project metadata.
  • Files:
    • _config.yml: Updated with collections configuration
    • _projects/_defaults.md: Default front matter for projects
    • _data/statuses.yml: Data file for status types and colors
    • _projects/sample-project.md: Sample project for testing

• Step 11: Implement Project Overview Template

  • Task: Create the project overview page template similar to buildtwelve.com/projects/1.
  • Files:
    • _layouts/project.html: Project layout template
    • _includes/project-header.html: Project header component
    • _includes/project-summary.html: Project summary component
    • projects/sample-project/index.html: Sample project page

• Step 12: Implement Timeline Visualization Component

  • Task: Create the timeline visualization component with week-based organization and status indicators.
  • Files:
    • _includes/timeline.html: Timeline component
    • _includes/timeline-item.html: Timeline item component
    • assets/css/components/timeline.scss: Timeline specific styles
    • assets/js/timeline.js: Timeline interaction JavaScript

• Step 13: Implement Status Indicators System

  • Task: Create the color-coded status indicators system for timeline items.
  • Files:
    • _includes/status-badge.html: Status badge component
    • assets/css/components/status-badge.scss: Status badge styles
    • _data/statuses.yml: Status data with color codes

Blog Post System

• Step 14: Configure Blog Post Collection and URL Structure

  • Task: Set up the blog post collection with proper URL structure and pagination.
  • Files:
    • _config.yml: Updated with post configuration
    • _layouts/post.html: Base post layout
    • _posts/_defaults.md: Default front matter for posts

• Step 15: Implement Project Introduction Template

  • Task: Create the standardized template for project introduction posts.
  • Files:
    • _layouts/project-introduction.html: Project introduction template
    • _includes/post-header.html: Post header component
    • _posts/YYYY-MM-DD-sample-project-introduction.md: Sample post

• Step 16: Implement Weekly Update Template

  • Task: Create the standardized template for weekly update posts.
  • Files:
    • _layouts/weekly-update.html: Weekly update template
    • _includes/update-summary.html: Update summary component
    • _posts/YYYY-MM-DD-sample-weekly-update.md: Sample post

• Step 17: Implement Technical Challenge Template

  • Task: Create the standardized template for technical challenge posts.
  • Files:
    • _layouts/technical-challenge.html: Technical challenge template
    • _includes/code-solution.html: Code solution component
    • _posts/YYYY-MM-DD-sample-technical-challenge.md: Sample post

• Step 18: Implement Code Snippet Highlighting

  • Task: Set up syntax highlighting for code snippets in blog posts.
  • Files:
    • _config.yml: Updated with syntax highlighter config
    • assets/css/syntax.scss: Syntax highlighting styles
    • _includes/code-block.html: Enhanced code block component

Advanced Features

• Step 19: Implement Search Functionality

  • Task: Add search functionality to allow users to search for projects and posts.
  • Files:
    • assets/js/search.js: Search functionality JavaScript
    • _includes/search.html: Search component
    • search.json: JSON index for search
    • search.html: Search results page

• Step 20: Implement Social Sharing

  • Task: Add social sharing buttons to project and post pages.
  • Files:
    • _includes/social-share.html: Social sharing component
    • assets/js/social-share.js: Social sharing JavaScript

• Step 21: Add Interactive Demo Integration

  • Task: Create a system for embedding CodePen/CodeSandbox examples in posts.
  • Files:
    • _includes/codepen-embed.html: CodePen embed component
    • _includes/codesandbox-embed.html: CodeSandbox embed component
    • assets/js/demo-loader.js: JavaScript for lazy loading demos

• Step 22: Implement Project Pagination

  • Task: Add pagination between projects and their updates.
  • Files:
    • _includes/project-pagination.html: Project pagination component
    • _includes/update-pagination.html: Update pagination component
    • assets/css/components/pagination.scss: Pagination styles

Mobile Responsiveness and Testing

• Step 23: Implement Mobile Responsive Design

  • Task: Ensure all components and layouts are responsive and work well on mobile devices.
  • Files:
    • assets/css/responsive.scss: Responsive design adjustments
    • _includes/mobile-nav.html: Mobile navigation component
    • assets/js/mobile-menu.js: Mobile menu JavaScript

• Step 24: Optimize Timeline for Mobile

  • Task: Adapt the timeline visualization for optimal viewing on mobile devices.
  • Files:
    • assets/css/components/timeline-mobile.scss: Mobile timeline styles
    • assets/js/timeline-mobile.js: Mobile timeline interactions

• Step 25: Cross-browser Testing and Bug Fixes

  • Task: Test the site across different browsers and devices, fix any compatibility issues.
  • Files:
    • Various files may need adjustments based on testing results
  • User Instructions: Test the site on Chrome, Firefox, Safari, and Edge browsers, as well as on mobile devices.

Final Setup and Launch

• Step 26: SEO and Performance Optimization

  • Task: Optimize the site for search engines and improve performance metrics.
  • Files:
    • _config.yml: Final SEO configurations
    • assets/js/main.min.js: Minified JavaScript
    • assets/css/main.min.css: Minified CSS

• Step 27: Create Sample Content

  • Task: Develop sample content to demonstrate all site features.
  • Files:
    • Sample project files
    • Sample blog posts with different templates
  • User Instructions: Review sample content and replace with your own project content.

• Step 28: Documentation and Content Creation Guide

  • Task: Create documentation for maintaining the site and adding new content.
  • Files:
    • docs/content-guide.md: Guide for creating content
    • docs/project-setup.md: Guide for setting up new projects
    • docs/maintenance.md: Site maintenance guide

Summary

This implementation plan breaks down the development of the Cendekia’s Tech Journey Blog into 28 manageable steps. The approach follows a logical progression:

1. Starting with the core Jekyll setup and GitHub Pages configuration
2. Setting up the design system with Tailwind CSS for consistent styling
3. Building the site structure and main pages
4. Implementing the project pages and timeline visualization
5. Creating the blog post system with templates
6. Adding advanced features like search and social sharing
7. Ensuring mobile responsiveness and cross-browser compatibility
8. Finalizing with optimizations and documentation

Key considerations during implementation:

1. Jekyll and GitHub Pages Integration: The plan leverages Jekyll’s static site generation capabilities with GitHub Pages for free hosting and simplified deployment via GitHub Actions.

2. Design System: Tailwind CSS provides a solid foundation for implementing a dark mode minimalist design, though some adaptation will be needed since Shadcn UI is typically used with React components.

3. Timeline Visualization: This is a central feature of the site and requires careful implementation to ensure it works well on both desktop and mobile devices.

4. Content Management: The plan establishes a structured approach to content with templates for different post types, making it easier to maintain consistency while documenting the app-building journey.

5. Mobile-First Approach: The responsive design is considered throughout the implementation process to ensure a good experience on all devices.

By following this plan, you’ll create a professional, developer-focused blog that effectively showcases your journey of building multiple projects over the course of a year.