diff --git a/.github/plans/revised-frontend-design.prompt.md b/.github/plans/revised-frontend-design.prompt.md
new file mode 100644
index 0000000..ca3d81c
--- /dev/null
+++ b/.github/plans/revised-frontend-design.prompt.md
@@ -0,0 +1,632 @@
+# Revised Frontend Design Plan: Tokyo Night Design System Overhaul
+
+## Summary
+
+Complete design system overhaul for the Jekyll blog: replace Inter with Geist font, rebrand from "Synthwave" to "Tokyo Night", fix hardcoded legacy colors, distribute accent colors across UI, add fluid typography, scroll-triggered animations, background texture/depth, grid-breaking design elements, generate missing assets, and remove legacy files.
+
+All changes follow the [frontend design skill](../../.github/skills/front-design/SKILL.md) guidelines.
+
+---
+
+## Step 1: Replace Inter with Geist Font
+
+**Files:** `_includes/head/custom.html`, `assets/css/main.scss`
+
+### In `_includes/head/custom.html`
+
+Replace the Inter Google Font import with Geist from Vercel's CDN:
+
+```html
+
+` highlight styling |
+| Red `#F7768E` | `--accent-red` | **NEW:** `.notice--danger` border |
+
+### New styles to add:
+
+```css
+/* Notice - Danger */
+.notice--danger {
+ border-left-color: var(--accent-red);
+}
+
+/* Date metadata styling */
+.page__meta,
+.archive__item .page__meta {
+ color: var(--accent-orange);
+ font-family: var(--font-mono);
+ font-size: 0.8em;
+ letter-spacing: 0.02em;
+}
+
+/* Mark/highlight styling */
+mark {
+ background: rgba(224, 175, 104, 0.15);
+ color: var(--accent-yellow);
+ padding: 0.1em 0.3em;
+ border-radius: 3px;
+}
+
+/* Blockquote citation */
+blockquote cite,
+blockquote footer {
+ color: var(--accent-yellow);
+ font-style: normal;
+ font-size: 0.9em;
+}
+```
+
+---
+
+## Step 7: Fluid Typography with `clamp()`
+
+**File:** `assets/css/main.scss`
+
+### Add fluid type sizes
+
+```css
+/* In the :root custom properties block, add: */
+--type-hero: clamp(2rem, 5vw, 3.5rem);
+--type-h1: clamp(1.75rem, 3.5vw, 2.75rem);
+--type-h2: clamp(1.4rem, 2.5vw, 2rem);
+--type-h3: clamp(1.15rem, 2vw, 1.5rem);
+--type-h4: clamp(1rem, 1.5vw, 1.25rem);
+--type-body: clamp(0.95rem, 1.1vw, 1.1rem);
+--type-small: clamp(0.8rem, 0.9vw, 0.9rem);
+```
+
+### Apply to elements
+
+```css
+body { font-size: var(--type-body); }
+
+h1 { font-size: var(--type-h1); letter-spacing: -0.02em; }
+h2 { font-size: var(--type-h2); letter-spacing: -0.01em; }
+h3 { font-size: var(--type-h3); }
+h4 { font-size: var(--type-h4); }
+
+.page__title { font-size: var(--type-hero); }
+.page__lead { font-size: clamp(1rem, 1.5vw, 1.3rem); }
+.hero-tagline { font-size: clamp(0.95rem, 1.3vw, 1.2rem); }
+```
+
+### CRITICAL: Remove conflicting media query font-size rules
+
+These fixed font-size rules in breakpoints will override `clamp()` and must be **deleted**:
+
+```css
+/* DELETE from @media (max-width: 1024px): */
+.page__title { font-size: 3em; }
+
+/* DELETE from @media (max-width: 768px): */
+.page__title { font-size: 2.2em; }
+.page__lead { font-size: 1.1em; }
+.hero-tagline { font-size: 1.1em; }
+.archive__item-title { font-size: 1.3em; }
+.page__content h2 { font-size: 1.6em; }
+
+/* DELETE from @media (max-width: 480px): */
+.page__title { font-size: 1.8em; }
+.hero-tagline { font-size: 1em; }
+.btn { font-size: 0.9em; }
+```
+
+Keep all other rules in those breakpoints (padding, display, grid-size, etc.).
+
+---
+
+## Step 8: Scroll-Triggered Animations & Hero Enhancement
+
+**File:** `assets/css/main.scss`
+
+### Visibility-safe defaults (CRITICAL)
+
+The current `animation: fadeInUp 0.5s ease-out backwards` on `.page__content > *` uses `backwards` fill mode, meaning elements start invisible. This is risky — if animation fails to trigger, content is invisible forever.
+
+**Fix**: Change to forward-only animation that starts visible:
+
+```css
+/* BEFORE */
+.page__content > * {
+ animation: fadeInUp 0.5s ease-out backwards;
+}
+
+/* AFTER */
+.page__content > * {
+ animation: fadeInUp 0.5s ease-out both;
+}
+```
+
+### Hero entrance enhancement
+
+Add a gradient sweep animation on the page title:
+
+```css
+.page__title {
+ background: linear-gradient(
+ 90deg,
+ var(--accent-blue) 0%,
+ var(--accent-purple) 40%,
+ var(--accent-cyan) 60%,
+ var(--text-primary) 100%
+ );
+ background-size: 200% 100%;
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: gradientSweep 1.5s ease-out forwards, fadeInUp 0.6s ease-out;
+}
+
+@keyframes gradientSweep {
+ from { background-position: 100% 50%; }
+ to { background-position: 0% 50%; }
+}
+```
+
+### Scroll-triggered reveals for archive items
+
+Use `animation-timeline: view()` with `@supports` guard so non-supporting browsers see content normally:
+
+```css
+/* Scroll-triggered animations — progressive enhancement only */
+@supports (animation-timeline: view()) {
+ .archive__item {
+ opacity: 0;
+ transform: translateY(30px);
+ animation: fadeInUp 0.6s ease-out both;
+ animation-timeline: view();
+ animation-range: entry 0% entry 30%;
+ }
+
+ .archive__item:nth-child(even) {
+ animation-delay: 0.1s;
+ }
+}
+```
+
+**Key**: Without `@supports`, archive items remain `opacity: 1` (default) — no invisible content risk.
+
+---
+
+## Step 9: Background Texture & Depth
+
+**File:** `assets/css/main.scss`
+
+### Increase grid visibility from 3% to 5%
+
+```css
+/* BEFORE */
+background-image:
+ linear-gradient(rgba(122, 162, 247, 0.03) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(122, 162, 247, 0.03) 1px, transparent 1px);
+
+/* AFTER */
+background-image:
+ linear-gradient(rgba(122, 162, 247, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(122, 162, 247, 0.05) 1px, transparent 1px);
+```
+
+### Add noise grain overlay via `body::after`
+
+```css
+body::after {
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ pointer-events: none;
+ z-index: 9999;
+ opacity: 0.025;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+ background-repeat: repeat;
+ background-size: 256px 256px;
+ mix-blend-mode: overlay;
+}
+```
+
+### Add secondary radial glow (asymmetric)
+
+Update the body background to include a purple radial glow anchored bottom-right:
+
+```css
+/* BEFORE */
+body {
+ background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+ background-attachment: fixed;
+}
+
+/* AFTER */
+body {
+ background:
+ radial-gradient(ellipse at 85% 85%, rgba(187, 154, 247, 0.04) 0%, transparent 50%),
+ linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+ background-attachment: fixed;
+}
+```
+
+---
+
+## Step 10: Grid-Breaking Design Elements
+
+**File:** `assets/css/main.scss`
+
+### Floating gradient orb behind hero
+
+```css
+.page__hero--overlay::after {
+ content: '';
+ position: absolute;
+ top: -20%;
+ right: -10%;
+ width: 400px;
+ height: 400px;
+ border-radius: 50%;
+ background: radial-gradient(
+ circle,
+ rgba(122, 162, 247, 0.08) 0%,
+ rgba(187, 154, 247, 0.04) 40%,
+ transparent 70%
+ );
+ filter: blur(60px);
+ pointer-events: none;
+ z-index: 0;
+}
+```
+
+### Oversized decorative blockquote marks
+
+```css
+blockquote {
+ position: relative;
+ overflow: visible;
+}
+
+blockquote::before {
+ content: '"';
+ position: absolute;
+ top: -0.3em;
+ left: -0.15em;
+ font-family: var(--font-display);
+ font-size: 4em;
+ color: var(--accent-purple);
+ opacity: 0.12;
+ line-height: 1;
+ pointer-events: none;
+}
+```
+
+### Diagonal divider between hero and content
+
+```css
+.page__hero--overlay {
+ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
+ padding-bottom: calc(2em + 30px); /* compensate for clip */
+}
+```
+
+---
+
+## Step 11: Update Print Styles
+
+**File:** `assets/css/main.scss`
+
+Add to the existing `@media print` block:
+
+```css
+@media print {
+ /* Existing rules... */
+
+ /* Hide decorative elements */
+ body::before,
+ body::after,
+ .page__hero--overlay::before,
+ .page__hero--overlay::after {
+ display: none;
+ }
+
+ /* Disable animations */
+ *, *::before, *::after {
+ animation: none !important;
+ transition: none !important;
+ }
+}
+```
+
+---
+
+## Step 12: Clean Up Duplicate `.archive__item:hover`
+
+**File:** `assets/css/main.scss`
+
+The `.archive__item:hover` rule is defined twice (once standalone at ~line 300, once grouped with `.toc:hover` at ~line 313). Consolidate into a single rule:
+
+```css
+/* BEFORE (two separate blocks) */
+.archive__item:hover {
+ transform: translateY(-6px);
+ box-shadow: var(--glow-purple);
+ border-color: rgba(187, 154, 247, 0.4);
+}
+
+/* ... later ... */
+
+.archive__item:hover,
+.toc:hover {
+ transform: translateY(-6px);
+ box-shadow: var(--glow-purple);
+ border-color: rgba(187, 154, 247, 0.4);
+}
+
+/* AFTER (single grouped rule, remove the standalone) */
+.archive__item:hover,
+.toc:hover {
+ transform: translateY(-6px);
+ box-shadow: var(--glow-purple);
+ border-color: rgba(187, 154, 247, 0.4);
+}
+```
+
+---
+
+## Step 13: Suppress `::before` Arrow on Nav Links
+
+**File:** `assets/css/main.scss`
+
+Add to the greedy-nav section:
+
+```css
+.greedy-nav a::before {
+ display: none;
+}
+```
+
+This prevents the external link arrow `↗` from appearing on the GitHub navigation link.
+
+---
+
+## Step 14: Create Favicon
+
+**Files:** `assets/images/favicon.svg` (new), `_includes/head/custom.html`
+
+### Create SVG favicon
+
+Create a simplified version of `bio-photo.svg` that works at 16x16px — just the "JC" initials on a gradient background circle.
+
+### Add to `_includes/head/custom.html`
+
+```html
+
+
+
+
+
+
+
+ JC
+
\ No newline at end of file
diff --git a/assets/js/theme-toggle.js b/assets/js/theme-toggle.js
new file mode 100644
index 0000000..ef7bf9b
--- /dev/null
+++ b/assets/js/theme-toggle.js
@@ -0,0 +1,94 @@
+// Theme Toggle Script
+(function() {
+ const THEME_KEY = 'theme-preference';
+ const DARK_THEME = 'dark';
+ const LIGHT_THEME = 'light';
+
+ // Get the saved theme preference or system preference
+ function getThemePreference() {
+ const saved = localStorage.getItem(THEME_KEY);
+ if (saved) {
+ return saved;
+ }
+
+ // Check system preference
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+ return LIGHT_THEME;
+ }
+
+ // Default to dark
+ return DARK_THEME;
+ }
+
+ // Apply theme to document
+ function applyTheme(theme) {
+ const html = document.documentElement;
+ html.setAttribute('data-theme', theme);
+ localStorage.setItem(THEME_KEY, theme);
+ updateToggleButton(theme);
+ }
+
+ // Update toggle button appearance
+ function updateToggleButton(theme) {
+ const btn = document.getElementById('theme-toggle');
+ if (btn) {
+ btn.setAttribute('data-theme-current', theme);
+ btn.setAttribute('aria-label', `Switch to ${theme === DARK_THEME ? 'light' : 'dark'} theme`);
+ btn.textContent = theme === DARK_THEME ? '☀️' : '🌙';
+ }
+ }
+
+ // Create and inject toggle button
+ function createToggleButton() {
+ const currentTheme = document.documentElement.getAttribute('data-theme') || DARK_THEME;
+ const btn = document.createElement('button');
+ btn.id = 'theme-toggle';
+ btn.setAttribute('type', 'button');
+ btn.textContent = currentTheme === DARK_THEME ? '☀️' : '🌙';
+ btn.setAttribute('aria-label', `Switch to ${currentTheme === DARK_THEME ? 'light' : 'dark'} theme`);
+ btn.onclick = function(e) {
+ e.preventDefault();
+ toggleTheme();
+ };
+ document.body.appendChild(btn);
+ }
+
+ // Initialize on page load
+ function init() {
+ const theme = getThemePreference();
+ applyTheme(theme);
+
+ // Create button immediately after applying theme
+ if (!document.getElementById('theme-toggle')) {
+ // Wait for DOM to be ready
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', createToggleButton);
+ } else {
+ createToggleButton();
+ }
+ }
+ }
+
+ // Expose toggle function
+ window.toggleTheme = function() {
+ const current = document.documentElement.getAttribute('data-theme') || DARK_THEME;
+ const next = current === DARK_THEME ? LIGHT_THEME : DARK_THEME;
+ applyTheme(next);
+ };
+
+ // Listen for system preference changes
+ if (window.matchMedia) {
+ window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+ if (!localStorage.getItem(THEME_KEY)) {
+ applyTheme(e.matches ? LIGHT_THEME : DARK_THEME);
+ }
+ });
+ }
+
+ // Initialize when DOM is ready
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+ } else {
+ init();
+ }
+})();
diff --git a/blog/atom.xml b/blog/atom.xml
deleted file mode 100644
index c5e9fd5..0000000
--- a/blog/atom.xml
+++ /dev/null
@@ -1,23 +0,0 @@
----
----
-
-
- Joel Cano's Blog
- {{ site.time | date_to_xmlschema }}
- http://canito0890.github.io/blog
-
- Joel Cano
- joel.cano.avila@gmail.com
-
- {% for post in site.posts %}
-
- {{ post.title }}
- {{ post.date | date_to_xmlschema }}
- http://canito0890.github.io{{ post.id }}
- {{ post.content | xml_escape }}
-
- {% endfor %}
-
diff --git a/blog/index.html b/blog/index.html
deleted file mode 100644
index 1e291ac..0000000
--- a/blog/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: default
-title: Joel Cano's Blog
----
-{{ page.title }}
-
- {% for post in site.posts %}
- {{ post.date | date_to_string }} » {{ post.title }}
diff --git a/index.markdown b/index.markdown
index 1ca93a7..39d172e 100644
--- a/index.markdown
+++ b/index.markdown
@@ -2,7 +2,7 @@
layout: home
author_profile: true
header:
- overlay_color: "#0f0f1e"
+ overlay_color: "#1A1B26"
overlay_filter: "0.7"
overlay_image:
excerpt: "Welcome to my corner of the internet. Here I share thoughts on software development, technology, and continuous learning."