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

Switch to gradient ^& darker background, use AppWrapper in index

Browse Source
This commit is contained in:
Xevion
2023-02-25 19:50:53 -06:00
parent 3b1c5a9a40
commit 5c49aa56c9
4 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/AppWrapper.tsx
View File

@@ -11,13 +11,15 @@ const navigation: { id: string, name: string, href: string }[] = [
]
type WrapperProps = {
className?: string;
hideNavigation?: boolean;
current?: string;
children?: ReactNode | ReactNode[] | null;
};
const AppWrapper: FunctionComponent<WrapperProps> = ({current, children}: WrapperProps) => {
return <div className="min-h-screen bg-zinc-850 text-zinc-50">
<Disclosure as="nav" className="bg-zinc-900">
const AppWrapper: FunctionComponent<WrapperProps> = ({current, children, hideNavigation, className}: WrapperProps) => {
return <main className="min-h-screen bg-gradient-to-tl from-zinc-900 via-zinc-400/10 to-zinc-900 text-zinc-50">
{!hideNavigation ? <Disclosure as="nav">
{({open}) => (
<>
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
@@ -77,9 +79,9 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({current, children}: Wrappe
</Disclosure.Panel>
</>
)}
</Disclosure>
</Disclosure> : null}
{children}
</div>
</main>
}
export default AppWrapper;

13
src/pages/_document.tsx Normal file
View File

@@ -0,0 +1,13 @@
import {Html, Head, Main, NextScript} from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body className="bg-black">
<Main/>
<NextScript/>
</body>
</Html>
)
}

5
src/pages/grain.tsx
View File

@@ -20,8 +20,7 @@ const GrainPage: NextPage = () => {
<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="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">
@@ -44,7 +43,7 @@ const GrainPage: NextPage = () => {
</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
After seeing an online 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.

7
src/pages/index.tsx
View File

@@ -6,6 +6,7 @@ import {getPlaiceholder} from "plaiceholder";
import {useBreakpointValue} from "../utils/helpers";
import type {Project} from "../utils/types";
import Link from "next/link";
import AppWrapper from "../components/AppWrapper";
type ProjectWithBlur = Project & { bannerBlur: string };
@@ -118,8 +119,8 @@ const Home: NextPage<HomeStaticProps> = ({projects}: HomeStaticProps) => {
<meta name="description" content="My personal website."/>
<link rel="icon" href="/favicon.ico"/>
</Head>
<main className="bg-zinc-900 text-zinc-50 overflow-x-hidden">
<div className="flex justify-center items-center bg-zinc-850 h-screen w-screen overflow-hidden">
<AppWrapper hideNavigation={true} className="overflow-x-hidden">
<div className="flex justify-center items-center h-screen w-screen overflow-hidden">
<div className="top-0 p-3 absolute w-full flex justify-end">
<span
className="leading-3 bg-yellow-300 rounded-md text-black font-bold font-inter p-2">WIP</span>
@@ -151,7 +152,7 @@ const Home: NextPage<HomeStaticProps> = ({projects}: HomeStaticProps) => {
</div>
</div>
</div>
</main>
</AppWrapper>
</>
);
};