Update layout

Improve project section Update fonts Update global style
The-hated-one · Jun 2, 2021 · 32ba17e · 32ba17e
1 parent 7491415
commit 32ba17e
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 87 deletions.
diff --git a/components/Container.tsx b/components/Container.tsx
@@ -25,19 +25,19 @@ import {
   TextAlignProps,
 } from 'styled-system';
 
-const Container = styled.div<
-  LayoutProps &
-    AlignContentProps &
-    JustifyContentProps &
-    FlexDirectionProps &
-    PaddingProps &
-    MarginProps &
-    TextAlignProps &
-    AlignItemsProps &
-    GridProps &
-    JustifyItemsProps &
-    DisplayProps
->`
+export type ContainerProps = LayoutProps &
+  AlignContentProps &
+  JustifyContentProps &
+  FlexDirectionProps &
+  PaddingProps &
+  MarginProps &
+  TextAlignProps &
+  AlignItemsProps &
+  GridProps &
+  JustifyItemsProps &
+  DisplayProps;
+
+const Container = styled.div<ContainerProps>`
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;

diff --git a/components/Text.tsx b/components/Text.tsx
@@ -5,25 +5,32 @@ import {
   fontSize,
   fontWeight,
   display,
+  typography,
   compose,
   TextAlignProps,
   MarginProps,
   FontWeightProps,
   DisplayProps,
   FontSizeProps,
+  TypographyProps,
 } from 'styled-system';
 
 const Text = styled.p<
-  TextAlignProps & MarginProps & FontSizeProps & FontWeightProps & DisplayProps
+  TextAlignProps &
+    MarginProps &
+    FontSizeProps &
+    FontWeightProps &
+    DisplayProps &
+    TypographyProps
 >`
   font-size: 1.125rem;
-  line-height: 1.75rem;
-  margin: 0.75rem 0 2rem;
+  margin: 0.75rem 0;
   color: rgba(0, 0, 0, 0.7);
-  text-align: justify;
   white-space: pre-wrap;
+  line-height: 160%;
+  letter-spacing: 0.02em;
 
-  ${compose(textAlign, margin, fontSize, fontWeight, display)}
+  ${compose(textAlign, margin, fontSize, fontWeight, display, typography)}
 `;
 
 export default Text;
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -98,12 +98,23 @@ const About: React.FC<AboutProps> = ({ experiences }) => {
         <title>About</title>
       </Head>
       <Container alignContent="center" alignItems="center">
-        <Title fontSize={['48px', '74px']}>From student to CTO</Title>
-        <Container maxWidth={['100%', '700px']}>
+        <Title fontSize={['3rem', '4rem']}>Student &rarr; CTO</Title>
+        <Container maxWidth={['100%', '700px']} marginY="2rem">
           <Text>
-            CTO of <a href="https://shareview.fr/">Shareview </a>Freelancer
-            since my 18's and studying at&nbsp;
-            <a href="https://www.epitech.eu/en/">Epitech</a>.
+            I'm a 21-year-old student at{' '}
+            <a href="https://www.epitech.eu/en/">Epitech</a> in Paris currently
+            studying computer-science. I started working as a freelance
+            developer when I was 18.
+          </Text>
+          <Text>
+            Since 2020, I'm living in Seoul and I'm studying computer-science at{' '}
+            <a href="https://www.cau.ac.kr/">Chung-Ang</a> University.
+          </Text>
+          <Text>
+            During my free time I like going gym, doing some Bench Press, make
+            design and make video edits on After Effects. You can check some
+            some cool drone edits on my{' '}
+            <a href="https://instagram.com/croissant2france">Instagram</a>.
           </Text>
         </Container>
       </Container>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -33,11 +33,9 @@ const Home: React.FC = () => {
         <Container maxWidth="700px" gridGap="3rem">
           <Container>
             <Text textAlign="center">
-              I'm a Full Stack developer with experience in DevOps,
-              Backend,&nbsp; Frontend and mobile development. I'm currently CTO
-              of&nbsp;
-              <a href="https://shareview.fr">Shareview</a> and living in
-              Seoul,&nbsp; South-Korea.
+              I'm a Full Stack developer with experience in DevOps, Backend,
+              Frontend and mobile development. I'm currently CTO of&nbsp;
+              <a href="https://shareview.fr">Shareview</a> and living in Seoul.
             </Text>
           </Container>
           <Link href="/about">
@@ -55,6 +53,7 @@ const Home: React.FC = () => {
           </Text>
           <Grid
             gridGap="2rem"
+            marginTop="2rem"
             gridTemplateColumns={['1fr', 'repeat(2, 1fr)']}
             justifyItems="stretch"
             alignItems="stretch"

diff --git a/pages/projects.tsx b/pages/projects.tsx
@@ -1,85 +1,95 @@
 import React from 'react';
 import Head from 'next/head';
+import styled from 'styled-components';
 import { Title, Container, Text } from '../components';
 import { GetStaticProps } from 'next';
 
 import { getPosts, Post } from '../posts';
-import Card from '../components/Card';
 import Button from '../components/Button';
 import Grid from '../components/Grid';
 import Link from '../components/Link';
-import Tag from '../components/Tag';
 import List from '../components/List';
 
 interface ProjectProps {
   projects: Post[];
 }
 
+const ProjectImage = styled.img`
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 4px;
+  transition: 0.2s ease-in-out 0s;
+
+  :hover {
+    transform: scale(1.02);
+  }
+`;
+
+const ProjectContainer = styled(Container)`
+  :hover > * img {
+    transform: scale(1.03);
+  }
+`;
+
+const ProjectTag = styled.li`
+  color: rgb(105, 105, 105);
+  font-size: 13px;
+  letter-spacing: 0.03em;
+`;
+
 const Projects: React.FC<ProjectProps> = ({ projects }) => (
   <Container marginBottom="5rem">
     <Head>
       <title>Projects</title>
     </Head>
     <Title>Projects</Title>
     <Grid
-      maxWidth={['100%', 1200]}
-      gridGap="4rem"
+      py="4rem"
       gridTemplateColumns={['1fr', 'repeat(2, 1fr)']}
-      paddingTop="4rem"
-      alignItems="flex-start"
+      width="100%"
+      gridGap="10%"
     >
-      <Container flexDirection="column" alignItems="flex-start" width="100%">
-        <Container flexDirection="row" alignItems="center" gridGap="1rem">
-          <Title fontSize="2.5rem">{projects[0].data.title}</Title>
-          <Tag>Featured</Tag>
-        </Container>
-        <Container paddingY="1rem" gridGap="1rem">
-          <Text textAlign="start" margin={0}>
-            {projects[0].data.caption}
-          </Text>
-          <List marginY="1rem">
-            {projects[0].data.tags.map((tag: string) => (
-              <li key={tag}>{tag}</li>
-            ))}
-          </List>
-        </Container>
-        <Link href={projects[0].data.url}>
-          <Button>View project</Button>
-        </Link>
-      </Container>
-      <Grid gridTemplateColumns="1fr" width="100%">
-        {projects.slice(1).map(({ data }) => (
-          <Card key={data.url} width="100%" selected>
-            <Container
-              flexDirection="column"
-              alignItems="flex-start"
-              width="100%"
-              gridGap="2rem"
+      {projects.map(({ data }) => (
+        <ProjectContainer
+          flexDirection="column"
+          alignItems="flex-start"
+          width="100%"
+          gridGap="1.5rem"
+        >
+          <Link href={data.url}>
+            <ProjectImage src={data.preview} />
+          </Link>
+          <Container
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center"
+            width="100%"
+          >
+            <Link href={data.url}>
+              <Title fontSize="2rem">{data.title}</Title>
+            </Link>
+            <Link href={data.url}>
+              <Button variant="secondary">View Project</Button>
+            </Link>
+          </Container>
+          <Container gridGap="1rem">
+            <Text
+              textAlign="start"
+              margin={0}
+              lineHeight="180%"
+              letterSpacing="0.02rem"
             >
-              <Container
-                flexDirection="row"
-                justifyContent="space-between"
-                width="100%"
-              >
-                <Title fontSize="2rem">{data.title}</Title>
-                <Link href={data.url}>
-                  <Button variant="secondary">View Project</Button>
-                </Link>
-              </Container>
-              <Container gridGap="1rem">
-                <Text textAlign="start" margin={0}>
-                  {data.caption}
-                </Text>
-                <List marginY="1rem">
-                  {projects[0].data.tags.map((tag: string) => (
-                    <li key={tag}>{tag}</li>
-                  ))}
-                </List>
-              </Container>
-            </Container>
-          </Card>
-        ))}
-      </Grid>
+              {data.caption}
+            </Text>
+            <List marginY="1rem">
+              {data.tags.map((tag: string) => (
+                <ProjectTag key={tag}>{tag}</ProjectTag>
+              ))}
+            </List>
+          </Container>
+        </ProjectContainer>
+      ))}
     </Grid>
   </Container>
 );

diff --git a/posts/projects/hiddentity.mdx b/posts/projects/hiddentity.mdx
@@ -1,6 +1,7 @@
 ---
 title: Hiddentity
 url: https://hiddentity.fr/
-caption: An anonymous work marketplace with A.I based job matching. Available on Mobile and website. Currently in beta.
+caption: An anonymous work marketplace with A.I based job matching. Available on Mobile and website.
+preview: /img/hiddentity.png
 tags: [Go, Kubernetes, Next.js, React-Native, ElasticSearch, PostgreSQL]
 ---
diff --git a/posts/projects/yail.mdx b/posts/projects/yail.mdx
@@ -2,5 +2,6 @@
 title: Yail
 url: https://yail.herokuapp.com/
 caption: A real-time collaborative song-request queue for Spotify. Built with Elixir, Spotify API and Phoenix liveview.
-tags: [Elixir, Phoneix, Websockets, Pub-Sub, Spotify API, Tailwind.css]
+preview: /img/yail.png
+tags: [Elixir, Phoenix, Websockets, Pub-Sub, Spotify API, Tailwind.css]
 ---
diff --git a/public/img/hiddentity.png b/public/img/hiddentity.png
diff --git a/public/img/yail.png b/public/img/yail.png