"front-matter": "^4.0.2",

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

tags: ["react", "hello-world"]

title: The Art of Scrolling

date: 2025-10-16

tags: ["css", "scrolling", "web-design"]

This is a very long blog post designed to demonstrate the scrolling behavior of the sticky metadata component.

In the beginning, there was no scrolling. Pages were static and everything fit on one screen. It was a simpler time, but also a more limited time. The invention of the scrollbar changed everything. Suddenly, pages could be as long as you wanted them to be. This was a revolutionary idea, and it paved the way for the modern web.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl.

As pages got longer, it became more difficult to navigate them. This is where sticky elements came in. Sticky elements are elements that stay in a fixed position on the screen, even when you scroll. This is useful for things like navigation bars, sidebars, and metadata. In this blog post, we are using a sticky metadata component to display the title and date of the post.

Here's a link to a great resource on scrolling: [CSS-Tricks](https://css-tricks.com/pure-css-scroll-snap-in-action/).

And here's a link to another page on this site: [My Projects](/projects).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl.

And so, we have come to the end of our long blog post. I hope you have enjoyed this demonstration of scrolling behavior. As you can see, the sticky metadata component has stayed in a fixed position on the screen, even as you have scrolled through the post. This is a very useful feature, and it is one that you will see on many websites.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl.

But wait, there's more! I wanted to make this post even longer, so I added an epilogue. I hope you don't mind. I just wanted to make sure that the scrolling behavior was really, really clear. I think it is now. I think this is probably the longest blog post ever written. I'm not sure, but it's got to be up there.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl. Sed euismod, nisl nec ultricies lacinia, nisl nisl aliquet nisl, eget aliquam nisl nisl sit amet nisl.

tags: ["writing", "updates"]

import React from 'react';

const Label = ({ children }) => {

return (

<span className="inline-block bg-gray-700 text-gray-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded-full">

{children}

</span>

);

export default Label;

import React from 'react';

const Logo = () => {

return (

<svg

className="h-8 w-8 text-white"

fill="none"

viewBox="0 0 24 24"

stroke="currentColor"

>

<path

strokeLinecap="round"

strokeLinejoin="round"

strokeWidth={2}

d="M4 4v16h16V4H4zm0 8h16M4 12h16"

/>

</svg>

);

export default Logo;

import Logo from './Logo';

<Link to="/" className="flex items-center space-x-2">

<Logo />

<span className="text-2xl font-semibold tracking-tight">fezcode</span>

import React from 'react';

import Label from './Label';

const PostMetadata = ({ metadata }) => {

if (!metadata) {

return null;

}

return (

<aside className="sticky top-24">

<div className="p-6 bg-gray-800/50 rounded-lg border border-gray-700/50">

<h3 className="text-lg font-semibold text-white mb-4">About Post</h3>

<div className="space-y-4">

<div>

<Label>Title</Label>

<p className="text-gray-300">{metadata.title}</p>

</div>

<div>

<Label>Date</Label>

<p className="text-gray-300">{metadata.date.toLocaleDateString()}</p>

</div>

{metadata.tags && (

<div>

<Label>Tags</Label>

<div className="flex flex-wrap gap-2 mt-2">

{metadata.tags.map(tag => (

<span key={tag} className="bg-teal-400/10 text-teal-400 text-xs font-medium px-2.5 py-1 rounded-full">

{tag}

</span>

))}

</div>

</div>

)}

</div>

</div>

</aside>

);

export default PostMetadata;