first commit

templates/portfolio/src/pages/index.astro

@@ -0,0 +1,172 @@
+---
+import { getEmDashCollection, getSiteSettings } from "emdash";
+import Base from "../layouts/Base.astro";
+import ProjectCard from "../components/ProjectCard.astro";
+
+const settings = await getSiteSettings();
+const { entries: projects, cacheHint } =
+	await getEmDashCollection("projects");
+
+Astro.cache.set(cacheHint);
+
+// Get the 4 most recent projects for the homepage
+const featuredProjects = projects
+	.toSorted((a, b) => {
+		const dateA = a.data.publishedAt?.getTime() ?? 0;
+		const dateB = b.data.publishedAt?.getTime() ?? 0;
+		return dateB - dateA;
+	})
+	.slice(0, 4);
+---
+
+<Base>
+	<section class="hero">
+		<h1 class="hero-title">{settings?.title || "Studio"}</h1>
+		<p class="hero-tagline">{settings?.tagline || "Design & Development"}</p>
+	</section>
+
+	{
+		featuredProjects.length > 0 ? (
+			<section class="featured">
+				<header class="section-header">
+					<h2 class="section-title">Selected Work</h2>
+					<a href="/work" class="section-link">
+						View all projects &rarr;
+					</a>
+				</header>
+				<div class="projects-grid">
+					{featuredProjects.map((project) => (
+						<ProjectCard
+							title={project.data.title ?? "Untitled"}
+							summary={project.data.summary}
+							featuredImage={project.data.featured_image ?? ""}
+							href={`/work/${project.id}`}
+							client={project.data.client}
+							year={project.data.year}
+						/>
+					))}
+				</div>
+			</section>
+		) : (
+			<section class="empty-state">
+				<h2>No projects yet</h2>
+				<p>Add your first project in the admin panel.</p>
+				<a href="/_emdash/admin/content/projects/new" class="btn">
+					Add a project
+				</a>
+			</section>
+		)
+	}
+</Base>
+
+<style>
+	.hero {
+		max-width: var(--wide-width);
+		margin: 0 auto;
+		padding: var(--spacing-4xl) var(--spacing-lg);
+		text-align: center;
+	}
+
+	.hero-title {
+		font-size: var(--font-size-4xl);
+		font-weight: 500;
+		margin-bottom: var(--spacing-md);
+		letter-spacing: -0.02em;
+	}
+
+	.hero-tagline {
+		font-size: var(--font-size-xl);
+		color: var(--color-muted);
+		font-family: var(--font-serif);
+		font-style: italic;
+	}
+
+	.featured {
+		max-width: var(--wide-width);
+		margin: 0 auto;
+		padding: 0 var(--spacing-lg) var(--spacing-4xl);
+	}
+
+	.section-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		margin-bottom: var(--spacing-2xl);
+		padding-bottom: var(--spacing-md);
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	.section-title {
+		font-size: var(--font-size-lg);
+		font-weight: 500;
+	}
+
+	.section-link {
+		font-size: var(--font-size-sm);
+		color: var(--color-muted);
+		text-decoration: none;
+		transition: color var(--transition-fast);
+	}
+
+	.section-link:hover {
+		color: var(--color-text);
+	}
+
+	.projects-grid {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: var(--spacing-2xl);
+	}
+
+	.empty-state {
+		text-align: center;
+		padding: var(--spacing-4xl) var(--spacing-lg);
+		max-width: 400px;
+		margin: 0 auto;
+	}
+
+	.empty-state h2 {
+		font-size: var(--font-size-xl);
+		margin-bottom: var(--spacing-sm);
+	}
+
+	.empty-state p {
+		color: var(--color-muted);
+		margin-bottom: var(--spacing-lg);
+	}
+
+	.btn {
+		display: inline-block;
+		padding: var(--spacing-sm) var(--spacing-lg);
+		background: var(--color-text);
+		color: var(--color-bg);
+		text-decoration: none;
+		border-radius: var(--radius);
+		font-size: var(--font-size-sm);
+		transition: opacity var(--transition-fast);
+	}
+
+	.btn:hover {
+		opacity: 0.85;
+	}
+
+	@media (max-width: 768px) {
+		.hero {
+			padding: var(--spacing-3xl) var(--spacing-lg);
+		}
+
+		.hero-title {
+			font-size: var(--font-size-3xl);
+		}
+
+		.projects-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.section-header {
+			flex-direction: column;
+			gap: var(--spacing-sm);
+			align-items: flex-start;
+		}
+	}
+</style>