Website updates (#16)

kspeer825 · Feb 1, 2024 · 8fe1f37 · 8fe1f37
1 parent f97e0b6
commit 8fe1f37
Showing 8 changed files with 339 additions and 104 deletions.
diff --git a/projects/advent-solutions/2022/README.md b/projects/advent-solutions/2022/README.md
@@ -0,0 +1,54 @@
+# TODO make solutions public!
+************************************************************
+# Advent of Code 2022 Solutions
+Advent of Code [2022](https://adventofcode.com/2022)
+
+Each year I try to complete the latest [advent calendar](https://adventofcode.com/2022/about) using a languge that is new to me, or that I want more practice in.
+
+This year I used Clojure.
+
+## Soutions
+The solutions for each day are located in the corresponding .py file i.e. Dec 1st -> day_one.py.
+One :star: indicates Part 1 is completed, 2 :star:'s indicate Parts 1 and 2 are completed.
+
+| Day  | Stars| Inputs | Solution |
+| ----- | ----- | -------- | ------ |
+| 1  | :star::star: | [inputs/day_one.txt](TODO) | [day_one.clj](TODO) |
+| 2  | :star: | [inputs/day_two.txt](TODO) | [day_two.clj](TODO) |
+| 3  | | TODO | TODO |
+| 4  | | TODO | TODO |
+| 5  | | TODO | TODO |
+| 6  | | TODO | TODO |
+| 7  | | TODO | TODO |
+| 8  |  | TODO | TODO |
+| 9  |  | TODO | TODO |
+| 10  |  | TODO | TODO |
+| 11  | | TODO | TODO |
+| 12  |  | TODO | TODO |
+| 13  |  | TODO | TODO |
+| 14  |  | TODO | TODO |
+| 15  | | TODO | TODO |
+| 16  | | TODO | TODO |
+| 17  | | TODO | TODO |
+| 18  | | TODO | TODO |
+| 19  | | TODO | TODO |
+| 20  | | TODO | TODO |
+| 21  | | TODO | TODO |
+| 22  | | TODO | TODO |
+| 23  | | TODO | TODO |
+| 24  | | TODO | TODO |
+| 25  | | TODO | TODO |
+
+## Execution
+Build container
+```
+make docker-build
+```
+Execute solution
+```
+make solve day=<[one,two,twentyfive,etc]>
+```
+
+## Requirements
+ - [GNU Make](https://www.gnu.org/software/make/manual/make.html#Simple-Makefile)
+ - Docker and its runtime env like Docker Desktop or [Colima](https://github.com/abiosoft/colima?tab=readme-ov-file#getting-started)
diff --git a/projects/advent-solutions/2023/README.md b/projects/advent-solutions/2023/README.md
@@ -0,0 +1,54 @@
+# TODO make solutions public!
+************************************************************
+# Advent of Code 2023 Solutions
+Advent of Code [2023](https://adventofcode.com/2023)
+
+Each year I try to complete the latest [advent calendar](https://adventofcode.com/2023/about) using a languge that is new to me, or that I want more practice in.
+
+This year I used Go.
+
+## Soutions
+The solutions for each day are located in the corresponding .py file i.e. Dec 1st -> day_one.py.
+One :star: indicates Part 1 is completed, 2 :star:'s indicate Parts 1 and 2 are completed.
+
+| Day  | Stars| Inputs | Solution |
+| ----- | ----- | -------- | ------ |
+| 1  | :star::star: | [inputs/day_one.txt](TODO) | [day_one.go](TODO) |
+| 2  | :star: | [inputs/day_two.txt](TODO) | [day_two.go](TODO) |
+| 3  | | TODO | TODO |
+| 4  | | TODO | TODO |
+| 5  | | TODO | TODO |
+| 6  | | TODO | TODO |
+| 7  | | TODO | TODO |
+| 8  |  | TODO | TODO |
+| 9  |  | TODO | TODO |
+| 10  |  | TODO | TODO |
+| 11  | | TODO | TODO |
+| 12  |  | TODO | TODO |
+| 13  |  | TODO | TODO |
+| 14  |  | TODO | TODO |
+| 15  | | TODO | TODO |
+| 16  | | TODO | TODO |
+| 17  | | TODO | TODO |
+| 18  | | TODO | TODO |
+| 19  | | TODO | TODO |
+| 20  | | TODO | TODO |
+| 21  | | TODO | TODO |
+| 22  | | TODO | TODO |
+| 23  | | TODO | TODO |
+| 24  | | TODO | TODO |
+| 25  | | TODO | TODO |
+
+## Execution
+Build container
+```
+make docker-build
+```
+Execute solution
+```
+make solve day=<[one,two,twentyfive,etc]>
+```
+
+## Requirements
+ - [GNU Make](https://www.gnu.org/software/make/manual/make.html#Simple-Makefile)
+ - Docker and its runtime env like Docker Desktop or [Colima](https://github.com/abiosoft/colima?tab=readme-ov-file#getting-started)
diff --git a/projects/website/speerportfolio/src/App.css b/projects/website/speerportfolio/src/App.css
@@ -38,3 +38,27 @@
 .App-header-links {
     flex-direction: row;
 }
+
+a:link {
+  color: #F4F3EE;
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+a:visited {
+  color: #F4F3EE;
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+a:hover {
+  color: black;
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+a:active {
+  color: #463F3A;
+  background-color: transparent;
+  text-decoration: underline;
+}
diff --git a/projects/website/speerportfolio/src/content/contact.tsx b/projects/website/speerportfolio/src/content/contact.tsx
@@ -3,24 +3,20 @@ import CSS from 'csstype';
 
 
 function ContactContent() {
-  const linkStyling: CSS.Properties = {
-    color: "#F4F3EE"
-  }
   const email: string = "kyle.d.speer@gmail.com"
   const mailTo: string = `mailto:${email}?subject=""&body=""`
 
   return (
     <>
       <p>
-        <br /><br />
-        I am always open to hearing about new opportunities.<br />
-        Feel free to send me a message!
       </p>
       <p>
-        <h3>Contact Info</h3>
-        Email: <a style={linkStyling} href={mailTo}>{email}</a><br />
-        LinkedIn: <a style={linkStyling} href="https://www.linkedin.com/in/kyle-d-speer">/kyle-d-speer</a><br />
-        Github: <a style={linkStyling} href="https://github.com/kspeer825">/kspeer825</a><br />
+        <h3>Contact Info:</h3>
+        I am always open to hearing about new opportunities!
+        <br /><br />
+        Email: <a href={mailTo}>{email}</a><br />
+        LinkedIn: <a href="https://www.linkedin.com/in/kyle-d-speer">/kyle-d-speer</a><br />
+        Github: <a href="https://github.com/kspeer825">/kspeer825</a><br />
 
 
       </p>

diff --git a/projects/website/speerportfolio/src/pages/AboutMe.tsx b/projects/website/speerportfolio/src/pages/AboutMe.tsx
@@ -34,16 +34,17 @@ function AboutMe() {
               <Grid item cols={12}>
                 <Box color="blue" corners="roundest">
                   <AboutContent />
+                  <br />
                   <ContactContent />
                 </Box>
               </Grid>
             </Grid>
-            <Grid container_gray spacing="md" >
-              <Grid item cols={3} />
-              <Grid item cols={6}>
+            {/* <Grid container_gray spacing="md" >
+		<Grid item cols={3} />
+		<Grid item cols={6}>
                 <img src={photo} className="App-photo" alt="Headshot" />
-              </Grid>
-            </Grid>
+		</Grid>
+		</Grid> */}
           </Box>
         </Grid>
 

diff --git a/projects/website/speerportfolio/src/pages/HomePage.tsx b/projects/website/speerportfolio/src/pages/HomePage.tsx
@@ -31,13 +31,13 @@ function HomePage() {
             <Grid item cols={6}>
               <Box color='blue' corners='roundest'>
                 <h2> Cloud Infrastructure </h2>
-                <p> AWS, Docker, Terraform </p>
+                <p> AWS, Docker, Terraform, Ansible </p>
               </Box>
             </Grid>
             <Grid item cols={6}>
               <Box color='gray' corners='rounder'>
                 <h2> Programming </h2>
-                <p> Python, Clojure, Bash </p>
+                <p> Python, Go, Clojure, Bash </p>
               </Box>
             </Grid>
           </Grid>
@@ -46,13 +46,13 @@ function HomePage() {
             <Grid item cols={6}>
               <Box color='gray' corners='rounder'>
                 <h2> Continuous Integration & Delivery </h2>
-                <p> CircleCI, Jenkins, Github Actions </p>
+                <p> Concourse, CircleCI, Jenkins, Github Actions </p>
               </Box>
             </Grid>
             <Grid item cols={6}>
               <Box color='blue' corners='roundest'>
                 <h2> Test Automation </h2>
-                <p> Python, Selenium, Gridlastic, Terratest </p>
+                <p> Python, Selenium, Gridlastic, Goss, JQuery </p>
               </Box>
             </Grid>
           </Grid>
@@ -61,13 +61,13 @@ function HomePage() {
             <Grid item cols={6}>
               <Box color='blue' corners='roundest'>
                 <h2> Backend Development </h2>
-                <p> MySQL, PostgreSQL, MongoDB, NodeJS </p>
+                <p> Cassandra, MySQL, PostgreSQL, DynamoDB, MongoDB, NodeJS </p>
               </Box>
             </Grid>
             <Grid item cols={6}>
               <Box color='gray' corners='rounder'>
                 <h2> Frontend Development </h2>
-                <p> Typescript, React  </p>
+                <p> Typescript, React </p>
               </Box>
             </Grid>
           </Grid>

diff --git a/projects/website/speerportfolio/src/pages/Professional.tsx b/projects/website/speerportfolio/src/pages/Professional.tsx
@@ -24,7 +24,54 @@ function Professional() {
       <Grid container spacing="md">
         <Grid item cols={10}>
           <Box color='blue' corners='roundest'>
-            <h2> DevOps Engineer at Ophelia Health </h2>
+            <h2> DevOps Engineer III at Comcast (contractor) </h2>
+            <p> Feb 2023 - Present </p>
+          </Box>
+        </Grid>
+      </Grid>
+
+      <Grid container spacing="md">
+        <Grid item cols={1} />
+        <Grid item cols={10}>
+          <Box color='gray' corners='rounder'>
+            <h2> Summary </h2>
+            <p>
+              I am currently working as a DevOps Engineer on the DevX team at Comcast.
+              My role is to support Comcast developers through the experimentation, building and maintaining of middleware API services.
+              Our small team follows Agile practices and has an "express everything as code" mentality which allows us to quickly build mutable, observable,
+              and scalable infrastructure across hybrid cloud environments.
+            </p>
+            <h2> Notable Projects </h2>
+            <ProjectBox
+              title="Develop Lightweight Data Consumers"
+              tools="Go, Terraform, Docker, and AWS (ECS, ECR, Kinesis, SQS)"
+              description="I wrote a modular client using Go that consumes a data stream from Kinesis and writes corresponding messages to SQS queues. I implemented
+	    this client for a collection of data streams. The records processed by these consumers represent updates to customer data from various data sources.
+	    The infrastructure for this was written in Terraform, and the client binaries were baked into Docker images and stored in ECR, allowing us to run them as
+	    ECS Fargate tasks. I set up a simple, ephemeral local environment using Docker, the AWS CLI, and a Makefile for quick development and testing. I also included
+	    a discovery mode in the client so that a user could easily add new consumers even if the structure of the data for a given Kinesis stream is unknown."
+              impact="The addition of these consumers enabled us to keep data fresh and up-to-date in our service without having to make subsequent requests when a developer queries
+	    our API. This gave our service an edge over the existing GraphQL solution, which had to make a number of additional calls (depending on the query) for every client request
+	    that it served to get the latest data."
+            />
+            <ProjectBox
+              title="Cloud Agnostic Machine Images"
+              tools="Packer, Ansible, Concourse, Docker, VMware, and AWS (EC2, AMI)"
+              description="I used Packer and Ansible to bake images for the individual components of a 3rd-party data service in order to run that service in a hybrid cloud environment.
+	    The application components (an API, data transformation logic, and event streams) ran on EC2 instances in AWS, while the storage layer ran on VMware virtual machines in an
+	    internal private cloud provider. I used Ansible playbooks to handle the bulk of the configuration, and then used different Packer providers to execute those playbooks on remote
+	    hosts. Those hosts could then be saved as AMIs or CMIs (Comcast's internal machine images) depending on the cloud platform."
+              impact="These Packer builds allowed us to create, update, and validate individual components of the application while completely decoupled from the running stack.
+	    It also enabled us to maintain a single source of truth for component configurations, while still being able to deploy and run the application in separate cloud platforms."
+            />
+          </Box>
+        </Grid>
+      </Grid>
+
+      <Grid container spacing="md">
+        <Grid item cols={10}>
+          <Box color='blue' corners='roundest'>
+            <h2> DevOps Engineer II at Ophelia Health </h2>
             <p> Oct 2022 - Jan 2023 </p>
           </Box>
         </Grid>
@@ -48,7 +95,7 @@ function Professional() {
             <h2> Notable Projects </h2>
             <ProjectBox
               title="Establish Telemetry in Patient and Clinician Web Apps"
-              tools="Sentry, GCP Cloud Monitoring & Alerting, Typescript, NodeJS, Pagerduty"
+              tools="Sentry, GCP Cloud Monitoring & Alerting, Typescript, NodeJS, PagerDuty"
               description=" I established telemetry around user flows, capturing product analytics at key sensor
 	    points throughout onboarding and revenue funnels. I also established several baseline alerts across both a
 	    patient-facing web app and a clinician-facing web app with a focus on errors, latency, throughput,

diff --git a/projects/website/speerportfolio/src/pages/Projects.tsx b/projects/website/speerportfolio/src/pages/Projects.tsx
@@ -8,93 +8,152 @@ import '../App.css';
 
 
 function Projects() {
-  return (
-    <div className="App">
-      <Header />
-      <NavBar />
-      <Grid container spacing="md">
-        <Grid item cols={8}>
-          <Box color='dark_gray' corners='rounder'>
-            <h2 >
-              * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *<br />
-              This page is a WIP. Please check back soon!<br />
-              * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *<br />
-            </h2>
-          </Box>
-        </Grid>
-      </Grid>
+    return (
+        <div className="App">
+            <Header />
+            <NavBar />
+            <Grid container spacing="md">
+                <Grid item cols={8}>
+                    <Box color='dark_gray' corners='rounder'>
+                        <h2 >
+                            My personal projects...
+                        </h2>
+                    </Box>
+                </Grid>
+            </Grid>
 
-      <Grid container spacing="md">
+            <Grid container spacing="md">
+                <Grid item cols={4}>
+                    <Box color='blue' corners='rounder'>
+                        <h2> Website </h2>
+                        <h4> SPA Hosting via S3 and CloudFront </h4>
+                        <ul>
+                            <p> Component Details:</p>
+                            <ul>
+                                <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/website/">Overview</a></li>
+                                <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/website/infra#s3-static-website-infrastructure">Backend infrastructure</a></li>
+                                <ul>
+                                    <li>Entirely mutable and relies on Terraform</li>
+                                </ul>
+                                <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/website/speerportfolio">Frontend</a></li>
+                                <ul>
+                                    <li>Written in Typescript and uses Create React App</li>
+                                </ul>
+                                <li><a href="https://github.com/kspeer825/portfolio/actions">Deployments</a></li>
+                                <ul>
+                                    <li>Run via GH Actions workflows</li>
+                                </ul>
+                            </ul>
+                            <p> Tooling </p>
+                            <ul>
+                                <li>AWS</li>
+                                <li>Terraform</li>
+                                <li>Github Actions</li>
+                                <li>Typescript</li>
+                                <li>Yarn</li>
+                            </ul>
+                        </ul>
+                    </Box>
+                </Grid>
 
-        <Grid item cols={4}>
-          <Box color='blue' corners='rounder'>
-            <h2> Infrastructure </h2>
-            <h4> Tooling </h4>
-            <ul>
-              <p> AWS, Terraform, Go </p>
-            </ul>
-            <h4> Projects </h4>
-            <ul>
-              <p> SPA Hosting via S3 and Cloudfront </p>
-              <p> SPA Hosting via EC2 and Cloudfront </p>
-              <p> Development VM EC2 </p>
-            </ul>
-          </Box>
-        </Grid>
+                <Grid item cols={4}>
+                    <Box color='gray' corners='roundest'>
+                        <h2> Containerization </h2>
+                        <h4> Single Purpose Docker Images </h4>
+                        <ul>
+                            <p> Details:</p>
+                            <ul>
+                                <li>Terraform</li>
+                                <ul>
+                                    <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/docker/docker-terraform#base-terraform-image">Github</a> | <a href="https://hub.docker.com/r/kspeer825/terraform/">Docker Hub</a></li>
+                                </ul>
+                                <li>Clojure</li>
+                                <ul>
+                                    <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/docker/docker-clojure#base-clojure-image">Github</a> | <a href="https://hub.docker.com/r/kspeer825/clojure/">Docker Hub</a>
+                                    </li>
+                                </ul>
+                                <li>Python</li>
+                                <ul>
+                                    <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/docker/docker-python#base-python-image">Github</a> | <a href="https://hub.docker.com/r/kspeer825/python">Docker Hub</a> </li>
+                                </ul>
+                                <li>Go</li>
+                                <ul>
+                                    <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/docker/docker-go#base-go-image">Github</a> | <a href="https://hub.docker.com/r/kspeer825/go">Docker Hub</a> </li>
+                                </ul>
+                            </ul>
+                            <p> Tooling </p>
+                            <ul>
+                                <li>Docker</li>
+                                <li>Go (testing)</li>
+                            </ul>
+                        </ul>
+                    </Box>
+                </Grid>
 
-        <Grid item cols={4}>
-          <Box color='gray' corners='roundest'>
-            <h2> Test Automation </h2>
-            <h4> Tooling </h4>
-            <ul>
-              <p> Python, Selenium, Gridlastic </p>
-            </ul>
-            <h4> Projects </h4>
-            <ul>
-              <p> UI Automation Testing </p>
-              <p> Page-Object Model Framework </p>
-            </ul>
-          </Box>
-        </Grid>
+                <Grid item cols={4}>
+                    <Box color='blue' corners='rounder'>
+                        <h2> Advent of Code </h2>
+                        <h4> <a href="https://adventofcode.com/">Advent of Code</a> Solutions</h4>
+                        <ul>
+                            <p> Details:</p>
+                            <ul>
+                                <li>2023 Go solutions</li>
+                                <ul>
+                                    <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/advent-solutions/2023#advent-of-code-2023-solutions">Github</a></li>
+                                </ul>
+                            </ul>
+                            <ul>
+                                <li>2021 Clojure solutions</li>
+                                <ul>
+                                    <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/advent-solutions/2021#advent-of-code-2021-solutions">Github</a></li>
+                                </ul>
+                            </ul>
+                            <ul>
+                                <li>2021 Python solutions</li>
+                                <ul>
+                                    <li><a href="https://github.com/kspeer825/portfolio/tree/main/projects/advent-solutions/2021#advent-of-code-2021-solutions">Github</a></li>
+                                </ul>
+                            </ul>
 
-        <Grid item cols={4}>
-          <Box color='blue' corners='rounder'>
-            <h2> Development </h2>
-            <h4> Tooling </h4>
-            <ul>
-              <p> Python, Clojure, Typescript, React, Bash </p>
-            </ul>
-            <h4> Projects </h4>
-            <ul>
-              <p> My IDE </p>
-              <p> CLI tooling </p>
-              <p> Frontend SPA  </p>
-            </ul>
-          </Box>
-        </Grid>
+                            <p> Tooling </p>
+                            <ul>
+                                <li>Docker (my single purpose images)</li>
+                                <li>Go</li>
+                                <li>Clojure</li>
+                                <ul>
+                                    <li>Leiningen</li>
+                                </ul>
+                                <li>Python</li>
+                                <ul>
+                                    <li>pyenv</li>
+                                </ul>
+                            </ul>
+                        </ul>
+                    </Box>
+                </Grid>
 
-      </Grid >
+            </Grid >
 
-      <Grid container spacing="lg">
-        <Grid item cols={12}>
-          <Box color='light_gray' corners='round'>
-          </Box>
-        </Grid>
-      </Grid>
-      <Grid container spacing="lg">
-        <Grid item cols={12}>
-          <Box color='light_gray' corners='round'>
-          </Box>
-        </Grid>
-      </Grid>
-      <Grid container spacing="lg">
-        <Grid item cols={12}>
-          <Box color='light_gray' corners='round'>
-          </Box>
-        </Grid>
-      </Grid>
-    </div >
-  );
+            <Grid container spacing="lg">
+                <Grid item cols={12}>
+                    <Box color='light_gray' corners='round'>
+                    </Box>
+                </Grid>
+            </Grid>
+            <Grid container spacing="lg">
+                <Grid item cols={12}>
+                    <Box color='light_gray' corners='round'>
+                    </Box>
+                </Grid>
+            </Grid>
+            <Grid container spacing="lg">
+                <Grid item cols={12}>
+                    <Box color='light_gray' corners='round'>
+                    </Box>
+                </Grid>
+            </Grid>
+        </div >
+    );
 }
 
 export default Projects