add projects

src/Pages/Projects.tsx

@@ -1,14 +1,13 @@
 import { styled } from 'styled-components'
 import ProjectList from '../ProjectList/ProjectList'
-import BackLink from '../components/BackLink'
 import { PROJECTS } from '../constants'
 
 const StyledMain = styled.div`
   position: relative;
   margin: auto;
   margin-top: 8rem;
 
-  max-width: 768px;
+  max-width: 858px;
 `
 
 const Projects = () => {
@@ -17,7 +16,6 @@ const Projects = () => {
       <h2>
         <code>/projects</code>
       </h2>
-      <BackLink />
 
       <ProjectList projects={PROJECTS} />
     </StyledMain>

src/ProjectList/ProjectTile.tsx

@@ -14,7 +14,7 @@ const StyledProjectWrapper = styled.div`
   overflow: hidden;
   box-sizing: border-box;
   background-color: #f7f6f38c;
-  border: 2px solid #6E1FEB;
+  border: 2px solid #6e1feb;
   margin-bottom: 20px;
   padding: 10px;
 `
@@ -65,6 +65,10 @@ const IconHolder = styled.div`
   margin: 0;
   user-select: none;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   img {
     width: 100%;
     height: 100%;
@@ -77,6 +81,11 @@ const ProjectTitle = styled.p<{ hasURL?: boolean }>`
   color: ${SECONDARY_COLOR};
   white-space: nowrap;
 
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 150px;
+  white-space: nowrap;
+
   &:hover {
     text-decoration: ${({ hasURL }) => (hasURL ? 'underline' : 'none')};
   }
@@ -142,7 +151,7 @@ const ProjectTile = ({
             {icon ? (
               <img src={icon} alt={title} draggable={false} />
             ) : (
-              <Placeholder size={'25px'} />
+              <Placeholder size={'25px'} hideBorder />
             )}
           </IconHolder>
         </SketchLines>

src/components/Placeholder.tsx

@@ -1,11 +1,20 @@
 import { SKETCH_COLOR } from '../constants'
 
-const Placeholder = ({ size }: { size: string }) => {
+const Placeholder = ({
+  size,
+  hideBorder,
+}: {
+  size: string
+  hideBorder?: boolean
+}) => {
   return (
     <svg
       width={size}
       height={size}
-      style={{ display: 'block', border: `1px solid ${SKETCH_COLOR}` }}
+      style={{
+        display: 'block',
+        border: hideBorder ? 'none' : `1px solid ${SKETCH_COLOR}`,
+      }}
       viewBox="0 0 64 64"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">

src/constants.ts

@@ -115,7 +115,7 @@ export const PROJECTS: Project[] = [
     creators: [
       {
         name: 'Kyle Winn',
-        avatarURL: 'https://unavatar.io/github/fast-fingers',
+        avatarURL: 'https://unavatar.io/github/Kyle-Winn',
         contactURL: 'https://www.linkedin.com/in/kyle-winn-201783260/',
       },
     ],
@@ -125,4 +125,74 @@ export const PROJECTS: Project[] = [
     media: './media/projects/landho.mp4',
     icon: './media/projects/landho.png',
   },
+  {
+    id: 6,
+    title: 'AI Gomoku',
+    creators: [
+      {
+        name: 'Cosmo',
+        avatarURL: 'https://unavatar.io/github/cosmobobak',
+        contactURL: 'https://cosmo.tardis.ac/',
+      },
+    ],
+    description:
+      "Gomoku is a strategy board game that's easy to learn but hard to master. Watch an AI agent self play hundreds of games!",
+    media: './media/projects/ai-gomoku.mp4',
+  },
+  {
+    id: 7,
+    title: 'Portfolio Website',
+    creators: [
+      {
+        name: 'Roberta Pošiūnaitė',
+        avatarURL: 'https://unavatar.io/github/dprRoberta',
+        contactURL: 'https://robertaposiunaite.com/',
+      },
+    ],
+    description:
+      "Hey there! Welcome to my little corner of the digital world. I'm a Lithuanian currently pursuing a Computer Science degree at the University of Edinburgh. I'm dedicated to honing my skills, solving challenges, and crafting digital solutions that make a difference. Join me in this coding adventure and have a look around!",
+    projectURL: 'https://robertaposiunaite.com/',
+    media: './media/projects/roberta-posiunaite.mp4',
+    icon: './media/projects/roberta-posiunaite.png',
+  },
+  {
+    id: 8,
+    title: 'Wee Wonders',
+    creators: [
+      {
+        name: 'nkdem',
+        avatarURL: 'https://unavatar.io/github/nkdem',
+        contactURL: 'https://github.com/nkdem',
+      },
+      {
+        name: 'Danny Pinkney',
+        avatarURL: 'https://unavatar.io/github/danny88o',
+        contactURL: 'https://github.com/danny88o',
+      },
+      {
+        name: 'Khalid',
+        avatarURL: 'https://unavatar.io/github/khalidbelhadj',
+        contactURL: 'https://github.com/khalidbelhadj',
+      },
+    ],
+    description:
+      "Wee Wonders is an interactive children's story book application which uses eye tracking for controls. Look to the left and right to flip the pages of the book and read a story.",
+    media: './media/projects/eye-tracking-page-flip.mp4',
+  },
+  {
+    id: 9,
+    title: 'Flatmouse',
+    creators: [
+      {
+        name: 'Caterina Mammola',
+        avatarURL: 'https://unavatar.io/github/Cat2005',
+        contactURL: 'https://www.linkedin.com/in/caterina-m/',
+      },
+    ],
+    description:
+      'FlatMouse was created to empower students to share their flat experiences so that future tenants may be alerted to potential issues.',
+    projectURL: 'https://www.flatmouse.co.uk/',
+    media: './media/projects/flatmouse.mp4',
+    icon: './media/projects/flatmouse.png',
+  },
 ].reverse()