rework project cards
This commit is contained in:
@@ -5,9 +5,11 @@ export default function Footer() {
|
||||
const [mailState, setMailState] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setMailState(false)
|
||||
}, 3000)
|
||||
if (mailState) {
|
||||
setTimeout(() => {
|
||||
setMailState(false)
|
||||
}, 3000)
|
||||
}
|
||||
}, [mailState])
|
||||
|
||||
return (
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import ProjectComponent from '../ProjectComponent';
|
||||
|
||||
type MusicAPIResponse = {
|
||||
data: {
|
||||
@@ -50,35 +51,14 @@ export default function RecentListens() {
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
if (data) {
|
||||
if (!loading && data) {
|
||||
return (
|
||||
<a href={data[0].url} target="_blank">
|
||||
<div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto">
|
||||
{
|
||||
(loading) ? (
|
||||
<h1>Loading..</h1>
|
||||
) : (!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>
|
||||
<ProjectComponent
|
||||
url={data[0].url}
|
||||
header={data[0].name}
|
||||
subheader={data[0].artist["#text"]}
|
||||
image={data[0].image.filter((v) => v.size === "large")[0]["#text"]}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
<>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import ProjectComponent from '../ProjectComponent';
|
||||
|
||||
type PhotoData = {
|
||||
id: number,
|
||||
@@ -45,34 +46,24 @@ export default function RecentPhoto() {
|
||||
return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<a href={"https://photos.alexav.gg/"} target="_blank">
|
||||
<div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto">
|
||||
{
|
||||
(loading) ? (
|
||||
<h1>Loading..</h1>
|
||||
) : (!errorState && data) ? (
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={data.imageUrl}
|
||||
width="200"
|
||||
/>
|
||||
<div className="flex flex-wrap mx-2">
|
||||
<h1 className="w-full font-bold">{data.name}</h1>
|
||||
|
||||
<h1>{parseDate(data.dateTaken as Date)}</h1>
|
||||
</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>
|
||||
)
|
||||
if (data && !loading) {
|
||||
return (
|
||||
<ProjectComponent
|
||||
url={"photos.alexav.gg"}
|
||||
header={data.name}
|
||||
subheader={parseDate(data.dateTaken as Date)}
|
||||
image={data.imageUrl}
|
||||
imageSize={"150"}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<p className="text-sm italic">{errorState}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import ProjectComponent from '../ProjectComponent';
|
||||
|
||||
type WatchDataResponse = {
|
||||
status: number,
|
||||
@@ -48,42 +49,23 @@ export default function RecentWatch() {
|
||||
return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<a href={data?.id ? "https://watch.alexav.gg/?id=" + data?.id : "#"} target="_blank">
|
||||
<div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto">
|
||||
{
|
||||
loading ? (
|
||||
<h1>Loading..</h1>
|
||||
) : !errorState ? (
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={data?.imageKey}
|
||||
width="50"
|
||||
/>
|
||||
<div className="flex flex-wrap mx-2">
|
||||
<h1 className="w-full font-bold">{data?.title}</h1>
|
||||
|
||||
{
|
||||
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>
|
||||
)
|
||||
|
||||
if (data && !loading) {
|
||||
return (
|
||||
<ProjectComponent
|
||||
header={data.title}
|
||||
subheader={ data.finished ? "Finished!" : "Started on " + parseDate(data.startedOn) }
|
||||
url={"https://watch.alexav.gg/?id=" + data.id}
|
||||
image={data.imageKey}
|
||||
imageSize={"50"}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
+6
-5
@@ -1,7 +1,7 @@
|
||||
import Footer from "./components/Footer";
|
||||
import Header from "./components/Header";
|
||||
import ListBox from "./components/ListBox";
|
||||
import Project from "./components/Project";
|
||||
import Project from "./components/ProjectCard";
|
||||
import ContactForm from "./components/ContactForm";
|
||||
|
||||
// project components
|
||||
@@ -45,7 +45,7 @@ export default function Home() {
|
||||
<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>
|
||||
<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>
|
||||
@@ -59,7 +59,7 @@ export default function Home() {
|
||||
<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 picturing?</h1>
|
||||
<h1 className="text-4xl font-bold">What am I capturing?</h1>
|
||||
<p>Cool game photos I've taken recently</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,8 +87,9 @@ export default function Home() {
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold">About Me</h2>
|
||||
<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 have experience in languages like JavaScript and Python, along with libraries like React.
|
||||
I'm a "junior" developer with a passion for software and games.
|
||||
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">
|
||||
<ListBox
|
||||
|
||||
Reference in New Issue
Block a user