Update projects: Put function title and company name on the same line

MartijnHols · Dec 7, 2024 · 88d3c67 · 88d3c67
1 parent 9c6718c
commit 88d3c67
Showing 1 changed file with 72 additions and 36 deletions.
diff --git a/components/ProjectBrief.tsx b/components/ProjectBrief.tsx
@@ -21,6 +21,8 @@ const Container = styled('article', {
     background: ${theme.colors.yellow50};
 
     @media (min-width: ${theme.breakpoints.TABLET}px) {
+      display: flex;
+      gap: ${theme.spacing.x4}px;
       transform: rotate(-0.5deg);
       padding: ${theme.spacing.x4}px ${theme.spacing.x5}px;
     }
@@ -53,12 +55,15 @@ const Title = styled.div`
   margin-top: 0;
   margin-bottom: 0.1em;
 `
-const SubTitle = styled.div`
-  font-size: 1rem;
-  font-weight: 400;
-  margin-top: 0.5em;
-`
-const Period = styled.span``
+const Period = styled.div(
+  ({ theme }) => css`
+    margin-top: 0.3em;
+
+    @media (min-width: ${theme.breakpoints.TABLET}px) {
+      margin-bottom: 1em;
+    }
+  `,
+)
 const Main = styled.div(
   ({ theme }) => css`
     display: flex;
@@ -94,6 +99,22 @@ const Thumbnail = styled.div(
     }
   `,
 )
+const ThumbnailDesktop = styled(Thumbnail)(
+  ({ theme }) => css`
+    display: none;
+
+    @media (min-width: ${theme.breakpoints.TABLET}px) {
+      display: block;
+    }
+  `,
+)
+const ThumbnailMobile = styled(Thumbnail)(
+  ({ theme }) => css`
+    @media (min-width: ${theme.breakpoints.TABLET}px) {
+      display: none;
+    }
+  `,
+)
 const ProjectExplanation = styled.div`
   flex: 1 1 auto;
 `
@@ -164,45 +185,60 @@ const ProjectBrief = ({
 
   return (
     <Container highlighted={highlighted} isPlaceholder={placeholder}>
-      <Header>
-        <Title>{functionTitle}</Title>
-        <SubTitle>
-          <span>{companyName}</span> (
-          <Period>{formatPeriod(started, ended)}</Period>)
-        </SubTitle>
-      </Header>
-      <Main>
+      <div>
+        <Period>{formatPeriod(started, ended)}</Period>
         {thumbnail && (
-          <Thumbnail>
+          <ThumbnailDesktop>
             <Image
               src={thumbnail}
               alt={thumbnail.alt ?? companyName}
               width={100}
               height={100}
             />
-          </Thumbnail>
+          </ThumbnailDesktop>
         )}
-        <ProjectExplanation>
-          <ProjectAbout>{about}</ProjectAbout>
-          <Tech>
-            {tech.map((item, index) => (
-              <Fragment key={item}>
-                <Tag>{item}</Tag>
-                {index !== tech.length - 1 && <CopyPasteOnly>, </CopyPasteOnly>}
-              </Fragment>
-            ))}
-          </Tech>
-          {(url || sourceCode) && (
-            <ContactLinks>
-              {url && <Link href={url}>{config?.visit}</Link>}
-              {url && sourceCode && <span>{' | '}</span>}
-              {sourceCode && (
-                <Link href={sourceCode}>{config?.sourceCode}</Link>
-              )}
-            </ContactLinks>
+      </div>
+      <div>
+        <Header>
+          <Title>
+            {functionTitle} @ {companyName}
+          </Title>
+        </Header>
+        <Main>
+          {thumbnail && (
+            <ThumbnailMobile>
+              <Image
+                src={thumbnail}
+                alt={thumbnail.alt ?? companyName}
+                width={100}
+                height={100}
+              />
+            </ThumbnailMobile>
           )}
-        </ProjectExplanation>
-      </Main>
+          <ProjectExplanation>
+            <ProjectAbout>{about}</ProjectAbout>
+            <Tech>
+              {tech.map((item, index) => (
+                <Fragment key={item}>
+                  <Tag>{item}</Tag>
+                  {index !== tech.length - 1 && (
+                    <CopyPasteOnly>, </CopyPasteOnly>
+                  )}
+                </Fragment>
+              ))}
+            </Tech>
+            {(url || sourceCode) && (
+              <ContactLinks>
+                {url && <Link href={url}>{config?.visit}</Link>}
+                {url && sourceCode && <span>{' | '}</span>}
+                {sourceCode && (
+                  <Link href={sourceCode}>{config?.sourceCode}</Link>
+                )}
+              </ContactLinks>
+            )}
+          </ProjectExplanation>
+        </Main>
+      </div>
     </Container>
   )
 }