feat: add images next to projects

colet0227 · May 2, 2024 · 7470432 · 7470432
1 parent 3430506
commit 7470432
Show file tree

Hide file tree

Showing 18 changed files with 171 additions and 50 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -10,7 +10,12 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
-    <title>Cole Thompson</title>
+
+
+    <title>Cole Thompson | Portfolio</title>
+    <link rel="icon" type="image/png" href="favicon.png">
+
+
   </head>
   <body style = "margin: 0">
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/ProjectContainer/ProjectContainer.css b/src/components/ProjectContainer/ProjectContainer.css
@@ -1,35 +1,87 @@
 .project {
+  display: flex;
+  align-items: flex-start; /* Ensure top alignment */
+  justify-content: space-between; /* Keep items spaced out */
   padding: 2em;
   margin: 0 auto;
-  text-align: center;
   box-shadow: var(--shadow);
   transition: transform 0.2s linear;
   background-color: var(--clr-bg);
+  overflow: hidden; /* Hide any overflow */
 }
 
 .project:hover {
   transform: translateY(-7px);
 }
 
 .project__description {
-  margin-top: 1em;
+  flex: 1; /* Gives text a flexible width, but not as wide as images */
+  text-align: left; /* Align text to the left */
+  margin-right: 20px; /* Space between text and image */
 }
 
 .project__stack {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start; /* Align stack items at the start */
   margin: 1.2em 0;
 }
 
 .project__stack-item {
-  line-height: .5;
-  margin: .75em;
+  line-height: 1.5; /* Improved readability */
+  margin: 0.75em; /* Consistent margin */
   font-weight: 500;
   font-size: 0.8rem;
   color: var(--clr-fg-alt);
 }
 
 .project .link--icon {
   margin-left: 0.5em;
-}
+}
+
+.project__demo {
+  flex: 1; /* Gives the image area flexible width up to half of the container */
+  width: 50%; /* Explicitly define width to half of the container */
+  text-align: center; /* Center the image or video */
+}
+
+.project__demo img {
+  margin-top: 30px;
+  width: 100%; /* Full width of its container */
+  height: auto; /* Maintain aspect ratio */
+  max-height: 600px; /* Control maximum height */
+  border-radius: 10px;
+  border: .25px solid gray;
+}
+
+.project__dots {
+  text-align: center;
+  padding: 10px 0;
+}
+
+.dot {
+  height: 10px;
+  width: 10px;
+  margin: 0 5px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.dot.active {
+  background-color: #717171;
+}
+
+
+.project__demo.mobile-app img {
+  max-width: 30%; /* Keep the width adjustment for mobile app specific styling */
+  height: 300px; /* Ensure mobile app images also have the same height */
+  object-fit: cover; /* Adjusts the content of the image to fit the container */
+}
+
+
+.project__demo.mobile-app {
+  align-self: center; /* Center the demo in the container */
+}
+
diff --git a/src/components/ProjectContainer/ProjectContainer.js b/src/components/ProjectContainer/ProjectContainer.js
@@ -1,43 +1,72 @@
-import uniqid from 'uniqid'
+import uniqid from 'uniqid';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LaunchIcon from '@mui/icons-material/Launch';
-import './ProjectContainer.css'
+import { useState } from 'react';
+import './ProjectContainer.css';
 
-const ProjectContainer = ({ project }) => (
-  <div className='project'>
-    <h3>{project.name}</h3>
+const ProjectContainer = ({ project }) => {
+  const [currentImage, setCurrentImage] = useState(0);
 
-    <p className='project__description'>{project.description}</p>
-    {project.stack && (
-      <ul className='project__stack'>
-        {project.stack.map((item) => (
-          <li key={uniqid()} className='project__stack-item'>
-            {item}
-          </li>
-        ))}
-      </ul>
-    )}
+  const handleDotClick = (index) => {
+    setCurrentImage(index);
+  };
 
-    {project.sourceCode && (
-      <a
-        href={project.sourceCode}
-        aria-label='source code'
-        className='link link--icon'
-      >
-        <GitHubIcon />
-      </a>
-    )}
+  // Determine if the project is 'PlateMate'
+  const isMobileApp = project.name === 'PlateMate';
 
-    {project.livePreview && (
-      <a
-        href={project.livePreview}
-        aria-label='live preview'
-        className='link link--icon'
-      >
-        <LaunchIcon />
-      </a>
-    )}
-  </div>
-)
+  return (
+    <div className='project'>
+      <div className='project__description'>
+        <h3>{project.name}</h3>
+        <p>{project.description}</p>
+        {project.stack && (
+          <ul className='project__stack'>
+            {project.stack.map((item) => (
+              <li key={uniqid()} className='project__stack-item'>
+                {item}
+              </li>
+            ))}
+          </ul>
+        )}
 
-export default ProjectContainer
+        {project.sourceCode && (
+          <a
+            href={project.sourceCode}
+            aria-label='source code'
+            className='link link--icon'
+          >
+            <GitHubIcon />
+          </a>
+        )}
+
+        {project.livePreview && (
+          <a
+            href={project.livePreview}
+            aria-label='live preview'
+            className='link link--icon'
+          >
+            <LaunchIcon />
+          </a>
+        )}
+      </div>
+      <div className={`project__demo ${isMobileApp ? 'mobile-app' : ''}`}>
+        {project.images && project.images.length > 0 && (
+          <>
+            <img src={project.images[currentImage]} alt='Demo' />
+            <div className='project__dots'>
+              {project.images.map((_, index) => (
+                <span
+                  key={index}
+                  className={`dot ${index === currentImage ? 'active' : ''}`}
+                  onClick={() => handleDotClick(index)}
+                ></span>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectContainer;
diff --git a/src/components/Projects/Projects.css b/src/components/Projects/Projects.css
@@ -1,7 +1,8 @@
 .projects__grid {
-    max-width: 1100px;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
-    grid-gap: 2em;
-  }
+  max-width: 100%;
+  margin: 0 auto;
+  margin-top: 4em;
+  display: grid;
+  grid-template-columns: 1fr; /* One column layout */
+  grid-gap: 2em;
+}
diff --git a/src/contexts/ball1.png b/src/contexts/ball1.png
diff --git a/src/contexts/chat1.png b/src/contexts/chat1.png
diff --git a/src/contexts/chat2.png b/src/contexts/chat2.png
diff --git a/src/contexts/chat3.png b/src/contexts/chat3.png
diff --git a/src/contexts/firecrest1.png b/src/contexts/firecrest1.png
diff --git a/src/contexts/firecrest2.png b/src/contexts/firecrest2.png
diff --git a/src/contexts/firecrest3.png b/src/contexts/firecrest3.png
diff --git a/src/contexts/firecrest4.png b/src/contexts/firecrest4.png
diff --git a/src/contexts/plate1.png b/src/contexts/plate1.png
diff --git a/src/contexts/plate2.png b/src/contexts/plate2.png
diff --git a/src/contexts/search1.png b/src/contexts/search1.png
diff --git a/src/contexts/search2.png b/src/contexts/search2.png
diff --git a/src/portfolio.js b/src/portfolio.js
@@ -1,5 +1,17 @@
 import aboutpic from "./contexts/updated.jpeg"
 import res from "./contexts/Resume.pdf"
+import firecrest1 from "./contexts/firecrest1.png"
+import firecrest2 from "./contexts/firecrest2.png"
+import firecrest3 from "./contexts/firecrest3.png"
+import firecrest4 from "./contexts/firecrest4.png"
+import search1 from "./contexts/search1.png"
+import search2 from "./contexts/search2.png"
+import chat1 from "./contexts/chat1.png"
+import chat2 from "./contexts/chat2.png"
+import chat3 from "./contexts/chat3.png"
+import plate1 from "./contexts/plate1.png"
+import plate2 from "./contexts/plate2.png"
+import ball1 from "./contexts/ball1.png"
 
 const header = {
   // all the properties are optional - can be left empty or deleted
@@ -27,10 +39,14 @@ const projects = [
   {
     name: 'Search Engine and Web Crawler',
     description:
-      'Designed a custom web search engine with the ability to handle 50,000+ documents under harsh operational constraints while maintaining a query response time under 300ms. Incorporated partial indexing to save memory usage and leveraged the Snowball Stemmer for better textual matches. Improved ranking accuracy for a subset of the UCI web domain through tf-idf scoring and cosine similarity in addition to assigning weights for HTML tags. Used sim-hashing to detect near duplicate pages.',
+      'Designed a custom web search engine with the ability to handle 50,000+ documents under harsh operational constraints while maintaining a query response time under 100ms. Incorporated partial indexing to save memory usage and leveraged the Snowball Stemmer for better textual matches. Improved ranking accuracy for a subset of the UCI web domain through tf-idf scoring and cosine similarity in addition to assigning weights for HTML tags. Used sim-hashing to detect near duplicate pages.',
     stack: ['Beautiful Soup', 'Python', 'Flask', 'HTML', 'CSS', 'NLTK', 'Hashlib', 'Git'],
     sourceCode: 'https://github.com/colet0227/Search_Engine',
     livePreview: '',
+    images: [
+      search1,
+      search2
+    ]
   },
   {
     name: 'Firecrest',
@@ -39,6 +55,12 @@ const projects = [
     stack: ['HTML', 'CSS', 'JavaScript', 'SQL', 'Python', 'React', 'Flask', 'PostgreSQL', 'LangChain', 'Render', 'Git'],
     sourceCode: '',
     livePreview: 'https://firecrestai.com/',
+    images: [
+      firecrest1,
+      firecrest2,
+      firecrest3,
+      firecrest4
+    ]
   },
   {
     name: 'GUI Chat Application',
@@ -47,6 +69,11 @@ const projects = [
     stack: ['Python', 'Tkinter', 'Git'],
     sourceCode: 'https://github.com/colet0227/Messenger-App-Tkinter',
     livePreview: '',
+    images: [
+      chat1,
+      chat2,
+      chat3
+    ]
   },
   {
     name: 'PlateMate',
@@ -55,6 +82,10 @@ const projects = [
     stack: ['Xcode', 'Swift', 'Python', 'FastAPI', 'Git'],
     sourceCode: 'https://github.com/colet0227/PlateMate',
     livePreview: 'https://devpost.com/software/platemate-3mdz2x',
+    images: [
+      plate1,
+      plate2
+    ]
   },
   {
     name: 'Ball Simulation',
@@ -63,6 +94,9 @@ const projects = [
     stack: ['Python', 'Tkinter', 'Git'],
     sourceCode: 'https://github.com/colet0227/Ball-Simulation',
     livePreview: '',
+    images: [
+      ball1
+    ]
   },
 
 ]