mostly implemented project card.

src/App.jsx

@@ -36,7 +36,17 @@ export default function App() {
   const projectData = [
     {
       title: "One AI",
-      description: "ASDF",
+      descriptionA:
+        "An end-to-end self-hosted Artificial Intelligence solution, using Meta's Ollama platform to run Large Language Models. Go was used for the backend as a wrapper API and the frontend is Flutter, for its write once, build anywhere ideology. Here are some of the implemented features:",
+      featureList: [
+        "user authentication",
+        "AES encryption",
+        "SHA-256 hashing",
+        "file uploads in Base64",
+        "dynamic LLM routing",
+        "user configuration",
+        "configuration files",
+      ],
       image: "/images/one-ai-cropped.png",
       imageGallery: null,
       url: "https://github.com/quaxlyqueen/one-ai",

src/Projects.jsx

@@ -19,7 +19,8 @@ export default function Projects({ cardData }) {
             {cardData.map((c) => (
               <ProjectCard
                 title={c.title}
-                description={c.description}
+                descriptionA={c.descriptionA}
+                featureList={c.featureList}
                 image={c.image}
                 imageGallery={c.imageGallery}
                 url={c.url}

src/components/ProjectCard.jsx

@@ -4,22 +4,35 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
 
 export default function ProjectCard({
   title,
-  description,
+  descriptionA,
+  featureList,
   image,
   imageGallery,
   url,
 }) {
   return (
     <div className="project-card">
-      <img src={image} />
+      <div className="img-container">
-      <div className="project-text">
+        <img src={image} />
-        <div className="row">
+      </div>
+      <div className="project-text-column">
+        <div className="project-text">
           <h3 className="project-header">{title}</h3>
-          <a href={url} target="_blank">
+          <p>{descriptionA}</p>
-            <FontAwesomeIcon icon={faGithub} />
+          <div className="row">
-          </a>
+            <ul className="feature-list">
+              {featureList.map((item) => (
+                <li>{item}</li>
+              ))}
+            </ul>
+          </div>
+          <div className="button">
+            <a className="view-button-link" href={url} target="_blank">
+              View on GitHub
+              <FontAwesomeIcon icon={faGithub} />
+            </a>
+          </div>
         </div>
-        <p>{description}</p>
       </div>
     </div>
   );

src/main.css

@@ -97,26 +97,57 @@ body {
 }
 
 .project-card {
-  background-color: #ebd2ff;
   height: 70%;
   display: grid;
-  grid-template-columns: 40% 40%;
+  grid-template-columns: 50% 50%;
   grid-template-rows: 100%;
-  column-gap: 20vw;
+  overflow: hidden;
+  width: 100%;
+}
+
+.project-card .img-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 .project-card img {
   height: 100%;
+  box-shadow:
+    0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
+    0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
+    0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
+}
+
+.project-text-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 5vw;
+  background-color: #4A245E;
+  box-shadow:
+    0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
+    0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
+    0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
 }
 
 .project-text {
   display: grid;
+  width: 100%;
+  height: 100%;
   grid-template-columns: 100%;
-  grid-template-rows: 20% 70%;
+  grid-template-rows: 20% 35% 40% 10%;
 }
 
 .project-text h3 {
-  font-size: clamp(2rem, 2.5vw, 3rem);
+  font-size: clamp(3rem, 3.5vw, 4rem);
+  color: #eBD2FF;
+}
+
+.project-text p {
+  font-size: clamp(1rem, 1.5vw, 2rem);
+  color: #eBD2FF;
 }
 
 .row {
@@ -125,12 +156,23 @@ body {
   justify-content: center;
 }
 
+.row {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 #project-cards-section {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
+.feature-list {
+}
+
+
 #header {
   width: 100%;
   overflow: hidden;
@@ -305,11 +347,45 @@ body {
   text-align: left;
 }
 
-.card .skill-section-header h3 {
+.card .skill-section-header h3,
+.project-header {
   font-size: clamp(1rem, 2vw, 3rem);
+}
+
+.card .skill-section-header h3 {
   color: #ebd2ff;
 }
 
+.project-header {
+  color: #4A245E;
+}
+
+.socials {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1vw;
+  background-color: #ebd2ff;
+}
+
+.view-button-link {
+  display: grid;
+  grid-template-rows: 100%;
+  grid-template-columns: 60% 30%;
+  column-gap: 10vw;
+  font-size: clamp(1.5rem, 2vw, 3rem);
+  color: #4A245E;
+  text-decoration: none;
+}
+
 .card ul {
   padding: 1vw;
 }
@@ -406,7 +482,7 @@ body {
   }
 
   #header-text {
-    padding-left: 0px;
+    padding-left: 60px;
   }
 }