diff --git a/public/grain.jpeg b/public/grain/banner.jpeg similarity index 100% rename from public/grain.jpeg rename to public/grain/banner.jpeg diff --git a/public/grain/hidden.jpg b/public/grain/hidden.jpg new file mode 100644 index 0000000..9ed4bca Binary files /dev/null and b/public/grain/hidden.jpg differ diff --git a/public/grain/index.jpg b/public/grain/index.jpg new file mode 100644 index 0000000..52a743e Binary files /dev/null and b/public/grain/index.jpg differ diff --git a/src/pages/grain.tsx b/src/pages/grain.tsx new file mode 100644 index 0000000..c2ca796 --- /dev/null +++ b/src/pages/grain.tsx @@ -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 <> + + Grain | Xevion.dev + + + +
+
+
+
+ Grain +
+
+ + + + + + +
+
+
+ + + +
+
+

+ 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. +

+
    +
  • Performant - SVG generation and layering is optimized
    • +
  • Small - Builds in less than 16 seconds
    • +
  • Open Source - Want to use my gradients? Check it out on GitHub.
    • +
+

Screenshots

+
+ {images.map(([src, description, quality]) => { + return
+ + {description != null ? + {description} : null} +
+ } + )} +
+
+
+
+ + + +} + +export default GrainPage; \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f427692..ac3151a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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.",