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

rework project cards

Browse Source
This commit is contained in:
Alex Frantz
2024-08-14 00:58:08 -04:00
parent 614cd7f0bd
commit 09482882f5
7 changed files with 88 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+5 -3
View File
@@ -5,9 +5,11 @@ export default function Footer() {
const [mailState, setMailState] = useState(false); const [mailState, setMailState] = useState(false);
useEffect(() => { useEffect(() => {
setTimeout(() => { if (mailState) {
setMailState(false) setTimeout(() => {
}, 3000) setMailState(false)
}, 3000)
}
}, [mailState]) }, [mailState])
return ( return (
src/components/Project.tsx → src/components/ProjectCard.tsx
View File
src/components/ProjectComponent.tsx
+29
View File
@@ -0,0 +1,29 @@
export default function ProjectComponent({
url,
header,
subheader,
image,
imageSize = "100"
}: {
url: string,
header: string,
subheader: string,
image: string,
imageSize?: string
}) {
return (
<a href={url} target="_blank">
<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>{subheader}</h1>
</div>
</div>
</div>
</a>
)
}
src/components/ProjectComponents/RecentListens.tsx
+8 -28
View File
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import ProjectComponent from '../ProjectComponent';
type MusicAPIResponse = { type MusicAPIResponse = {
data: { data: {
@@ -50,35 +51,14 @@ export default function RecentListens() {
setLoading(false); setLoading(false);
}, []); }, []);
if (data) { if (!loading && data) {
return ( return (
<a href={data[0].url} target="_blank"> <ProjectComponent
<div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto"> url={data[0].url}
{ header={data[0].name}
(loading) ? ( subheader={data[0].artist["#text"]}
<h1>Loading..</h1> image={data[0].image.filter((v) => v.size === "large")[0]["#text"]}
) : (!errorState && data) ? ( />
<div className="flex items-center">
<img
src={data[0].image.filter((v) => v.size === "large")[0]['#text']}
width="100"
/>
<div className="flex flex-wrap mx-2">
<h1 className="w-full font-bold">{data[0].name}</h1>
<h1>{data[0].artist['#text']}</h1>
</div>
</div>
) : (
<>
<h1 className="font-bold text-2xl">Failed to fetch :(</h1>
<p>Check out <a className="underline" href="https://last.fm/user/lulawex" target="_blank">last.fm/lulawex</a> if this isn't working.</p>
<p className="text-sm italic">{errorState}</p>
</>
)
}
</div>
</a>
) )
} else { } else {
<> <>
src/components/ProjectComponents/RecentPhoto.tsx
+20 -29
View File
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import ProjectComponent from '../ProjectComponent';
type PhotoData = { type PhotoData = {
id: number, id: number,
@@ -45,34 +46,24 @@ export default function RecentPhoto() {
return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`; return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
} }
return ( if (data && !loading) {
<a href={"https://photos.alexav.gg/"} target="_blank"> return (
<div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto"> <ProjectComponent
{ url={"photos.alexav.gg"}
(loading) ? ( header={data.name}
<h1>Loading..</h1> subheader={parseDate(data.dateTaken as Date)}
) : (!errorState && data) ? ( image={data.imageUrl}
<div className="flex items-center"> imageSize={"150"}
<img />
src={data.imageUrl} )
width="200" } else {
/> return (
<div className="flex flex-wrap mx-2"> <>
<h1 className="w-full font-bold">{data.name}</h1> <h1 className="font-bold text-2xl">No data :(</h1>
<p>Check out <a className="underline" href="https://photos.alexav.gg" target="_blank">photos.alexav.gg</a> if this isn't working.</p>
<h1>{parseDate(data.dateTaken as Date)}</h1> <p className="text-sm italic">{errorState}</p>
</div> </>
</div> )
) : ( }
<>
<h1 className="font-bold text-2xl">Failed to fetch :(</h1>
<p>Check out <a className="underline" href="https://photos.alexav.gg" target="_blank">photos.alexav.gg</a> if this isn't working.</p>
<p className="text-sm italic">{errorState}</p>
</>
)
}
</div>
</a>
)
} }
src/components/ProjectComponents/RecentWatch.tsx
+20 -38
View File
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import ProjectComponent from '../ProjectComponent';
type WatchDataResponse = { type WatchDataResponse = {
status: number, status: number,
@@ -48,42 +49,23 @@ export default function RecentWatch() {
return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`; return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
} }
return ( if (data && !loading) {
<a href={data?.id ? "https://watch.alexav.gg/?id=" + data?.id : "#"} target="_blank"> return (
<div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto"> <ProjectComponent
{ header={data.title}
loading ? ( subheader={ data.finished ? "Finished!" : "Started on " + parseDate(data.startedOn) }
<h1>Loading..</h1> url={"https://watch.alexav.gg/?id=" + data.id}
) : !errorState ? ( image={data.imageKey}
<div className="flex items-center"> imageSize={"50"}
<img />
src={data?.imageKey} )
width="50" } else {
/> return (
<div className="flex flex-wrap mx-2"> <>
<h1 className="w-full font-bold">{data?.title}</h1> <h1 className="font-bold text-2xl">No data :(</h1>
<p>Check out <a className="underline" href="https://watch.alexav.gg" target="_blank">watch.alexav.gg</a> if this isn't working.</p>
{ <p className="text-sm italic">{errorState}</p>
data?.finished ? ( </>
<h1 className="w-full font-bold">Finished!</h1> )
) : ( }
<h1 className="w-full">Started on {parseDate(new Date(data?.startedOn as Date))}</h1>
)
}
<h1>{data?.currentEpisode}</h1>
</div>
</div>
) : (
<>
<h1 className="font-bold text-2xl">Failed to fetch :(</h1>
<p>Check out <a className="underline" href="https://watch.alexav.gg" target="_blank">watch.alexav.gg</a> if this isn't working.</p>
<p className="text-sm italic">{errorState}</p>
</>
)
}
</div>
</a>
)
} }
src/index.tsx
+6 -5
View File
@@ -1,7 +1,7 @@
import Footer from "./components/Footer"; import Footer from "./components/Footer";
import Header from "./components/Header"; import Header from "./components/Header";
import ListBox from "./components/ListBox"; import ListBox from "./components/ListBox";
import Project from "./components/Project"; import Project from "./components/ProjectCard";
import ContactForm from "./components/ContactForm"; import ContactForm from "./components/ContactForm";
// project components // project components
@@ -45,7 +45,7 @@ export default function Home() {
<section id="watching" className="my-5 py-10 px-4 bg-gray-500"> <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="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<div> <div className="text-left md:text-center">
<h1 className="text-4xl font-bold">What am I watching?</h1> <h1 className="text-4xl font-bold">What am I watching?</h1>
<p>Cool shows and movies I'm watching</p> <p>Cool shows and movies I'm watching</p>
</div> </div>
@@ -59,7 +59,7 @@ export default function Home() {
<div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4"> <div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<div> <div>
<h1 className="text-4xl font-bold">What am I picturing?</h1> <h1 className="text-4xl font-bold">What am I capturing?</h1>
<p>Cool game photos I've taken recently</p> <p>Cool game photos I've taken recently</p>
</div> </div>
</div> </div>
@@ -87,8 +87,9 @@ export default function Home() {
<div> <div>
<h2 className="text-3xl font-bold">About Me</h2> <h2 className="text-3xl font-bold">About Me</h2>
<p className="text-muted-foreground mt-4"> <p className="text-muted-foreground mt-4">
I'm a junior developer with a burning passion for creating not only frontend applications, but also games. I'm a "junior" developer with a passion for software and games.
I have experience in languages like JavaScript and Python, along with libraries like React. I have experience in languages like JavaScript and Python, and am primarily
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 gap-4">
<ListBox <ListBox