Update font and captions

The-hated-one · Jun 2, 2021 · 7491415 · 7491415
1 parent ea5fe4a
commit 7491415
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 21 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -178,7 +178,7 @@ const Layout: React.FC<LayoutProps> = ({
           </Container>
           <FooterGrid>
             {links.map(({ url, icon: Icon }) => (
-              <Link key={url} opacity={0.7} href={url}>
+              <Link key={url} target="_blank" opacity={0.7} href={url}>
                 <Icon size={22} />
               </Link>
             ))}

diff --git a/components/Link.tsx b/components/Link.tsx
@@ -41,6 +41,8 @@ const Link = styled.a<LinkProps>`
   color: inherit;
   text-decoration: none;
   cursor: pointer;
+  border-bottom: none;
+  padding: 0;
 
   ${compose(opacity, color, fontWeight, fontSize, textTransform, background)}
 

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -93,22 +93,17 @@ const About: React.FC<AboutProps> = ({ experiences }) => {
   );
 
   return (
-    <Container gridGap="">
+    <Container>
       <Head>
         <title>About</title>
       </Head>
       <Container alignContent="center" alignItems="center">
         <Title fontSize={['48px', '74px']}>From student to CTO</Title>
-        <Container maxWidth={['100%', '60rem']}>
+        <Container maxWidth={['100%', '700px']}>
           <Text>
-            I'm passionated by computers since I'm young. I always helped my
-            family and friends to understand how stuff works.
-            <br />
-            <br />
-            During my high school years I discovered the world of cybersecurity.
-            I was writing malware for MacOS and Linux, created phishing pages,
-            fake hotspots, bruteforcing wifi networks, accessing cameras in my
-            town and playing with my jailbroken iPhone kernel.
+            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>.
           </Text>
         </Container>
       </Container>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -30,18 +30,19 @@ const Home: React.FC = () => {
             I build cloud software.
           </Title>
         </Container>
-        <Container maxWidth="900px" gridGap="3rem">
+        <Container maxWidth="700px" gridGap="3rem">
           <Container>
             <Text textAlign="center">
-              I'm a Full Stack developer with experience in DevOps, Backend,
-              Frontend and mobile development. <br />
-              I'm currently <b>CTO</b> of <b>Shareview</b> and living in Seoul,
-              South-Korea.
+              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.
             </Text>
           </Container>
-          <a href="/about">
+          <Link href="/about">
             <Button>More about me &rarr;</Button>
-          </a>
+          </Link>
         </Container>
       </Container>
 
@@ -74,7 +75,10 @@ const Home: React.FC = () => {
                 Say hello
               </Button>
             </Link>
-            <Link href="https://calendly.com/antoine-ordonez/intro">
+            <Link
+              target="_blank"
+              href="https://calendly.com/antoine-ordonez/intro"
+            >
               <Button
                 width="100%"
                 backgroundColor="rgb(226,232,240)"

diff --git a/styles/globals.css b/styles/globals.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+
 html,
 body {
   padding: 0;
@@ -7,8 +9,17 @@ body {
 }
 
 a {
-  color: inherit;
-  font-weight: bold;
+  color: black;
+  font-weight: 700;
+  display: inline-block;
+  transition: all 200ms ease;
+  text-decoration: none;
+  border-bottom: 2px solid black;
+}
+
+
+a:hover {
+  border-bottom-color: transparent;
 }
 
 * {