weeeee

2024-06-17 21:18:06 -04:00
parent b6f483071d
commit fae0c95aa1
10 changed files with 246 additions and 94 deletions
@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+import {
+    Twitter,
+    Github,
+    Lastfm
+} from 'grommet-icons'
+
+export default function Footer() {
+    const [mailState, setMailState] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setMailState(false)
+        }, 3000)
+    }, [mailState])
+
+    return (
+        <div className="bg-zinc-600 text-center text-white absolute bottom-0 left-0 right-0 p-4 select-none">
+            <h1 className="font-bold">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
+
+            {
+                mailState ? (
+                    <p className="font-bold hover:underline max-w-fit mx-auto">
+                        Copied!
+                    </p>
+                ) : (
+                    <button onClick={() => setMailState(true)} className="hover:underline">alex@alexav.gg</button>
+                )
+            }
+
+            <div className="block space-x-2">
+                {/* socials */}
+                <a href="https://twitter.com/avvex__" target="_blank">
+                    <Twitter color="black" size="medium" />
+                </a>
+                <a href="https://github.com/azpha" target="_blank">
+                    <Github color="black" size="medium" />
+                </a>
+                <a href="https://last.fm/user/lulawex" target="_blank">
+                    <Lastfm color="black" size="medium" />
+                </a>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,14 @@
+export default function Header() {
+    return (
+        <div className="text-white pt-4">
+            <h1 className="font-bold text-2xl">Alex Frantz</h1>
+            <p>Professional button clicker & word typer</p>
+            <div className="inline-block space-x-2">
+            <a className="font-bold hover:underline" href="/">Home</a>
+                <a className="font-bold hover:underline" href="experience">Experience</a>
+            </div>
+            
+            <hr className="my-4" />
+        </div>
+    )
+}
@@ -0,0 +1,51 @@
+export default function Project({
+    name,
+    description,
+    urlTo,
+    subtitle,
+    bullets
+}: {
+    name: string,
+    description: string,
+    urlTo?: string,
+    subtitle?: string,
+    bullets?: string[]
+}) {
+    const mapBullets = () => {
+        return bullets?.map((v,k) => {
+            return <li className="list-inside list-disc" key={k}>{v}</li>
+        })
+    }
+
+    return (
+        <div className="bg-white text-black p-2">
+            <div className="float-left">
+                <p className="pl-2 text-2xl font-bold">{name} 
+                    {
+                        urlTo ? (
+                            <a className="text-sm hover:underline pl-2" target="_blank" href={urlTo}>
+                                Project Website
+                            </a>
+                        ) : (
+                            <span className="text-base pl-2">
+                                {subtitle}
+                            </span>
+                        )
+
+                    }
+                </p>
+            </div>
+
+            <div className="clear-left text-left pl-2.5">
+                <p>{description}</p>
+                {
+                    bullets && (
+                        <ul>
+                            {mapBullets()}
+                        </ul>
+                    )
+                }
+            </div>
+        </div>
+    )
+}
@@ -1,19 +0,0 @@
-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>
-    )
-}