xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 03:17:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add Grain project page

Browse Source
This commit is contained in:
Xevion
2023-02-25 19:16:54 -06:00
parent f47f9b482d
commit 3b1c5a9a40
5 changed files with 79 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/grain.jpeg → public/grain/banner.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 191 KiB

After

Width:  |  Height:  |  Size: 191 KiB

BIN
public/grain/hidden.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 254 KiB

BIN
public/grain/index.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

78
src/pages/grain.tsx Normal file
View File

@@ -0,0 +1,78 @@
import type {NextPage} from "next";
import Head from "next/head";
import Image from "next/image";
import {BsGithub} from "react-icons/bs";
import {RxOpenInNewWindow} from "react-icons/rx";
import Link from "next/link";
import AppWrapper from "../components/AppWrapper";
import type {ReactNode} from "react";
type Screenshot = [string, null | string | ReactNode];
type ScreenshotWithQuality = [string, null | string | ReactNode, number];
const images: (Screenshot | ScreenshotWithQuality)[] = [
["/grain/index.jpg", null, 100],
["/grain/hidden.jpg", null, 100]
]
const GrainPage: NextPage = () => {
return <>
<Head>
<title>Grain | Xevion.dev</title>
</Head>
<AppWrapper>
<div className="bg-zinc-850 text-zinc-50 w-full overflow-auto h-full min-h-screen flex justify-center">
<div className="relative my-10 p-3 px-6 w-full max-w-screen-md">
<div className="pb-2 flex justify-between">
<div className="text-3xl font-semibold">
Grain
</div>
<div className="flex items-center justify-end space-x-1.5">
<Link href="https://grain.xevion.dev" target="_blank">
<RxOpenInNewWindow className="w-6 h-6 hover:text-zinc-200"/>
</Link>
<Link href="https://github.com/Xevion/grain" target="_blank">
<BsGithub className="w-6 h-6 hover:text-zinc-200"/>
</Link>
</div>
</div>
<div className="relative">
<Link href="https://grain.xevion.dev/">
<Image fill quality={100} sizes="100vw" src="/grain/banner.jpeg" alt=""
className="!relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
</Link>
</div>
<div className="mt-3 w-full prose prose-invert prose-lg">
<p>
After seeing an interesting Instagram post with beautiful noise patterns & gradients, I decided to
try and recreate it. The result was Grain, a simple web app that generates beautiful noise.
Under the hood, this app uses multiple layers of SVGs that automatically rescale with the browsers viewport.
That way, the noise is always crisp and clear, no matter the screen size.
</p>
<ul className="md:columns-2">
<li>Performant - SVG generation and layering is optimized</li>
<li>Small - Builds in less than 16 seconds</li>
<li>Open Source - Want to use my gradients? Check it out on <Link href="https://github.com/Xevion/grain" target="_blank">GitHub</Link>.</li>
</ul>
<h3>Screenshots</h3>
<div className="relative space-y-8">
{images.map(([src, description, quality]) => {
return <div key={src} className="flex flex-col justify-center w-full">
<Image fill sizes="100vw" src={src} alt="" quality={quality ?? 75}
className="shadow-lg !my-1 !relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
{description != null ?
<span
className="text-center text-base">{description}</span> : null}
</div>
}
)}
</div>
</div>
</div>
</div>
</AppWrapper>
</>
}
export default GrainPage;

2
src/pages/index.tsx
View File

@@ -66,7 +66,7 @@ export async function getStaticProps() {
},
{
title: "Grain",
banner: "/grain.jpeg",
banner: "/grain/banner.jpeg",
bannerSettings: {quality: 100},
location: "/grain",
shortDescription: "An experimental React app to generate beautiful backgrounds with noise filters.",