Merge pull request #2 from codefrydev/NewDesign

New design

Author: codefrydev

.github/workflows/hugo.yaml

@@ -50,6 +50,8 @@ jobs:
         uses: actions/configure-pages@v4
       - name: Install Node.js dependencies
         run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+      - name: Build Tailwind CSS
+        run: npm run build:css
       - name: Build with Hugo
         env:
           # For maximum backward compatibility with Hugo modules

.gitignore

@@ -1,3 +1,4 @@
 public
 /public
 .DS_Store
+node_modules

README.md

@@ -1,86 +1,120 @@
-# Adding a New Section: **Store**
+# CodeFryDev
 
-This guide outlines steps to add a new section called **Store** to the website.
+Static site for [codefrydev.in](https://codefrydev.in/) — free online tools, games, AI apps, and creative resources. Built with [Hugo](https://gohugo.io/) and Tailwind CSS, deployed to GitHub Pages.
 
----
+## Features
 
-## **Step I. Create Content Folder**
+- **Modern homepage** — category grids, search palette, scroll sections, dark/light theme
+- **Browse** — `/browse/` index plus category pages (`creative-assets`, `tools-utilities`, `games-fun`, `site-links`)
+- **Hubs** — Games, AI, Design Lab, Store, Search
+- **CFDDC** — year-by-year “developer conference” pages at `/cfddc/` fed from [`data/history.yaml`](data/history.yaml)
+- **History timeline** — `/history/`
+- **Ladybug easter egg** — homepage only; click **Beta** in the nav to reveal
+- **Press, About us, team profiles**, FAQ, and more
 
-1. Inside the `content` folder, create a new folder named `store`.
-2. Inside the `store` folder, create a file named `_index.md`.
+## Tech stack
 
-**Example Structure:**
+| Layer | Tools |
+|--------|--------|
+| Site generator | Hugo Extended **0.160.1** (see [`.github/workflows/hugo.yaml`](.github/workflows/hugo.yaml)) |
+| Styling | Tailwind CSS 3 → `static/css/home-tailwind.css` |
+| Dark theme | `assets/css/modern-dark-theme.css` (copied to `static/css/` on build) |
+| Icons | Phosphor Icons (CDN) |
+| Deploy | GitHub Actions → GitHub Pages |
 
-```sh
-content/
-└── store/
-    └── _index.md
-```
+## Prerequisites
+
+- [Hugo Extended](https://gohugo.io/installation/) (0.160+ recommended)
+- [Node.js](https://nodejs.org/) 18+ and npm (for CSS build)
+
+## Local development
 
----
+```bash
+# Install JS dependencies (first time)
+npm install
 
-## **Step II. Configure \_index.md**
+# Build Tailwind + dark theme CSS
+npm run build:css
 
-Add the following front matter to `_index.md`:
+# Watch CSS while editing (optional, second terminal)
+npm run watch:css
 
-```yaml
----
-title: "Store"
-date: 2025-07-07T00:00:00Z
----
+# Run dev server
+hugo server
 ```
 
----
+Open [http://localhost:1313/](http://localhost:1313/). After changing templates or `assets/css/tailwind-input.css`, run `npm run build:css` (or use `watch:css`).
 
-## **Step III. Create Data File**
+Production build:
 
-1. Inside the `data` folder, create a new file named `store.yaml`.
+```bash
+npm run build:css && hugo --minify
+```
+
+Output is written to `public/`.
 
-**Example Structure:**
+## Project structure
 
-```sh
-data/
-└── store.yaml
+```text
+content/          Page front matter (Markdown/HTML)
+data/             YAML data (home categories, history, browse meta, FAQ, …)
+layouts/          Hugo templates (home, browse, cfddc, hubs, modern shell)
+layouts/partials/ Reusable partials (nav, tool cards, ladybug, …)
+static/           CSS, JS, images (served as-is)
+assets/css/       Tailwind source + modern-dark-theme source
 ```
 
----
+### Main data files
 
-## **Step IV. Add Store Data**
+| File | Purpose |
+|------|---------|
+| [`data/home.yaml`](data/home.yaml) | Homepage tool categories and cards |
+| [`data/homepage.yaml`](data/homepage.yaml) | Hero slides, nav mega menu, testimonials, FAQ copy |
+| [`data/history.yaml`](data/history.yaml) | Timeline entries (also powers CFDDC year pages) |
+| [`data/cfddc.yaml`](data/cfddc.yaml) | Optional per-year CFDDC taglines/dates |
+| [`data/store.yaml`](data/store.yaml) | Mobile store listings |
+| [`data/games.yaml`](data/games.yaml), [`data/ai.yaml`](data/ai.yaml), etc. | Hub page content |
 
-Populate `store.yaml` with data in the following format:
+## Adding a new hub or browse category
 
-```yaml
-data:
-  - name: "Water Reminder"
-    icon: "cfd-waterreminder"
-    url: "https://play.google.com/"
-```
+**Hub** (e.g. a top-level section like `/games/`):
 
-* **name**: Display name of the store item.
-* **icon**: Icon class or identifier for the item.
-* **url**: Link to the item.
+1. Add `content/<section>/_index.md` with title and description.
+2. Add `data/<section>.yaml` with items (`name`, `icon`, `url`, …).
+3. Add `layouts/<section>/` template (see existing `games`, `ai`, `store`).
+4. Link from [`data/homepage.yaml`](data/homepage.yaml) nav mega menu if needed.
 
----
+**Browse category** (under `/browse/<slug>/`):
 
-## **Step V. Create Layout Template**
+1. Add tools to a category in [`data/home.yaml`](data/home.yaml).
+2. Create `content/browse/<slug>/_index.md` with `category_slug` matching the YAML slug.
+3. Ensure [`layouts/browse/list.html`](layouts/browse/list.html) routes the category (uses `browse-category` partial).
 
-1. Inside the `layouts` folder, create a new folder named `store`.
-2. Inside the `store` folder, create a file named `store.html`.
+## Adding a CFDDC year
 
-**Example Structure:**
+When [`data/history.yaml`](data/history.yaml) includes dates for a new year:
 
-```sh
-layouts/
-└── store/
-    └── store.html
-```
+1. Create `content/cfddc/<year>/_index.md` with `year: "<year>"` in front matter.
+2. Optionally add copy under `years.<year>` in [`data/cfddc.yaml`](data/cfddc.yaml).
+3. The hub at `/cfddc/` lists years automatically from history dates.
+
+## Homepage ladybug
+
+- Partial: [`layouts/partials/ladybug.html`](layouts/partials/ladybug.html)
+- Assets: `static/css/ladybug.css`, `static/js/ladybug.js`
+- Included only on [`layouts/index.html`](layouts/index.html)
+- **Beta** in the nav (`#ladybug-reveal-beta`) reveals the easter egg on the homepage
+
+## CSS notes
+
+- Edit Tailwind utilities and components in [`assets/css/tailwind-input.css`](assets/css/tailwind-input.css).
+- Edit dark-mode overrides in [`assets/css/modern-dark-theme.css`](assets/css/modern-dark-theme.css).
+- Always run `npm run build:css` before committing CSS-related changes (CI runs this on deploy).
 
-2. Add your desired HTML template code in `store.html` to render the Store section on the website.
+## Deployment
 
----
+Pushes to `main` trigger [`.github/workflows/hugo.yaml`](.github/workflows/hugo.yaml): install Hugo → `npm run build:css` → `hugo --minify` → deploy `public/` to GitHub Pages.
 
-## ✅ **Summary Checklist**
+## License
 
-✔️ `content/store/_index.md` created and configured
-✔️ `data/store.yaml` created with store items
-✔️ `layouts/store/store.html` created with the section layout
+Content and branding © CodeFryDev. See repository settings for contribution terms.