Project 001 — mustafapiplodi.com
LOG-003
Date: Saturday, 19 April 2026 Status: Active Spent: $0
What got built today
This was a long session. Started with the site already functional from the previous build session (LOG-002). The focus shifted entirely to polish, consistency, and fixing things that felt wrong once you actually clicked around.
The session happened in two phases: first completing the initial build with Claude Code, then a back-and-forth refinement loop driven by what I noticed while actually using the site.
Session log
Tool: Claude Code (Sonnet 4.6) Type: Iterative refinement — roughly 6 to 8 hours across the day
Phase 1 — Initial feedback round
After the build session from LOG-002, I opened the site and immediately noticed several things:
| Issue | What I saw | |---|---| | Log entries | All expanded by default — wanted a list you could click into | | Previous / next | Missing — no way to navigate between posts | | Agency name | "Scaling High" instead of "Scaling High Technologies" | | Agency tag filter | Missing — blog had it, agency did not | | Margin width | Wide margins felt off — actually correct (720px editorial) | | Ghost link | Invisible clickable area top-right on agency post pages |
Fixed in order. The log entry change was the biggest architectural shift — MDX was being pre-rendered server-side and expanded inline. Replaced with a clickable list that routes to /challenge/[slug]/log/[date] pages. Each log entry now has its own URL, reading progress bar, and prev/next navigation.
Phase 2 — Second feedback round
After those fixes went in, clicked through the site again. New list:
Sorting: Log entries were ASC (oldest first). Changed to DESC — newest on top, which is how you expect a log to work.
Nav order: Was agency → $100 → blog. Changed to $100 → agency → blog. The $100 Challenge is the most distinctive section, should come first.
Footer: Added Scaling High Technologies with a link to scalinghigh.com. The site is partly about the agency — it should be visible in the footer.
Dummy content added to explore the site properly:
- 2 more log entries for project-001 (deployment day, Beehiiv connected)
- Full project-002 (Proposal Generator) with 3 log entries
- 4 new blog posts across all tags
- 3 new agency posts covering hiring, pricing, and a month-18 metrics review
Phase 3 — Third feedback round (consistency and polish)
This was the most detailed round. Prompted one by one:
Date format: Blog and agency pages were showing "April 2026" — changed to "April 19, 2026" everywhere to match log entries.
Date placement: Blog and agency post pages had the date on the right side next to tags. Changed to above the title, same position as log pages. One pattern site-wide.
Ghost links investigation: This took the most time. The issue was not a broken link — it was a layout mismatch. Post pages were 660px wide but the header was 720px, so nav links visually floated outside the content column. Fixed by widening all post pages to 720px to match everything else.
Hover effects: Several things had no hover feedback at all:
- Nav links in header: added
hover:text-accent - Theme toggle button: added
hover:text-accent - Log list rows: added accent left border + slide-in + title color change
- "see all" links: added underline on hover
Prev / next links: The "next →" link was spanning full width when there was no "previous" link — creating a ghost clickable area across the whole row. Fixed using CSS grid with justifySelf: end on the link element directly. Took several attempts — Tailwind v4's w-fit and inline-block both failed because flex and grid contexts override display on children. Grid's justifySelf is the correct tool here.
Homepage challenge section: Now correctly shows 2 most recent projects. Decision: always show 2. One is too sparse, three is too many for a preview. Two shows the pattern (there is a new project every month) without overwhelming.
Decisions made today
| Decision | Choice | Reason |
|---|---|---|
| Log routing | Separate pages at /challenge/[slug]/log/[date] | Enables direct links, reading progress, prev/next nav |
| Log sort order | DESC (newest first) | A log is read in reverse — what happened most recently is what you want |
| Nav order | $100 → agency → blog | Challenge is the most distinctive content, leads |
| Content width | 720px everywhere | Eliminates header/content misalignment. One width, one grid |
| Date format | Full: "April 19, 2026" | Consistency with log entries, more precise |
| Date position | Above title | Consistent across all content types — log, blog, agency |
| Homepage projects | Always 2, most recent | Enough to show the monthly cadence without crowding |
What I noticed about Claude Code during this session
The refinement loop was faster than expected. Prompting one issue at a time worked better than batching — each fix was cleaner and easier to verify.
The ghost link issue was a good example of where you have to understand what was built to debug it. The AI kept trying CSS solutions (inline-block, w-fit, flex variants) that did not work because the layout context was overriding them. Once I understood the root cause (flex/grid overriding display properties), the right fix was obvious.
Tailwind v4 has a different compilation model than v3 — only classes present in source files at build time get compiled. Dynamically constructed class names do not work. Had to fall back to inline styles in a few places.
Cost so far
$0. Still entirely on free tiers.
Project 001 / LOG-003 / 19 Apr 2026
LOG-004 — Dev polish session
Date: Monday, 20 April 2026
A second session on the same day focused entirely on UI polish, bug fixes, and features that were missing from the first pass.
Tool: Claude Code (Sonnet 4.6) Type: Bug fix + feature session
What got fixed
Dark mode was broken. Tailwind v4's @theme inline tokens were baking static hex values at compile time instead of referencing CSS variables. That meant switching to dark mode did nothing to Tailwind utility classes. Fixed by making all tokens reference CSS vars (--color-primary: var(--text-primary) etc.) — now every Tailwind class is theme-aware.
Hover states were broken. The culprit was inline style={{ color: ... }} props overriding Tailwind's group-hover classes — inline styles always win specificity. The fix was moving all hover-sensitive color assignments to named CSS classes in globals.css with explicit :hover selectors. This is now the rule: never mix group-hover Tailwind with an inline style on the same element.
Tags didn't filter. Clicking a tag on a blog or agency post did nothing. Added navigation to the index page with ?tag= URL param, and updated BlogIndex/AgencyIndex to read the param via useSearchParams() on mount. Had to wrap both index pages in <Suspense> — required by Next.js App Router for useSearchParams().
What got added
Custom 404 page. Terminal aesthetic — 404_ in accent green, "the $100 budget didn't cover it." Four nav links with hover states.
CopyLink button. Copies the current URL to clipboard. Shows // link copied for 2 seconds then resets. Added to blog posts, agency posts, and log entry footers.
Read time on log entries. Computed at 200 words per minute, shown in the header alongside the date.
Search rebuilt. The search index now includes log entries alongside blog and agency posts. Fuse.js threshold loosened to catch more results. Keyboard arrow navigation now scrolls the results list with the selection.
Search button in header. The / shortcut was invisible to new visitors. Added a compact button in the header that triggers the same overlay — search icon, "search" label, "/" hint.
External link security. MDX anchor tags now get target="_blank" rel="noopener noreferrer" automatically for external URLs via a custom MdxLink component.
What didn't make it
Implemented a visited/unread post distinction using CSS :visited — works across browser sessions since it uses the browser's native history. Looked good. Reverted it anyway — decided against the distinction for now.
Cost
$0. Still on free tiers.
Project 001 / LOG-004 / 20 Apr 2026