Merge pull request #5 from cjbohlman/v4

V4

src/components/BlogPostCard.astro

@@ -0,0 +1,20 @@
+---
+export interface Props {
+	title: string;
+  date: Date;
+  description: string;
+  link: string;
+}
+
+const { title, date, description, link } = Astro.props;
+---
+<li class="flex gap-4 mt-4">
+  <a href={link} class="block basis-1/2 opacity-80">
+    <p>{`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`}</p>
+
+  </a>
+  <a href={link} class="block basis-1/2">
+    <h3>{title}</h3>
+    <p class="opacity-80">{description}</p>
+  </a>
+</li>

src/components/Education.astro

@@ -0,0 +1,22 @@
+---
+import ExperienceItem from "./ExperienceItem.astro"
+const educationArr = [
+  {
+    location: "Certified Ethical Hacker",
+    dateRange: "2024",
+    title: "v12",
+  },
+  {
+    location: "University of Arizona",
+    dateRange: "2015 - 2019",
+    title: "BSc in Computer Science",
+    description: "GPA: 3.729, Minors in Mathematics and Physics",
+  }
+]
+---
+<section id="experience" class="mt-12">
+  <h2 class="text-xl">Education and Certifications</h2>
+  <ul>
+    {educationArr.map((data) => <ExperienceItem location={data.location} dateRange={data.dateRange} description={data.description} title={data.title}/>)}
+  </ul>
+</section>

src/components/Experience.astro

@@ -0,0 +1,29 @@
+---
+import ExperienceItem from "./ExperienceItem.astro"
+const experienceArr = [
+  {
+    location: "Schoolhouse Electric",
+    dateRange: "2022 - Present",
+    title: "Software Engineer",
+    description: "Developed e-commerce website hosted on Shopify using JavaScript and developed reporting back-end using Python and PostgreSQL.",
+  },
+  {
+    location: "Fast Enterprises",
+    dateRange: "2019 - 2022",
+    title: "Tech Team Member",
+    description: "Provided application support through developing in VB.NET and tuning SQL, configured application security, and co-developed OR law enforcement data interface.",
+  },
+  {
+    location: "Steward Observatory",
+    dateRange: "2017 - 2019",
+    title: "Software Developer",
+    description: "Worked with MagAO-X software library in C++ and built applications for detector image analysis and monitoring system usage statics for optics systems.",
+  }
+]
+---
+<section id="experience" class="mt-12">
+  <h2 class="text-xl">Experience</h2>
+  <ul>
+    {experienceArr.map((data) => <ExperienceItem location={data.location} dateRange={data.dateRange} description={data.description} title={data.title}/>)}
+  </ul>
+</section>

src/components/ExperienceItem.astro

@@ -0,0 +1,20 @@
+---
+export interface Props {
+	location: string;
+  dateRange: string;
+  title: string;
+  description?: string;
+}
+
+const { location, dateRange, description, title } = Astro.props;
+---
+<li class="flex gap-4 mt-4">
+  <div class="basis-1/2 opacity-80">
+    <p>{dateRange}</p>
+  </div>
+  <div class="basis-1/2">
+    <h3>{location}</h3>
+    <p class="opacity-60">{title}</p>
+    <p class="opacity-80 mt-4">{description}</p>
+  </div>
+</li>

src/components/Footer.astro

@@ -1,6 +1,6 @@
 ---
-
+const email = 'cbohlman@pm.me'
 ---
-<footer>
-
+<footer class="m-4 lg:m-12">
+  <a href=`mailto:${email}`>Contact Me: <span class="underline">{email}</span></a>
 </footer>

src/components/Header.astro

@@ -1,6 +1,9 @@
 ---
-import Navigation from "./Navigation.astro";
+import NavigationBar from "./NavigationBar.astro";
 ---
-<header class="">
-  <Navigation />
+<header class="flex flex-row lg:flex-col justify-between lg:justify-start pb-3">
+  <a href="/" title="Homepage" class="text-2xl lg:mb-6">
+    <span class="font-extralight">cjb</span>
+  </a>
+  <NavigationBar />
 </header>

src/components/Heading.astro

@@ -0,0 +1,14 @@
+---
+const name = "Chris Bohlman"
+const jobTitle = "Software Engineer, Schoolhouse Electric"
+const blurb = "I'm Chris, a software developer based in the Pacific Northwest. At Schoolhouse, I'm working on the front-end of a Shopify e-commerce store and managing a Python/PostgresQL reporting back-end. I'm also furthering my cybersecurity knowledge after completing the Certified Ethical Hacker certification."
+---
+<section id="heading" class="" >
+  <h1 class="text-3xl font-extrabold">
+    {name}
+    <br>
+    <span class="mt-2 opacity-80 font-medium">{jobTitle}</span>
+  </h1>
+
+  <p class="mt-4 opacity-80 font-thin">{blurb}</p>
+</section>

src/components/NavigationBar.astro

@@ -0,0 +1,19 @@
+---
+import NavigationItem from "./NavigationItem.astro";
+
+const navItems = [
+  {
+    "name": "Resume",
+    "ref": "/christopher-bohlman-resume.pdf",
+  },
+  {
+    "name": "Blog",
+    "ref": "/blog",
+  }
+];
+---
+<nav>
+  <ul class="flex lg:flex-col">
+    {navItems.map((data) => <NavigationItem name={data.name} ref={data.ref}/>)}
+  </ul>
+</nav>

src/components/NavigationItem.astro

@@ -7,4 +7,3 @@ const pathname = Astro.url.pathname.substring(1);
     <span class="tracking-tighter font-thin text-sm lg:text-lg">{name}</span>
   </a>
 </li>
-

src/components/ProjectCard.astro

@@ -0,0 +1,24 @@
+---
+export interface Props {
+	title: string;
+  description: string;
+  link: string;
+}
+
+const { title,  description, link } = Astro.props;
+---
+<li class="mt-4 bg-slate rounded-md">
+  <a href={link} class="p-2 w-full flex gap-4 items-center	">
+    <span class="icon w-10 h-10 shrink-0"></span>
+    <div class="shrink">
+      <p class="text-lg">{title}</p>
+      <p class="opacity-80">{description}</p>
+    </div>
+  </a>
+</li>
+<style>
+  .icon {
+    background: rgb(110,117,168);
+    background: linear-gradient(90deg, rgba(110,117,168,1) 24%, rgba(242,149,89,1) 71%);
+  }
+</style>