feat: redesigned project cards

adriancleung · Oct 26, 2024 · b60c137 · b60c137
1 parent eadf6c1
commit b60c137
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 48 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -21,5 +21,5 @@
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#1d1d1f"
 }
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
@@ -4,7 +4,7 @@ import { Styles } from 'styled-components/dist/types';
 
 const ButtonContainer = styled.button<{ styleOverride?: Styles<object> }>`
   text-decoration: none;
-  color: black;
+  color: #1d1d1f;
   background-color: transparent;
   border: unset;
   cursor: pointer;

diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,14 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color: #1d1d1f;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
diff --git a/src/screens/Hero.tsx b/src/screens/Hero.tsx
@@ -73,7 +73,7 @@ const TitleContainer = styled.div`
 
 const SocialLink = styled.a`
   text-decoration: none;
-  color: black;
+  color: #1d1d1f;
 `;
 
 interface AboutInfo {

diff --git a/src/screens/Projects.tsx b/src/screens/Projects.tsx
@@ -8,8 +8,6 @@ import { media } from '../styles/breakpoints';
 import firebase from '../services/firebase';
 
 const ProjectsContainer = styled(FullScreenLayout)`
-  max-width: 100vw;
-  padding: 0px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -21,51 +19,38 @@ const ProjectsContainer = styled(FullScreenLayout)`
 `;
 
 const HeaderContainer = styled.div`
-  width: 1280px;
-  margin: 0 auto;
-  padding: 0 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 20px;
-
-  ${media.lg`
-    width: unset;
-  `}
 `;
 
-const ProjectCarouselContainer = styled.div`
-  overflow-x: scroll;
+const ProjectCardsContainer = styled.div`
   display: flex;
+  flex-wrap: wrap;
   padding: 0 20px;
-  gap: 40px;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
+  gap: 20px;
 `;
 
-const ProjectCard = styled.div`
-  width: 380px;
-  height: 500px;
+const ProjectCard = styled.div<{ large?: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: 20px;
-  flex-grow: 0;
+  height: 250px;
+  width: ${props => (props.large ? '300px' : '200px')};
+  flex-grow: 1;
   flex-shrink: 0;
-  margin: 10px 0;
-  padding: 0 10px;
-  border: 1px black solid;
-  border-radius: 24px;
-  box-shadow: 3px 3px 3px 2px rgba(0, 0, 0, 0.1);
+  gap: 10px;
+  padding: 20px;
+  border-radius: 30px;
+  background-color: #f5f5f7;
+  transition: all 0.2s ease-in-out;
 
-  ${media.md`
-    width: 300px;
-    height: 400px;
-  `}
+  &:hover {
+    transform: scale(1.05);
+    cursor: pointer;
+    background-color: #f0f0f0;
+  }
 `;
 
 const Projects = () => {
@@ -81,9 +66,13 @@ const Projects = () => {
     firebase.analytics.logEvent('projects_viewed');
   }, []);
 
-  const handleProjectLinkClick = useCallback((repo_name: string) => {
-    firebase.analytics.logEvent(`project_link_clicked`, { repo_name });
-  }, []);
+  const handleProjectLinkClick = useCallback(
+    (repo_name: string, repo_url?: string) => {
+      firebase.analytics.logEvent(`project_link_clicked`, { repo_name });
+      repo_url && window.open(repo_url, '_blank');
+    },
+    []
+  );
 
   return (
     <FadeInWrapper>
@@ -96,9 +85,15 @@ const Projects = () => {
           </p>
         </HeaderContainer>
 
-        <ProjectCarouselContainer>
+        <ProjectCardsContainer>
           {repos?.map(repo => (
-            <ProjectCard key={repo.full_name}>
+            <ProjectCard
+              key={repo.full_name}
+              large={repo.description.split(' ').length > 7}
+              onClick={e => {
+                e.stopPropagation();
+                handleProjectLinkClick(repo.full_name, repo.html_url);
+              }}>
               <div>
                 <h3>{repo.name}</h3>
                 <p>{repo.description}</p>
@@ -112,17 +107,20 @@ const Projects = () => {
                 <a
                   target='_blank'
                   rel='noreferrer'
-                  onClick={() => handleProjectLinkClick(repo.full_name)}
+                  onClick={e => {
+                    e.stopPropagation();
+                    handleProjectLinkClick(repo.full_name);
+                  }}
                   href={repo.html_url}
-                  style={{ textDecoration: 'none', color: 'black' }}>
+                  style={{ textDecoration: 'none', color: '#1d1d1f' }}>
                   <GitHubIcon />
                 </a>
 
                 <p>{repo.language}</p>
               </div>
             </ProjectCard>
           ))}
-        </ProjectCarouselContainer>
+        </ProjectCardsContainer>
       </ProjectsContainer>
     </FadeInWrapper>
   );

diff --git a/src/services/github.ts b/src/services/github.ts
@@ -1,4 +1,4 @@
-const GITHUB_API = "https://api.github.com";
+const GITHUB_API = 'https://api.github.com';
 
 export interface GetRepoResponse {
   name: string;
@@ -19,7 +19,9 @@ const github: GitHub = {
     get: async () => {
       return await (
         await fetch(`${GITHUB_API}/users/adriancleung/repos`, {
-          headers: { Accept: "application/vnd.github.v3+json" },
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+          },
         })
       ).json();
     },