Skip to content

Commit

Permalink
create personal project card
Browse files Browse the repository at this point in the history
  • Loading branch information
CassandraGoose committed Jun 18, 2024
1 parent 519f8d3 commit eecba0c
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 51 deletions.
Binary file modified cypress/videos/portfolio.cy.js.mp4
Binary file not shown.
158 changes: 158 additions & 0 deletions src/components/PersonalProjectsCard.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
---
import Card from "../components/Card.astro";
import ProjectDetails from "../components/ProjectDetails.astro";
---

<Card title="I like to build things in my free time, too.">
<p
slot="navigation"
class="border-r border-solid border-black justify-center px-4 flex items-center"
data-cy="project-tag"
>
PERSONAL PROJECTS
</p>
<p slot="card-context" class="m-4" data-cy="project-title">
I have had the opportunity to work on several production applications in my
career. I have worked for product companies and also worked for a
consultancy, where I worked on various teams and with various technologies.
</p>
<ul slot="card-body" class="m-4">
<ProjectDetails
title="Track: Learning System"
tech="Next.js, TypeScript, React, Node, Prisma, PostgreSQL, Vercel"
>
<p class="my-2 text-lg">
This project was designed to help learners track their progress and
reach their goals. It can be difficult to know if you have mastered a
concept or not. This tool allows users to share objective-based learning
plans and resources and also track the courses and work they have
completed in order to better know if mastery or proficiency has been
acheived.
</p>
<div class="flex pt-4 pb-8">
<a
class="ml-4 px-4 border border-solid border-black flex justify-center items-center shadow-lg"
href="https://track-learning-system.vercel.app/"
target="_blank"
rel="noopener noreferrer"
data-cy="github-button"
>
Deployed Site
</a>
<a
class="mx-4 px-4 border border-solid border-black flex justify-center items-center shadow-lg"
href="https://github.com/CassandraGoose/track-learning-system"
target="_blank"
rel="noopener noreferrer"
data-cy="linkedin-button"
>GitHub
</a>
</div>
</ProjectDetails>
<ProjectDetails
title="Custom Metal Creations (Live site for working artist)"
tech="Vue, Tailwind, Vite, JavaScript, HTML, Vercel, Google Visutalization API, Google Sheets"
>
<p class="my-2 text-lg">
This site acts as a portfolio site for the metal artist Terry Lawrenz. I
made some interesting choices here, so that the artist could easily make
updates with technology he was already comfortable using. For example,
instead of utilizing a CMS or a database, I have data coming in from a
Google Sheet. I'm hoping to improve the Largest Contentful Paint,
compress images, and generally improve the performance of the
application in the future.
</p>
<div class="flex pt-4 pb-8">
<a
class="ml-4 px-4 border border-solid border-black flex justify-center items-center shadow-lg"
href="https://custommetalcreations.live/"
target="_blank"
rel="noopener noreferrer"
data-cy="github-button"
>
Deployed Site
</a>
<a
class="mx-4 px-4 border border-solid border-black flex justify-center items-center shadow-lg"
href="https://github.com/CassandraGoose/custom-metal-creations-2023"
target="_blank"
rel="noopener noreferrer"
data-cy="linkedin-button"
>GitHub
</a>
</div>
</ProjectDetails>
<ProjectDetails
title="Reported UFO Sightings, Visualized"
tech="D3.js, React, JavaScript, TypeScript, CSS, HTML, Vercel"
>
<p class="my-2 text-lg">
Once upon a time, I was pretty dang good with D3 and worked on some
visualization applications for various companies. I'm really rusty, so I
wanted to get my chops back. This project is a playground to do just
that. Utilizing data from NUFORC's database of UFO reported sightings, I
am building various visualizations to tell a story about the data. I
hope to make the site responsive and accessible moving forward, along
with adding more charts.
</p>
<div class="flex pt-4 pb-8">
<a
class="ml-4 px-4 border border-solid border-black flex justify-center items-center shadow-lg"
href="https://nuforc-ufo-reports-data-visualizations.vercel.app/"
target="_blank"
rel="noopener noreferrer"
data-cy="github-button"
>
Deployed Site
</a>
<a
class="mx-4 px-4 border border-solid border-black flex justify-center items-center shadow-lg"
href="https://github.com/CassandraGoose/ufo-report-visualizations"
target="_blank"
rel="noopener noreferrer"
data-cy="linkedin-button"
>GitHub
</a>
</div>
</ProjectDetails>
<ProjectDetails
title="Big Rico's Pizza (a Domino's Clone)"
tech="React, JavaScript, TypeScript, React Router, ESLint, TailwindCSS, Vite, Vercel"
>
<p class="my-2 text-lg">
I really wanted to get proficient with TailwindCSS. I also haven't built
any complex CSS in a few years. So, I decided to make a Domino's clone
(based on Domino's October, 2023 website) so that I could get good with
layouts, designs, etc. I need to fix a couple of items, but ultimately,
I think this site shows that I can match a design quite well.
</p>
<div class="flex pt-4 pb-8">
<a
class="ml-4 px-4 border border-solid border-black flex justify-center items-center shadow-lg"
href="https://big-ricos-pizza.vercel.app/"
target="_blank"
rel="noopener noreferrer"
data-cy="github-button"
>
Deployed Site
</a>
<a
class="mx-4 px-4 border border-solid border-black flex justify-center items-center shadow-lg"
href="https://github.com/CassandraGoose/big-ricos-pizza"
target="_blank"
rel="noopener noreferrer"
data-cy="linkedin-button"
>GitHub
</a>
</div>
</ProjectDetails>
<ProjectDetails title="2D Unity RPG Game" tech="C#, Unity">
<p class="my-2 text-lg">
Through my LLC Sweet Pig Studio, ltd., I am building a 2D RPG game and
also designing all the assets. I'll add details here closer to when I
release the game.
</p>
<div class="flex pt-4 pb-8"></div>
</ProjectDetails>
</ul>
</Card>
110 changes: 60 additions & 50 deletions src/components/ProjectsCard.astro
Original file line number Diff line number Diff line change
@@ -1,88 +1,98 @@
---
import Card from '../components/Card.astro';
import ProjectDetails from '../components/ProjectDetails.astro';
import Card from "../components/Card.astro";
import ProjectDetails from "../components/ProjectDetails.astro";
---

<Card
title="I've worked on a handful of production applications and I sometimes work on my own projects for fun.">
title="I've worked on a handful of production applications and I sometimes work on my own projects for fun."
>
<p
slot='navigation'
class='border-r border-solid border-black justify-center px-4 flex items-center' data-cy="project-tag">
PROJECTS
slot="navigation"
class="border-r border-solid border-black justify-center px-4 flex items-center"
data-cy="project-tag"
>
PRODUCTION APPLICATIONS
</p>
<p slot='card-context' class='m-4' data-cy="project-title">
<p slot="card-context" class="m-4" data-cy="project-title">
I have had the opportunity to work on several production applications in my
career. I also occassionally work on personal projects for fun.
career. I have worked for product companies and also worked for a
consultancy, where I worked on various teams and with various technologies.
</p>
<ul slot='card-body' class='m-4'>
<ul slot="card-body" class="m-4">
<ProjectDetails
title='Insurance Mental Health Provider Finder'
tech='React, MUI, Node, Express, Objection.js, Sequelize, MSSQL, MapBox, Mocha, Chai, React Testing Library'>
<p class='my-2 text-lg'>
title="Insurance Mental Health Provider Finder"
tech="React, MUI, Node, Express, Objection.js, Sequelize, MSSQL, MapBox, Mocha, Chai, React Testing Library"
>
<p class="my-2 text-lg">
I worked on a team of 2 developers, one product manager, and mental
health staff from the client company to create a wizard style application
to quickly allow users to access mental health assistance, particularly
during crisis events. This full-stack application alllowed for users to directly
communicate with potential providers, book appointments, and find care. This project was HIPAA compliant.
health staff from the client company to create a wizard style
application to quickly allow users to access mental health assistance,
particularly during crisis events. This full-stack application alllowed
for users to directly communicate with potential providers, book
appointments, and find care. This project was HIPAA compliant.
</p>

<p class='my-2 text-lg'>
<p class="my-2 text-lg">
As one of two developers, I was challenged with delivering much of the
functionality which involved interfacing with the client company
APIs and SMTP. I utilized JSS to style the application according to the
client company's design specs. I often paired with the other developer on
particularly challenging sections of the application and we reviewed eachother's code. I continually delivered my stories fully tested and
functionality which involved interfacing with the client company APIs
and SMTP. I utilized JSS to style the application according to the
client company's design specs. I often paired with the other developer
on particularly challenging sections of the application and we reviewed
eachother's code. I continually delivered my stories fully tested and
cleaned on time for each sprint. I also got the opportunity to not only
present my work to the clients every sprint, but also brainstorm with
the clients to uncover the features their users needed.
</p>
</ProjectDetails>
<ProjectDetails
title='Higher Education Career Finder and College Readiness Tracker'
tech='React, JSS, Node, TypeScript, Express, Objection.js, Sequelize, PostgreSQL, Cypress, Mocha, Chai, AWS Ecosystem, AWS Cognito'>
<p class='my-2 text-lg'>
title="Higher Education Career Finder and College Readiness Tracker"
tech="React, JSS, Node, TypeScript, Express, Objection.js, Sequelize, PostgreSQL, Cypress, Mocha, Chai, AWS Ecosystem, AWS Cognito"
>
<p class="my-2 text-lg">
I acted as a tech lead for a team of 4 developers, one product manager,
and the client company to create a wizard style career finder which
utilized a psychology-based algorithm to match users to a set of
careers. This application also contained a tracker for high school
students to prepare for college.
</p>
<p class='my-2 text-lg'>
<p class="my-2 text-lg">
I was tasked with reviewing code from the other 3 developers, acting as
architect, completing features, and mentoring the other developers. I
continually identified and fixed issues and worked to future-proof the
application. I implemented continuous integration and deployment for
this project, as well. I inherited this application in its early life and identified some security issues and also noted that the API was not RESTful. After creating a refacotor proposal and presenting it to stakeholders, the team spent 2 sprints fixing the vulnerabilities and set the application up so that future work would be much more seamless and fast.
this project, as well. I inherited this application in its early life
and identified some security issues and also noted that the API was not
RESTful. After creating a refacotor proposal and presenting it to
stakeholders, the team spent 2 sprints fixing the vulnerabilities and
set the application up so that future work would be much more seamless
and fast.
</p>
</ProjectDetails>
<ProjectDetails
title='Law Enforcement and Prosecution Visualization and Charting'
tech='Vue, Vuex, D3, Serverless, Vue Test Utils, AWS Ecosystem'>
<p class='my-2 text-lg'>
I worked on the R&D team with 3 other developers and a project manager to construct a graphical application to allow law enforcement officers and prosecution teams to create visual aids based on investigation and case data.
</p>
<p class='my-2 text-lg'>
We worked closely with a group of users to design helpful tooling and address unexpected issues. We pushed the boundaries of browser capabilities to render large amounts of data in helpful ways and perform calculations in a serverless situation.
title="Law Enforcement and Prosecution Visualization and Charting"
tech="Vue, Vuex, D3, Serverless, Vue Test Utils, AWS Ecosystem"
>
<p class="my-2 text-lg">
I worked on the R&D team with 3 other developers and a project manager
to construct a graphical application to allow law enforcement officers
and prosecution teams to create visual aids based on investigation and
case data.
</p>
</ProjectDetails>
<ProjectDetails
title='Building Efficiency Graphing Tool'
tech='Vue, Vuex, D3, Karma'>
<p class='my-2 text-lg'>
This tool consumed the client's API in order to display data regarding heating, cooling, efficiency, charging usage, and parking spaces for a campus.
<p class="my-2 text-lg">
We worked closely with a group of users to design helpful tooling and
address unexpected issues. We pushed the boundaries of browser
capabilities to render large amounts of data in helpful ways and perform
calculations in a serverless situation.
</p>
</ProjectDetails>
<ProjectDetails
title='Personal Project: Individual Learning Tracking System'
tech='Next.js, TypeScript, React, Node, Prisma, PostgreSQL, Vercel'>
<p class='my-2 text-lg'>
This project was designed to help learners track their progress and
reach their goals. It can be difficult to know if you have mastered a
concept or not. This tool allows users to share objective-based learning
plans and resources and also track the courses and work they have
completed in order to better know if mastery or proficiency has been
acheived.
title="Building Efficiency Graphing Tool"
tech="Vue, Vuex, D3, Karma"
>
<p class="my-2 text-lg">
This tool consumed the client's API in order to display data regarding
heating, cooling, efficiency, charging usage, and parking spaces for a
campus.
</p>
</ProjectDetails>
</ul>
</Card>
</Card>
4 changes: 3 additions & 1 deletion src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import About from '../components/AboutCard.astro';
import Intro from '../components/IntroCard.astro';
import Skills from '../components/SkillsCard.astro';
import Projects from '../components/ProjectsCard.astro';
import PersonalProjects from '../components/PersonalProjectsCard.astro';
import Portrait from '../components/Portrait.astro';
import Work from '../components/WorkCard.astro';
import Education from '../components/EducationCard.astro';
Expand All @@ -21,13 +22,14 @@ import Talks from '../components/TalkCard.astro';
<Work />
<Volunteering />
<Talks />
<Education />
</section>
</div>

<section class='lg:mx-4 lg:my-16 flex flex-col'>
<Portrait />
<Projects />
<Education />
<PersonalProjects />
</section>
</main>
</Layout>

0 comments on commit eecba0c

Please sign in to comment.