alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simple site

Browse Source
This commit is contained in:
Alex Frantz
2024-05-21 21:09:41 -04:00
parent bb67d041dc
commit b6f483071d
4 changed files with 95 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/main.css
+12 -1
View File
@@ -1,3 +1,14 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
.crayon {
padding:0.5rem 0.5rem;
margin:0 0.5rem;
font-size:1rem;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
border-bottom-right-radius: 225px 15px;
border-bottom-left-radius:15px 255px;
}
src/components/SocialItem.tsx
+19
View File
@@ -0,0 +1,19 @@
type SocialItemType = {
urlTo: string,
title: string
}
export default function SocialItem({
urlTo,
title
}: SocialItemType) {
return (
<a
href={urlTo}
target="_blank"
className="hover:text-gray-500 hover:underline"
>
{title}
</a>
)
}
src/index.tsx
+62 -42
View File
@@ -1,51 +1,71 @@
import {
Twitter,
BlockQuote,
Desktop
} from 'grommet-icons'
import SocialItem from "./components/SocialItem"
import { useState, useEffect } from "react"
export default function Home() {
const [copied, setCopied] = useState<boolean>(false);
useEffect(() => {
setTimeout(() => {
setCopied(false)
}, 5000)
}, [copied])
return (
<div className="flex justify-center items-center flex-col bg-black min-h-screen text-white">
<div className="inline-block space-x-2 text-center my-2">
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
<a href="https://watch.alexav.gg" target="_blank">
Watchlist
</a>
</p>
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
<a href="https://nobro.alexav.gg" target="_blank">
NoBro
</a>
</p>
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
Blog
</p>
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
Radio
</p>
<div className="bg-black min-h-screen flex justify-center items-center text-white">
<div className="inline-block">
<div className="space-x-2 mx-auto my-2 text-center">
<SocialItem
urlTo="https://nobro.alexav.gg"
title="NoBro"
/>
<SocialItem
urlTo="https://blog.alexav.gg"
title="Blog"
/>
<SocialItem
urlTo="#"
title="Radio"
/>
</div>
<div className="crayon border">
<h1 className="text-2xl font-bold text-center">Alex</h1>
</div>
<div className="space-x-2 mx-auto my-2 text-center">
<SocialItem
urlTo="https://twitter.com/avvex__"
title="Twitter"
/>
<SocialItem
urlTo="https://mast.thatalex.dev"
title="Mastodon"
/>
<SocialItem
urlTo="https://medal.tv/u/alexav"
title="Medal"
/>
</div>
</div>
<div className="max-w-fit">
<h1 className="text-5xl font-bold">Alex's<br />Website</h1>
</div>
<div className="bottom-0 absolute my-6 text-zinc-700 font-bold">
{/* <button type="button" onClick={() => setCopied(true)} className="hover:underline">
{
copied ? "Copied!"
: "alex@alexav.gg"
}
</button> */}
{
copied ? (
<button type="button" className="underline">
Copied!
</button>
) : (
<button type="button" onClick={() => setCopied(true)} className="hover:underline">
alex@alexav.gg
</button>
)
}
<div className="inline-block space-x-2 text-center my-2">
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
<a href="https://twitter.com/avvex__" target="_blank">
<Twitter size="small" /> Twitter
</a>
</p>
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
<a href="https://mast.thatalex.dev" target="_blank">
<BlockQuote size="small" /> Mastodon
</a>
</p>
<p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
<a href="https://medal.tv/u/alexav" target="_blank">
<Desktop size="small" /> Medal
</a>
</p>
</div>
</div>
)
tailwind.config.js
+2 -1
View File
@@ -5,7 +5,8 @@ export default {
"./src/**/*.{js,ts,tsx,jsx}"
],
theme: {
extend: {},
extend: {
},
},
plugins: [],
}