encie22/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial design based off original website, some things still to do

Browse Source
This commit is contained in:
Nathan Cummins
2025-08-08 17:48:11 +09:30
parent d38c8fc694
commit ae3c38be17
185 changed files with 6799 additions and 1877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/components/ProjectCard.astro Normal file
View File

@@ -0,0 +1,188 @@
---
import { getAllProjectImages } from '@lib/utils';
import Link from "@components/Link.astro";
import Paragraph from "@components/Paragraph.astro";
import Token from "@components/Token.astro";
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";
interface Props {
project: CollectionEntry<"projects">;
textOn?: "left" | "right";
quality?: number;
}
const { project, textOn = "left", quality = "80" } = Astro.props as Props;
const images = getAllProjectImages(project);
const translateXOptions = [
"group-hover:translate-x-8",
"group-hover:translate-x-9",
"group-hover:translate-x-10",
"group-hover:translate-x-11",
"group-hover:translate-x-12",
"group-hover:translate-x-13",
"group-hover:translate-x-14",
"group-hover:translate-x-15",
"group-hover:translate-x-16",
"group-hover:translate-x-17",
"group-hover:translate-x-18",
"group-hover:translate-x-19",
"group-hover:translate-x-20",
"group-hover:translate-x-21",
"group-hover:translate-x-22",
"group-hover:translate-x-23",
"group-hover:translate-x-24",
"group-hover:-translate-x-8",
"group-hover:-translate-x-9",
"group-hover:-translate-x-10",
"group-hover:-translate-x-11",
"group-hover:-translate-x-12",
"group-hover:-translate-x-13",
"group-hover:-translate-x-14",
"group-hover:-translate-x-15",
"group-hover:-translate-x-16",
"group-hover:-translate-x-17",
"group-hover:-translate-x-18",
"group-hover:-translate-x-19",
"group-hover:-translate-x-20",
"group-hover:-translate-x-21",
"group-hover:-translate-x-22",
"group-hover:-translate-x-23",
"group-hover:-translate-x-24"
];
const translateYOptions = [
"group-hover:translate-y-8",
"group-hover:translate-y-9",
"group-hover:translate-y-10",
"group-hover:translate-y-11",
"group-hover:translate-y-12",
"group-hover:translate-y-13",
"group-hover:translate-y-14",
"group-hover:translate-y-15",
"group-hover:translate-y-16",
"group-hover:translate-y-17",
"group-hover:translate-y-18",
"group-hover:translate-y-19",
"group-hover:translate-y-20",
"group-hover:translate-y-21",
"group-hover:translate-y-22",
"group-hover:translate-y-23",
"group-hover:translate-y-24",
"group-hover:-translate-y-9",
"group-hover:-translate-y-10",
"group-hover:-translate-y-11",
"group-hover:-translate-y-12",
"group-hover:-translate-y-13",
"group-hover:-translate-y-14",
"group-hover:-translate-y-15",
"group-hover:-translate-y-16",
"group-hover:-translate-y-17",
"group-hover:-translate-y-18",
"group-hover:-translate-y-19",
"group-hover:-translate-y-20",
"group-hover:-translate-y-21",
"group-hover:-translate-y-22",
"group-hover:-translate-y-23",
"group-hover:-translate-y-24"
];
const rotateOptions = [
"rotate-1",
"rotate-2",
"rotate-3",
"rotate-4",
"rotate-5",
"rotate-6",
"rotate-7",
"rotate-8",
"rotate-9",
"rotate-10",
"rotate-11",
"rotate-12",
"-rotate-1",
"-rotate-2",
"-rotate-3",
"-rotate-4",
"-rotate-5",
"-rotate-6",
"-rotate-7",
"-rotate-8",
"-rotate-9",
"-rotate-10",
"-rotate-11",
"-rotate-12"
];
const projectHasBody = project.body && project.body.trim().length > 0;
---
<div class="grid grid-cols-1 text-left md:grid-cols-2">
<div
class:list={[
"order-1 flex flex-col items-start justify-center py-4",
textOn === "right" ? "md:order-2" : "md:order-1"
]}
>
<span
><h2 class="font-header-alt inline-block text-lg font-semibold">
{projectHasBody && <Link href=`/projects/${project.id}/`>{project.data.title}</Link>}{!projectHasBody && project.data.title }</h2></span
>
<h3 class="font-header-alt font-base font-medium">
{project.data.role}
</h3>
<div class="pt-2">
<Token>{project.data.type}</Token>
</div>
<Paragraph>{project.data.description}</Paragraph>
{
project.data.externalLinks !== undefined && (
<span class="relative order-3 ml-auto flex w-full items-start justify-start space-x-2 text-xl">
{project.data.externalLinks.map((link, index) => (
<Link href={link.href} includeExternalLinkIcon={false} aria-label={link.name}>
<Icon name={link.icon} />
</Link>
))}
</span>
)
}
</div>
<div
class:list={[
"group relative order-2 ml-auto flex h-full min-h-64 w-full items-center justify-center",
textOn === "right" ? "md:order-1" : "md:order-2"
]}
>
{
images
.reverse()
.map((image, index) => (
<Image
id={`hero-image-${index}`}
class:list={[
"animate-floaty absolute h-48 w-auto origin-center transform rounded object-cover shadow-lg/50 transition duration-300 ease-in-out group-hover:z-30 group-hover:scale-130 hover:z-40",
translateXOptions[
Math.floor(Math.random() * translateXOptions.length)
],
translateYOptions[
Math.floor(Math.random() * translateYOptions.length)
],
rotateOptions[Math.floor(Math.random() * rotateOptions.length)]
]}
src={image}
alt=""
loading="lazy"
layout="constrained"
fit="cover"
height={192}
style={`animation-delay: -${Math.floor(Math.random() * (12 - 4) + 4)}s; animation-direction: ${Math.random() < 0.5 ? "normal" : "reverse"};`}
quality={quality}
/>
))
}
</div>
</div>