summaryrefslogtreecommitdiffstats
path: root/WEEK3-START.md
diff options
context:
space:
mode:
authorDanilo M. <danix@danix.xyz>2026-04-17 15:45:10 +0200
committerDanilo M. <danix@danix.xyz>2026-04-17 15:45:10 +0200
commitd46c976137540831468ba5811184356cf1cdf0c1 (patch)
treebc3d2ebfcece26851a4f0c2b78e9ec4dc6490b27 /WEEK3-START.md
parent6c49e43df3b84d41a4379a3a68fb1807f16edb8f (diff)
downloaddanixxyz-d46c976137540831468ba5811184356cf1cdf0c1.tar.gz
danixxyz-d46c976137540831468ba5811184356cf1cdf0c1.zip
week-6: complete 404 and repository pages implementation
Deliverables: - Implemented language-specific 404 pages (404.en.html, 404.it.html) * Hugo i18n template pattern for automatic language routing * Full translation support for all UI strings * Easter egg modal with interactive experience * Theme-aware styling (dark/light mode) * Search functionality and recent articles - Built Repository page with full Slackware package showcase * Hero section, quick start guide, installation instructions * Responsive card grid layout for packages * GitHub repository links with visit buttons * Complete i18n translations for all content * Theme-aware styling throughout - Integrated Repository menu entry * Added to main navigation in both languages * Positioned between Contact and Privacy (weight: 4) * Added missing i18n translation keys Testing: - Verified 404 routing works correctly in Hugo dev server - Validated all translations display without warnings - Confirmed theme switching works on both pages - Tested mobile and desktop layouts - Menu entries render correctly in all views Cleanup: - Removed outdated Week 1-5 documentation - Archived progress reports in git history - Retained essential technical documentation Status: Ready for Week 7 implementation Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Diffstat (limited to 'WEEK3-START.md')
-rw-r--r--WEEK3-START.md340
1 files changed, 0 insertions, 340 deletions
diff --git a/WEEK3-START.md b/WEEK3-START.md
deleted file mode 100644
index 289b7b8..0000000
--- a/WEEK3-START.md
+++ /dev/null
@@ -1,340 +0,0 @@
-# Week 3 Quick Start Guide
-
-## ⚠️ IMPORTANT: Git Branching Workflow
-
-Before starting Week 3, create a new feature branch for this week's work:
-
-```bash
-# Create and switch to Week 3 branch
-git checkout -b week-3-cards-nav
-
-# Verify you're on the new branch
-git branch -v
-```
-
-**Why branching?**
-- Keeps each week's work isolated
-- Allows code review before merging to master
-- Easy to rollback if issues arise
-- Clean git history
-
-**At end of Week 3:**
-- Review all changes: `git diff master..week-3-cards-nav`
-- Test thoroughly in the branch
-- Merge back to master when ready: `git checkout master && git merge week-3-cards-nav`
-
-**For detailed workflow:**
-- See `GIT-WORKFLOW.md` for complete documentation
-- See `GIT-WORKFLOW-QUICK-REF.md` for common commands
-
-**Note:** Weeks 1-2 were completed on master (before branching policy). Week 3+ will follow weekly branching.
-
----
-
-## Before You Start
-
-Read these files in order:
-1. `PROGRESS-STATUS.txt` — Overall progress (you are here: 33% complete)
-2. `WEEKS1-2-SUMMARY.md` — What was accomplished
-3. `COLOR-REFERENCE.md` — Handy color lookup
-
-## Development Setup
-
-```bash
-# Start Hugo dev server
-hugo server --bind=0.0.0.0 --baseURL=http://localhost:1313
-
-# In another terminal, watch CSS changes
-npm run watch
-
-# Or build CSS once
-npm run build
-```
-
-Access site at: http://localhost:1313
-
-## Components to Build (Week 3)
-
-### 1. Article Card Component (~2 hours)
-
-**File:** `themes/danix-xyz-hacker/assets/css/main.css` (add to `@layer components`)
-
-**CSS structure:**
-```css
-.card {
- @apply border border-border rounded-lg overflow-hidden transition-all duration-200;
- box-shadow: 0 0 20px var(--accent-glow);
-}
-
-.card:hover {
- transform: translateY(-2px);
- box-shadow: 0 0 30px var(--accent-glow);
-}
-
-.card-image {
- @apply aspect-video object-cover w-full;
-}
-
-.card-body {
- @apply p-5 md:p-6 space-y-3;
-}
-
-.card-title {
- @apply text-xl font-semibold;
-}
-
-.card-excerpt {
- @apply text-text-dim text-sm line-clamp-3;
-}
-
-.card-footer {
- @apply flex items-center justify-between gap-4;
-}
-```
-
-**Usage in templates:**
-```html
-<article class="card">
- <img src="..." alt="..." class="card-image">
- <div class="card-body">
- <h3 class="card-title">Article Title</h3>
- <p class="card-excerpt">Excerpt text...</p>
- <div class="card-footer">
- <span class="badge badge-tech">Tech</span>
- <a href="..." class="btn btn-sm">Read More</a>
- </div>
- </div>
-</article>
-```
-
-**Test at:**
-- `/en/articles/` (article list)
-- All responsive breakpoints
-- Dark and light modes
-
----
-
-### 2. Navigation Header (~1.5 hours)
-
-**File:** Likely `themes/danix-xyz-hacker/layouts/partials/header.html` (check if exists)
-
-**CSS structure:**
-```css
-.header {
- @apply fixed top-0 left-0 right-0 z-40;
-}
-
-.header-nav {
- @apply hidden md:flex items-center gap-6;
-}
-
-.nav-link {
- @apply text-text hover:text-accent transition-colors;
-}
-
-.header-actions {
- @apply flex items-center gap-4;
-}
-```
-
-**Components to include:**
-- Logo/site name
-- Navigation links (Articles, About, Contact)
-- Theme toggle button (use `.btn-icon`)
-- Language switcher (if needed)
-- Hamburger button (mobile-only)
-
-**Test:**
-- Mobile (320px) — hamburger visible
-- Tablet (768px) — transition point
-- Desktop (1060px+) — full nav visible
-
----
-
-### 3. Hamburger Menu (~1.5 hours)
-
-**File:** New JS file `themes/danix-xyz-hacker/assets/js/hamburger.js`
-
-**Functionality:**
-- Click hamburger → overlay slides in
-- Click close/backdrop → overlay slides out
-- ESC key → close
-- Smooth animation (200–300ms)
-- Body scroll locked when open
-
-**CSS:**
-```css
-.menu-overlay {
- @apply fixed inset-0 bg-bg z-30 transition-opacity duration-200;
-}
-
-.menu-overlay.hidden {
- display: none;
-}
-
-.menu-nav {
- @apply flex flex-col gap-4 p-6;
-}
-
-.menu-nav a {
- @apply text-lg font-semibold hover:text-accent transition-colors;
-}
-```
-
-**Test:**
-- Click hamburger → menu appears
-- Click close → menu disappears
-- Press ESC → menu disappears
-- Mobile responsive
-- Scroll locked when open
-
----
-
-### 4. Breadcrumb Navigation (~1 hour)
-
-**File:** `themes/danix-xyz-hacker/layouts/partials/breadcrumb.html` (new)
-
-**CSS:**
-```css
-.breadcrumb {
- @apply flex items-center gap-2 text-sm text-text-dim;
-}
-
-.breadcrumb a {
- @apply hover:text-accent transition-colors;
-}
-
-.breadcrumb-separator {
- @apply opacity-50;
-}
-```
-
-**Usage:**
-```html
-<nav class="breadcrumb">
- <a href="/">Home</a>
- <span class="breadcrumb-separator">/</span>
- <a href="/articles/">Articles</a>
- <span class="breadcrumb-separator">/</span>
- <span>Article Title</span>
-</nav>
-```
-
-**Test:**
-- Appears on article detail pages
-- Links work
-- Mobile responsive
-- Visible in dark/light modes
-
----
-
-## Workflow
-
-1. **Read existing templates** to understand structure
-2. **Add CSS** to `main.css` in `@layer components`
-3. **Update templates** to use new component classes
-4. **Rebuild CSS:** `npm run build`
-5. **Test in browser:**
- - Dark mode (homepage)
- - Light mode (toggle button)
- - Mobile, tablet, desktop
- - Keyboard navigation
- - Click/hover interactions
-6. **Check git diff** for anything unexpected
-7. **Commit** with clear message
-
-## Quick Commands
-
-```bash
-# Build CSS
-npm run build
-
-# Watch CSS for changes (recommended during development)
-npm run watch
-
-# Start Hugo server
-hugo server
-
-# Check git status
-git status
-
-# See what changed in CSS
-git diff themes/danix-xyz-hacker/assets/css/main.css
-```
-
-## Checklist for Week 3
-
-Component Implementation:
-- [ ] Article card component (CSS)
-- [ ] Card hover effects (lift, shadow)
-- [ ] Integration into article list template
-- [ ] Navigation header (HTML + CSS)
-- [ ] Logo and nav links
-- [ ] Theme toggle button
-- [ ] Hamburger menu (CSS + JS)
-- [ ] Menu overlay styling
-- [ ] Menu close button
-- [ ] Breadcrumb component (CSS)
-- [ ] Integration into article detail page
-
-Testing:
-- [ ] Dark mode: All components visible
-- [ ] Light mode: All components visible
-- [ ] Mobile (320px): All responsive
-- [ ] Tablet (768px): Hamburger → nav transition
-- [ ] Desktop (1060px+): Full nav visible, hamburger hidden
-- [ ] Keyboard navigation: Tab through all interactive elements
-- [ ] Focus states: Visible on all buttons/links
-- [ ] Click interactions: All buttons/menus work
-- [ ] CSS build: No errors, <200ms
-
-Documentation:
-- [ ] Update WEEKS1-2-SUMMARY.md with Week 3 progress
-- [ ] Create week3_complete.md in memory/
-- [ ] Update memory/MEMORY.md with Week 3 reference
-
----
-
-## Key Principles
-
-✅ **Always use CSS variables** — Never hard-code colors
-✅ **Build on existing components** — Buttons, badges already done
-✅ **Mobile-first** — Start with smallest screen, expand up
-✅ **Dark/light mode** — Test both modes
-✅ **Accessibility** — Tab, focus, aria-labels
-✅ **Smooth animations** — 200-300ms transitions, GPU acceleration
-✅ **Keep it simple** — No bloat, Slackware philosophy
-
-## Reference
-
-- `COLOR-REFERENCE.md` — All 30 CSS colors
-- `WEEK2-IMPLEMENTATION.md` — Button/badge patterns
-- `COMPONENT-TEST.md` — Testing checklist template
-
-## Still Stuck?
-
-Check existing partials:
-```bash
-ls themes/danix-xyz-hacker/layouts/partials/
-```
-
-Look for patterns in existing components:
-```bash
-grep "class=\"card" themes/danix-xyz-hacker/layouts/**/*.html
-grep "@apply" themes/danix-xyz-hacker/assets/css/main.css
-```
-
----
-
-## Estimated Time
-
-- Article cards: 2 hours
-- Navigation header: 1.5 hours
-- Hamburger menu: 1.5 hours
-- Breadcrumbs: 1 hour
-- Testing & refinement: 1–2 hours
-
-**Total: 7–8 hours**
-
-Good luck! You've got this. 🚀
-