a bunch of responsiveness fixes
This commit is contained in:
@@ -13,7 +13,7 @@ export default function Footer() {
|
||||
}, [mailState])
|
||||
|
||||
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">© {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
|
||||
<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">
|
||||
{/* socials */}
|
||||
<a href="https://github.com/azpha" target="_blank">
|
||||
<a href="https://github.com/azpha/website" target="_blank">
|
||||
<GitHub />
|
||||
</a>
|
||||
<a href="https://twitter.com/avvex__" target="_blank">
|
||||
<a href="https://twitter.com/carlgrimesdupe" target="_blank">
|
||||
<Twitter />
|
||||
</a>
|
||||
<a href="https://last.fm/user/lulawex" target="_blank">
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
export default function Header() {
|
||||
return (
|
||||
|
||||
<div className="text-white pt-4 mx-auto w-full sm:w-1/2 text-center sm:text-left">
|
||||
<div className="text-white mx-auto pt-4 w-full sm:w-1/2 text-center lg:text-left">
|
||||
<h1 className="text-2xl font-bold">Alex Frantz</h1>
|
||||
<p>Professional button clicker & word typer</p>
|
||||
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -10,14 +10,12 @@ export default function Project({
|
||||
urlTo?: string,
|
||||
}) {
|
||||
return (
|
||||
<a href={urlTo} target="_blank">
|
||||
<div className="bg-white text-black max-w-fit mx-auto rounded-lg overflow-hidden">
|
||||
<a href={urlTo} target="_blank" className="max-w-fit mx-auto">
|
||||
<div className="bg-white text-black mx-auto rounded-lg max-w-fit lg:max-w-full overflow-hidden">
|
||||
<img
|
||||
src={image}
|
||||
width="400"
|
||||
height="300"
|
||||
alt={name}
|
||||
className="w-full h-48 object-cover"
|
||||
className="w-full h-24 object-cover"
|
||||
/>
|
||||
|
||||
<div className="p-4 space-y-2">
|
||||
|
||||
@@ -12,14 +12,13 @@ export default function ProjectComponent({
|
||||
imageSize?: string
|
||||
}) {
|
||||
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="flex items-center">
|
||||
<img src={image} width={imageSize} />
|
||||
|
||||
<div className="flex flex-wrap mx-2">
|
||||
<h1 className="font-bold">{header}</h1>
|
||||
<div className="basis-10" />
|
||||
<h1 className="font-bold w-full">{header}</h1>
|
||||
<h1>{subheader}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -54,7 +54,7 @@ export default function RecentListens() {
|
||||
if (!loading && data) {
|
||||
return (
|
||||
<ProjectComponent
|
||||
url={data[0].url}
|
||||
url={"https://last.fm/user/lulawex"}
|
||||
header={data[0].name}
|
||||
subheader={data[0].artist["#text"]}
|
||||
image={data[0].image.filter((v) => v.size === "large")[0]["#text"]}
|
||||
|
||||
+32
-36
@@ -1,5 +1,3 @@
|
||||
import Footer from "./components/Footer";
|
||||
import Header from "./components/Header";
|
||||
import ListBox from "./components/ListBox";
|
||||
import Project from "./components/ProjectCard";
|
||||
import ContactForm from "./components/ContactForm";
|
||||
@@ -8,23 +6,22 @@ import ContactForm from "./components/ContactForm";
|
||||
import RecentWatch from "./components/ProjectComponents/RecentWatch";
|
||||
import RecentPhoto from "./components/ProjectComponents/RecentPhoto";
|
||||
import RecentListens from "./components/ProjectComponents/RecentListens";
|
||||
import Layout from "./components/Layout";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="bg-black text-white min-h-screen">
|
||||
<Header />
|
||||
<div className="mx-auto lg:w-1/2">
|
||||
<section id="projects">
|
||||
<div className="mb-4 text-center md:text-left">
|
||||
<h1 className="text-3xl font-bold">
|
||||
Projects
|
||||
</h1>
|
||||
<Layout>
|
||||
<div className="mx-auto w-full lg:w-1/2">
|
||||
<section id="projects" className="mb-4">
|
||||
<div className="text-center lg:text-left mb-4">
|
||||
<h1 className="text-2xl font-bold">Projects</h1>
|
||||
<p>Cool stuff I'm working on</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<Project
|
||||
name="medaltv-wrapper"
|
||||
description="A JavaScript wrapper for the Medal.tv Developer API"
|
||||
description="A JavaScript wrapper for the Medal.tv developer API"
|
||||
urlTo="https://github.com/azpha/medaltv-wrapper"
|
||||
image="https://storage.alexav.gg/content/medal-logo.png"
|
||||
/>
|
||||
@@ -40,42 +37,42 @@ export default function Home() {
|
||||
urlTo="https://github.com/azpha/steam-deck-file-sync"
|
||||
image="https://storage.alexav.gg/content/steam-deck.jpg"
|
||||
/>
|
||||
<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 id="watching" className="my-5 py-10 px-4 bg-gray-500">
|
||||
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="text-left md:text-center">
|
||||
<h1 className="text-4xl font-bold">What am I watching?</h1>
|
||||
<p>Cool shows and movies I'm watching</p>
|
||||
</div>
|
||||
<section id="watching" className="my-5 py-5 px-4 bg-gray-500">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<h1 className="text-4xl font-bold text-center">What I'm watching</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<RecentWatch />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="photos" className="my-5 py-10 px-4">
|
||||
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
|
||||
<div className="flex justify-center items-center">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">What am I capturing?</h1>
|
||||
<p>Cool game photos I've taken recently</p>
|
||||
</div>
|
||||
<section id="photos" className="my-5 py-5 px-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<h1 className="text-4xl font-bold text-center">Photos I've captured</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<RecentPhoto />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="listens" className="my-5 py-10 px-4 bg-gray-500">
|
||||
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
|
||||
<div className="flex justify-center items-center">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">What am I listening to?</h1>
|
||||
<p>I listen to some good stuff I swear</p>
|
||||
</div>
|
||||
<section id="listens" className="my-5 py-5 px-4 bg-gray-500">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<h1 className="text-4xl font-bold text-center w-full">Music I'm listening to</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<RecentListens />
|
||||
</div>
|
||||
@@ -91,7 +88,7 @@ export default function Home() {
|
||||
I have experience in languages like JavaScript and Python, and am primarily
|
||||
working in libraries like React.
|
||||
</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
|
||||
title="Skills"
|
||||
points={[
|
||||
@@ -117,7 +114,6 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<Footer />
|
||||
</main>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user