Add workfly project

daniel-panhead · Dec 1, 2024 · c511da6 · c511da6
1 parent 6428eed
commit c511da6
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 52 deletions.
diff --git a/src/assets/workfly.png b/src/assets/workfly.png
diff --git a/src/components/HighlightsSection.astro b/src/components/HighlightsSection.astro
@@ -24,10 +24,11 @@ import HighlightCard from "./HighlightCard.astro";
         ></path>
       </svg>
 
-      At Gumloop, we're working on the future of business workflow automation
-      and making AI workflows accessible to everyone. As a co-op software
-      engineer, I'm integrating APIs for new external services to let users
-      incorporate Discord, Slack, and other platforms into their automations!
+      At Gumloop, we're making it possible to automate complex business
+      workflows leveraging AI without being super technical. As a co-op software
+      engineer, I've been integrating APIs for new external services to let
+      users incorporate Discord, Slack, and other platforms into their
+      automations!
     </HighlightCard>
 
     <HighlightCard

diff --git a/src/components/ProjectsContentSection.astro b/src/components/ProjectsContentSection.astro
@@ -1,38 +1,44 @@
 ---
 import { Image } from "astro:assets";
-import ProjectCard from "./ProjectCard.vue"
+import ProjectCard from "./ProjectCard.vue";
 
 import cat from "../assets/cat.png";
 import { projects } from "../data/projects";
 
 interface Props {
-  maxProjects?: number
+  maxProjects?: number;
 }
 
-const { maxProjects} = Astro.props;
+const { maxProjects } = Astro.props;
 ---
 
 <div class="projects-content">
   <div class="projects-cards">
-    {projects.slice(0, maxProjects ?? projects.length).map((project) => (
-      <ProjectCard
-        client:idle
-        title={project.title} 
-        tagline={project.tagline}
-        link={project.link}
-      >
-        {project.img &&
-          <Image src={project.img} alt={project.title} slot="img" style={{width: "100%", height: "100%", "flex-grow": "0"}} />
-        }
-        {!project.img &&
-          <div class="placeholder_image" slot="img"></div>
-        }
-        <span>{project.description}</span>
-      </ProjectCard>
-    ))}
+    {
+      projects.slice(0, maxProjects ?? projects.length).map((project) => (
+        <ProjectCard
+          client:idle
+          title={project.title}
+          tagline={project.tagline}
+          link={project.link}
+        >
+          {project.img && (
+            <Image
+              src={project.img}
+              alt={project.title}
+              slot="img"
+              style={{ width: "100%", height: "100%", "flex-grow": "0" }}
+            />
+          )}
+          {!project.img && <div class="placeholder_image" slot="img" />}
+          <span>{project.description}</span>
+        </ProjectCard>
+      ))
+    }
   </div>
-  {maxProjects && maxProjects < projects.length && 
-    <a href="/projects" class="btn bg-primary">
+  {
+    maxProjects && maxProjects < projects.length && (
+      <a href="/projects" class="btn bg-primary">
         <Image src={cat} alt="Cat" />
         <span>
           See more projects
@@ -47,38 +53,40 @@ const { maxProjects} = Astro.props;
               d="M10.6666 3H1.33325M10.6666 3L7.99992 5M10.6666 3L7.99992 1"
               stroke="black"
               stroke-linecap="round"
-              stroke-linejoin="round"></path>
+              stroke-linejoin="round"
+            />
           </svg>
         </span>
-    </a>
+      </a>
+    )
   }
 </div>
 
 <style>
   .projects-content {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 32px;
-	}
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+  }
 
-	.projects-cards {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 32px;
-		@media (min-width: 768px) {
-			flex-direction: row;
-			gap: 32px;
+  .projects-cards {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+    @media (min-width: 768px) {
+      flex-direction: row;
+      gap: 32px;
       flex-wrap: wrap;
-		}
-	}
+    }
+  }
 
-	.placeholder_image {
+  .placeholder_image {
     width: 240px;
     height: 155px;
     background: gray;
   }
-</style>
+</style>
diff --git a/src/data/projects.ts b/src/data/projects.ts
@@ -1,9 +1,25 @@
+import workfly from "../assets/workfly.png";  
 import profound from "../assets/profound.png";
 import sherlockify from "../assets/sherlockify.png";
 import biomod from "../assets/biomod.png";
 import drSprouts from "../assets/dr-sprouts.png";
 
 export const projects = [
+  {
+    title: "Workfly",
+    tagline: "Drag-and-drop CI/CD workflow builder!",
+    link: "https://github.com/tryworkfly/workfly",
+    img: workfly,
+    description: `
+    Learning how to automate tasks with CI/CD can be quite daunting for beginners,
+    but using Workfly, anyone can leverage the power of CI/CD without having to
+    become an expert in writing configuration files. Workfly is a drag-and-drop
+    block editor that allows you to quickly create workflows by connecting steps
+    together in a visual block editor. I created the backend that converts visual
+    steps into a GitHub Actions workflow file and automatically adds the workflow
+    to your repository.
+    `,
+  },
   {
     title: "ProFound",
     tagline: "The world's first AI cofounder!",
@@ -15,7 +31,7 @@ export const projects = [
     the AI-powered no-code prototyper which can turn ideas into mockups in minutes, not days.
     Using Svelte, Tailwind, and WebSockets, I implemented the frontend interface to let users
     chat with ProFound and see the previews of their mockups.
-    `
+    `,
   },
   {
     title: "Sherlockify",
@@ -27,7 +43,7 @@ export const projects = [
     to let you search your friends online over thousands of social media sites!
     I developed a backend server to interface with Sherlock using Python and FastAPI,
     and deployed to Google Cloud using Cloud Run + an automated Cloud Build pipeline.
-    `
+    `,
   },
   {
     title: "UBC BIOMOD 2023",
@@ -38,7 +54,7 @@ export const projects = [
     As part of a team of four, I helped developed a website for the UBC BIOMOD club's 2023
     submission to the BIOMOD molecular design competition, where our team placed fifth internationally!
     We had a lot of fun fully designing the website from scratch and developing with Vue.js and Tailwind.
-    `
+    `,
   },
   {
     title: "Dr. Sprouts",
@@ -51,6 +67,6 @@ export const projects = [
     Dr. Sprouts can give you relevant results and advice backed by real scientific papers.
     I developed a chat interface for the program using React and Typescript to let you chat
     with Dr. Sprouts in real time!
-    `
-  }
-];
+    `,
+  },
+];