stan/personal-website
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Update layout and components for GitHub and LinkedIn links

Browse Source
This commit is contained in:
Stan Runge
2024-06-04 18:05:08 +02:00
parent 9b882cff51
commit 1102f366e6
4 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/layout.tsx
View File

@@ -1,7 +1,7 @@
import { GeistSans } from "geist/font/sans";
import "./globals.css";
import TabItem from "@/components/TabItem";
import { MdiGithub } from "../components/MdiGithub";
import { Icon } from "../components/Icon";
const defaultUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
@@ -54,14 +54,14 @@ export default function RootLayout({
<TabItem targetPath="/cokno" text="CoKno" />
</div>
<div className="flex justify-center gap-5">
<a href="https://github.com/stanrunge" className="text-blue-500">
<MdiGithub />
<a href="https://github.com/stanrunge">
<Icon d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
</a>
<a
href="https://linkedin.com/in/stanrunge"
className="text-blue-500"
>
LinkedIn
<a href="https://linkedin.com/in/stanrunge">
<Icon d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z" />
</a>
<a href="https://x.com/stanrunge">
<Icon d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z" />
</a>
</div>
</div>

44
app/projects/page.tsx
View File

@@ -1,16 +1,50 @@
import { Icon } from "@/components/Icon";
export default async function Page() {
return (
<div className="flex flex-col items-center">
<h1 className="text-4xl my-5">Projects (2)</h1>
<h2 className="text-2xl">Vash Software</h2>
<div
className="my-5 rounded-xl"
style={{
backgroundColor: "gray",
}}
>
<h2 className="text-2xl font-bold">Vash Software</h2>
<p>
Vash was originally a video game clan, transformed by Stan to be a
global{" "}
</p>
<h2 className="text-2xl">Personal Projects</h2>
<h3>This website</h3>
<h3>Spotify osu! Map Finder</h3>A quick tool to find osu! maps from
Spotify songs or playlists.
</div>
<div className="my-5">
<h2 className="text-2xl my-5">Personal Projects (2)</h2>
<div className="grid grid-cols-2 gap-4">
<div className="flex">
<div>
<Icon d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
</div>
<div>
<h3 className="text-xl font-semibold">This website</h3>
<p>
Despite being a simple, mostly static website, there's a lot
more behind the scenes.
</p>
</div>
</div>
<div className="flex">
<div>
<Icon d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" />
</div>
<div>
<h3 className="text-xl font-semibold">Spotify osu! Map Finder</h3>
<p>
A quick tool to find osu! maps from Spotify songs or playlists.
</p>
</div>
</div>
</div>
</div>
</div>
);
}

16
components/Icon.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from "react";
import type { SVGProps } from "react";
export function Icon(props: SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="2em"
height="2em"
viewBox="0 0 24 24"
{...props}
>
<path fill="currentColor" d={props.d}></path>
</svg>
);
}

19
components/MdiGithub.tsx
View File

@@ -1,19 +0,0 @@
import React from "react";
import type { SVGProps } from "react";
export function MdiGithub(props: SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
></path>
</svg>
);
}