From 35a62146d38e49305c8282913ef6ba031f01f854 Mon Sep 17 00:00:00 2001
From: Kenneth Yang <82800265+kjy5@users.noreply.github.com>
Date: Tue, 13 Feb 2024 15:36:05 -0800
Subject: [PATCH] 310-links-card (#342)
* Removed old favicon, minified meta, copied in models
* Extract artifacts
* Link card and story
* Add no image story
* fix: increase height of CardMedia component to 180 in order to display images properly
---
.prettierignore | 1 +
public/artifact-metas.json | 408 ----------------------------
public/vite.svg | 1 -
src/components/link-card.stories.ts | 22 ++
src/components/link-card.tsx | 68 +++++
src/models/artifact-meta-models.ts | 64 +++++
src/models/artifact-metas.json | 1 +
src/utils/artifact-metas.ts | 6 +
8 files changed, 162 insertions(+), 409 deletions(-)
delete mode 100644 public/artifact-metas.json
delete mode 100644 public/vite.svg
create mode 100644 src/components/link-card.stories.ts
create mode 100644 src/components/link-card.tsx
create mode 100644 src/models/artifact-meta-models.ts
create mode 100644 src/models/artifact-metas.json
create mode 100644 src/utils/artifact-metas.ts
diff --git a/.prettierignore b/.prettierignore
index 05eb988..250cf67 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,3 @@
dist/
.prettierrc.cjs
+src/models/artifact-metas.json
\ No newline at end of file
diff --git a/public/artifact-metas.json b/public/artifact-metas.json
deleted file mode 100644
index cd80d5a..0000000
--- a/public/artifact-metas.json
+++ /dev/null
@@ -1,408 +0,0 @@
-[
- {
- "title": "Fall Quarter Reflection",
- "subtitle": "Thoughts on my first quarter in college",
- "year": 0,
- "quarter": 0,
- "text": "My last assignment for HONORS 100.",
- "images": [],
- "links": [],
- "embeds": ["/Fall Quarter Reflection/fall quarter reflection.pdf"]
- },
- {
- "title": "COSMOS Interface",
- "subtitle": "HSL intro project",
- "year": 0,
- "quarter": 0,
- "text": "Husky Satellite Lab (HSL) is focused on building satellites to launch into space and designing tools and equipment that can be used to conduct real research out in space. For all these goals to be achieved, however, the team must have some way to communicate and interface with the satellite while it's out in space. This is where the project I'm working on comes in. I'm learning how to build and deploy a ground station system built on COSMOS and OpenSatKit which will allow HSL to design graphical tools and interfaces for the various equipment and tools that will go onboard the satellite. Learning COSMOS and working at HSL taught me a lot about utilizing advanced software systems (used in professional spaceflight) and cross-team communication and teamwork (to build tools and interfaces for the satellite).",
- "images": [
- {
- "title": "Image Compression InProgress Interface",
- "description": "COSMOS 4 UI for the Image Compression OSK application",
- "width": 626,
- "height": 501,
- "src": "/COSMOS Interface/interface.png",
- "thumbnailSrc": "/COSMOS Interface/interface-thumb.webp"
- }
- ],
- "links": [],
- "embeds": []
- },
- {
- "title": "Evil Hangman",
- "subtitle": "A fun CSE 143 Assignment",
- "year": 0,
- "quarter": 0,
- "text": "This CSE 143 computer science assignment was focused on a CS topic known as maps or dictionaries. Essentially, a list of correlations of things (like a word to a definition in a dictionary). While this was a topic that wasn't unfamiliar to me, I enjoyed the application and practice I got from using such a simple system to create a fun game. Evil Hangman takes the standard hangman game and twists it to make it nearly impossible to win by constantly changing the correct word based on the input the player gives. Because of my prior experiences with CS, a lot of topics covered in CSE 143 were not unfamiliar to me, but it was through the extra/targeted practice and structured assignments that I came to have a better understanding and appreciation for these concepts.",
- "images": [],
- "links": [],
- "embeds": ["https://replit.com/@kjy5/Evil-Hangman-Demo?embed=true"]
- },
- {
- "title": "Nautilus Renders",
- "subtitle": "UWROV mechanical x website team project",
- "year": 0,
- "quarter": 0,
- "text": "UWROV is a competition-focused club that works to build underwater remotely operated vehicles (ROVs) which will compete at the annual MATE ROV Competition. The team is composed of several distinct subgroups working together towards a common goal. Working on both the mechanical and software subgroup allowed me to gain experience with handling cross-team communications and collaborations. These images of the ROV are a collaboration between the mechanical group and software team to create improved promotional material to be featured on the club's website. Leading the effort on this project allowed me to practice facilitating planning and collaboration between the two groups to achieve the goal of highlighting the mechanical achievements of the mechanical group and improving the club's website (ran by the software group).",
- "images": [
- {
- "title": "Nautilus",
- "description": "",
- "width": 2000,
- "height": 1500,
- "src": "/Nautilus Renders/main.webp",
- "thumbnailSrc": "/Nautilus Renders/main-thumb.webp"
- },
- {
- "title": "Top Down View of ROV",
- "description": "",
- "width": 2000,
- "height": 1500,
- "src": "/Nautilus Renders/top.webp",
- "thumbnailSrc": "/Nautilus Renders/top-thumb.webp"
- },
- {
- "title": "Main ROV Electronics",
- "description": "Raspberry Pi 4 Model B and two cameras (one facing forward, another pointing at the gripper).",
- "width": 2000,
- "height": 1500,
- "src": "/Nautilus Renders/front.webp",
- "thumbnailSrc": "/Nautilus Renders/front-thumb.webp"
- },
- {
- "title": "ROV Gripper and Camera",
- "description": "Magnetic coupled gripper and viewing camera (top right of picture).",
- "width": 2000,
- "height": 1500,
- "src": "/Nautilus Renders/claw.webp",
- "thumbnailSrc": "/Nautilus Renders/claw-thumb.webp"
- },
- {
- "title": "Propulsion Systems",
- "description": "The ROV is driven by 6 motors. Two pairs of cross-axis mounted motors help direct movement planar-ly while a pair of vertically mounted motors provide the ROV with lift.",
- "width": 2000,
- "height": 1500,
- "src": "/Nautilus Renders/side.webp",
- "thumbnailSrc": "/Nautilus Renders/side-thumb.webp"
- },
- {
- "title": "Rear Electronics and Tether Port",
- "description": "",
- "width": 2000,
- "height": 1500,
- "src": "/Nautilus Renders/back.webp",
- "thumbnailSrc": "/Nautilus Renders/back-thumb.webp"
- }
- ],
- "links": [],
- "embeds": []
- },
- {
- "title": "Leadership and Democracy Final Paper",
- "subtitle": "A culmination of HONORS 231 E",
- "year": 0,
- "quarter": 1,
- "text": "This final paper was a culmination of the concepts I learned in HONORS 231 E \"Leadership, Democracy, and a More Thoughtful Public\". A big emphasis in the class was the idea of \"implication\", or asking the questions \"if this were true, what would that mean for society?\" To tackle this in my final paper, I wrote a short story that played out three different propositions from the course and simulated what I believe would happen to characters and the surrounding society. Through this process I practiced a different way to communicate my thoughts (in the form of a story) and how to write creatively for an academic setting.",
- "images": [],
- "links": [],
- "embeds": ["/Leadership and Democracy Final Paper/leadership and democracy paper.pdf"]
- },
- {
- "title": "ROV22 Simulation Demo",
- "subtitle": "Designing and testing ROV22",
- "year": 0,
- "quarter": 1,
- "text": "As I continue my work in UWROV, I worked on another project which tied together the software and mechanical teams. To test motor configurations and movement for our new ROV design, I worked to implement CAD model designs from the mechanical team into a fluid simulator to test how they would behave. The software team could also pick up from here and run motor code directly against the ROV in the simulator to test behavior. In this project, I learned about the Gazebo simulator and sharpened my ROS, CAD, and cross-team communication skills.",
- "images": [],
- "links": [],
- "embeds": ["https://www.youtube.com/embed/ygnG9eYG1sI"]
- },
- {
- "title": "Starting a New Honors Portfolio Website",
- "subtitle": "Combining my creativity and tech",
- "year": 0,
- "quarter": 1,
- "text": "I love creating things am learning about new technologies along the way. My Honors Portfolio, and any other website for that matter, is a great reason to do just that! I wanted my portfolios and websites for school to reflect my technological interests as well as my creative side. To do so I learned how to utilize modern web frameworks such as React, Vite, and Three.js as well as continuous integration system like GitHub Action to both create a technologically advanced website as well as display my 3D art. As I work to build this new website, learning these modern web technologies will also let me be more useful in web development jobs and other scenarios which call for these technologies.",
- "images": [
- {
- "title": "Early development",
- "description": "An early photo of my portfolio website while it was in development.",
- "width": 2984,
- "height": 1572,
- "src": "/Starting a New Honors Portfolio Website/splash.webp",
- "thumbnailSrc": "/Starting a New Honors Portfolio Website/splash-thumb.webp"
- },
- {
- "title": "GitHub Project View",
- "description": "Planning the features and building blocks to my portfolio website.",
- "width": 1119,
- "height": 942,
- "src": "/Starting a New Honors Portfolio Website/issues board.webp",
- "thumbnailSrc": "/Starting a New Honors Portfolio Website/issues board-thumb.webp"
- }
- ],
- "links": [],
- "embeds": []
- },
- {
- "title": "NASA Summer Undergraduate Research Program",
- "subtitle": "Husky Satellite Lab summer research project ",
- "year": 0,
- "quarter": 2,
- "text": "One of the greatest benefits of participating in the Husky Satellite Lab RSO is that they are funded by the NASA Space Grant. This means they send members to participate in NASA Summer Undergraduate Research Programs (SURP) without needing to go through the application process! Over the summer of 2022, I will be participating in SURP and will be in a team of 2 others working to improve upon the Star Tracker system of the Husky Satellite. The Start Tracker, LOST, is a program that can take image an image of space and use the stars in the image to calculate the attitude (orientation and position) of our satellite in space! This will be a great experience in working in small groups and on code that will be used in space!",
- "images": [],
- "links": [
- {
- "url": "https://github.com/UWCubeSat/lost",
- "title": "GitHub - UWCubeSat/lost: Lost: Open-source Star Tracker",
- "description": "Lost: Open-source Star Tracker. Contribute to UWCubeSat/lost development by creating an account on GitHub.",
- "imageSrc": "https://opengraph.githubassets.com/aa0427742a83624dff7908275a0e60c30011a4259727e81a2dedee25e8b3b17e/UWCubeSat/lost",
- "faviconSrc": "https://github.githubassets.com/favicons/favicon.svg",
- "domain": "github.com"
- },
- {
- "url": "https://wiki.huskysat.org/wiki/index.php/LOST_SURP_2022",
- "title": "LOST SURP 2022 - HSL Wiki",
- "description": "HSL SURP 2022 Wiki",
- "imageSrc": "",
- "faviconSrc": "https://wiki.huskysat.org/favicon.ico",
- "domain": "wiki.huskysat.org"
- }
- ],
- "embeds": []
- },
- {
- "title": "Multimodal Composition Final Portfolio",
- "subtitle": "Honors ENGL 182 Final Project",
- "year": 0,
- "quarter": 2,
- "text": "As someone interested in computer graphics, multimodality (the study of the different modes of communication and expression) is something that greatly pertains to my studies. Computer graphics is a fascinating intersection of science and arts and understanding techniques of expression is critical in this field. My final portfolio showcases a selection of work I did over the quarter and the process I went through to revise and improve upon them. There is a big focus on metacognition, self-reflection, and revision. The writing and creative process is not a write-once throw-away activity. This portfolio shows my revision process on projects such as pamphlets about detecting counterfeit watches and 2-minute explanations of complex ideas like Monte Carlo Integration.",
- "images": [],
- "links": [
- {
- "url": "https://canvas.uw.edu/eportfolios/71109",
- "title": "Introduction: ENGL 182_Kenneth_Yang",
- "description": "Kenneth Yang's ENGL 182 Portfolio",
- "imageSrc": "https://canvas.uw.edu/eportfolios/71109/entries/507535/files/1psEubzLuejgtgQ1jletUF8kZwH44RPTkdQsgvqh",
- "faviconSrc": "https://instructure-uploads.s3.amazonaws.com/account_100000000083919/attachments/37312004/favicon.ico?AWSAccessKeyId=AKIAJFNFXH2V2O7RPCAA&Expires=1939374366&Signature=lNl7iuCda9spDgRONbwVvr490LM%3D&response-cache-control=Cache-Control%3Amax-age%3D473364000.0%2C%20public&response-expires=473364000.0",
- "domain": "canvas.uw.edu"
- }
- ],
- "embeds": []
- },
- {
- "title": "International Brain Lab Position",
- "subtitle": "Getting a position at the Steinmetz Lab",
- "year": 0,
- "quarter": 2,
- "text": "By far the most exciting event that has happened this quarter was when I was offered a position to work as an undergraduate researcher at the Steinmetz Lab. The Steinmetz Lab is the UW division of the International Brain Lab which is (as the name implies) an international network of labs working to create a better understanding of the brain. I will be mentored by Dr. Birman and will be taking on computer science projects in the field of neuroscience and technology. This is an incredibly exciting opportunity that I have been presented and I can't wait to see where this will go!",
- "images": [],
- "links": [
- {
- "url": "http://www.steinmetzlab.net",
- "title": "Steinmetz Lab",
- "description": "Neuroscience laboratory at University of Washington, Department of Biological Structure. PI Nick Steinmetz.",
- "imageSrc": "",
- "faviconSrc": "http://www.steinmetzlab.net/assets/img/icons/favicon-32x32.png",
- "domain": "www.steinmetzlab.net"
- },
- {
- "url": "https://www.internationalbrainlab.com",
- "title": "International Brain Laboratory",
- "description": "Experimental & theoretical neuroscientists collaborating to understand brainwide circuits for complex behavior",
- "imageSrc": "http://static1.squarespace.com/static/582df1a059cc6819b296dc18/t/592eeaaf6a49639ddda83a41/1651758571936/IBL+Logo+Favicon-08.png?format=1500w",
- "faviconSrc": "https://images.squarespace-cdn.com/content/v1/582df1a059cc6819b296dc18/1496246987212-UTCOQ78KKZ3PHMPC2GGE/favicon.ico?format=100w",
- "domain": "www.internationalbrainlab.com"
- },
- {
- "url": "https://github.com/VirtualBrainLab",
- "title": "Virtual Brain Lab · GitHub",
- "description": "The VBL builds intuitive and interactive 3D visualizations for neuroscience. - Virtual Brain Lab",
- "imageSrc": "https://avatars.githubusercontent.com/u/107721456?s=280&v=4",
- "faviconSrc": "https://github.githubassets.com/favicons/favicon.svg",
- "domain": "github.com"
- }
- ],
- "embeds": []
- },
- {
- "title": "Lab C: Colliding Carts",
- "subtitle": "A Physics 141 lab",
- "year": 1,
- "quarter": 0,
- "text": "Against popular opinion, I chose to take honors physics this year. Many people told me it would be much harder than taking normal physics, but my interest in the subject drove me to try for the honors version. It turns out I got extremely lucky and landed an excellent professor, Professor Heron, who will be teaching all three terms of the course. This particular artifact focuses on one of the labs we did. While the actual activity of the lab was pretty straightforward, writing a complete lab report was new to me as I haven't taken a lab science before. This is my first full lab report with all of the procedures, data, analysis, graphing, and conclusions compiled together into one paper. While physics in general is tough, I am still interested in pursuing the topic and learning what I can. I look forward to continuing with Professor Heron!",
- "images": [],
- "links": [],
- "embeds": ["/Lab C Colliding Carts/Lab_C_Final.pdf"]
- },
- {
- "title": "333gle",
- "subtitle": "A CSE 333 project",
- "year": 1,
- "quarter": 0,
- "text": "This quarter, I took CSE 333 Systems Programming. This course focuses on low-level programming and understanding many low-level operations related to the way computers and groups of computers function. Not only is the class on an important topic in computer science (and working with computers) it is also a prerequisite course for many 400-level CS courses including all of the courses on computer graphics I am the most interested in taking. This artifact focuses on the last project in the course in which all of our skills culminate into creating a web server that indexes a corpus of text and allows users to search through them with keywords, similar to the way Google works with the internet. I learned a lot about what goes on at the core of handling files on computers and how to serve websites from a computer onto the network and handle multiple users connecting to the server. I will be taking a lot of these core skills into my next CS courses as I begin to take 400-level classes.",
- "images": [
- {
- "title": "333gle",
- "description": "333gle home page",
- "width": 2868,
- "height": 2048,
- "src": "/333gle/333gle.webp",
- "thumbnailSrc": "/333gle/333gle-thumb.webp"
- },
- {
- "title": "Hello World",
- "description": "Search results for \"Hello World\"",
- "width": 2868,
- "height": 2048,
- "src": "/333gle/hello world.webp",
- "thumbnailSrc": "/333gle/hello world-thumb.webp"
- },
- {
- "title": "Buffalo",
- "description": "Search results for \"Buffalo\"",
- "width": 2868,
- "height": 2048,
- "src": "/333gle/buffalo.webp",
- "thumbnailSrc": "/333gle/buffalo-thumb.webp"
- },
- {
- "title": "Moby Dick Text",
- "description": "Search results for \"Moby Dick\"",
- "width": 2868,
- "height": 2048,
- "src": "/333gle/moby dick text.webp",
- "thumbnailSrc": "/333gle/moby dick text-thumb.webp"
- }
- ],
- "links": [],
- "embeds": []
- },
- {
- "title": "Research Experiential Learning Activity",
- "subtitle": "Pinpoint: electrophysiology planning tool ",
- "year": 1,
- "quarter": 0,
- "text": "Over the summer I got to start working in the Virtual Brain Lab, a group within the Steinmetz Lab for neuroscience at the University of Washington led by Dr. Dan Birman. I got the amazing opportunity to exercise my CS skills in an environment that had real impacts on the wider neuroscience community. My work continued through the fall quarter as an experiential learning activity. Thus far, I've learned so much from this project including working in teams, presenting my developments to peers, and receiving feedback from other neuroscience experts from around the world. My work was shared at the 2022 Society for Neuroscience (SfN) conference, one of the largest neuroscience conferences held annually. We gained a lot of interest in our development of Pinpoint including new partner companies such as New Scale who are interested in using our tools for their electrophysiology equipment. I look forward to continuing working in the Steinmetz Lab and developing Pinpoint!",
- "images": [],
- "links": [],
- "embeds": ["https://www.youtube.com/embed/E089tbBpVE8"]
- },
- {
- "title": "NQN Hackathon",
- "subtitle": "Winning a hackathon about quantum computing",
- "year": 1,
- "quarter": 1,
- "text": "Participating in the Microsoft-hosted hackathon at the University of Washington on quantum computing was an unforgettable experience for me and my friends. We were eager to explore this fascinating way of computing, and we teamed up to build a program that could separate an image's foreground from its background (also known as image segmentation). Image segmentation is a theoretically challenging task for conventional computers, but for quantum computers, it is an easy task. We had to learn a lot about quantum computers on the fly, and it was a frantic race to finish our project before the deadline. However, all our hard work paid off when we found out that out of the 75 participating teams, we were one of the three winning teams! It was an incredible feeling to see our project come to life and receive recognition for it. Check out our project on GitHub!",
- "images": [],
- "links": [
- {
- "url": "https://github.com/KuhnTycoon/EyeQ",
- "title": "GitHub - KuhnTycoon/EyeQ",
- "description": "Contribute to KuhnTycoon/EyeQ development by creating an account on GitHub.",
- "imageSrc": "https://opengraph.githubassets.com/4d5214db98cc98fd23ad0e44604703a46fefd8f2de3e577d938a74270b54b7b4/KuhnTycoon/EyeQ",
- "faviconSrc": "https://github.githubassets.com/favicons/favicon.svg",
- "domain": "github.com"
- }
- ],
- "embeds": []
- },
- {
- "title": "Digital Cinema Production Final",
- "subtitle": "A fun final project for a fun class",
- "year": 1,
- "quarter": 1,
- "text": "I am incredibly grateful for the opportunity to have taken DRAMA 406 as someone who is deeply interested in computer graphics. This class was able to deliver me an invaluable education on how real filmography works. Throughout the course, I learned many practical filmmaking techniques and gained a deeper understanding of the science behind how cameras worked. For my final project, I wanted to showcase a blending of my passion for VFX with the live-action techniques that were taught in class. It was a challenging but rewarding experience to bring these two worlds together. Although I always feel like there is room for improvement in my work, I am happy with what I was able to accomplish during the limited timeframe of finals week.",
- "images": [],
- "links": [],
- "embeds": ["https://www.youtube.com/embed/h31nKON_0rI"]
- },
- {
- "title": "Mary Gates Research Scholarship",
- "subtitle": "Funding my work in the Virtual Brain Lab",
- "year": 1,
- "quarter": 1,
- "text": "During the fall quarter, my lab mentor, Dr. Birman, suggested that I apply for the Mary Gates Research Scholarship. I eagerly applied, but unfortunately, I was not selected as a recipient. Though it was disappointing, I was determined to try again. I sought feedback from the scholarship committee and visited several writing centers to gather advice on improving my application. I dedicated myself to improving my application and waited for the Winter application cycle to arrive. After my second application, I was granted the scholarship! This success has given me a renewed sense of confidence and determination to continue my research and make an impact in my field. I am glad my mentor encouraged me to apply again and not give up after the first failure. Below is the essay that earned me the Mary Gates Research Scholarship.",
- "images": [],
- "links": [],
- "embeds": ["/Mary Gates Research Scholarship/Wi23_Kenneth_Mary_Gates_Research_Scholarship.pdf"]
- },
- {
- "title": "CSE 457 Computer Graphics Final",
- "subtitle": "A Unity game simulating lasers",
- "year": 1,
- "quarter": 2,
- "text": "For my final project in CSE 457 Computer Graphics, I collaborated with a team to develop a game that combined elements from Fire Boy & Water Girl, and Portal. The game's central mechanic revolved around the physical simulation of lasers, mirrors, and prisms. It was an enjoyable experience to explore these concepts both in my computer graphics and physics classes and then integrate them into a cohesive gameplay experience. To truly appreciate the game's dynamics, I recommend watching the demo below, as it captures the essence of the game and its exciting features.",
- "images": [],
- "links": [
- {
- "url": "https://github.com/julialwang/graphicsgame",
- "title": "GitHub - julialwang/Alight: A 3D first-person puzzle game where players use mirrors and rigidbody physics to escape a deep well. They must use blocks and redirect laser beams to climb their way out.",
- "description": "A 3D first-person puzzle game where players use mirrors and rigidbody physics to escape a deep well. They must use blocks and redirect laser beams to climb their way out. - GitHub - julialwang/Alight: A 3D first-person puzzle game where players use mirrors and rigidbody physics to escape a deep well. They must use blocks and redirect laser beams to climb their way out.",
- "imageSrc": "https://opengraph.githubassets.com/7a73f4117279e4013ffed2252224a31b3c1d40f1f2ea87b240b94544a8cbff23/julialwang/Alight",
- "faviconSrc": "https://github.githubassets.com/favicons/favicon.svg",
- "domain": "github.com"
- }
- ],
- "embeds": ["https://www.youtube.com/embed/ruw6Ttrah-8"]
- },
- {
- "title": "DXARTS 200 Final Artifact",
- "subtitle": "A functional, kinetic, installation",
- "year": 1,
- "quarter": 2,
- "text": "In addition to my Computer Science degree, I am pursuing a minor in Digital Arts and Experimental Media (DXARTS) to broaden my knowledge and skills. As part of this program, I have developed a project proposal that combines technology and art in a unique way. In my perspective, art can be aesthetically pleasing and serve a practical purpose. My proposal focuses on upgrading the directory maps scattered throughout the campus into a mesmerizing kinetic art piece. This project proposal, which is provided below, outlines the details and vision of this functional art installation.",
- "images": [],
- "links": [],
- "embeds": ["/DXARTS 200 Final Artifact/Campus Flow.pdf"]
- },
- {
- "title": "Undergraduate Research Symposium 2023",
- "subtitle": "Presenting my in the Virtual Brain Lab",
- "year": 1,
- "quarter": 2,
- "text": "As a recipient of the Mary Gates Research scholarship, I had the opportunity to showcase my work at the annual Undergraduate Research Symposium. It was my first time presenting a poster on my own, and although I was initially nervous, I discovered a newfound enjoyment in presenting and sharing my research with others. The response from fellow scientists and inquisitive undergraduates was incredibly positive, as they showed genuine interest in my work. This experience allowed me to refine my skills in creating scientific posters and conducting physical demonstrations. Additionally, I had the chance to present my research at the Computer Science Research Symposium a few weeks later, reaching an even wider audience. Below is my poster, which is also on display in the health sciences building.",
- "images": [],
- "links": [],
- "embeds": ["/Undergraduate Research Symposium/Kenneth Yang Research Symposium 2023.pdf"]
- },
- {
- "title": "SfN 2023",
- "subtitle": "Presenting my research at one of the biggest neuroscience conferences in the US",
- "year": 2,
- "quarter": 0,
- "text": "I had a great opportunity to showcase my research in the Steinmetz Lab at the Society for Neuroscience (SfN) 2023 conference in D.C. this quarter. My poster focused on my work to create automation tools for electrophysiology experiments. I also demonstrated my software live at a demo session and at two exhibits with our partner companies (Sensapex and New Scale). It was an amazing experience to interact with leading researchers from around the world and to get feedback on my work. Many labs around the world are now eager to use my software in their own experiments. I will be collaborating with them over the winter quarter of 2023-2024 to help them set up my tools. You can see my poster from the demo below!",
- "images": [],
- "links": [],
- "embeds": ["/SfN 2023/yang_sfn23-1.0.3-opt.pdf"]
- },
- {
- "title": "3D Slicing",
- "subtitle": "Learning the software technique used in design and fabrication",
- "year": 2,
- "quarter": 0,
- "text": "This assignment for CSE 493H Computation Design & Fabrication was very interesting and educational for me. I learned a lot about the theory and practice of design and how computers can help with that. One of the topics we covered was 3D printing, which is a technique that creates physical objects from digital models. To do this, the computer has to slice the 3D model into thin 2D layers that are then printed on top of each other to form the final shape. I wrote some code that can do this slicing process for any 3D model. Another topic we learned was sheet-metal fabrication, which is a process that cuts and bends metal sheets into different shapes. We also learned how to create a design-specific language (DSL) that can simplify the specification of sheet-metal designs. A DSL is a language that is tailored to a specific domain and uses terms and concepts that are relevant to it. I coded a DSL for sheet-metal fabrication and used it to design a pizza box that can be folded from a single sheet of paper. You can see the details of my work in the writeup below.",
- "images": [],
- "links": [],
- "embeds": ["/3D Slicing/slicing writeup-opt.pdf"]
- },
- {
- "title": "CSE 340 Final Project",
- "subtitle": "Creating a reactive framework in a game engine",
- "year": 2,
- "quarter": 0,
- "text": "For my final project, I decided to create a fun choose your own adventure game in just one week. The game is based on a topic we learned about in the course: reactive frameworks. These are frameworks that automatically update the user interface based on the changes to the data or state. Most game engines are not reactive, meaning they require manual updates and rendering. However, I implement a reactive framework in the game engine Godot, which made the development of other parts of the game much easier. The game is a choose your-own-adventure style game where the player controls a stick figure that goes through a story with different choices and outcomes. I also used some concepts I learned in the animation courses over the summer to make the game more engaging and dynamic. You can check out the game in the link below and see how it works!",
- "images": [],
- "links": [
- {
- "url": "https://drive.google.com/drive/folders/1wihUJ7jWzD_7F5U-Gywm7E41n3kI-9Tu",
- "title": "Release Binaries - Google Drive",
- "description": "",
- "imageSrc": "",
- "faviconSrc": "https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png",
- "domain": "drive.google.com"
- }
- ],
- "embeds": []
- }
-]
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/components/link-card.stories.ts b/src/components/link-card.stories.ts
new file mode 100644
index 0000000..1342836
--- /dev/null
+++ b/src/components/link-card.stories.ts
@@ -0,0 +1,22 @@
+import LinkCard from './link-card.tsx';
+import { Meta, StoryObj } from '@storybook/react';
+import artifactMetas from '../utils/artifact-metas.ts';
+
+const meta: Meta = {
+ component: LinkCard,
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ linkMeta: artifactMetas[7].links[0],
+ },
+};
+
+export const NoImage: Story = {
+ args: {
+ linkMeta: artifactMetas[9].links[0],
+ },
+};
diff --git a/src/components/link-card.tsx b/src/components/link-card.tsx
new file mode 100644
index 0000000..1a3ea72
--- /dev/null
+++ b/src/components/link-card.tsx
@@ -0,0 +1,68 @@
+import { LinkMeta } from '../models/artifact-meta-models.ts';
+import { Avatar, Card, CardActionArea, CardContent, CardMedia, Link, Stack, Typography } from '@mui/material';
+
+/**
+ * Content of a link.
+ * @param title The title of the link.
+ * @param description The description of the link.
+ * @param faviconSrc The favicon of the link.
+ * @param domain The domain of the link.
+ * @constructor
+ */
+function LinkContent({
+ title,
+ description,
+ faviconSrc,
+ domain,
+}: {
+ title: string;
+ description: string;
+ faviconSrc: string;
+ domain: string;
+}) {
+ return (
+
+
+
+ {title}
+
+
+
+ {description}
+
+
+
+ {faviconSrc && }
+ {domain}
+
+
+
+ );
+}
+
+/**
+ * Rich representation of a link.
+ * @param linkMeta The metadata of the link.
+ * @constructor
+ */
+function LinkCard({ linkMeta }: { linkMeta: LinkMeta }) {
+ return (
+
+
+
+ {linkMeta.imageSrc && (
+
+ )}
+
+
+
+
+ );
+}
+
+export default LinkCard;
diff --git a/src/models/artifact-meta-models.ts b/src/models/artifact-meta-models.ts
new file mode 100644
index 0000000..81234b0
--- /dev/null
+++ b/src/models/artifact-meta-models.ts
@@ -0,0 +1,64 @@
+enum Year {
+ None = -1,
+ Freshman,
+ Sophomore,
+ Junior,
+ Senior,
+}
+
+enum Quarter {
+ None = -1,
+ Fall,
+ Winter,
+ Spring,
+ Summer,
+}
+
+interface ImageMeta {
+ title: string;
+ description: string;
+ width: number;
+ height: number;
+ src: string;
+ thumbnailSrc: string;
+}
+
+interface LinkMeta {
+ url: string;
+ title: string;
+ description: string;
+ imageSrc: string;
+ faviconSrc: string;
+ domain: string;
+}
+
+interface LinkExtract {
+ title: string;
+ description: string;
+ images: string[];
+ sitename: string;
+ favicon: string;
+ duration: number;
+ domain: string;
+ url: string;
+ source: string;
+}
+
+interface ArtifactMeta {
+ title: string;
+ subtitle: string;
+ year: Year;
+ quarter: Quarter;
+ text: string;
+ images: ImageMeta[];
+ links: LinkMeta[];
+ embeds: string[];
+}
+
+/**
+ * A map of artifact names to their metadata.
+ */
+type ArtifactMetas = ArtifactMeta[];
+
+export { Quarter, Year };
+export type { ArtifactMeta, ArtifactMetas, ImageMeta, LinkMeta, LinkExtract };
diff --git a/src/models/artifact-metas.json b/src/models/artifact-metas.json
new file mode 100644
index 0000000..2b5d1f6
--- /dev/null
+++ b/src/models/artifact-metas.json
@@ -0,0 +1 @@
+[{"title":"Fall Quarter Reflection","subtitle":"Thoughts on my first quarter in college","year":0,"quarter":0,"text":"My last assignment for HONORS 100.","images":[],"links":[],"embeds":["/Fall Quarter Reflection/fall quarter reflection.pdf"]},{"title":"COSMOS Interface","subtitle":"HSL intro project","year":0,"quarter":0,"text":"Husky Satellite Lab (HSL) is focused on building satellites to launch into space and designing tools and equipment that can be used to conduct real research out in space. For all these goals to be achieved, however, the team must have some way to communicate and interface with the satellite while it's out in space. This is where the project I'm working on comes in. I'm learning how to build and deploy a ground station system built on COSMOS and OpenSatKit which will allow HSL to design graphical tools and interfaces for the various equipment and tools that will go onboard the satellite. Learning COSMOS and working at HSL taught me a lot about utilizing advanced software systems (used in professional spaceflight) and cross-team communication and teamwork (to build tools and interfaces for the satellite).","images":[{"title":"Image Compression InProgress Interface","description":"COSMOS 4 UI for the Image Compression OSK application","width":626,"height":501,"src":"/COSMOS Interface/interface.png","thumbnailSrc":"/COSMOS Interface/interface-thumb.webp"}],"links":[],"embeds":[]},{"title":"Evil Hangman","subtitle":"A fun CSE 143 Assignment","year":0,"quarter":0,"text":"This CSE 143 computer science assignment was focused on a CS topic known as maps or dictionaries. Essentially, a list of correlations of things (like a word to a definition in a dictionary). While this was a topic that wasn't unfamiliar to me, I enjoyed the application and practice I got from using such a simple system to create a fun game. Evil Hangman takes the standard hangman game and twists it to make it nearly impossible to win by constantly changing the correct word based on the input the player gives. Because of my prior experiences with CS, a lot of topics covered in CSE 143 were not unfamiliar to me, but it was through the extra/targeted practice and structured assignments that I came to have a better understanding and appreciation for these concepts.","images":[],"links":[],"embeds":["https://replit.com/@kjy5/Evil-Hangman-Demo?embed=true"]},{"title":"Nautilus Renders","subtitle":"UWROV mechanical x website team project","year":0,"quarter":0,"text":"UWROV is a competition-focused club that works to build underwater remotely operated vehicles (ROVs) which will compete at the annual MATE ROV Competition. The team is composed of several distinct subgroups working together towards a common goal. Working on both the mechanical and software subgroup allowed me to gain experience with handling cross-team communications and collaborations. These images of the ROV are a collaboration between the mechanical group and software team to create improved promotional material to be featured on the club's website. Leading the effort on this project allowed me to practice facilitating planning and collaboration between the two groups to achieve the goal of highlighting the mechanical achievements of the mechanical group and improving the club's website (ran by the software group).","images":[{"title":"Nautilus","description":"","width":2000,"height":1500,"src":"/Nautilus Renders/main.webp","thumbnailSrc":"/Nautilus Renders/main-thumb.webp"},{"title":"Top Down View of ROV","description":"","width":2000,"height":1500,"src":"/Nautilus Renders/top.webp","thumbnailSrc":"/Nautilus Renders/top-thumb.webp"},{"title":"Main ROV Electronics","description":"Raspberry Pi 4 Model B and two cameras (one facing forward, another pointing at the gripper).","width":2000,"height":1500,"src":"/Nautilus Renders/front.webp","thumbnailSrc":"/Nautilus Renders/front-thumb.webp"},{"title":"ROV Gripper and Camera","description":"Magnetic coupled gripper and viewing camera (top right of picture).","width":2000,"height":1500,"src":"/Nautilus Renders/claw.webp","thumbnailSrc":"/Nautilus Renders/claw-thumb.webp"},{"title":"Propulsion Systems","description":"The ROV is driven by 6 motors. Two pairs of cross-axis mounted motors help direct movement planar-ly while a pair of vertically mounted motors provide the ROV with lift.","width":2000,"height":1500,"src":"/Nautilus Renders/side.webp","thumbnailSrc":"/Nautilus Renders/side-thumb.webp"},{"title":"Rear Electronics and Tether Port","description":"","width":2000,"height":1500,"src":"/Nautilus Renders/back.webp","thumbnailSrc":"/Nautilus Renders/back-thumb.webp"}],"links":[],"embeds":[]},{"title":"Leadership and Democracy Final Paper","subtitle":"A culmination of HONORS 231 E","year":0,"quarter":1,"text":"This final paper was a culmination of the concepts I learned in HONORS 231 E \"Leadership, Democracy, and a More Thoughtful Public\". A big emphasis in the class was the idea of \"implication\", or asking the questions \"if this were true, what would that mean for society?\" To tackle this in my final paper, I wrote a short story that played out three different propositions from the course and simulated what I believe would happen to characters and the surrounding society. Through this process I practiced a different way to communicate my thoughts (in the form of a story) and how to write creatively for an academic setting.","images":[],"links":[],"embeds":["/Leadership and Democracy Final Paper/leadership and democracy paper.pdf"]},{"title":"ROV22 Simulation Demo","subtitle":"Designing and testing ROV22","year":0,"quarter":1,"text":"As I continue my work in UWROV, I worked on another project which tied together the software and mechanical teams. To test motor configurations and movement for our new ROV design, I worked to implement CAD model designs from the mechanical team into a fluid simulator to test how they would behave. The software team could also pick up from here and run motor code directly against the ROV in the simulator to test behavior. In this project, I learned about the Gazebo simulator and sharpened my ROS, CAD, and cross-team communication skills.","images":[],"links":[],"embeds":["https://www.youtube.com/embed/ygnG9eYG1sI"]},{"title":"Starting a New Honors Portfolio Website","subtitle":"Combining my creativity and tech","year":0,"quarter":1,"text":"I love creating things am learning about new technologies along the way. My Honors Portfolio, and any other website for that matter, is a great reason to do just that! I wanted my portfolios and websites for school to reflect my technological interests as well as my creative side. To do so I learned how to utilize modern web frameworks such as React, Vite, and Three.js as well as continuous integration system like GitHub Action to both create a technologically advanced website as well as display my 3D art. As I work to build this new website, learning these modern web technologies will also let me be more useful in web development jobs and other scenarios which call for these technologies.","images":[{"title":"Early development","description":"An early photo of my portfolio website while it was in development.","width":2984,"height":1572,"src":"/Starting a New Honors Portfolio Website/splash.webp","thumbnailSrc":"/Starting a New Honors Portfolio Website/splash-thumb.webp"},{"title":"GitHub Project View","description":"Planning the features and building blocks to my portfolio website.","width":1119,"height":942,"src":"/Starting a New Honors Portfolio Website/issues board.webp","thumbnailSrc":"/Starting a New Honors Portfolio Website/issues board-thumb.webp"}],"links":[],"embeds":[]},{"title":"NASA Summer Undergraduate Research Program","subtitle":"Husky Satellite Lab summer research project ","year":0,"quarter":2,"text":"One of the greatest benefits of participating in the Husky Satellite Lab RSO is that they are funded by the NASA Space Grant. This means they send members to participate in NASA Summer Undergraduate Research Programs (SURP) without needing to go through the application process! Over the summer of 2022, I will be participating in SURP and will be in a team of 2 others working to improve upon the Star Tracker system of the Husky Satellite. The Start Tracker, LOST, is a program that can take image an image of space and use the stars in the image to calculate the attitude (orientation and position) of our satellite in space! This will be a great experience in working in small groups and on code that will be used in space!","images":[],"links":[{"url":"https://github.com/UWCubeSat/lost","title":"GitHub - UWCubeSat/lost: Lost: Open-source Star Tracker","description":"Lost: Open-source Star Tracker. Contribute to UWCubeSat/lost development by creating an account on GitHub.","imageSrc":"https://opengraph.githubassets.com/aa0427742a83624dff7908275a0e60c30011a4259727e81a2dedee25e8b3b17e/UWCubeSat/lost","faviconSrc":"https://github.githubassets.com/favicons/favicon.svg","domain":"github.com"},{"url":"https://wiki.huskysat.org/wiki/index.php/LOST_SURP_2022","title":"LOST SURP 2022 - HSL Wiki","description":"HSL SURP 2022 Wiki","imageSrc":"","faviconSrc":"https://wiki.huskysat.org/favicon.ico","domain":"wiki.huskysat.org"}],"embeds":[]},{"title":"Multimodal Composition Final Portfolio","subtitle":"Honors ENGL 182 Final Project","year":0,"quarter":2,"text":"As someone interested in computer graphics, multimodality (the study of the different modes of communication and expression) is something that greatly pertains to my studies. Computer graphics is a fascinating intersection of science and arts and understanding techniques of expression is critical in this field. My final portfolio showcases a selection of work I did over the quarter and the process I went through to revise and improve upon them. There is a big focus on metacognition, self-reflection, and revision. The writing and creative process is not a write-once throw-away activity. This portfolio shows my revision process on projects such as pamphlets about detecting counterfeit watches and 2-minute explanations of complex ideas like Monte Carlo Integration.","images":[],"links":[{"url":"https://canvas.uw.edu/eportfolios/71109","title":"Introduction: ENGL 182_Kenneth_Yang","description":"Kenneth Yang's ENGL 182 Portfolio","imageSrc":"https://canvas.uw.edu/eportfolios/71109/entries/507535/files/1psEubzLuejgtgQ1jletUF8kZwH44RPTkdQsgvqh","faviconSrc":"https://instructure-uploads.s3.amazonaws.com/account_100000000083919/attachments/37312004/favicon.ico?AWSAccessKeyId=AKIAJFNFXH2V2O7RPCAA&Expires=1939374366&Signature=lNl7iuCda9spDgRONbwVvr490LM%3D&response-cache-control=Cache-Control%3Amax-age%3D473364000.0%2C%20public&response-expires=473364000.0","domain":"canvas.uw.edu"}],"embeds":[]},{"title":"International Brain Lab Position","subtitle":"Getting a position at the Steinmetz Lab","year":0,"quarter":2,"text":"By far the most exciting event that has happened this quarter was when I was offered a position to work as an undergraduate researcher at the Steinmetz Lab. The Steinmetz Lab is the UW division of the International Brain Lab which is (as the name implies) an international network of labs working to create a better understanding of the brain. I will be mentored by Dr. Birman and will be taking on computer science projects in the field of neuroscience and technology. This is an incredibly exciting opportunity that I have been presented and I can't wait to see where this will go!","images":[],"links":[{"url":"http://www.steinmetzlab.net","title":"Steinmetz Lab","description":"Neuroscience laboratory at University of Washington, Department of Biological Structure. PI Nick Steinmetz.","imageSrc":"","faviconSrc":"http://www.steinmetzlab.net/assets/img/icons/favicon-32x32.png","domain":"www.steinmetzlab.net"},{"url":"https://www.internationalbrainlab.com","title":"International Brain Laboratory","description":"Experimental & theoretical neuroscientists collaborating to understand brainwide circuits for complex behavior","imageSrc":"http://static1.squarespace.com/static/582df1a059cc6819b296dc18/t/592eeaaf6a49639ddda83a41/1651758571936/IBL+Logo+Favicon-08.png?format=1500w","faviconSrc":"https://images.squarespace-cdn.com/content/v1/582df1a059cc6819b296dc18/1496246987212-UTCOQ78KKZ3PHMPC2GGE/favicon.ico?format=100w","domain":"www.internationalbrainlab.com"},{"url":"https://github.com/VirtualBrainLab","title":"Virtual Brain Lab · GitHub","description":"The VBL builds intuitive and interactive 3D visualizations for neuroscience. - Virtual Brain Lab","imageSrc":"https://avatars.githubusercontent.com/u/107721456?s=280&v=4","faviconSrc":"https://github.githubassets.com/favicons/favicon.svg","domain":"github.com"}],"embeds":[]},{"title":"Lab C: Colliding Carts","subtitle":"A Physics 141 lab","year":1,"quarter":0,"text":"Against popular opinion, I chose to take honors physics this year. Many people told me it would be much harder than taking normal physics, but my interest in the subject drove me to try for the honors version. It turns out I got extremely lucky and landed an excellent professor, Professor Heron, who will be teaching all three terms of the course. This particular artifact focuses on one of the labs we did. While the actual activity of the lab was pretty straightforward, writing a complete lab report was new to me as I haven't taken a lab science before. This is my first full lab report with all of the procedures, data, analysis, graphing, and conclusions compiled together into one paper. While physics in general is tough, I am still interested in pursuing the topic and learning what I can. I look forward to continuing with Professor Heron!","images":[],"links":[],"embeds":["/Lab C Colliding Carts/Lab_C_Final.pdf"]},{"title":"333gle","subtitle":"A CSE 333 project","year":1,"quarter":0,"text":"This quarter, I took CSE 333 Systems Programming. This course focuses on low-level programming and understanding many low-level operations related to the way computers and groups of computers function. Not only is the class on an important topic in computer science (and working with computers) it is also a prerequisite course for many 400-level CS courses including all of the courses on computer graphics I am the most interested in taking. This artifact focuses on the last project in the course in which all of our skills culminate into creating a web server that indexes a corpus of text and allows users to search through them with keywords, similar to the way Google works with the internet. I learned a lot about what goes on at the core of handling files on computers and how to serve websites from a computer onto the network and handle multiple users connecting to the server. I will be taking a lot of these core skills into my next CS courses as I begin to take 400-level classes.","images":[{"title":"333gle","description":"333gle home page","width":2868,"height":2048,"src":"/333gle/333gle.webp","thumbnailSrc":"/333gle/333gle-thumb.webp"},{"title":"Hello World","description":"Search results for \"Hello World\"","width":2868,"height":2048,"src":"/333gle/hello world.webp","thumbnailSrc":"/333gle/hello world-thumb.webp"},{"title":"Buffalo","description":"Search results for \"Buffalo\"","width":2868,"height":2048,"src":"/333gle/buffalo.webp","thumbnailSrc":"/333gle/buffalo-thumb.webp"},{"title":"Moby Dick Text","description":"Search results for \"Moby Dick\"","width":2868,"height":2048,"src":"/333gle/moby dick text.webp","thumbnailSrc":"/333gle/moby dick text-thumb.webp"}],"links":[],"embeds":[]},{"title":"Research Experiential Learning Activity","subtitle":"Pinpoint: electrophysiology planning tool ","year":1,"quarter":0,"text":"Over the summer I got to start working in the Virtual Brain Lab, a group within the Steinmetz Lab for neuroscience at the University of Washington led by Dr. Dan Birman. I got the amazing opportunity to exercise my CS skills in an environment that had real impacts on the wider neuroscience community. My work continued through the fall quarter as an experiential learning activity. Thus far, I've learned so much from this project including working in teams, presenting my developments to peers, and receiving feedback from other neuroscience experts from around the world. My work was shared at the 2022 Society for Neuroscience (SfN) conference, one of the largest neuroscience conferences held annually. We gained a lot of interest in our development of Pinpoint including new partner companies such as New Scale who are interested in using our tools for their electrophysiology equipment. I look forward to continuing working in the Steinmetz Lab and developing Pinpoint!","images":[],"links":[],"embeds":["https://www.youtube.com/embed/E089tbBpVE8"]},{"title":"NQN Hackathon","subtitle":"Winning a hackathon about quantum computing","year":1,"quarter":1,"text":"Participating in the Microsoft-hosted hackathon at the University of Washington on quantum computing was an unforgettable experience for me and my friends. We were eager to explore this fascinating way of computing, and we teamed up to build a program that could separate an image's foreground from its background (also known as image segmentation). Image segmentation is a theoretically challenging task for conventional computers, but for quantum computers, it is an easy task. We had to learn a lot about quantum computers on the fly, and it was a frantic race to finish our project before the deadline. However, all our hard work paid off when we found out that out of the 75 participating teams, we were one of the three winning teams! It was an incredible feeling to see our project come to life and receive recognition for it. Check out our project on GitHub!","images":[],"links":[{"url":"https://github.com/KuhnTycoon/EyeQ","title":"GitHub - KuhnTycoon/EyeQ","description":"Contribute to KuhnTycoon/EyeQ development by creating an account on GitHub.","imageSrc":"https://opengraph.githubassets.com/4d5214db98cc98fd23ad0e44604703a46fefd8f2de3e577d938a74270b54b7b4/KuhnTycoon/EyeQ","faviconSrc":"https://github.githubassets.com/favicons/favicon.svg","domain":"github.com"}],"embeds":[]},{"title":"Digital Cinema Production Final","subtitle":"A fun final project for a fun class","year":1,"quarter":1,"text":"I am incredibly grateful for the opportunity to have taken DRAMA 406 as someone who is deeply interested in computer graphics. This class was able to deliver me an invaluable education on how real filmography works. Throughout the course, I learned many practical filmmaking techniques and gained a deeper understanding of the science behind how cameras worked. For my final project, I wanted to showcase a blending of my passion for VFX with the live-action techniques that were taught in class. It was a challenging but rewarding experience to bring these two worlds together. Although I always feel like there is room for improvement in my work, I am happy with what I was able to accomplish during the limited timeframe of finals week.","images":[],"links":[],"embeds":["https://www.youtube.com/embed/h31nKON_0rI"]},{"title":"Mary Gates Research Scholarship","subtitle":"Funding my work in the Virtual Brain Lab","year":1,"quarter":1,"text":"During the fall quarter, my lab mentor, Dr. Birman, suggested that I apply for the Mary Gates Research Scholarship. I eagerly applied, but unfortunately, I was not selected as a recipient. Though it was disappointing, I was determined to try again. I sought feedback from the scholarship committee and visited several writing centers to gather advice on improving my application. I dedicated myself to improving my application and waited for the Winter application cycle to arrive. After my second application, I was granted the scholarship! This success has given me a renewed sense of confidence and determination to continue my research and make an impact in my field. I am glad my mentor encouraged me to apply again and not give up after the first failure. Below is the essay that earned me the Mary Gates Research Scholarship.","images":[],"links":[],"embeds":["/Mary Gates Research Scholarship/Wi23_Kenneth_Mary_Gates_Research_Scholarship.pdf"]},{"title":"CSE 457 Computer Graphics Final","subtitle":"A Unity game simulating lasers","year":1,"quarter":2,"text":"For my final project in CSE 457 Computer Graphics, I collaborated with a team to develop a game that combined elements from Fire Boy & Water Girl, and Portal. The game's central mechanic revolved around the physical simulation of lasers, mirrors, and prisms. It was an enjoyable experience to explore these concepts both in my computer graphics and physics classes and then integrate them into a cohesive gameplay experience. To truly appreciate the game's dynamics, I recommend watching the demo below, as it captures the essence of the game and its exciting features.","images":[],"links":[{"url":"https://github.com/julialwang/graphicsgame","title":"GitHub - julialwang/Alight: A 3D first-person puzzle game where players use mirrors and rigidbody physics to escape a deep well. They must use blocks and redirect laser beams to climb their way out.","description":"A 3D first-person puzzle game where players use mirrors and rigidbody physics to escape a deep well. They must use blocks and redirect laser beams to climb their way out. - GitHub - julialwang/Alight: A 3D first-person puzzle game where players use mirrors and rigidbody physics to escape a deep well. They must use blocks and redirect laser beams to climb their way out.","imageSrc":"https://opengraph.githubassets.com/7a73f4117279e4013ffed2252224a31b3c1d40f1f2ea87b240b94544a8cbff23/julialwang/Alight","faviconSrc":"https://github.githubassets.com/favicons/favicon.svg","domain":"github.com"}],"embeds":["https://www.youtube.com/embed/ruw6Ttrah-8"]},{"title":"DXARTS 200 Final Artifact","subtitle":"A functional, kinetic, installation","year":1,"quarter":2,"text":"In addition to my Computer Science degree, I am pursuing a minor in Digital Arts and Experimental Media (DXARTS) to broaden my knowledge and skills. As part of this program, I have developed a project proposal that combines technology and art in a unique way. In my perspective, art can be aesthetically pleasing and serve a practical purpose. My proposal focuses on upgrading the directory maps scattered throughout the campus into a mesmerizing kinetic art piece. This project proposal, which is provided below, outlines the details and vision of this functional art installation.","images":[],"links":[],"embeds":["/DXARTS 200 Final Artifact/Campus Flow.pdf"]},{"title":"Undergraduate Research Symposium 2023","subtitle":"Presenting my in the Virtual Brain Lab","year":1,"quarter":2,"text":"As a recipient of the Mary Gates Research scholarship, I had the opportunity to showcase my work at the annual Undergraduate Research Symposium. It was my first time presenting a poster on my own, and although I was initially nervous, I discovered a newfound enjoyment in presenting and sharing my research with others. The response from fellow scientists and inquisitive undergraduates was incredibly positive, as they showed genuine interest in my work. This experience allowed me to refine my skills in creating scientific posters and conducting physical demonstrations. Additionally, I had the chance to present my research at the Computer Science Research Symposium a few weeks later, reaching an even wider audience. Below is my poster, which is also on display in the health sciences building.","images":[],"links":[],"embeds":["/Undergraduate Research Symposium/Kenneth Yang Research Symposium 2023.pdf"]},{"title":"SfN 2023","subtitle":"Presenting my research at one of the biggest neuroscience conferences in the US","year":2,"quarter":0,"text":"I had a great opportunity to showcase my research in the Steinmetz Lab at the Society for Neuroscience (SfN) 2023 conference in D.C. this quarter. My poster focused on my work to create automation tools for electrophysiology experiments. I also demonstrated my software live at a demo session and at two exhibits with our partner companies (Sensapex and New Scale). It was an amazing experience to interact with leading researchers from around the world and to get feedback on my work. Many labs around the world are now eager to use my software in their own experiments. I will be collaborating with them over the winter quarter of 2023-2024 to help them set up my tools. You can see my poster from the demo below!","images":[],"links":[],"embeds":["/SfN 2023/yang_sfn23-1.0.3-opt.pdf"]},{"title":"3D Slicing","subtitle":"Learning the software technique used in design and fabrication","year":2,"quarter":0,"text":"This assignment for CSE 493H Computation Design & Fabrication was very interesting and educational for me. I learned a lot about the theory and practice of design and how computers can help with that. One of the topics we covered was 3D printing, which is a technique that creates physical objects from digital models. To do this, the computer has to slice the 3D model into thin 2D layers that are then printed on top of each other to form the final shape. I wrote some code that can do this slicing process for any 3D model. Another topic we learned was sheet-metal fabrication, which is a process that cuts and bends metal sheets into different shapes. We also learned how to create a design-specific language (DSL) that can simplify the specification of sheet-metal designs. A DSL is a language that is tailored to a specific domain and uses terms and concepts that are relevant to it. I coded a DSL for sheet-metal fabrication and used it to design a pizza box that can be folded from a single sheet of paper. You can see the details of my work in the writeup below.","images":[],"links":[],"embeds":["/3D Slicing/slicing writeup-opt.pdf"]},{"title":"CSE 340 Final Project","subtitle":"Creating a reactive framework in a game engine","year":2,"quarter":0,"text":"For my final project, I decided to create a fun choose your own adventure game in just one week. The game is based on a topic we learned about in the course: reactive frameworks. These are frameworks that automatically update the user interface based on the changes to the data or state. Most game engines are not reactive, meaning they require manual updates and rendering. However, I implement a reactive framework in the game engine Godot, which made the development of other parts of the game much easier. The game is a choose your-own-adventure style game where the player controls a stick figure that goes through a story with different choices and outcomes. I also used some concepts I learned in the animation courses over the summer to make the game more engaging and dynamic. You can check out the game in the link below and see how it works!","images":[],"links":[{"url":"https://drive.google.com/drive/folders/1wihUJ7jWzD_7F5U-Gywm7E41n3kI-9Tu","title":"Release Binaries - Google Drive","description":"","imageSrc":"","faviconSrc":"https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png","domain":"drive.google.com"}],"embeds":[]}]
\ No newline at end of file
diff --git a/src/utils/artifact-metas.ts b/src/utils/artifact-metas.ts
new file mode 100644
index 0000000..53f3068
--- /dev/null
+++ b/src/utils/artifact-metas.ts
@@ -0,0 +1,6 @@
+import { ArtifactMetas } from '../models/artifact-meta-models.ts';
+import artifactMetasString from '../models/artifact-metas.json?raw';
+
+const artifactMetas: ArtifactMetas = JSON.parse(artifactMetasString) as ArtifactMetas;
+
+export default artifactMetas;