animation and articles

src/articles/test.md

@@ -0,0 +1,8 @@
+---
+title: 'The greatest post of all time'
+date: 'the night'
+tag: ''
+status: 'Public'
+---
+
+Here is my _great_ post!

src/components/Blog.astro

@@ -0,0 +1,150 @@
+---
+import "../styles/landing.css";
+interface Props {
+    file: string;
+    url: string;
+    frontmatter: {
+        title: string;
+        date: string;
+        description: string;
+    };
+}
+const posts = Object.values<Props>(
+    import.meta.glob("../articles/*.md", { eager: true }),
+);
+---
+
+<div id="blog">
+    <div class="title_cont">
+        <h1 class="title montserrat-underline-title-font">
+            <a href="#blog">Article</a>
+        </h1>
+        <hr class="title_div" />
+    </div>
+    <div class="post_container">
+        {
+            posts.map((post) => (
+                <div class="post">
+                    <p class="post_col-1">{post.frontmatter.title}</p>
+                    <p class="post_col-2">{post.frontmatter.date}</p>
+                </div>
+            ))
+        }
+    </div>
+</div>
+<style>
+    .montserrat-underline-title-font {
+        font-family: "Montserrat Underline", sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 700;
+        font-style: normal;
+    }
+    #blog {
+        width: 100%;
+        height: 100dvh;
+        background-color: var(--background_hl);
+        box-sizing: border-box;
+        position: relative;
+    }
+    .title {
+        position: relative;
+        top: 0px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: fit-content;
+        background-color: var(--background_hl);
+        margin: 0;
+        z-index: 2;
+        color: var(--frontend_lt);
+        padding-inline: 10%;
+    }
+    .title::before {
+        content: "";
+        position: absolute;
+        width: 10px;
+        height: 100%;
+        left: -5px;
+        display: inline-block;
+        transform: skewX(-8deg);
+        background-color: var(--background_hl);
+        z-index: -1;
+    }
+    .title::after {
+        content: "";
+        position: absolute;
+        width: 10px;
+        height: 100%;
+        right: -5px;
+        display: inline-block;
+        transform: skewX(8deg);
+        background-color: var(--background_hl);
+        z-index: -1;
+    }
+    .title_div {
+        margin: 0px;
+        height: 3px;
+        color: var(--background_hl);
+        background-color: var(--background_hl);
+        border: none;
+    }
+    .title_cont {
+        background-color: var(--background);
+        height: fit-content;
+    }
+    a {
+        text-decoration: none;
+    }
+    a:visited {
+        color: var(--frontend_lt);
+    }
+    .post {
+        font-family: "Courier New", Courier, monospace;
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        grid-auto-rows: max-content;
+        color: var(--frontend_lt);
+        font-size: 1.2rem;
+        font-weight: 600;
+        width: 100%;
+        gap: 20px;
+    }
+    .post_col-2 {
+        text-align: right;
+    }
+    .post_container {
+        height: 60%;
+        width: 35%;
+        margin: auto;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-35%);
+    }
+    @media (575px > width) {
+        .post_container {
+            height: 60%;
+            width: 80%;
+            margin: auto;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translateX(-50%) translateY(-35%);
+        }
+        .post {
+            font-size: 1rem;
+            font-weight: 400;
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 6px;
+            p {
+                margin: 0px;
+            }
+        }
+        .post_col-2 {
+            text-align: left;
+            background-color: var(--background);
+            width: fit-content;
+            padding-inline: 10px;
+        }
+    }
+</style>

src/components/HelloBanner.vue

@@ -3,44 +3,52 @@ import { onMounted, ref, useTemplateRef, watchEffect } from 'vue';
 import '../styles/landing.css'
 const name = useTemplateRef("name");
 const light_width = ref("0px");
+const light_height = ref("0px");
 onMounted(() => {
     if (name.value) {
         light_width.value = name.value.offsetWidth + "px";
+        light_height.value = name.value.offsetHeight + "px";
         console.log(light_width.value)
     }
 })
 watchEffect(() => {
     if (name.value) {
         light_width.value = name.value.offsetWidth + "px";
+        light_height.value = name.value.offsetHeight + "px";
     }
 })
 </script>
 <template>
     <div class="container">
         <div class="title montserrat-underline-title-font">
-            <h1 class="lighter_dep wordbreak">
+            <h1 class="lighter_dep">
-                <span>Welcome to </span>
+                <span class=" wordbreak">Welcome to </span>
                 <span class="light" ref="name">Jasinco's Realm</span>
-                <div class="lighter_bg" :style="{ width: light_width }"></div>
+                <div class="lighter_bg" :style="{ width: light_width, height: light_height }"></div>
             </h1>
             <p class="dancing-script-describe-font describe">
                 A place I found, A palace I built
             </p>
         </div>
     </div>
+    <div class="padd"></div>
 </template>
 <style scoped>
 .container {
-    height: 100%;
+    height:90dvh;
+    width:100%;
     display: grid;
     background-color: var(--background);
     color: var(--frontend);
+    margin:0px;
+    box-sizing: border-box;
+    overflow: hidden;
 }
-
 .title {
     justify-self: center;
     align-self: center;
     z-index: 1;
+    user-select: none;
 }
 
 .light {
@@ -50,22 +58,22 @@ watchEffect(() => {
 
 .lighter_bg {
     background-color: hsl(from var(--light) h s calc(l/2));
-    height: 100%;
     position: absolute;
     right: -8px;
-    top: 0px;
+    bottom: 0px;
     z-index: -1;
     padding-right: 10px;
     transform: skewX(-10deg);
+    animation-name: appearAnimate;
+    animation-duration: 0.8s;
+    animation-timing-function: ease;
+    
 }
 
 .lighter_dep {
     position: relative;
     z-index: 1;
-}
     
-.wordbreak:nth-child(1) {
-    break-after: right;
 }
 
 .montserrat-underline-title-font {
@@ -85,4 +93,41 @@ watchEffect(() => {
 .describe {
     font-size: large;
 }
+
+.padd{
+    height: 10dvh;
+    animation: 0.4s ease 1.14s folderAppear normal forwards;
+    background-color: var(--background);
+}
+
+@keyframes appearAnimate {
+    0% {
+        right:2000px;
+    }
+    49%{
+        right:-2000px;
+        visibility: hidden;
+    }
+    51%{
+        right:2000px;
+        visibility: visible;
+    }
+    100%{
+        right: -8px;
+    }
+}
+@keyframes folderAppear {
+    0%{
+        height:10dvh;
+    }
+    100%{
+        height:0dvh;
+    }
+}
+@media (575px > width) {
+    .wordbreak::after {
+        content: "";
+        display: block;
+    }
+}
 </style>

src/layouts/Layout.astro

@@ -19,7 +19,17 @@
 	html,
 	body {
 		margin: 0;
-		width: 100dvw;
+		width: calc(var(--vw, 1vw) * 100);
-		height: 100dvh;
+		max-width: 100dvw;
+		min-height: 100dvh;
+		scrollbar-width: 0px;
+		/* scrollbar-gutter: stable; */
+		scroll-behavior: smooth;
 	}
 </style>
+<script>
+    new ResizeObserver(() => {
+        let vw = document.documentElement.clientWidth / 100;
+        document.documentElement.style.setProperty("--vw", `${vw}px`);
+    }).observe(document.documentElement);
+</script>

src/pages/index.astro

@@ -2,6 +2,7 @@
 // import Welcome from '../components/Welcome.astro';
 import HelloBanner from '../components/HelloBanner.vue';
 import Layout from '../layouts/Layout.astro';
+import Blog from '../components/Blog.astro'
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
@@ -10,4 +11,5 @@ import Layout from '../layouts/Layout.astro';
 <Layout>
 	<!-- <Welcome /> -->
 	 <HelloBanner client:load/>
+	 <Blog />
 </Layout>

src/pages/posts/[id].astro

@@ -0,0 +1,22 @@
+---
+import { defineCollection, z } from 'astro:content';
+import { glob, file } from 'astro/loaders';
+const blog = defineCollection({
+    loader: glob({pattern: "**/*.md", base:"../articles"}),
+    schema: z.object({
+        name: z.string(),
+        tag: z.string(),
+        date: z.string(),
+        status: z.enum(["Public", "Unrelease"])
+    })
+})
+export function getStaticPaths() {
+  return [
+    { params: { id: "clifford" }},
+    { params: { id: "rover" }},
+    { params: { id: "spot" }},
+  ];
+}
+
+const { id } = Astro.params;
+---

src/styles/landing.css

@@ -1,5 +1,7 @@
     :root {
         --background: #2c2c2c;
+        --background_hl: #3d3d3d;
         --light: #ffde21;
         --frontend: #858585;
+        --frontend_lt: #D3D3D3;
     }