sync

package.json

@@ -6,6 +6,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "serve": "^14.2.4",
     "swiper": "^10.0.0"
   },
   "devDependencies": {
@@ -15,7 +16,7 @@
   "version": "0.0.1",
   "scripts": {
     "build": "vite build",
-    "dev": "vite",
-    "start": "vite"
+    "dev": "vite --host",
+    "start": "vite --host"
   }
 }

src/App.jsx

@@ -37,7 +37,7 @@ export default function App() {
     {
       title: "One AI",
       description: "ASDF",
-      image: "/images/projects/one-ai.png",
+      image: "/images/one-ai-cropped.png",
       imageGallery: null,
       url: "https://github.com/quaxlyqueen/one-ai",
     },

src/components/ProjectCard.jsx

@@ -15,7 +15,9 @@ export default function ProjectCard({
       <div className="project-text">
         <div className="row">
           <h3 className="project-header">{title}</h3>
+          <a href={url} target="_blank">
             <FontAwesomeIcon icon={faGithub} />
+          </a>
         </div>
         <p>{description}</p>
       </div>

src/main.css

@@ -105,11 +105,14 @@ body {
   column-gap: 20vw;
 }
 
+.project-card img {
+  height: 100%;
+}
+
 .project-text {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 20% 70%;
-  align-text: left;
 }
 
 .project-text h3 {
@@ -445,7 +448,6 @@ body {
     grid-template-columns: 100%;
     grid-template-rows: 30% 30% 30%;
     column-gap: 0;
-    padding: 30px;
   }
 
   .card {