diff --git a/content/posts/programmer-productivity-guide.md b/content/posts/programmer-productivity-guide.md
index d436fe3..430fb08 100644
--- a/content/posts/programmer-productivity-guide.md
+++ b/content/posts/programmer-productivity-guide.md
@@ -6,7 +6,11 @@ categories = ['programming']
 tags = ['productivity', 'pomodoro', 'time-management', 'workflow', 'tips']
 +++
 
-*Originally posted at blog.cgsmith.net*
+<div class="notice notice-info">
+📝 Originally posted at blog.cgsmith.net
+</div>
+
+![Pomodoro Stack Overflowage](/images/a-programmers-guide-to-being-productive-everyday-1.jpg)
 
 I need lists to help me stay productive each day. I'm sure this isn't unique to me or the industry but without a list there are some days where I feel too distracted or disoriented. Sometimes even with a list of things I get distracted! Here are some tools that I started using to help me become more productive everyday.
 
diff --git a/content/posts/right-tool-for-the-job.md b/content/posts/right-tool-for-the-job.md
index 5dd4c74..69dee70 100644
--- a/content/posts/right-tool-for-the-job.md
+++ b/content/posts/right-tool-for-the-job.md
@@ -6,7 +6,11 @@ categories = ['programming']
 tags = ['philosophy', 'tools', 'decision-making', 'career-advice', 'pragmatism']
 +++
 
-*Originally published on cgsmith.net*
+<div class="notice notice-info">
+📝 Originally published on cgsmith.net
+</div>
+
+![Ian Baker](/images/choosing-the-right-tool-for-the-job-1.jpg)
 
 At work we get into discussions regarding the best tool for the job. It doesn't necessarily have to be about programming. These are all good conversations to have, but there is a point where you have to make a decision and it might not be the best decision.
 
diff --git a/content/posts/welcome-to-sometimes-code.md b/content/posts/welcome-to-sometimes-code.md
index 5194aae..9dbf70b 100644
--- a/content/posts/welcome-to-sometimes-code.md
+++ b/content/posts/welcome-to-sometimes-code.md
@@ -6,10 +6,10 @@ categories = ['general']
 tags = ['introduction', 'blog']
 +++
 
-# Welcome to Sometimes Code
-
 ![A clean workspace with a laptop](/images/majid-rangraz-xZMghzq01UQ-unsplash.jpg "A clean workspace - the foundation of good code and clear thinking")
 
+*Photo by [Majid Rangraz](https://unsplash.com/@majidrangraz) on [Unsplash](https://unsplash.com/photos/silver-laptop-computer-and-black-camera-lens-xZMghzq01UQ)*
+
 Hello and welcome to my little corner of the internet! I'm Chris Smith, a senior software developer from East Troy, Wisconsin, and this is Sometimes Code - a personal blog where I'll be sharing thoughts, experiences, and insights about the two things that shape my world: **programming** and **family**.
 
 ## What You'll Find Here
@@ -44,6 +44,4 @@ Thank you for being here at the beginning of this journey. Whether you're here f
 
 Here's to the first of many posts on Sometimes Code!
 
----
-
 *Want to know more about me? Check out my [resume](/resume) or browse posts by [programming](/categories/programming) or [family](/categories/family) topics.*
diff --git a/hugo.toml b/hugo.toml
index 15a1806..608c8e5 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -15,12 +15,14 @@ rssLimit = 20
 
 [params]
   description = 'A personal blog about programming, family life, and the intersection of technology and humanity'
+  subtitle = "echo 'Coding, family, life'; // by Chris Smith"
   author = 'Chris Smith'
 
   # Social and contact information
   email = 'chris@sometimescode.com'
   github = 'https://github.com/cgsmith'
   linkedin = 'https://linkedin.com/in/phpguy'
+  gitea = 'https://git.sometimescode.com/cgsmith'
 
   # Location and work
   location = 'Henderson, Nevada'
@@ -30,3 +32,9 @@ rssLimit = 20
   interests = ['PHP', 'Formula 1', 'Mountain Biking', 'Brewing', 'Open Source']
 
 # Simple navigation is now handled in site-header.html partial
+
+# Enable raw HTML in markdown
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
diff --git a/static/images/a-programmers-guide-to-being-productive-everyday-1.jpg b/static/images/a-programmers-guide-to-being-productive-everyday-1.jpg
new file mode 100644
index 0000000..c2587b6
Binary files /dev/null and b/static/images/a-programmers-guide-to-being-productive-everyday-1.jpg differ
diff --git a/static/images/choosing-the-right-tool-for-the-job-1.jpg b/static/images/choosing-the-right-tool-for-the-job-1.jpg
new file mode 100644
index 0000000..d5f4ec0
Binary files /dev/null and b/static/images/choosing-the-right-tool-for-the-job-1.jpg differ
diff --git a/static/images/majid-rangraz-xZMghzq01UQ-unsplash.jpg b/static/images/majid-rangraz-xZMghzq01UQ-unsplash.jpg
new file mode 100644
index 0000000..9b99f61
Binary files /dev/null and b/static/images/majid-rangraz-xZMghzq01UQ-unsplash.jpg differ
diff --git a/themes/sometimescode/assets/css/main.css b/themes/sometimescode/assets/css/main.css
index 166ade9..f9278fe 100644
--- a/themes/sometimescode/assets/css/main.css
+++ b/themes/sometimescode/assets/css/main.css
@@ -1,22 +1,668 @@
-body {
-  color: #222;
-  font-family: sans-serif;
-  line-height: 1.5;
-  margin: 1rem;
-  max-width: 768px;
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto+Mono:wght@700&display=swap');
+
+/* CSS Variables for theming */
+:root {
+  --bg-color: #ffffff;
+  --text-color: #333333;
+  --text-secondary: #666666;
+  --border-color: #e0e0e0;
+  --link-color: #0066cc;
+  --link-hover: #004499;
+  --code-bg: #f5f5f5;
+  --code-text: #333333;
+  --header-border: #cccccc;
 }
 
+/* Dark mode - system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg-color: #1a1a1a;
+    --text-color: #e0e0e0;
+    --text-secondary: #a0a0a0;
+    --border-color: #404040;
+    --link-color: #6699ff;
+    --link-hover: #99bbff;
+    --code-bg: #2a2a2a;
+    --code-text: #e0e0e0;
+    --header-border: #404040;
+  }
+}
+
+/* Dark mode - manual override */
+[data-theme="dark"] {
+  --bg-color: #1a1a1a;
+  --text-color: #e0e0e0;
+  --text-secondary: #a0a0a0;
+  --border-color: #404040;
+  --link-color: #6699ff;
+  --link-hover: #99bbff;
+  --code-bg: #2a2a2a;
+  --code-text: #e0e0e0;
+  --header-border: #404040;
+}
+
+/* Base styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.7;
+  margin: 0;
+  padding: 2rem 1rem;
+  font-size: 18px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Center content */
+body > * {
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Header styles */
 header {
-  border-bottom: 1px solid #222;
+  border-bottom: 2px solid var(--header-border);
+  padding-bottom: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.site-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.site-header h1 {
+  margin: 0 0 0.25rem 0;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.site-header .subtitle {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-secondary);
+  font-family: "Courier New", Courier, monospace;
+  font-weight: normal;
+  white-space: nowrap;
+  min-height: 1.5em;
+}
+
+/* Theme toggle button */
+.theme-toggle {
+  background: none;
+  border: 2px solid var(--border-color);
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 50px;
+  height: 50px;
+}
+
+.theme-toggle:hover {
+  background-color: var(--code-bg);
+  border-color: var(--link-color);
+  transform: scale(1.05);
+}
+
+.theme-toggle:active {
+  transform: scale(0.95);
+}
+
+/* Footer styles */
+footer {
+  border-top: 2px solid var(--header-border);
+  padding-top: 1.5rem;
+  margin-top: 3rem;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.footer-social {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+}
+
+.footer-social a {
+  color: var(--text-secondary);
+  transition: color 0.2s ease, transform 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+
+.footer-social a:hover {
+  color: var(--link-color);
+  transform: translateY(-2px);
+  text-decoration: none;
+}
+
+.footer-content p {
+  margin: 0;
+  text-align: center;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  line-height: 1.3;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.25rem;
+}
+
+p {
+  margin-bottom: 1.5rem;
+}
+
+/* Links */
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+/* Code blocks */
+code {
+  background-color: var(--code-bg);
+  color: var(--code-text);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+  font-family: "Courier New", Courier, monospace;
+}
+
+pre {
+  background-color: var(--code-bg);
+  color: var(--code-text);
+  padding: 1rem;
+  border-radius: 5px;
+  overflow-x: auto;
+  line-height: 1.5;
+  margin: 1.5rem 0;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+  font-size: 0.875rem;
+}
+
+/* Lists */
+ul, ol {
+  margin-bottom: 1.5rem;
+  padding-left: 2rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 5px;
+  margin: 1.5rem 0;
+}
+
+/* Blockquotes */
+blockquote {
+  border-left: 4px solid var(--link-color);
+  margin: 1.5rem 0;
+  padding-left: 1rem;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+/* Notice boxes and callouts */
+.notice {
+  margin: 1.5rem 0;
+  padding: 1rem 1.25rem;
+  border-radius: 8px;
+  border-left: 4px solid;
+}
+
+.notice-info {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+  color: #0d47a1;
+}
+
+[data-theme="dark"] .notice-info {
+  background-color: #1a2332;
+  border-color: #42a5f5;
+  color: #90caf9;
+}
+
+.notice-warning {
+  background-color: #fff3e0;
+  border-color: #ff9800;
+  color: #e65100;
+}
+
+[data-theme="dark"] .notice-warning {
+  background-color: #2d2416;
+  border-color: #ffa726;
+  color: #ffcc80;
+}
+
+.notice-success {
+  background-color: #e8f5e9;
+  border-color: #4caf50;
+  color: #1b5e20;
+}
+
+[data-theme="dark"] .notice-success {
+  background-color: #1a2e1b;
+  border-color: #66bb6a;
+  color: #a5d6a7;
+}
+
+/* Pastel highlights and callouts */
+.highlight-yellow {
+  background-color: #fff9c4;
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+[data-theme="dark"] .highlight-yellow {
+  background-color: #3d3a1a;
+  color: #fff59d;
+}
+
+.highlight-pink {
+  background-color: #fce4ec;
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+[data-theme="dark"] .highlight-pink {
+  background-color: #3a2529;
+  color: #f8bbd0;
+}
+
+.highlight-blue {
+  background-color: #e1f5fe;
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+[data-theme="dark"] .highlight-blue {
+  background-color: #1a2a33;
+  color: #b3e5fc;
+}
+
+/* Navigation menu */
+nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+nav li {
+  margin: 0;
+}
+
+/* Site title link */
+.site-title-link {
+  color: inherit;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.site-title-link:hover {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+/* Stylized logo */
+.logo-sometimes {
+  font-family: 'Pacifico', cursive;
+  font-weight: 400;
+  margin-right: 0.3rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+[data-theme="dark"] .logo-sometimes {
+  background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.logo-code {
+  font-family: 'Roboto Mono', 'Courier New', monospace;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--text-color);
+}
+
+.cursor {
+  display: inline-block;
+  font-family: 'Roboto Mono', 'Courier New', monospace;
+  font-weight: 700;
+  color: #00ff41;
+  animation: cursor-blink 1s ease-in-out infinite;
+}
+
+[data-theme="dark"] .cursor {
+  color: #00ff41;
+}
+
+.cursor::after {
+  content: '_';
+}
+
+@keyframes cursor-blink {
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
+/* Post list on homepage */
+.posts-list {
+  margin-top: 3rem;
+}
+
+.post-summary {
+  margin-bottom: 3rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.post-summary:last-child {
+  border-bottom: none;
+}
+
+.post-summary h2 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: 1.75rem;
+}
+
+.post-summary h2 a {
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+.post-summary h2 a:hover {
+  color: var(--link-color);
+}
+
+/* Post metadata */
+.post-meta {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+}
+
+.post-categories {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.category {
+  background-color: var(--code-bg);
+  padding: 0.2rem 0.6rem;
+  border-radius: 3px;
+  font-size: 0.85rem;
+}
+
+/* Post excerpt */
+.post-excerpt {
+  color: var(--text-color);
+  line-height: 1.7;
+}
+
+.read-more {
+  display: inline-block;
+  margin-top: 0.5rem;
+  font-weight: 600;
+}
+
+/* Single post page */
+.post-header {
+  margin-bottom: 2rem;
+}
+
+.post-header h1 {
+  margin-bottom: 0.5rem;
+}
+
+.post-header .post-meta {
+  margin-bottom: 0;
+}
+
+.post-content {
+  margin-bottom: 3rem;
+}
+
+/* Post tags */
+.post-footer {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 2px solid var(--border-color);
+}
+
+.post-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.post-tags strong {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.tag {
+  background-color: var(--code-bg);
+  color: var(--link-color);
+  padding: 0.3rem 0.8rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.tag:hover {
+  background-color: var(--link-color);
+  color: var(--bg-color);
+  text-decoration: none;
+}
+
+/* Edit page link */
+.edit-page {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border-color);
+  text-align: center;
+  font-size: 0.9rem;
+}
+
+.edit-page a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  transition: color 0.2s ease;
+}
+
+.edit-page a:hover {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.edit-page svg {
+  transition: transform 0.2s ease;
+}
+
+.edit-page a:hover svg {
+  transform: translateY(-2px);
+}
+
+/* Post navigation */
+.post-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 2px solid var(--border-color);
+  gap: 2rem;
+}
+
+.post-nav-prev,
+.post-nav-next {
+  flex: 1;
+}
+
+.post-nav-next {
+  text-align: right;
+}
+
+.post-nav a {
+  display: inline-block;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--code-bg);
+  border-radius: 5px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.post-nav a:hover {
+  background-color: var(--link-color);
+  color: var(--bg-color);
+  text-decoration: none;
+}
+
+/* Featured post on homepage */
+.featured-post {
+  margin-bottom: 3rem;
+  padding-bottom: 3rem;
+  border-bottom: 2px solid var(--border-color);
+}
+
+.featured-post h1 {
+  margin-top: 0;
   margin-bottom: 1rem;
 }
 
-footer {
-  border-top: 1px solid #222;
-  margin-top: 1rem;
+.featured-content {
+  margin-top: 2rem;
 }
 
-a {
-  color: #00e;
-  text-decoration: none;
+.section-divider {
+  margin: 3rem 0 2rem 0;
+  text-align: center;
+}
+
+.section-divider h2 {
+  display: inline-block;
+  position: relative;
+  padding: 0 2rem;
+  margin: 0;
+  background-color: var(--bg-color);
+  z-index: 1;
+}
+
+.section-divider::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  background-color: var(--border-color);
+  z-index: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  body {
+    font-size: 16px;
+    padding: 1rem;
+  }
+
+  .site-header h1 {
+    font-size: 1.75rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.35rem;
+  }
+
+  nav ul {
+    gap: 1rem;
+  }
+
+  .theme-toggle {
+    min-width: 44px;
+    height: 44px;
+    padding: 0.4rem;
+    font-size: 1.1rem;
+  }
+
+  .post-nav {
+    flex-direction: column;
+  }
+
+  .post-nav-next {
+    text-align: left;
+  }
 }
diff --git a/themes/sometimescode/assets/js/main.js b/themes/sometimescode/assets/js/main.js
index e2aac52..cbbb17f 100644
--- a/themes/sometimescode/assets/js/main.js
+++ b/themes/sometimescode/assets/js/main.js
@@ -1 +1,117 @@
 console.log('This site was generated by Hugo.');
+
+// Theme toggle functionality
+(function() {
+  const STORAGE_KEY = 'theme-preference';
+
+  const getColorPreference = () => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return stored;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  };
+
+  const setPreference = (theme) => {
+    localStorage.setItem(STORAGE_KEY, theme);
+    reflectPreference(theme);
+  };
+
+  const reflectPreference = (theme) => {
+    document.documentElement.setAttribute('data-theme', theme);
+    const button = document.querySelector('#theme-toggle');
+    if (button) {
+      button.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
+      button.textContent = theme === 'dark' ? '☀️' : '🌙';
+    }
+  };
+
+  // Set initial theme
+  const theme = getColorPreference();
+  reflectPreference(theme);
+
+  // Set up toggle button when DOM is ready
+  window.addEventListener('DOMContentLoaded', () => {
+    const button = document.querySelector('#theme-toggle');
+    if (button) {
+      button.addEventListener('click', () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        setPreference(newTheme);
+      });
+    }
+  });
+
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!stored) {
+      setPreference(isDark ? 'dark' : 'light');
+    }
+  });
+})();
+
+// Typing animation for subtitle with mistakes
+(function() {
+  window.addEventListener('DOMContentLoaded', () => {
+    const subtitleElement = document.querySelector('.site-header .subtitle');
+    if (!subtitleElement) return;
+
+    const fullText = subtitleElement.textContent;
+    subtitleElement.textContent = '';
+
+    // Define the typing sequence with mistakes happening naturally
+    const sequence = [
+      { action: 'type', text: "echo 'Coding, family, life'; // by Chris Sm" },
+      { action: 'type', text: 't' },
+      { action: 'type', text: 'i' },
+      { action: 'type', text: 'h' },
+      { action: 'pause', duration: 400 },
+      { action: 'backspace', count: 3 },
+      { action: 'pause', duration: 200 },
+      { action: 'type', text: 'ith' }
+    ];
+
+    let currentText = '';
+    let sequenceIndex = 0;
+    let charIndex = 0;
+
+    function executeSequence() {
+      if (sequenceIndex >= sequence.length) {
+        return;
+      }
+
+      const step = sequence[sequenceIndex];
+
+      if (step.action === 'type') {
+        if (charIndex < step.text.length) {
+          currentText += step.text[charIndex];
+          subtitleElement.textContent = currentText;
+          charIndex++;
+          setTimeout(executeSequence, 80 + Math.random() * 40);
+        } else {
+          charIndex = 0;
+          sequenceIndex++;
+          setTimeout(executeSequence, 100);
+        }
+      } else if (step.action === 'backspace') {
+        if (charIndex < step.count) {
+          currentText = currentText.slice(0, -1);
+          subtitleElement.textContent = currentText;
+          charIndex++;
+          setTimeout(executeSequence, 60);
+        } else {
+          charIndex = 0;
+          sequenceIndex++;
+          setTimeout(executeSequence, 100);
+        }
+      } else if (step.action === 'pause') {
+        sequenceIndex++;
+        setTimeout(executeSequence, step.duration);
+      }
+    }
+
+    // Start typing after a short delay
+    setTimeout(executeSequence, 500);
+  });
+})();
diff --git a/themes/sometimescode/layouts/_default/single.html b/themes/sometimescode/layouts/_default/single.html
new file mode 100644
index 0000000..ee0145a
--- /dev/null
+++ b/themes/sometimescode/layouts/_default/single.html
@@ -0,0 +1,58 @@
+{{ define "main" }}
+<article class="post">
+  <header class="post-header">
+    <h1>{{ .Title }}</h1>
+    <div class="post-meta">
+      <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
+      {{ with .Params.categories }}
+      <span class="post-categories">
+        {{ range . }}
+        <a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+        {{ end }}
+      </span>
+      {{ end }}
+    </div>
+  </header>
+
+  <div class="post-content">
+    {{ .Content }}
+  </div>
+
+  {{ if .Params.tags }}
+  <footer class="post-footer">
+    <div class="post-tags">
+      <strong>Tags:</strong>
+      {{ range .Params.tags }}
+      <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="tag">{{ . }}</a>
+      {{ end }}
+    </div>
+  </footer>
+  {{ end }}
+
+  {{ with .PrevInSection }}
+  <nav class="post-nav">
+    <div class="post-nav-prev">
+      <a href="{{ .RelPermalink }}">← {{ .Title }}</a>
+    </div>
+  {{ end }}
+  {{ with .NextInSection }}
+    <div class="post-nav-next">
+      <a href="{{ .RelPermalink }}">{{ .Title }} →</a>
+    </div>
+  {{ end }}
+  {{ if or .PrevInSection .NextInSection }}
+  </nav>
+  {{ end }}
+
+  {{ if .Section }}
+  <div class="edit-page">
+    <a href="https://git.sometimescode.com/cgsmith/sometimescode.com/src/branch/main/content/{{ .Section }}/{{ .File.BaseFileName }}.md?display=source" target="_blank" rel="noopener">
+      <svg width="16" height="16" viewBox="-0.05 98.32 512.15 315.48" fill="currentColor" style="vertical-align: middle; margin-right: 0.5rem;">
+        <path d="M502.6 103.7c-3.3-3.3-7.8-3.3-7.8-3.3s-95.5 5.4-144.9 6.5c-10.8.2-21.6.5-32.3.6V203c-4.5-2.1-9-4.3-13.5-6.4 0-29.6-.1-88.9-.1-88.9-23.6.3-72.7-1.8-72.7-1.8s-115.2-5.8-127.7-6.9c-8-.5-18.3-1.7-31.8 1.2-7.1 1.5-27.3 6-43.8 21.9C-8.7 154.8.7 206.7 1.9 214.5c1.4 9.5 5.6 36 25.8 59 37.3 45.7 117.6 44.6 117.6 44.6s9.9 23.5 24.9 45.2c20.4 27 41.3 48 61.7 50.5 51.3 0 153.9-.1 153.9-.1s9.8.1 23-8.4c11.4-6.9 21.6-19.1 21.6-19.1s10.5-11.2 25.2-36.9c4.5-7.9 8.2-15.6 11.5-22.8 0 0 45-95.4 45-188.2-1-28-7.9-33-9.5-34.6M97.7 269.9c-21.1-6.9-30.1-15.2-30.1-15.2S52 243.8 44.2 222.3c-13.4-36-1.1-58-1.1-58s6.8-18.3 31.4-24.4c11.2-3 25.2-2.5 25.2-2.5s5.8 48.4 12.8 76.7c5.9 23.8 20.2 63.3 20.2 63.3s-21.3-2.6-35-7.5m244.6 87.6s-5 11.8-16 12.5c-4.7.3-8.4-1-8.4-1s-.2-.1-4.3-1.7l-92-44.8s-8.9-4.6-10.4-12.7c-1.8-6.6 2.2-14.7 2.2-14.7l44.2-91.1s3.9-7.9 9.9-10.6c.5-.2 1.9-.8 3.7-1.2 6.6-1.7 14.7 2.3 14.7 2.3l90.2 43.7s10.3 4.6 12.5 13.2c1.5 6-.4 11.4-1.5 14-5.2 12.6-44.8 92.1-44.8 92.1"/>
+      </svg>
+      Edit this page on Gitea
+    </a>
+  </div>
+  {{ end }}
+</article>
+{{ end }}
diff --git a/themes/sometimescode/layouts/_partials/footer.html b/themes/sometimescode/layouts/_partials/footer.html
index a7cd916..b51d23b 100644
--- a/themes/sometimescode/layouts/_partials/footer.html
+++ b/themes/sometimescode/layouts/_partials/footer.html
@@ -1 +1,26 @@
-<p>Copyright {{ now.Year }}. All rights reserved.</p>
+<div class="footer-content">
+  <div class="footer-social">
+    {{ with site.Params.github }}
+    <a href="{{ . }}" target="_blank" rel="noopener" aria-label="GitHub">
+      <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+      </svg>
+    </a>
+    {{ end }}
+    {{ with site.Params.linkedin }}
+    <a href="{{ . }}" target="_blank" rel="noopener" aria-label="LinkedIn">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+      </svg>
+    </a>
+    {{ end }}
+    {{ with site.Params.gitea }}
+    <a href="{{ . }}" target="_blank" rel="noopener" aria-label="Gitea">
+      <svg width="20" height="20" viewBox="-0.05 98.32 512.15 315.48" fill="currentColor">
+        <path d="M502.6 103.7c-3.3-3.3-7.8-3.3-7.8-3.3s-95.5 5.4-144.9 6.5c-10.8.2-21.6.5-32.3.6V203c-4.5-2.1-9-4.3-13.5-6.4 0-29.6-.1-88.9-.1-88.9-23.6.3-72.7-1.8-72.7-1.8s-115.2-5.8-127.7-6.9c-8-.5-18.3-1.7-31.8 1.2-7.1 1.5-27.3 6-43.8 21.9C-8.7 154.8.7 206.7 1.9 214.5c1.4 9.5 5.6 36 25.8 59 37.3 45.7 117.6 44.6 117.6 44.6s9.9 23.5 24.9 45.2c20.4 27 41.3 48 61.7 50.5 51.3 0 153.9-.1 153.9-.1s9.8.1 23-8.4c11.4-6.9 21.6-19.1 21.6-19.1s10.5-11.2 25.2-36.9c4.5-7.9 8.2-15.6 11.5-22.8 0 0 45-95.4 45-188.2-1-28-7.9-33-9.5-34.6M97.7 269.9c-21.1-6.9-30.1-15.2-30.1-15.2S52 243.8 44.2 222.3c-13.4-36-1.1-58-1.1-58s6.8-18.3 31.4-24.4c11.2-3 25.2-2.5 25.2-2.5s5.8 48.4 12.8 76.7c5.9 23.8 20.2 63.3 20.2 63.3s-21.3-2.6-35-7.5m244.6 87.6s-5 11.8-16 12.5c-4.7.3-8.4-1-8.4-1s-.2-.1-4.3-1.7l-92-44.8s-8.9-4.6-10.4-12.7c-1.8-6.6 2.2-14.7 2.2-14.7l44.2-91.1s3.9-7.9 9.9-10.6c.5-.2 1.9-.8 3.7-1.2 6.6-1.7 14.7 2.3 14.7 2.3l90.2 43.7s10.3 4.6 12.5 13.2c1.5 6-.4 11.4-1.5 14-5.2 12.6-44.8 92.1-44.8 92.1"/>
+      </svg>
+    </a>
+    {{ end }}
+  </div>
+  <p>Copyright {{ now.Year }} {{ site.Params.author }}. All rights reserved.</p>
+</div>
diff --git a/themes/sometimescode/layouts/_partials/header.html b/themes/sometimescode/layouts/_partials/header.html
index 7980a00..3e0f8a4 100644
--- a/themes/sometimescode/layouts/_partials/header.html
+++ b/themes/sometimescode/layouts/_partials/header.html
@@ -1,2 +1,12 @@
-<h1>{{ site.Title }}</h1>
+<div class="site-header">
+  <div class="site-title-wrapper">
+    <div>
+      <h1><a href="/" class="site-title-link"><span class="logo-sometimes">Sometimes</span><span class="logo-code">CODE</span><span class="cursor"></span></a></h1>
+      {{ with site.Params.subtitle }}
+      <p class="subtitle">{{ . }}</p>
+      {{ end }}
+    </div>
+    <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
+  </div>
+</div>
 {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
diff --git a/themes/sometimescode/layouts/home.html b/themes/sometimescode/layouts/home.html
index 0df6597..6f45dca 100644
--- a/themes/sometimescode/layouts/home.html
+++ b/themes/sometimescode/layouts/home.html
@@ -1,7 +1,43 @@
 {{ define "main" }}
-  {{ .Content }}
-  {{ range site.RegularPages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
-  {{ end }}
+{{ $welcomePost := where site.RegularPages "Title" "Welcome to Sometimes Code" | first 1 }}
+{{ $otherPosts := where site.RegularPages "Section" "posts" }}
+{{ $otherPosts := where $otherPosts "Title" "!=" "Welcome to Sometimes Code" }}
+
+{{ range $welcomePost }}
+<article class="featured-post">
+  <h1>{{ .Title }}</h1>
+  <div class="post-meta">
+    <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
+  </div>
+  <div class="featured-content">
+    {{ .Content }}
+  </div>
+</article>
+{{ end }}
+
+<h2>Latest Posts</h2>
+
+<section class="posts-list">
+  {{ range $otherPosts }}
+  <article class="post-summary">
+    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+    <div class="post-meta">
+      <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
+      {{ with .Params.categories }}
+      <span class="post-categories">
+        {{ range . }}
+        <span class="category">{{ . }}</span>
+        {{ end }}
+      </span>
+      {{ end }}
+    </div>
+    <div class="post-excerpt">
+      {{ .Summary }}
+      {{ if .Truncated }}
+      <a href="{{ .RelPermalink }}" class="read-more">Read more →</a>
+      {{ end }}
+    </div>
+  </article>
+  {{ end }}
+</section>
 {{ end }}