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

oh hey yet another redesign

Browse Source
This commit is contained in:
Alex Frantz
2024-11-28 03:15:50 -05:00
parent 61eb7e0861
commit 4b1fc2812e
9 changed files with 167 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ContactForm.tsx
+20 -11
View File
@@ -57,15 +57,14 @@ export default function ContactForm() {
}, [success]);
return (
<div className="bg-white rounded-lg text-black p-2">
<h1 className="text-2xl font-bold">Contact Me</h1>
<hr className="my-2 border-black" />
<div className="rounded-lg p-2 w-full md:w-[50%] mx-auto">
<h1 className="text-2xl font-bold text-center pb-8">Contact Me</h1>
<div className="space-y-2">
<div className="space-y-2 text-center">
<InputBox
isText={true}
name="name"
placeholder="Name.."
placeholder="Your name.."
onChange={(value: string) => {
setInputState((prevState) => {
return {
@@ -78,7 +77,7 @@ export default function ContactForm() {
<InputBox
name="email"
isText={true}
placeholder="Email.."
placeholder="your@supercool.email"
onChange={(value: string) => {
setInputState((prevState) => {
return {
@@ -104,7 +103,7 @@ export default function ContactForm() {
<InputBox
isText={false}
name="message"
placeholder="Message.."
placeholder="Your message here.."
onChange={(value: string) => {
setInputState((prevState) => {
return {
@@ -116,16 +115,26 @@ export default function ContactForm() {
/>
</div>
<div className="block">
<div className="block text-center">
<button
type="button"
className="bg-black w-full text-white font-bold rounded-lg p-2"
className="bg-white w-full text-black font-bold rounded-lg max-w-fit p-2"
onClick={onSubmit}
>
Submit
</button>
<p className="text-red-400 font-bold text-center">{error}</p>
<p className="font-bold text-center">{ success && "Success! Your message has been received"}</p>
{
error && (
<p className="text-red-400 font-bold text-center pt-2">{error}</p>
)
}
{
success && (
<p className="font-bold text-green-500 text-center pt-2">Success! Your message has been received</p>
)
}
</div>
</div>
)
src/components/Footer.tsx
+3 -50
View File
@@ -1,24 +1,9 @@
import { useState, useEffect } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { GitHub, Bluesky, Twitter, Medal, Link, LinkedIn } from './SocialIcons';
export default function Footer() {
const quoteArray = [
"It works on my machine",
"Revert 'Revert 'Revert 'Revert Change'''",
"releases on Friday. refuses to elaborate. leaves.",
"this is so cooked",
"TypeScript: errors not for the weak, but for the spirited",
"Professional Production Tester",
"I break hearts to save lives. err.. something like that",
"The best error is the one that never shows up",
"go bills",
"josh allen is my goat"
]
// states
const [mailState, setMailState] = useState<boolean>(false);
const [ quote, setQuote ] = useState<string>(quoteArray[Math.floor(Math.random() * quoteArray.length)]);
const [ mailState, setMailState ] = useState<boolean>(false);
useEffect(() => {
if (mailState) {
@@ -28,18 +13,9 @@ export default function Footer() {
}
}, [mailState])
const drawNewQuote = () => {
const newQuote = quoteArray[Math.floor(Math.random() * quoteArray.length)]
// redraw if this quote == current quote
if (newQuote !== quote) {
setQuote(newQuote);
} else drawNewQuote();
}
return (
<div className="lg:w-1/2 bg-zinc-500 md:w-full mx-auto rounded-t-lg text-center p-4 select-none">
<h1 className="font-bold">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
<div className="lg:w-1/2 md:w-full mx-auto rounded-t-lg text-center p-4 select-none">
<h1 className="font-bold text-sm">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
<p>All logos & images on this page belong to their respective owners.</p>
<RouterLink to={"/privacy"}>
<p className="underline">Privacy</p>
@@ -59,29 +35,6 @@ export default function Footer() {
}} className="hover:underline">alex@alexav.gg</button>
)
}
<p className="opacity-50 italic" onClick={drawNewQuote}>{quote}</p>
<div className="block space-x-2">
{/* socials */}
<a href="https://twitter.com/carlgrimesdupe" target="_blank">
<Twitter />
</a>
<a href="https://bsky.app/profile/alexav.gg" target="_blank">
<Bluesky />
</a>
<a href="https://linkedin.com/in/thatalex" target="_blank">
<LinkedIn />
</a>
<a href="https://medal.tv/users/215577" target="_blank">
<Medal />
</a>
<a href="https://github.com/azpha/website" target="_blank">
<GitHub />
</a>
<a href="https://links.alexav.gg" target="_blank">
<Link />
</a>
</div>
</div>
)
}
src/components/Header.tsx
+35 -8
View File
@@ -1,14 +1,41 @@
import { Link } from "react-router-dom"
import { useState } from "react"
export default function Header() {
return (
<div className="text-white mx-auto pt-4 w-full sm:w-1/2 text-center lg:text-left">
<Link to={"/"}>
<h1 className="text-2xl font-bold hover:underline">Alex Frantz</h1>
</Link>
<p>Professional button clicker & word typer</p>
const quoteArray = [
"It works on my machine",
"Revert 'Revert 'Revert",
"'fuck the tests'",
"this is so cooked",
"Professional Production Tester",
"I break hearts to save lives.",
"go bills",
"josh allen is my goat"
]
const [ quote, setQuote ] = useState<string>(quoteArray[Math.floor(Math.random() * quoteArray.length)]);
<hr className="my-4" />
const drawNewQuote = () => {
const newQuote = quoteArray[Math.floor(Math.random() * quoteArray.length)]
// redraw if this quote == current quote
if (newQuote !== quote) {
setQuote(newQuote);
} else drawNewQuote();
}
return (
<div className="bg-zinc-900 p-4 flex justify-between">
<div>
<a href="/" className="hover:underline">
<h1 className="text-2xl font-bold">Alex Frantz</h1>
</a>
<p className="opacity-50 italic select-none" onClick={drawNewQuote}>{quote}</p>
</div>
<div className="space-x-2 items-center justify-center flex select-none">
<a className="hover:underline" href="#about">About</a>
<a className="hover:underline" href="#projects">Projects</a>
<a className="hover:underline" href="#data">Data</a>
<a className="hover:underline" href="#contact">Contact</a>
</div>
</div>
)
}
src/components/SocialIcons.tsx → src/components/Icons.tsx
View File
src/components/InputBox.tsx
+4 -4
View File
@@ -1,12 +1,12 @@
export default function InputBox({
name,
placeholder,
placeholder = "",
isText = true,
onChange
}: {
name: string,
isText?: boolean,
placeholder: string,
placeholder?: string,
onChange: (value: string) => void
}) {
if (isText) {
@@ -16,7 +16,7 @@ export default function InputBox({
type="text"
name={name}
placeholder={placeholder}
className="bg-black rounded-lg p-2 text-white w-full"
className="rounded-lg p-2 w-1/2 text-black"
onChange={({target}) => onChange(target.value)}
/>
</div>
@@ -28,7 +28,7 @@ export default function InputBox({
name={name}
placeholder={placeholder}
onChange={({ target }) => onChange(target.value)}
className="bg-black rounded-lg p-2 text-white w-full h-32"
className="rounded-lg p-2 w-1/2 h-32 text-black"
/>
</div>
)
src/components/Layout.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default function Layout({
children: JSX.Element | JSX.Element[]
}) {
return (
<main className="bg-black text-white min-h-screen">
<main className="bg-black select-none text-white min-h-screen">
<Header />
{children}
<Footer />
src/components/ProjectCard.tsx
+12 -10
View File
@@ -1,26 +1,28 @@
export default function Project({
name,
image,
description,
urlTo
urlTo,
tags
}: {
name: string,
image: string,
description: string,
urlTo?: string,
tags: string[]
}) {
return (
<a href={urlTo} target="_blank">
<div className="bg-white text-black mx-auto rounded-lg overflow-hidden max-w-full">
<img
src={image}
alt={name}
className="w-full h-24 object-cover"
/>
<div className="bg-white text-black mx-auto rounded-lg overflow-hidden">
<div className="p-4 space-y-2">
<h1 className="font-bold text-xl">{name}</h1>
<p>{description}</p>
<div className="space-x-2">
{
tags.map((v, k) => (
<div className="bg-zinc-600 inline max-w-fit p-1 text-sm font-bold rounded-full bg-opacity-20" key={k}>{v}</div>
))
}
</div>
</div>
</div>
</a>
src/components/ProjectComponent.tsx
+10 -10
View File
@@ -14,18 +14,18 @@ export default function ProjectComponent({
projectImageSize?: string
}) {
return (
<a href={url} target="_blank" className="mx-auto">
<div className="bg-white rounded-lg text-black w-full mx-auto p-2">
<div className="p-2">
<h1 className="text-center font-semibold">{header}</h1>
</div>
<a href={url} target="_blank">
<div className="bg-white rounded-lg text-black p-2">
<h1 className="text-center font-semibold">{header}</h1>
<div className="flex items-center w-full">
<img src={projectImage} width={projectImageSize} className="flex-shrink-0" />
<div className="block">
<div className="flex items-center">
<img src={projectImage} width={projectImageSize} className="flex-shrink-0" />
<div className="flex flex-col mx-2 min-w-0 flex-grow">
<h1 className="font-bold text-left truncate">{projectHeader}</h1>
<h1 className="text-left truncate">{projectSubheader}</h1>
<div className="flex flex-col mx-2 min-w-0 flex-grow">
<h1 className="font-bold text-left truncate">{projectHeader}</h1>
<h1 className="text-left truncate">{projectSubheader}</h1>
</div>
</div>
</div>
</div>