Project Context: graydot.ai Personal Website
Project Overview
- Site: graydot.ai - Personal website for Jeba Singh Emmanuel
- Technology: Jekyll-based static site with terminal-themed design
- Purpose: Engineering leader’s personal site showcasing products, portfolio, blog, and social presence
- Current Focus: Enhancing existing Jekyll site with new pages and improved navigation
User Preferences & Design Philosophy
Critical Content Rules
- NO EMOJIS: User specifically stated “emojis make content look AI-generated” - this was a key decision point
- Professional Appearance: Content should look human-written, not AI-generated
- Terminal Aesthetic: Maintain consistent terminal/command-line theme throughout
Navigation & UX Decisions
- Simple Buttons Preferred: User rejected header-based “see all” links approach, specifically requested simple bottom-right buttons instead
- Detailed Content Pages: User prefers comprehensive content pages over just card summaries (reason for creating full products.html)
- Jekyll-Friendly URLs: Use clean URLs without .html extensions
Key Conversation Decisions
“See All” Links Implementation Journey
- First attempt: Header approach with dual styling (terminal-style and regular-style spans)
- User rejected this approach entirely
- Final implementation: Simple buttons in bottom-right corner of each section
Products Page Requirements
- User specifically requested terminal theme but “full terminal sections instead of cards”
- Requested “larger text and more detailed content”
- Specified screenshots should go on right side of each product
- Must maintain Jekyll-friendly URLs
Content Evolution
- Started with emojis in content (hot badges, feature bullets)
- User specifically called out emoji removal after seeing the products page
- All emojis were systematically removed from badges, feature lists, and placeholders
User’s Product Priorities
- Potter.ai: Currently marked as “Hot Product” - active development focus
- Drip Social & TalentGraf: Live products but less current focus
- User has many “coming soon” projects indicating active development pipeline
Workflow Preferences
- User prefers immediate implementation over asking for approval
- Values clean, professional presentation
- Focuses on practical functionality over flashy design
Still Needed (Based on Conversation)
- Additional pages for remaining “See All” links: /portfolio, /ideas, /lab, /blog, /impact, /hobbies
- Real screenshots to replace placeholders
- User mentioned wanting more detailed content across the board
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)
- Intro - Personal introduction
- Portfolio - GitHub projects and collaborations
- Launched Products - Live products with “Hot” badges
- Product Ideas - Concepts and prototypes
- Lab - Experimental projects
- Blogs - Blog posts with “Hot” badges
- Social Impact - Community-focused projects
- Social - Interactive mind map with social links
- Hobbies - Personal interests and activities
Navigation Links
- All carousel sections have “See All” buttons linking to dedicated pages:
- Portfolio →
/portfolio
- Launched Products →
/products
✅ (implemented) - Product Ideas →
/ideas
- Lab →
/lab
- Blogs →
/blog
- Social Impact →
/impact
- Hobbies →
/hobbies
- Portfolio →
Technical Implementation
CSS Framework & Styling
- Terminal Boxes:
.terminal-box
with.menu-bar
and window controls (close, minimize, maximize) - Terminal Commands:
.terminal-command
with hostname and command styling - Layout Systems: CSS Grid and Flexbox for responsive layouts
- Carousel Design: Horizontal scrolling card layouts
- Color Scheme: Terminal-inspired with brand colors for social platforms
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
- Nerd Mode Toggle: Theme switching functionality
- Mind Map: D3.js-powered social links visualization with curved lines
- Hover Effects: Card animations and button hover states
- Responsive Design: Mobile sidebar and adaptive layouts
Content Guidelines
Product Information Structure
- Title & Tagline: Clear product identification
- Description: Comprehensive explanation without emojis
- Key Features: Bulleted lists (no emoji prefixes)
- Product Stats: Status, platform, etc.
- Actions: Primary and secondary buttons
- Screenshots: Placeholder with shimmer effects
Content Categories
- Hot Products: Current focus items (Potter.ai)
- Live Products: Drip Social, TalentGraf
- Development: Active projects
- Ideas: Conceptual projects
- Lab: Experimental/research projects
Specific Product Details
Potter.ai (Hot Product)
- AI-powered text enhancement for macOS
- Taskbar integration, privacy-first
- Status: Active Development
- Target: macOS 11.0+
Drip Social
- AI-supported social media management
- User maintains creative control
- Status: Live
- Platform: Web App
TalentGraf
- Micro-skill connection platform
- Project-based collaborations
- Status: Live
- Platform: Web App
Technical Dependencies
Jekyll Configuration
- Uses Jekyll for static site generation
- Layout inheritance via
_layouts/default.html
- Frontmatter for page metadata and SEO
- SVG sprite system for icons
JavaScript Libraries
- D3.js: For social mind map visualization
- Custom Scripts: DOM manipulation for interactive elements
Design Assets
- SVG Icons: GitHub, social media platforms
- Favicon: Site branding
- Color Palette: Terminal-inspired with brand accent colors
Development Workflow
Recent Changes Made
- ✅ Added “See All” buttons to all carousel sections
- ✅ Created comprehensive products.html page
- ✅ Removed all emojis from content
- ✅ Updated sidebar navigation to include Products link
- ✅ Implemented detailed product showcase layouts
Still Needed
- Additional dedicated pages for other “See All” links
- More product screenshots and real content
- Blog post pages expansion
- Portfolio project details
WordPress Migration (Completed)
- Created WordPress XML export with all content
- Provided theme starter files to preserve terminal aesthetic
- Multiple migration options documented
- This was completed earlier in the conversation
Key Considerations for Future Development
- Maintain Terminal Aesthetic: All new pages should follow the terminal box pattern
- No Emojis: Keep content professional and human-written appearance
- Responsive Design: Ensure mobile compatibility
- Jekyll URLs: Use clean URLs without file extensions
- Performance: Optimize images and assets for fast loading
- SEO: Proper meta tags and structured data
- Accessibility: ARIA labels and semantic HTML structure