Static site rebuild with polished design

[moomooskycow]

Summary

• Rebuild as static HTML/CSS/JS (no Next.js, no dependencies)
• Warm minimalism design: Plus Jakarta Sans, alabaster palette, subtle motion
• 15 projects showcased with featured highlight for Misty Step
• Dark mode with localStorage persistence

Polish Iteration

• Font: Inter → Plus Jakarta Sans (distinctive, not AI-generic)
• Palette: Clinical white → warm alabaster (#faf9f7)
• Motion: Hero entrance animation, card lifts, spring-based CTA
• A11y: prefers-reduced-motion support, focus states

Test Plan

• Verify light/dark mode toggle persists across refresh
• Check hero animation on page load
• Test hover states on cards and buttons
• Confirm responsive breakpoints (3→2→1 column)
• Validate reduced-motion preference respected

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
vanity	Ready	Preview, Comment	Jan 8, 2026 7:26pm

[coderabbitai]

Important

Review skipped

Too many files!

150 files out of 300 files are above the max files limit of 150.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[claude]

Claude finished @phrazzld's task —— View job

---

Pull Request Review

This is a high-quality static site rebuild with excellent attention to detail. Overall assessment: ✅ Ready to merge with a few minor suggestions.

Review Tasks

• Analyze HTML structure and semantics
• Review JavaScript code for bugs and security issues
• Examine CSS for performance and maintainability
• Check accessibility compliance
• Assess security considerations
• Evaluate test coverage implications

---

🎯 Strengths

Excellent Performance & Architecture:

• Perfect static approach - zero runtime dependencies eliminates entire classes of security vulnerabilities
• Font preconnection (index.html:8-9) optimizes loading performance
• Theme flash prevention with inline script (index.html:11-19) shows attention to UX details
• Smooth scrolling with proper error handling (script.js:34-45)

Outstanding Accessibility:

• Semantic HTML structure with proper landmark elements
• aria-label on theme toggle button (index.html:30)
• Focus-visible styles for keyboard navigation (styles.css:534-538)
• prefers-reduced-motion support (styles.css:591-598) - excellent inclusive design
• High contrast color schemes in both light/dark modes

Polished Design System:

• Well-structured CSS custom properties with semantic naming
• Physics-based animations with spring easing (--ease-spring)
• Consistent spacing scale and typography hierarchy
• Elegant dark mode implementation using data attributes

Secure Implementation:

• All external links use rel="noopener" preventing window.opener attacks
• No eval, innerHTML, or other XSS vectors
• Clean separation of concerns

---

🔧 Minor Suggestions

CSS Performance:

/* styles.css:315-316 - Remove undefined variable */
.featured-link {
  /* font-family: var(--font-mono); */ /* This variable isn't defined - remove or define it */
  font-family: 'SF Mono', Consolas, monospace; /* Fallback suggestion */
}

JavaScript Enhancement:

// script.js:23-24 - Consider system preference detection
function getPreferredTheme() {
  const saved = localStorage.getItem('theme');
  if (saved) return saved;
  // Consider: return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  return 'light'; // Current approach is fine for editorial aesthetic
}

Accessibility:

• Consider adding skip-to-content link for keyboard users
• The GitHub link in footer could benefit from aria-label="GitHub profile"

---

🧪 Test Coverage Assessment

Current State: No automated testing (appropriate for static site)

Manual Testing Recommendations:

• ✅ Theme persistence across page refresh
• ✅ Smooth scroll anchor navigation
• ✅ Responsive breakpoints (3→2→1 columns)
• ✅ Reduced motion preferences
• ⚠️ Consider testing with screen readers for hero animations

Monitoring Suggestions:

• The existing Vercel Analytics setup provides sufficient observability
• Core Web Vitals should be excellent with this static approach

---

🚀 Performance Notes

Excellent Choices:

• Static HTML eliminates hydration costs
• Single CSS file reduces HTTP requests
• Minimal JavaScript footprint
• Google Fonts loading optimized with display=swap

Expected Metrics:

• LCP: Excellent (text-based hero, optimized fonts)
• INP: Perfect (minimal JavaScript)
• CLS: Excellent (no layout shifts, reserved font space)

---

🔒 Security Review

✅ All Clear:

• No server-side components = minimal attack surface
• Proper rel="noopener" on external links
• No user input handling = no injection risks
• Theme toggle uses safe DOM manipulation

---

📋 Final Recommendations

1. Fix the undefined CSS variable (--font-mono in .featured-link)
2. Add skip-to-content link for keyboard accessibility
3. Consider system dark mode detection (optional enhancement)

This is a exemplary static site rebuild that demonstrates excellent engineering practices. The warm minimalism design is beautifully executed with thoughtful attention to performance, accessibility, and maintainability.

---