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

a bunch of responsiveness fixes

Browse Source
This commit is contained in:
Alex Frantz
2024-08-14 01:47:46 -04:00
parent 09482882f5
commit c253721ce5
7 changed files with 77 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ export default function Footer() {
}, [mailState]) }, [mailState])
return ( return (
<div className="lg:w-1/2 bg-gray-500 md:w-full mx-auto rounded-lg text-center text-white bottom-0 left-0 right-0 p-4 select-none"> <div className="lg:w-1/2 bg-gray-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> <h1 className="font-bold">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
<p>All logos & images on this page belong to their respective owners.</p> <p>All logos & images on this page belong to their respective owners.</p>
@@ -32,10 +32,10 @@ export default function Footer() {
<div className="block space-x-2"> <div className="block space-x-2">
{/* socials */} {/* socials */}
<a href="https://github.com/azpha" target="_blank"> <a href="https://github.com/azpha/website" target="_blank">
<GitHub /> <GitHub />
</a> </a>
<a href="https://twitter.com/avvex__" target="_blank"> <a href="https://twitter.com/carlgrimesdupe" target="_blank">
<Twitter /> <Twitter />
</a> </a>
<a href="https://last.fm/user/lulawex" target="_blank"> <a href="https://last.fm/user/lulawex" target="_blank">
src/components/Header.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
export default function Header() { export default function Header() {
return ( return (
<div className="text-white mx-auto pt-4 w-full sm:w-1/2 text-center lg:text-left">
<div className="text-white pt-4 mx-auto w-full sm:w-1/2 text-center sm:text-left">
<h1 className="text-2xl font-bold">Alex Frantz</h1> <h1 className="text-2xl font-bold">Alex Frantz</h1>
<p>Professional button clicker & word typer</p> <p>Professional button clicker & word typer</p>
src/components/Layout.tsx
+16
View File
@@ -0,0 +1,16 @@
import Header from "./Header"
import Footer from "./Footer"
export default function Layout({
children
}: {
children: JSX.Element | JSX.Element[]
}) {
return (
<main className="bg-black text-white min-h-screen">
<Header />
{children}
<Footer />
</main>
)
}
src/components/ProjectCard.tsx
+3 -5
View File
@@ -10,14 +10,12 @@ export default function Project({
urlTo?: string, urlTo?: string,
}) { }) {
return ( return (
<a href={urlTo} target="_blank"> <a href={urlTo} target="_blank" className="max-w-fit mx-auto">
<div className="bg-white text-black max-w-fit mx-auto rounded-lg overflow-hidden"> <div className="bg-white text-black mx-auto rounded-lg max-w-fit lg:max-w-full overflow-hidden">
<img <img
src={image} src={image}
width="400"
height="300"
alt={name} alt={name}
className="w-full h-48 object-cover" className="w-full h-24 object-cover"
/> />
<div className="p-4 space-y-2"> <div className="p-4 space-y-2">
src/components/ProjectComponent.tsx
+2 -3
View File
@@ -12,14 +12,13 @@ export default function ProjectComponent({
imageSize?: string imageSize?: string
}) { }) {
return ( return (
<a href={url} target="_blank"> <a href={url} target="_blank" className="max-w-fit mx-auto">
<div className="bg-white text-black max-w-fit mx-auto p-2"> <div className="bg-white text-black max-w-fit mx-auto p-2">
<div className="flex items-center"> <div className="flex items-center">
<img src={image} width={imageSize} /> <img src={image} width={imageSize} />
<div className="flex flex-wrap mx-2"> <div className="flex flex-wrap mx-2">
<h1 className="font-bold">{header}</h1> <h1 className="font-bold w-full">{header}</h1>
<div className="basis-10" />
<h1>{subheader}</h1> <h1>{subheader}</h1>
</div> </div>
</div> </div>
src/components/ProjectComponents/RecentListens.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export default function RecentListens() {
if (!loading && data) { if (!loading && data) {
return ( return (
<ProjectComponent <ProjectComponent
url={data[0].url} url={"https://last.fm/user/lulawex"}
header={data[0].name} header={data[0].name}
subheader={data[0].artist["#text"]} subheader={data[0].artist["#text"]}
image={data[0].image.filter((v) => v.size === "large")[0]["#text"]} image={data[0].image.filter((v) => v.size === "large")[0]["#text"]}
src/index.tsx
+51 -55
View File
@@ -1,5 +1,3 @@
import Footer from "./components/Footer";
import Header from "./components/Header";
import ListBox from "./components/ListBox"; import ListBox from "./components/ListBox";
import Project from "./components/ProjectCard"; import Project from "./components/ProjectCard";
import ContactForm from "./components/ContactForm"; import ContactForm from "./components/ContactForm";
@@ -8,74 +6,73 @@ import ContactForm from "./components/ContactForm";
import RecentWatch from "./components/ProjectComponents/RecentWatch"; import RecentWatch from "./components/ProjectComponents/RecentWatch";
import RecentPhoto from "./components/ProjectComponents/RecentPhoto"; import RecentPhoto from "./components/ProjectComponents/RecentPhoto";
import RecentListens from "./components/ProjectComponents/RecentListens"; import RecentListens from "./components/ProjectComponents/RecentListens";
import Layout from "./components/Layout";
export default function Home() { export default function Home() {
return ( return (
<main className="bg-black text-white min-h-screen"> <Layout>
<Header /> <div className="mx-auto w-full lg:w-1/2">
<div className="mx-auto lg:w-1/2"> <section id="projects" className="mb-4">
<section id="projects"> <div className="text-center lg:text-left mb-4">
<div className="mb-4 text-center md:text-left"> <h1 className="text-2xl font-bold">Projects</h1>
<h1 className="text-3xl font-bold">
Projects
</h1>
<p>Cool stuff I'm working on</p> <p>Cool stuff I'm working on</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Project <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
name="medaltv-wrapper" <Project
description="A JavaScript wrapper for the Medal.tv Developer API" name="medaltv-wrapper"
urlTo="https://github.com/azpha/medaltv-wrapper" description="A JavaScript wrapper for the Medal.tv developer API"
image="https://storage.alexav.gg/content/medal-logo.png" urlTo="https://github.com/azpha/medaltv-wrapper"
/> image="https://storage.alexav.gg/content/medal-logo.png"
<Project />
name="splitstat" <Project
description="A Discord bot for SplitStat: Arena Warfare statistics" name="splitstat"
urlTo="https://github.com/azpha/splitstat" description="A Discord bot for SplitStat: Arena Warfare statistics"
image="https://storage.alexav.gg/content/splitstat-logo.png" urlTo="https://github.com/azpha/splitstat"
/> image="https://storage.alexav.gg/content/splitstat-logo.png"
<Project />
name="steam-deck-file-sync" <Project
description="Sync clips from Steam Deck > your computer easily" name="steam-deck-file-sync"
urlTo="https://github.com/azpha/steam-deck-file-sync" description="Sync clips from Steam Deck > your computer easily"
image="https://storage.alexav.gg/content/steam-deck.jpg" urlTo="https://github.com/azpha/steam-deck-file-sync"
/> image="https://storage.alexav.gg/content/steam-deck.jpg"
</div> />
<Project
name="subscription-tracker"
description="Easily track & get notified for upcoming subscriptions"
urlTo="https://github.com/azpha/subscription-tracker"
image="https://storage.alexav.gg/content/a7a289ac-9466-4f3f-b904-2f9be897e0f7.png"
/>
</div>
</section> </section>
<section id="watching" className="my-5 py-10 px-4 bg-gray-500"> <section id="watching" className="my-5 py-5 px-4 bg-gray-500">
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div className="flex justify-center items-center"> <div className="w-full flex justify-center items-center">
<div className="text-left md:text-center"> <h1 className="text-4xl font-bold text-center">What I'm watching</h1>
<h1 className="text-4xl font-bold">What am I watching?</h1>
<p>Cool shows and movies I'm watching</p>
</div>
</div> </div>
<div> <div>
<RecentWatch /> <RecentWatch />
</div> </div>
</div> </div>
</section> </section>
<section id="photos" className="my-5 py-10 px-4"> <section id="photos" className="my-5 py-5 px-4">
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div className="flex justify-center items-center"> <div className="w-full flex justify-center items-center">
<div> <h1 className="text-4xl font-bold text-center">Photos I've captured</h1>
<h1 className="text-4xl font-bold">What am I capturing?</h1>
<p>Cool game photos I've taken recently</p>
</div>
</div> </div>
<div> <div>
<RecentPhoto /> <RecentPhoto />
</div> </div>
</div> </div>
</section> </section>
<section id="listens" className="my-5 py-10 px-4 bg-gray-500"> <section id="listens" className="my-5 py-5 px-4 bg-gray-500">
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div className="flex justify-center items-center"> <div className="w-full flex justify-center items-center">
<div> <h1 className="text-4xl font-bold text-center w-full">Music I'm listening to</h1>
<h1 className="text-4xl font-bold">What am I listening to?</h1>
<p>I listen to some good stuff I swear</p>
</div>
</div> </div>
<div> <div>
<RecentListens /> <RecentListens />
</div> </div>
@@ -91,7 +88,7 @@ export default function Home() {
I have experience in languages like JavaScript and Python, and am primarily I have experience in languages like JavaScript and Python, and am primarily
working in libraries like React. working in libraries like React.
</p> </p>
<div className="mt-8 grid grid-cols-2 gap-4"> <div className="mt-8 grid grid-cols-2 w-full mx-auto gap-4">
<ListBox <ListBox
title="Skills" title="Skills"
points={[ points={[
@@ -115,9 +112,8 @@ export default function Home() {
<ContactForm /> <ContactForm />
</div> </div>
</div> </div>
</section> </section>
</div> </div>
<Footer /> </Layout>
</main>
) )
} }