Project Context: graydot.ai Personal Website

Project Overview

User Preferences & Design Philosophy

Critical Content Rules

Key Conversation Decisions

  1. First attempt: Header approach with dual styling (terminal-style and regular-style spans)
  2. User rejected this approach entirely
  3. Final implementation: Simple buttons in bottom-right corner of each section

Products Page Requirements

Content Evolution

User’s Product Priorities

Workflow Preferences

Still Needed (Based on Conversation)

Site Structure

Main Pages

/
├── index.html (home page with sections)
├── products.html (detailed products showcase)
├── _layouts/
│   └── default.html (main layout template)
├── _posts/ (blog posts)
├── products/
│   └── potter/ (individual product pages)
└── blogs/
    └── ai-that-works/ (blog post pages)

Homepage Sections (index.html)

  1. Intro - Personal introduction
  2. Portfolio - GitHub projects and collaborations
  3. Launched Products - Live products with “Hot” badges
  4. Product Ideas - Concepts and prototypes
  5. Lab - Experimental projects
  6. Blogs - Blog posts with “Hot” badges
  7. Social Impact - Community-focused projects
  8. Social - Interactive mind map with social links
  9. Hobbies - Personal interests and activities

Technical Implementation

CSS Framework & Styling

Key CSS Classes

.terminal-box          /* Main container with terminal styling */
.menu-bar             /* Terminal window controls */
.terminal-command     /* Command line styling */
.carousel             /* Horizontal card container */
.card                 /* Individual content cards */
.section-footer       /* Container for "See All" buttons */
.see-all-btn          /* Bottom-right positioned buttons */
.product-showcase     /* Detailed product layout */
.product-layout       /* CSS Grid for product pages */
.feature-list         /* Styled lists without emoji bullets */

Interactive Features

Content Guidelines

Product Information Structure

Content Categories

  1. Hot Products: Current focus items (Potter.ai)
  2. Live Products: Drip Social, TalentGraf
  3. Development: Active projects
  4. Ideas: Conceptual projects
  5. Lab: Experimental/research projects

Specific Product Details

Potter.ai (Hot Product)

Drip Social

TalentGraf

Technical Dependencies

Jekyll Configuration

JavaScript Libraries

Design Assets

Development Workflow

Recent Changes Made

  1. ✅ Added “See All” buttons to all carousel sections
  2. ✅ Created comprehensive products.html page
  3. ✅ Removed all emojis from content
  4. ✅ Updated sidebar navigation to include Products link
  5. ✅ Implemented detailed product showcase layouts

Still Needed

WordPress Migration (Completed)

Key Considerations for Future Development

  1. Maintain Terminal Aesthetic: All new pages should follow the terminal box pattern
  2. No Emojis: Keep content professional and human-written appearance
  3. Responsive Design: Ensure mobile compatibility
  4. Jekyll URLs: Use clean URLs without file extensions
  5. Performance: Optimize images and assets for fast loading
  6. SEO: Proper meta tags and structured data
  7. Accessibility: ARIA labels and semantic HTML structure