diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000..6ed86e1 Binary files /dev/null and b/public/favicon.png differ diff --git a/public/index.html b/public/index.html index 98a9a33..524ab2b 100644 --- a/public/index.html +++ b/public/index.html @@ -10,7 +10,12 @@ - Cole Thompson + + + Cole Thompson | Portfolio + + + diff --git a/src/components/ProjectContainer/ProjectContainer.css b/src/components/ProjectContainer/ProjectContainer.css index 538939d..7ec4f16 100644 --- a/src/components/ProjectContainer/ProjectContainer.css +++ b/src/components/ProjectContainer/ProjectContainer.css @@ -1,10 +1,13 @@ .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 { @@ -12,19 +15,21 @@ } .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); @@ -32,4 +37,51 @@ .project .link--icon { margin-left: 0.5em; -} \ No newline at end of file +} + +.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 index e0afb1d..4735915 100644 --- 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 }) => ( -
-

{project.name}

+const ProjectContainer = ({ project }) => { + const [currentImage, setCurrentImage] = useState(0); -

{project.description}

- {project.stack && ( - - )} + const handleDotClick = (index) => { + setCurrentImage(index); + }; - {project.sourceCode && ( - - - - )} + // Determine if the project is 'PlateMate' + const isMobileApp = project.name === 'PlateMate'; - {project.livePreview && ( - - - - )} -
-) + return ( +
+
+

{project.name}

+

{project.description}

+ {project.stack && ( + + )} -export default ProjectContainer \ No newline at end of file + {project.sourceCode && ( + + + + )} + + {project.livePreview && ( + + + + )} +
+
+ {project.images && project.images.length > 0 && ( + <> + Demo +
+ {project.images.map((_, index) => ( + handleDotClick(index)} + > + ))} +
+ + )} +
+
+ ); +}; + +export default ProjectContainer; diff --git a/src/components/Projects/Projects.css b/src/components/Projects/Projects.css index 01b671f..abce3dd 100644 --- 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; - } \ No newline at end of file + max-width: 100%; + margin: 0 auto; + margin-top: 4em; + display: grid; + grid-template-columns: 1fr; /* One column layout */ + grid-gap: 2em; +} \ No newline at end of file diff --git a/src/contexts/ball1.png b/src/contexts/ball1.png new file mode 100644 index 0000000..a0dc7b4 Binary files /dev/null and b/src/contexts/ball1.png differ diff --git a/src/contexts/chat1.png b/src/contexts/chat1.png new file mode 100644 index 0000000..17f1f46 Binary files /dev/null and b/src/contexts/chat1.png differ diff --git a/src/contexts/chat2.png b/src/contexts/chat2.png new file mode 100644 index 0000000..23b0d1d Binary files /dev/null and b/src/contexts/chat2.png differ diff --git a/src/contexts/chat3.png b/src/contexts/chat3.png new file mode 100644 index 0000000..b15db1e Binary files /dev/null and b/src/contexts/chat3.png differ diff --git a/src/contexts/firecrest1.png b/src/contexts/firecrest1.png new file mode 100644 index 0000000..823ca3a Binary files /dev/null and b/src/contexts/firecrest1.png differ diff --git a/src/contexts/firecrest2.png b/src/contexts/firecrest2.png new file mode 100644 index 0000000..496706a Binary files /dev/null and b/src/contexts/firecrest2.png differ diff --git a/src/contexts/firecrest3.png b/src/contexts/firecrest3.png new file mode 100644 index 0000000..fc813c3 Binary files /dev/null and b/src/contexts/firecrest3.png differ diff --git a/src/contexts/firecrest4.png b/src/contexts/firecrest4.png new file mode 100644 index 0000000..89da76c Binary files /dev/null and b/src/contexts/firecrest4.png differ diff --git a/src/contexts/plate1.png b/src/contexts/plate1.png new file mode 100644 index 0000000..390bfb8 Binary files /dev/null and b/src/contexts/plate1.png differ diff --git a/src/contexts/plate2.png b/src/contexts/plate2.png new file mode 100644 index 0000000..30c4e09 Binary files /dev/null and b/src/contexts/plate2.png differ diff --git a/src/contexts/search1.png b/src/contexts/search1.png new file mode 100644 index 0000000..55ce4ef Binary files /dev/null and b/src/contexts/search1.png differ diff --git a/src/contexts/search2.png b/src/contexts/search2.png new file mode 100644 index 0000000..556d506 Binary files /dev/null and b/src/contexts/search2.png differ diff --git a/src/portfolio.js b/src/portfolio.js index 9df5e70..484e2c1 100644 --- 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 + ] }, ]