I've been working on the latest version of my website for a little while now. In addition to adding a whole new blog this time around (yay second post!), I've also been trying to emphasize the smaller, more subtle aspects of the design. Things that I think really go the extra mile in making a website look beautiful and feel great to use. In keeping with this vision, I wanted to add a slight "paper-y" feel to the site. Something that the user would barely notice consciously, but that would make reading text on the page much more pleasant. The first few tries weren't perfect (naturally), but I think I've finally found a solution that I'm happy with. It was so simple in retrospect... I just applied a small amount of noise to the page. In this post, I'll go over the two approaches I tried before settling on the noise implementation, and then I'll explain how the noise implementation itself works. ## Attempt #1: A Background Image My first attempt at this was pretty much the simplest thing I could think of: using a picture of some paper as the background image of the page. I hopped onto Google Images, typed in "paper texture", picked my favourite one, and just set that as the background image of the `body` element in my root `layout.tsx` file: I'm using TailwindCSS for styling, hence the `min-h-screen` class name on the `body` element. ```/app/layout.tsx import "@/styles/globals.css"; import Navbar from "@/components/layout/navbar"; import Footer from "@/components/layout/footer"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children}

Latest Posts

2024 Learnings

How I added a paper effect to my Next.js website, using noise

Introducing my new blog