src/components/misc/BlogProjectCard.astro

@@ -0,0 +1,23 @@
+---
+export interface Props {
+    title: string;
+    subtitle: string;
+    image: string;
+    link: string;
+}
+
+const { title, subtitle, image, link } = Astro.props;
+---
+
+
+<div class="rounded-lg hover:shadow-xl transition ease-in-out hover:scale-105">
+    <a href={link}>
+        <div class="ml-2 flex w-11/12 mx-auto">
+            <img class="h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="">
+            <div class="ml-4 grow">
+                <p class="mt-2 font-semibold text-3xl">{title}</p>
+                <p>{subtitle}</p>
+            </div>
+        </div>
+    </a>
+</div>

src/components/nav/Nav.astro

@@ -8,7 +8,7 @@
 
     <a href="/">
         <div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-3 mb-6">
-            <img class="rounded-full aspect-square object-cover" src="/img/profile.jpg" alt="">
+            <img class="rounded-full aspect-square w-full object-cover" src="/img/profile.jpg" alt="">
         </div>
     </a>
 
@@ -29,6 +29,11 @@
                 <button class="p-2">Projects</button>
             </a>
         </li>
+        <li class="flex">
+            <a href="/blog/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+                <button class="p-2">Blog</button>
+            </a>
+        </li>
         <li class="flex">
             <a href="/resume" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
                 <button class="p-2">Resume/CV</button>

src/components/resume/Timeline.astro

@@ -1,16 +1,20 @@
 ---
-    export interface Props{
+export interface Props {
-        title: string,
+    title: string;
-        subtitle: string, 
+    subtitle: string;
-        description?: string,
+}
-    }
 
-    const {title, subtitle, description} = Astro.props;
+const { title, subtitle } = Astro.props;
 ---
 
-    <div class="flex">
+<div class="flex">
-        <div class="timeline_line">
+    <div>
-        
+        <span class="w-4 h-4 bg-primary block rounded-full mt-2"></span>
+        <span class="bg-primary block h-full w-[2px] translate-x-[7px]"></span>
     </div>
+    <div class="px-5">
+        <p class="font-semibold text-xl">{title}</p>
+        <span class="text-sm font-light">{subtitle}</span>
+        <slot></slot>
     </div>
-
+</div>

src/layouts/BlogLayout.astro

@@ -0,0 +1,16 @@
+---
+import Divider from "../components/misc/Divider.astro";
+import Layout from "./Layout.astro";
+
+const { frontmatter } = Astro.props;
+---
+
+<Layout>
+    <main class="w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
+        <img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
+        <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
+        <p>{frontmatter.date}</p>
+        <Divider/>
+        <slot />
+    </main>
+</Layout>

src/layouts/Layout.astro

@@ -37,7 +37,7 @@
 	</style>
 	<script is:inline>
 		if (localStorage.getItem("theme") === null) {
-			document.documentElement.setAttribute("data-theme", "corprate");
+			document.documentElement.setAttribute("data-theme", "business");
 		} else {
 			document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
 		}

src/pages/blog/[page].astro

@@ -0,0 +1,65 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import BlogProjectCard from "../../components/misc/BlogProjectCard.astro";
+import Divider from "../../components/misc/Divider.astro";
+
+export async function getStaticPaths({ paginate }: { paginate: any }) {
+    const posts = (await Astro.glob("./*.{md,mdx}")).sort(
+        (a, b) =>
+            new Date(b.frontmatter.date).valueOf() -
+            new Date(a.frontmatter.date).valueOf()
+    );
+
+    return paginate(posts, { pageSize: 10 });
+}
+
+const { page } = Astro.props;
+---
+
+<Layout title=" | Blog">
+    <div class="flex flex-col w-1/2 mx-auto mt-4">
+        {
+            page.data.map((post: any) => (
+                <>
+                    <BlogProjectCard
+                        title={post.frontmatter.title}
+                        subtitle={post.frontmatter.tagline}
+                        image={post.frontmatter.image}
+                        link={post.url}
+                    />
+                    <Divider />
+                </>
+            ))
+        }
+    </div>
+
+    <div class="w-1/2 mx-auto flex justify-between">
+        {
+            page.url.prev ? (
+                <a class="w-40 flex" href={page.url.prev}>
+                    <span class="material-symbols-outlined">
+                        chevron_left
+                    </span>
+                    <p>Previous Page</p>
+                </a>
+            ) : (
+                <div class="w-40" />
+            )
+        }
+        
+        <h1 class="grow text-center">Page {page.currentPage}</h1>
+
+        {
+            page.url.next ? (
+                <a class="w-40 flex" href={page.url.next}>
+                    <p class="grow text-right">Next Page</p>
+                    <span class="material-symbols-outlined">
+                        chevron_right
+                    </span>
+                </a>
+            ) : (
+                <div class="w-40"/>
+            )
+        }
+    </div>
+</Layout>

src/pages/blog/test.md

@@ -0,0 +1,13 @@
+---
+layout: "../../layouts/BlogLayout.astro"
+title: "Test post"
+tagline: "This is a test post"
+date: "Sep 10 2022"
+image: "/img/profile.jpg"
+---
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

src/pages/index.astro

@@ -1,16 +1,42 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import BlogProjectCard from "../components/misc/BlogProjectCard.astro";
+import Divider from "../components/misc/Divider.astro";
+import Layout from "../layouts/Layout.astro";
+
+const posts = (await Astro.glob("./blog/*.{md,mdx}"))
+	.sort(
+		(a, b) =>
+			new Date(b.frontmatter.date).valueOf() -
+			new Date(a.frontmatter.date).valueOf()
+	);
 ---
 
 <Layout>
-	<main class="flex flex-col m-6">
+	<main class="flex flex-col m-6 w-4/5 mx-auto">
 		<section>
 			<p class="text-xl py-1">Hello World 👋</p>
 			<p>I'm glad you are here!</p>
-			<p class="font-thin">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed natus ullam perferendis expedita quas deleniti consectetur dolorum, non explicabo neque deserunt architecto minus consequuntur accusantium optio ratione eveniet dignissimos nihil.</p>
+			<p class="font-thin">
+				Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed
+				natus ullam perferendis expedita quas deleniti consectetur
+				dolorum, non explicabo neque deserunt architecto minus
+				consequuntur accusantium optio ratione eveniet dignissimos
+				nihil.
+			</p>
 		</section>
 		<section>
 			<p class="text-4xl font-bold py-2">Latest Projects</p>
+			{
+				posts.map((post) => (
+					<BlogProjectCard
+						title={post.frontmatter.title}
+						subtitle={post.frontmatter.tagline}
+						image={post.frontmatter.image}
+						link={post.url}
+					/>
+					<Divider/>
+				))
+			}
 		</section>
 		<section>
 			<p class="text-4xl font-bold py-2">Latest Blog Posts</p>

src/pages/resume.astro

@@ -1,6 +1,88 @@
 ---
     import Layout from "../layouts/Layout.astro";
+    import Timeline from "../components/resume/Timeline.astro";
+    import Divider from "../components/misc/Divider.astro";
 ---
 
 <Layout title={" | Resume"}>
+
+    <style is:inline>
+        .time-line-container > div:last-child > div:nth-child(1) > span:nth-child(2){
+            display: none;
+        }
+    </style>
+
+    <main class="w-1/2 mx-auto">
+        <p class="font-bold text-2xl py-6">About Me</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus esse inventore iusto earum asperiores necessitatibus, dolores id cumque nesciunt libero eligendi vel reprehenderit eius officia. Veritatis dolorum illum exercitationem suscipit.</p>
+
+        <Divider/>
+        <p class="font-bold text-2xl py-6">Work Experience</p>
+        <div class="time-line-container">
+            <Timeline title="Director Of Information Technology" subtitle="Christ Lutheran Church | December 2020 - Present">
+                <ul class="text-sm ml-3.5 list-disc mt-2 mb-4">
+                    <li>Maintain and upgrade critical network infrascture for a multi-campus environment.</li>
+                    <li>Facilitate backups and ensure their integrity.</li>
+                    <li>Integrate with action teams to develop technology plans and solutions.</li>
+                    <li>Implement new software and hardware solutions with increased functionality at reduced ongoing cost.</li>
+                </ul>
+            </Timeline>
+            <Timeline title="Tech Assosciate" subtitle="Christ Lutheran Church | August 2019 - December 2020 (Part Time)">
+                <ul class="text-sm ml-3 5 list-disc mt-2 mb-4">
+                    <li>Develop and implement new strategies in collaboration with the Christ Providence Tech team to improve live stream services and reach a broader audience.</li>
+                    <li>Facilitated building and installation of new computer systems to improve recording and streaming capabilities of worship services.</li>
+                    <li>Run graphics for in house worship and live stream services.</li>
+                </ul>
+            </Timeline>
+            <Timeline title="Tier II Managed Services Technician " subtitle="ScanOnline | June 2019 - December 2020">
+                <ul class="text-sm ml-3 5 list-disc mt-2 mb-4">
+                    <li>Administer Office 365 and Windows Active Directory infrastructure.</li>
+                    <li>Manage company VOIP phone system and extension listings.</li>
+                    <li>Deploy and configure virtual machines to align with business needs.</li>
+                    <li>Develop new Android applications to suit the business needs of customers operating in the logistics industry.</li>
+                    <li>Maintain legacy Windows Mobile applications for existing customers.</li>
+                    <li>Preform configuration and maintenance of customer hardware and software.</li>
+                </ul>
+            </Timeline>
+            <Timeline title="Student Network Analyst" subtitle="University of North Carolina at Greensboro | February 2018 - May 2019">
+                <ul class="text-sm ml-3 5 list-disc mt-2 mb-4">
+                    <li>Assisted in maintenance and troubleshooting of enterprise network systems.</li>
+                    <li>Preformed on-boarding of new network devices at the physical level.</li>
+                </ul>
+            </Timeline>
+        </div>
+
+        <p class="font-bold text-2xl py-6">Education</p>
+        <div class="time-line-container">
+            <Timeline title="The University of North Carolina at Greensboro" subtitle="Bachelor Of Science Information Systems and Supply Chain Management, Computer Science Minor"/>
+        </div>
+
+        <p class="font-bold text-2xl py-6">Professional Certificates</p>
+        <div class="time-line-container">
+            <Timeline title="Dante Level 3" subtitle="Audianate - 2021"/>
+        </div>
+
+        <p class="font-bold text-2xl py-6">Skills</p>
+        <ul class="list-disc columns-2 md:columns-6 mx-auto">
+            <li>HTML</li>
+            <li>CSS</li>
+            <li>JavaScript</li>
+            <li>Astro</li>
+            <li>Svelte</li>
+            <li>Java</li>
+            <li>C#</li>
+            <li>Tailwind</li>
+            <li>Python</li>
+            <li>MySQL</li>
+            <li>Linux</li>
+            <li>Bash</li>
+            <li>Docker</li>
+            <li>Mosyle MDM</li>
+            <li>Windows Server</li>
+            <li>Active Directory</li>
+            <li>Cisco IOS</li>
+            <li>Ubiquiti Unifi</li>
+        </ul>
+        <Divider/>
+    </main>
 </Layout>

tailwind.config.cjs

@@ -11,7 +11,7 @@ module.exports = {
 		},
 		extend: {},
 	},
-	plugins: [require("daisyui"), require("@tailwindcss/typography")],
+	plugins: [require("daisyui")],
 	daisyui: {
 		themes: ["corporate", "business"],
 	},