update
This commit is contained in:
parent
f3116aefc0
commit
da44923a83
36
package.json
36
package.json
|
|
@ -9,28 +9,28 @@
|
|||
"start": "next start -p 7575"
|
||||
},
|
||||
"dependencies": {
|
||||
"@t3-oss/env-nextjs": "^0.2.1",
|
||||
"next": "^13.2.4",
|
||||
"@t3-oss/env-nextjs": "^0.2.2",
|
||||
"next": "^13.4.19",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"zod": "^3.21.4"
|
||||
"zod": "^3.22.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/eslint": "^8.21.3",
|
||||
"@types/node": "^18.15.5",
|
||||
"@types/prettier": "^2.7.2",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "^5.56.0",
|
||||
"@typescript-eslint/parser": "^5.56.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.36.0",
|
||||
"eslint-config-next": "^13.2.4",
|
||||
"postcss": "^8.4.21",
|
||||
"prettier": "^2.8.6",
|
||||
"prettier-plugin-tailwindcss": "^0.2.6",
|
||||
"tailwindcss": "^3.3.0",
|
||||
"typescript": "^5.0.2"
|
||||
"@types/eslint": "^8.44.2",
|
||||
"@types/node": "^18.17.12",
|
||||
"@types/prettier": "^2.7.3",
|
||||
"@types/react": "^18.2.21",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"eslint": "^8.48.0",
|
||||
"eslint-config-next": "^13.4.19",
|
||||
"postcss": "^8.4.29",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-tailwindcss": "^0.2.8",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.2.2"
|
||||
},
|
||||
"ct3aMetadata": {
|
||||
"initVersion": "7.12.1"
|
||||
|
|
|
|||
6504
pnpm-lock.yaml
6504
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,9 @@
|
|||
export const Footer = () => {
|
||||
const currentYear = new Date().getUTCFullYear();
|
||||
|
||||
return (
|
||||
<footer className="fixed bottom-0 left-0 z-20 w-full border-t border-[#ffffff10] bg-[#ffffff05] p-4 text-lg">
|
||||
© Hri7566 {currentYear} All rights reserved
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,6 +1,18 @@
|
|||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
function lightenColor(r: number, g: number, b: number) {
|
||||
const newR = r + 0x40;
|
||||
const newG = g + 0x40;
|
||||
const newB = b + 0x40;
|
||||
|
||||
return {
|
||||
r: newR > 255 ? 255 : newR,
|
||||
g: newG > 255 ? 255 : newG,
|
||||
b: newB > 255 ? 255 : newB
|
||||
};
|
||||
}
|
||||
|
||||
export const LinkBox = (
|
||||
props: React.PropsWithChildren & {
|
||||
title: string;
|
||||
|
|
@ -9,9 +21,26 @@ export const LinkBox = (
|
|||
color?: string;
|
||||
}
|
||||
) => {
|
||||
const year = new Date().getUTCFullYear();
|
||||
const color = { r: 77, g: 255, b: 255 };
|
||||
|
||||
switch (year) {
|
||||
case 2023:
|
||||
color.r = 0x8d;
|
||||
color.g = 0x3f;
|
||||
color.b = 0x50;
|
||||
break;
|
||||
case 2024:
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const hoverColor = lightenColor(color.r, color.g, color.b);
|
||||
|
||||
return (
|
||||
<div className="m-2 rounded-2xl bg-[#ffffff1a] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff1a] backdrop-blur-sm transition-colors duration-300 ease-in-out hover:bg-[#ffffff20]">
|
||||
<div className="box-border border-0 border-solid">
|
||||
<div className="m-2 rounded-2xl bg-[#ffffff05] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff08] transition-colors duration-300 ease-in-out hover:bg-[#ffffff10]">
|
||||
<div className="box-border">
|
||||
<h3
|
||||
className={`text-2xl font-bold text-neutral-300 ${
|
||||
props.center ? "ml-auto mr-auto text-center" : ""
|
||||
|
|
@ -21,8 +50,12 @@ export const LinkBox = (
|
|||
{props.href ? (
|
||||
<Link
|
||||
href={props.href}
|
||||
className="text-emerald-400 transition-colors duration-300 ease-in-out hover:text-emerald-500"
|
||||
// className="text-emerald-400 transition-colors duration-300 ease-in-out hover:text-emerald-500"
|
||||
className="text-sky-600 transition-colors duration-300 ease-in-out hover:text-sky-400 hover:underline"
|
||||
style={{ color: props.color }}
|
||||
// style={{
|
||||
// color: `rgb(${color.r}, ${color.g}, ${color.b})`
|
||||
// }}
|
||||
>
|
||||
{props.title}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -4,19 +4,24 @@ export const MainHeader = () => {
|
|||
return (
|
||||
<div
|
||||
id="header"
|
||||
className="sticky top-0 z-[100] h-24 border-b border-[#ffffff1a] bg-[#ffffff1a] p-3 backdrop-blur-sm"
|
||||
className="sticky top-0 z-[100] h-24 border-b border-[#ffffff10] bg-[#ffffff05] p-3 backdrop-blur-sm"
|
||||
>
|
||||
<Link href="/" className="float-left flex cursor-pointer items-end">
|
||||
<img
|
||||
src="logo.png"
|
||||
alt="Logo"
|
||||
width="64px"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
/>
|
||||
<h1 className="text-5xl text-gray-50 transition-colors duration-300 ease-in-out hover:text-gray-300">
|
||||
hri7566.info
|
||||
</h1>
|
||||
</Link>
|
||||
<div id="header-center" className="mx-auto w-2/3">
|
||||
<Link
|
||||
href="/"
|
||||
className="float-left flex cursor-pointer items-end"
|
||||
>
|
||||
<img
|
||||
src="logo.png"
|
||||
alt="Logo"
|
||||
width="64px"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
/>
|
||||
<h1 className="text-5xl text-gray-50 transition-colors duration-300 ease-in-out hover:text-gray-300">
|
||||
hri7566.info
|
||||
</h1>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
|
||||
export const PageBreak = (props: React.PropsWithChildren) => {
|
||||
return (
|
||||
<h1 className="my-3 border-b border-t border-[#ffffff1a] bg-[#ffffff1a] px-5 py-4 text-3xl shadow-lg backdrop-blur-sm">
|
||||
<h1 className="my-3 border-b border-t border-[#ffffff10] bg-[#ffffff05] px-5 py-4 text-3xl shadow-lg backdrop-blur-sm">
|
||||
<div className="items-center text-center sm:ml-auto sm:mr-auto sm:w-2/3 sm:px-5">
|
||||
{props.children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Link from "next/link";
|
|||
import { MainHeader } from "~/components/MainHeader";
|
||||
import { LinkBox } from "~/components/LinkBox";
|
||||
import { PageBreak } from "~/components/PageBreak";
|
||||
import { Footer } from "~/components/Footer";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
return (
|
||||
|
|
@ -14,13 +15,12 @@ const Home: NextPage = () => {
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<main
|
||||
className="h-full min-h-[100lvh] bg-black bg-cover bg-fixed bg-center bg-no-repeat text-white backdrop-blur sm:w-full"
|
||||
className="text-white sm:w-full"
|
||||
style={{
|
||||
fontFamily: `"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif`,
|
||||
backgroundImage: `url("/cat.jpg")`
|
||||
fontFamily: `"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif`
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 -z-10 min-h-screen w-full overflow-y-auto bg-[#00000070]" />
|
||||
<div className=" absolute inset-0 -z-10 min-h-screen w-full overflow-y-auto bg-[#00000070]" />
|
||||
|
||||
<MainHeader />
|
||||
|
||||
|
|
@ -34,31 +34,31 @@ const Home: NextPage = () => {
|
|||
title="GitHub"
|
||||
href="https://github.com/Hri7566"
|
||||
center
|
||||
color="#ffffff"
|
||||
// color="#ffffff"
|
||||
/>
|
||||
<LinkBox
|
||||
title="GitLab"
|
||||
href="https://gitlab.com/Hri7566"
|
||||
center
|
||||
color="#ffffff"
|
||||
// color="#ffffff"
|
||||
/>
|
||||
<LinkBox
|
||||
title="Twitter"
|
||||
href="https://twitter.com/Hri7566"
|
||||
center
|
||||
color="#ffffff"
|
||||
// color="#ffffff"
|
||||
/>
|
||||
<LinkBox
|
||||
title="YouTube"
|
||||
href="https://youtube.com/hri7566"
|
||||
center
|
||||
color="#ffffff"
|
||||
// color="#ffffff"
|
||||
/>
|
||||
<LinkBox
|
||||
title="Odysee"
|
||||
href="https://odysee.com/@hri7566:6"
|
||||
center
|
||||
color="#ffffff"
|
||||
// color="#ffffff"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,42 +79,40 @@ const Home: NextPage = () => {
|
|||
<LinkBox
|
||||
title="Cosmic"
|
||||
href="https://github.com/Hri7566/cosmic"
|
||||
color="#1d0054"
|
||||
// color="#1d0054"
|
||||
>
|
||||
Bot for Discord and MPP. Lots of baking involved.
|
||||
</LinkBox>
|
||||
<LinkBox
|
||||
title="mpp.hri7566.info"
|
||||
href="https://mpp.hri7566.info"
|
||||
color="#8d3f50"
|
||||
// color="#8d3f50"
|
||||
>
|
||||
A clone of Multiplayer Piano with a completely
|
||||
original backend server with a fresh style.
|
||||
</LinkBox>
|
||||
<LinkBox title="Khorne Bot" color="#900000">
|
||||
{/* <LinkBox title="Khorne Bot" color="#900000">
|
||||
Discord bot in collaboration with Khorne. Closed
|
||||
source and currently under development.
|
||||
</LinkBox>
|
||||
</LinkBox> */}
|
||||
<LinkBox
|
||||
title="MPPClone Frontend"
|
||||
href="https://github.com/LapisHusky/mppclone"
|
||||
>
|
||||
I made some contributions to this site, such as the
|
||||
ability to hide cursors and code block CSS.
|
||||
ability to hide cursors.
|
||||
</LinkBox>
|
||||
<LinkBox
|
||||
{/* <LinkBox
|
||||
title="Super Mario 64 in a Browser"
|
||||
href="https://mario.hri7566.info"
|
||||
>
|
||||
Mirror of BopItFreak's Mario site. Give it a minute
|
||||
to load. Audio doesn't like to work sometimes.
|
||||
</LinkBox>
|
||||
</LinkBox> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer className="fixed bottom-0 left-0 z-20 w-full border-t border-[#ffffff1a] bg-[#ffffff1a] p-4 text-lg backdrop-blur-sm">
|
||||
© Hri7566 2023 All rights reserved
|
||||
</footer>
|
||||
<Footer />
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
@apply bg-neutral-950;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue