feat: update in the first page,

updating the first page style that shows the list of posts, add images to social media links in the footer, see also: #12
64J0 · May 8, 2021 · 790b8a9 · 790b8a9
1 parent 47d6bef
commit 790b8a9
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 32 deletions.
diff --git a/components/HeaderHome/index.tsx b/components/HeaderHome/index.tsx
@@ -17,8 +17,8 @@ const Header: React.FC = () => {
           alt="Vinícius Gajo"
         />
       </Link>
-      <h1 className={`${utilStyles.heading2X} drac-text-purple-cyan`}>
-        Vinícius Gajo
+      <h1>
+        Vinícius Gajo's Blog
       </h1>
     </div >
   );

diff --git a/components/HeaderHome/styles.module.scss b/components/HeaderHome/styles.module.scss
@@ -9,6 +9,8 @@
 
   h1 {
     margin-bottom: 0;
+    font-size: 3rem;
+    color: var(--white);
   }
 
   @media (max-width: 34rem) {

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -1,9 +1,11 @@
-import React from "react";
-import styles from "./styles.module.scss";
+import React, { useCallback } from "react";
+import { FaTwitter, FaGithub, FaLinkedin } from "react-icons/fa";
 
 import HeaderHome from "../HeaderHome";
 import HeaderPost from "../HeaderPost";
 
+import styles from "./styles.module.scss";
+
 export const siteTitle = "64j0 Blog";
 
 interface LayoutProps {
@@ -22,12 +24,20 @@ const Layout: React.FC<LayoutProps> = ({ children, home }) => {
           {children}
         </main>
 
-        <footer className={`${styles.footer} drac-text-white`}>
+        <footer className={styles.footer}>
           <span>
             &copy; Vinícius Gajo Marques Oliveira. All rights reserved.
           </span>
-          <span>
-            twitter-logo; github-logo; linkedin-logo;
+          <span className={styles['icon-container']}>
+            <a href="https://twitter.com/viniciusgajo">
+              <FaTwitter size="1.8rem" className={styles.item} />
+            </a>
+            <a href="https://github.com/64J0">
+              <FaGithub size="1.8rem" className={styles.item} />
+            </a>
+            <a href="https://www.linkedin.com/in/vinicius-gajo/">
+              <FaLinkedin size="1.8rem" className={styles.item} />
+            </a>
           </span>
         </footer>
       </div>

diff --git a/components/Layout/styles.module.scss b/components/Layout/styles.module.scss
@@ -47,6 +47,23 @@ $max-width: 72rem;
   justify-content: space-between;
   margin: 5rem auto 3rem;
   max-width: $max-width;
+  color: var(--white);
+
+  .icon-container {
+    max-width: 130px;
+
+    .item {
+      margin: 0 8px;
+      cursor: pointer;
+      transition: 0.4s;
+      color: var(--white);
+
+      &:hover {
+        opacity: 0.7;
+        transform: translateY(-4px);
+      }
+    }
+  }
 }
 
 @media (max-width: 34rem) {
@@ -61,4 +78,3 @@ $max-width: 72rem;
     font-size: 20px;
   }
 }
-
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -35,18 +35,18 @@ const Home: React.FC<{ allPostsData: AllPostsData[]; }> = ({ allPostsData }) =>
 
       <div className={utilStyles.mainContent}>
         <section className={utilStyles.headingMd}>
-          <p className={`${utilStyles.adjustText} drac-text-white`}>
-            Formado em engenharia mecatrônica no CEFET-MG, desenvolvedor WEB focado na stack JS (React, Vue, Next.js e Node.js, principalmente) atualmente trabalhando na <a href="https://jmvtechnology.com/">JMV Technology</a>.
+          <p className={utilStyles.adjustText}>
+            Formado em engenharia mecatrônica no CEFET-MG, desenvolvedor WEB focado na stack JS/TS (React, Vue, Next.js e Node.js, principalmente) atualmente trabalhando na <a href="https://jmvtechnology.com/">JMV Technology</a> no ramo de streaming de áudio/vídeo utilizando tecnologias como FFMPEG e Wowza.
           </p>
         </section>
-        <section className={utilStyles.headingMd}>
-          <h2 className={`${utilStyles.headingLg} drac-text-yellow`}>
-            Posts
+        <section className={utilStyles.posts}>
+          <h2 className={utilStyles.posts__header}>
+            Postagens
           </h2>
-          <ul className={`${utilStyles.list} drac-text-white`}>
+          <ul className={utilStyles.posts__body}>
             {
               allPostsData.map(({ id, date, title }: AllPostsData) => (
-                <li className={utilStyles.listItem} key={id}>
+                <li className={utilStyles.item} key={id}>
                   <Link href="/posts/[id]" as={`/posts/${id}`}>
                     <a className="drac-text-purple-cyan">
                       {title}

diff --git a/styles/global.css b/styles/global.css
@@ -14,6 +14,7 @@ body {
 
 a {
   text-decoration: none;
+  color: var(--green);
 }
 
 a:hover {
@@ -79,6 +80,7 @@ code {
 p {
   tab-size: 2rem;
   -moz-tab-size: 2rem; /* Firefox */
+  color: var(--white); /* .drac-text-white */
 }
 
 @media (max-width: 375px) {

diff --git a/styles/utils.module.css b/styles/utils.module.css
@@ -1,10 +1,3 @@
-.heading2X1 {
-  font-size: 2.5rem;
-  line-height: 1.2;
-  font-weight: 800;
-  letter-spacing: -0.05rem;
-}
-
 .headingX1 {
   font-size: 2rem;
   line-height: 1.3;
@@ -40,16 +33,6 @@
   padding-top: 1px;
 }
 
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.listItem {
-  margin: 0 0 1.25rem;
-}
-
 .lightText {
   color: #999;
 }
@@ -83,3 +66,24 @@
   text-align: right;
   margin: 0.1rem initial;
 }
+
+/* NEW STYLES */
+
+.posts {}
+
+.posts__header {
+  color: var(--yellow); /* .drac-text-yellow */
+  font-size: 2rem;
+  padding: 1.5rem 0;
+}
+
+.posts__body {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.posts__body > .item {
+  margin: 0 0 1.25rem;
+  font-size: 1.3rem;
+}