Add complete article

.astro/types.d.ts

@@ -185,8 +185,8 @@ declare module 'astro:content' {
 
 	type ContentEntryMap = {
 		"projects": {
-"alles-met-boeken.md": {
-	id: "alles-met-boeken.md";
+"mystique.md": {
+	id: "mystique.md";
   slug: "mystique";
   body: string;
   collection: "projects";
@@ -197,7 +197,9 @@ declare module 'astro:content' {
 	};
 
 	type DataEntryMap = {
-
+		"images": {
+};
+
 	};
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;

src/components/hero/hero.astro

@@ -78,14 +78,14 @@ import NewProject from "../new-project/new-project.astro";
 
   .new-project {
     position: absolute;
-    bottom: 20px;
+    bottom: 40px;
     z-index: 99;
   }
 
   .blobs {
     width: calc(100%);
     height: fit-content;
-    position: fixed;
+    position: absolute;
     z-index: 0;
     bottom: 0;
     transform: translateY(40%);
@@ -98,7 +98,7 @@ import NewProject from "../new-project/new-project.astro";
   .mobileBlobs {
     width: calc(100%);
     height: fit-content;
-    position: fixed;
+    position: absolute;
     z-index: 0;
     bottom: 0;
     transform: translateY(60%);

src/components/hero/hero.module.scss

@@ -33,7 +33,7 @@
   width: calc(100%);
   height: fit-content;
   position: fixed;
-  z-index: 0;
+  z-index: -1;
   bottom: 0;
   transform: translateY(40%);
 

src/components/page/page.astro

@@ -25,7 +25,7 @@ const { title, centered, children } = Astro.props;
     align-items: center;
     text-align: justify;
     box-sizing: border-box;
-    max-width: 1200px;
+    max-width: 1000px;
     margin-top: 100px;
     height: fit-content;
     min-height: calc(100vh - 100px);

src/components/project/project.astro

@@ -7,9 +7,10 @@ interface Props {
   title: string;
   description: string;
   picture: string;
+  tags: string[];
 }
 
-const { small, title, link, picture, description } = Astro.props;
+const { small, title, link, picture, description, tags } = Astro.props;
 ---
 
 <a href={link} class:list={["container", { small: small }]}>
@@ -28,6 +29,9 @@ const { small, title, link, picture, description } = Astro.props;
           alt="hello"
         />
         <h3 class="title">{title}</h3>
+        <div class="tags">
+          {tags.map((tag: string) => <div class="tag">{tag}</div>)}
+        </div>
         <p class="description">{description}</p>
       </div>
     )
@@ -70,13 +74,13 @@ const { small, title, link, picture, description } = Astro.props;
     width: fit-content;
     box-sizing: border-box;
     &:hover {
-        transform: scale(0.9);
-      }
+      transform: scale(0.9);
+    }
   }
 
   .grid {
     display: grid;
-    grid-template-rows: 0.5fr 1fr;
+    grid-template-rows: 0.5fr 0.2fr 1fr;
     grid-template-columns: 200px 3fr;
     width: 100%;
 
@@ -90,16 +94,17 @@ const { small, title, link, picture, description } = Astro.props;
     height: 100%;
     aspect-ratio: 1;
     border-radius: 10px;
-    grid-area: 1 / 1 / 3 / 2;
+    grid-area: 1 / 1 / 4 / 2;
   }
 
   .title {
-    font-size: 30px;
+    font-size: 50px;
     text-align: left;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    padding: 10px;
+    padding: 0 10px;
+
     margin: 0;
     grid-area: 1 / 2 / 2 / 3;
 
@@ -108,19 +113,51 @@ const { small, title, link, picture, description } = Astro.props;
     }
   }
 
+  .tags {
+    grid-area: 2 / 2 / 3 / 3;
+    display: flex;
+    padding: 10px;
+
+    @media (max-width: 1200px) {
+      display: none;
+    }
+  }
+
+  .tag {
+    color: black;
+    width: max-content;
+    font-family: "Courier New",Courier,monospace;
+    font-weight: bold;
+    height: 100%;
+    background-color: #82cac2;
+    border-radius: 100px;
+    box-sizing: border-box;
+    margin: 0 5px;
+    padding: 5px 10px;
+    font-size: 20px;
+
+    @media (max-width: 1200px) {
+      font-size: 10px;
+      margin: 0 5px;
+    padding: 2px 5px;
+    }
+  }
+
   .description {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1;
     margin: 0;
     padding: 10px;
-    grid-area: 2 / 2 / 3 / 3;
+    grid-area: 3 / 2 / 3 / 3;
     -webkit-line-clamp: 4;
     line-clamp: 4;
+    word-wrap: break-word;
 
     @media (max-width: 1200px) {
       font-size: 12px;
+      grid-area: 2 / 2 / 4 / 3;
     }
   }
 </style>