← Back to Blog

Portfolio Enhancements: SEO, RSS, and Code Highlighting

A deep dive into the new features added to this portfolio - from social media optimization to RSS feeds and beautiful code snippets.

December 5, 2025

Building a portfolio is never truly “done” - there’s always room to polish, optimize, and add those extra touches that make it shine. Here’s a rundown of the recent enhancements that take this site beyond the basics.

🎯 SEO & Social Media Optimization

Every page now includes comprehensive meta tags for better discoverability:

  • SEO Meta Tags: Title, description, author, and canonical URLs
  • Open Graph Tags: Optimized for Facebook, LinkedIn, and other platforms
  • Twitter Cards: Beautiful previews when shared on Twitter
  • Structured Data: Proper article markup for blog posts

When you share a link from this portfolio on social media, it now displays a rich preview with title, description, and image. No more ugly bare URLs!

<!-- Example of the meta tags in action -->
<meta property="og:title" content="Portfolio Enhancements" />
<meta property="og:description" content="A deep dive into new features..." />
<meta property="og:image" content="https://example.com/og-image.jpg" />

📡 RSS Feed

For those who still love RSS (and you should!), this portfolio now has a fully functional feed at /rss.xml. Subscribe to get notified whenever new blog posts are published.

The RSS feed includes:

  • Full post titles and descriptions
  • Publication dates
  • Direct links to articles
  • Proper XML formatting

💻 Code Syntax Highlighting

Notice how the code snippets in this post look nice? That’s Shiki in action! Astro comes with built-in syntax highlighting powered by Shiki, the same engine that powers VS Code.

Here’s some JavaScript to demonstrate:

// Example: Theme toggle implementation
const THEME_KEY = "portfolio-theme";

function toggleTheme() {
  const current = localStorage.getItem(THEME_KEY);
  const next = current === "dark" ? "light" : "dark";
  
  localStorage.setItem(THEME_KEY, next);
  document.documentElement.setAttribute("data-theme", next);
}

And some CSS:

/* Smooth theme transitions */
:root {
  --bg: #FFF6FF;
  --text: #58515c;
  transition: background-color 0.3s ease;
}

[data-theme='dark'] {
  --bg: #1a0a24;
  --text: #d5cdd9;
}

The syntax highlighting works for all major languages and includes:

  • Proper tokenization and coloring
  • Line wrapping for long code
  • Dark theme that matches the site’s design
  • Inline code snippets styled differently from blocks

🎨 What’s Next?

These enhancements are just the beginning. Future improvements could include:

  • Site Search: Full-text search across all content
  • Pagination: For when the blog and work sections grow
  • Analytics: Understanding what content resonates
  • Performance Metrics: Tracking Core Web Vitals

🛠️ Technical Implementation

All of these features are built with Astro’s native capabilities:

  1. SEO Tags: Added to BaseLayout.astro with props for customization
  2. RSS Feed: Using @astrojs/rss package at src/pages/rss.xml.js
  3. Syntax Highlighting: Configured in astro.config.mjs with Shiki

No heavy frameworks, no client-side overhead - just static HTML with all the modern niceties.

Want to learn more? Check out the GitHub repository to see how it’s all built!