The Ultimate Styling Showcase

This is an introductory paragraph to test the balanced prose typography. It should feel readable, well-spaced, and elegant. We’ll explore various elements below to ensure our styling makeover is complete.

1. Typography & Headings

The H2 above features a subtle accent underline. The H1 at the very top of the page should also have a beautiful gradient applied to its text.

1.1 Sub-headings

H3 headings like this one feature a vertical accent line on the left, creating a clear hierarchical structure.

2. Rich Markdown Elements

Lists

Here is a styled unordered list:

First item: Featuring a custom glowing bullet point.
Second item: Proving that multiple items look great together.
Third item: Finishing the list with style.

And an ordered list:

Research: Understand the requirements.
Strategy: Plan the implementation.
Execution: Apply the changes surgically.

Blockquotes

“This is a rich blockquote. It features a tinted background, an italicized font, and a bold accent border on the left to make it pop from the rest of the text.”

Links

You can test the animated hover sweep effect here. Hover over this link to see it fill with color!

Hashtag Chips

Hashtags in normal prose become static build-time chips like #security, #linux, #design, #ai, and #engineering. They should not affect URL fragments like https://nonan23x.dev/#main-content or inline code like #do-not-chip.

3. Vintage Tables

Below is the new “Light Sepia Paper” table style. It uses a monospace font to emulate an old typewriter on vintage stationery.

Skill	Category	Proficiency
TypeScript	Frontend	Expert
Astro	Framework	Advanced
UI/UX Design	Creative	Specialist
Penetration Testing	Security	Intermediate

4. Enhanced Code Blocks

Our code blocks now use Agave Nerd Font, feature line numbers on the left, and include a floating copy button in the top-right corner.

// Testing the new Shiki-powered code blocks
function greet(name: string) {
  const message = `Hello, ${name}!`;
  console.log(message);
  
  return {
    success: true,
    timestamp: new Date().toISOString()
  };
}

// Hover over this block to see the copy button!
greet("Gemini CLI");

5. MDX Platform Cards

Finally, let’s verify the platform-specific personalities of our MDX components.

YouTube

Open

Modern UI/UX Design Trends

@DesignMaster

Exploring how subtle gradients and vintage elements are making a comeback in 2026.

GitHub

Open

nonan23x/my-web-portfolio

Astro • MIT License

The source code for this portfolio, featuring all the styles you see here.

That concludes our showcase. Every element has been carefully tuned to provide a premium, cohesive reading experience.