Started reworking project listing page

Naapperas · Dec 22, 2023 · 2a9d20e · 2a9d20e
1 parent ba6948d
commit 2a9d20e
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 36 deletions.
diff --git a/src/components/AppBar/index.astro b/src/components/AppBar/index.astro
@@ -5,15 +5,6 @@ import { type Page } from "./Nav/Link.astro";
 import PC from "./PC.astro";
 
 const pages: Page[] = [
-  {
-    name: "Blog",
-    url: "/blog",
-    icon: {
-      pack: "mdi",
-      name: "blog-outline",
-      enabled: false,
-    },
-  },
   {
     name: "Projects",
     url: "/projects",

diff --git a/src/components/Page/Header.astro b/src/components/Page/Header.astro
@@ -1,13 +1,13 @@
 ---
 interface Props {
-    title: string;
-    description: string;
+  title: string;
+  description: string;
 }
 
-const {title, description} = Astro.props
+const { title, description } = Astro.props;
 ---
 
-<header class="text-xl">
-  <h2>{title}</h2>
-  <p>{description}</p>
+<header class="text-xl self-start ml-10">
+  <h2 class="font-bold text-2xl">{title}</h2>
+  <p class="">{description}</p>
 </header>
diff --git a/src/components/Page/Home/Introduction.astro b/src/components/Page/Home/Introduction.astro
@@ -4,7 +4,7 @@ import { Image } from "astro:assets";
 import banner from "./me.jpg";
 ---
 
-<header class="flex flex-col md:flex-row gap-10 md:mt-40 w-4/5 md:w-3/5">
+<header class="flex flex-col md:flex-row gap-10 md:mt-44 w-4/5 md:w-3/5">
     <Image
         src={banner}
         alt="Home Page Banner"

diff --git a/src/components/Project/Card.astro b/src/components/Project/Card.astro
@@ -37,7 +37,10 @@ const { project: projectMetadata } = Astro.props;
 const project = projectMetadata.data;
 ---
 
-<article id=`project-card-${projectMetadata.slug}` class="rounded bg-white">
+<article
+  id=`project-card-${projectMetadata.slug}`
+  class="rounded bg-white md:max-w-96"
+>
   <a href=`/projects/${projectMetadata.slug}`>
     <img height="204.1px" src={project.previewImage} alt={project.name} />
     <section class="">

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -1,6 +1,6 @@
 ---
 import Footer from "../components/Footer.astro";
-import AppBar from "../components/AppBar/index.astro"
+import AppBar from "../components/AppBar/index.astro";
 
 export interface Props {
 	title: string;
@@ -10,14 +10,14 @@ export interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="h-full">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
+		<meta name="description" content="Personal Website for Nuno Pereira" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<link rel="icon" type="image/x-icon" href="/favicon.svg">
+		<link rel="icon" type="image/x-icon" href="/favicon.svg" />
 		<title>{title}</title>
 	</head>
 	<body class="bg-color-1 text-color-4 min-h-full flex flex-col">
@@ -47,8 +47,14 @@ const { title } = Astro.props;
 	}
 
 	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-			DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+		font-family:
+			Menlo,
+			Monaco,
+			Lucida Console,
+			Liberation Mono,
+			DejaVu Sans Mono,
+			Bitstream Vera Sans Mono,
+			Courier New,
+			monospace;
 	}
-
 </style>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
@@ -12,7 +12,9 @@ const projects = await getCollection("project");
   contentTitle="Projects"
   description="These are some of the projects I have developed so far:"
 >
-  <section class="grid grid-flow-dense grid-cols-3 gap-3 pt-5">
+  <section
+    class="relative grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-[repeat(auto-fit,minmax(300px,1fr))]"
+  >
     {projects.map((entry) => <ProjectCard project={entry} />)}
   </section>
 </PageLayout>