Clean up styles

mojib2014 · Feb 11, 2022 · 9fce894 · 9fce894
1 parent 9ff7378
commit 9fce894
Show file tree

Hide file tree

Showing 54 changed files with 690 additions and 1,062 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/components/About.tsx b/components/About.tsx
@@ -5,7 +5,7 @@ const About = () => {
   return (
     <section
       id="about"
-      className="pt-section-pt pb-section-pb dark:bg-[#111827] dark:text-gray-100"
+      className="pt-section-pt pb-section-pb dark:text-gray-100"
     >
       <SectionContainer>
         <div className="text-left">
@@ -18,7 +18,7 @@ const About = () => {
             interactive web apps, With focus on back-end. In my free times I
             play volleball and enjoy family time with my lovely dauther, watch
             movies and learn new stuff. You can know more about me by reading my{' '}
-            <Link href="/blog" className="text-anchor p-3 hover:underline">
+            <Link href="/blog" className="p-3 text-blue-700 hover:underline">
               articles.
             </Link>
           </p>

diff --git a/components/ActiveLink.tsx b/components/ActiveLink.tsx
@@ -15,7 +15,7 @@ const ActiveLink = ({router, children, ...rest}: MyComponentProps) => {
     <Link href={rest.href} {...rest}>
       {cloneElement(Children.only(children), {
         className:
-          // @ts-ignore: Unreachable code error
+          // @ts-expect-error
           router.pathname === /\// || router.asPath === rest.href
             ? `active ${children.props.className}`
             : children.props.className,

diff --git a/components/Banner.tsx b/components/Banner.tsx
@@ -17,12 +17,12 @@ export default function Banner() {
               I&apos;m Mojib Mohammad
             </PageTitle>
             <p>Junior full stack developer</p>
-            <div className="mt-10">
+            <div className="mt-8">
               <Link
                 href="/Mojib-Mohammad-resume.pdf"
                 title="Resumt"
                 aria-label="Resume"
-                className="inline-block bg-banner-gradient py-5 px-10 transition-all duration-300 ease-in-out hover:rounded-full sm:py-7 sm:px-16"
+                className="inline-block bg-banner-gradient py-5 px-10 hover:rounded-full sm:py-7 sm:px-16"
               >
                 Download Resume
               </Link>

diff --git a/components/ClientReload.tsx b/components/ClientReload.tsx
@@ -1,5 +1,5 @@
-import { useEffect } from "react";
-import Router from "next/router";
+import {useEffect} from 'react'
+import Router from 'next/router'
 
 /**
  * Client-side complement to next-remote-watch
@@ -9,15 +9,15 @@ import Router from "next/router";
 export const ClientReload = () => {
   // Exclude socket.io from prod bundle
   useEffect(() => {
-    import("socket.io-client").then((module) => {
-      const socket = module.io();
-      socket.on("reload", (data) => {
+    import('socket.io-client').then(module => {
+      const socket = module.io()
+      socket.on('reload', data => {
         Router.replace(Router.asPath, undefined, {
           scroll: false,
-        });
-      });
-    });
-  }, []);
+        })
+      })
+    })
+  }, [])
 
-  return null;
-};
+  return null
+}
diff --git a/components/Contact.tsx b/components/Contact.tsx
@@ -1,7 +1,7 @@
 import {Formik, Form, Field, ErrorMessage} from 'formik'
 import * as Yup from 'yup'
-import styles from '../styles/Contact.module.css'
 import SectionContainer from './SectionContainer'
+import styles from '@/styles/Contact.module.css'
 
 const ContactSchema = Yup.object().shape({
   name: Yup.string()
@@ -37,7 +37,7 @@ export default function Contact() {
   return (
     <section
       id="contact"
-      className="bg-gradient-to-t from-sky-100 to-sky-400 pb-section-pb pt-section-pt dark:from-[#111827] dark:to-[#111827] dark:text-gray-100"
+      className="pb-section-pb pt-section-pt dark:bg-[#111827] dark:text-gray-100"
     >
       <SectionContainer>
         <h2 className="mb-12 text-center text-3xl font-bold sm:text-4xl xl:text-5xl">
@@ -66,7 +66,7 @@ export default function Contact() {
                 <ErrorMessage
                   name="name"
                   component="div"
-                  className="text-danger-500 self-start"
+                  className="self-start text-red-500"
                 />
                 <Field
                   type="email"
@@ -77,7 +77,7 @@ export default function Contact() {
                 <ErrorMessage
                   name="email"
                   component="div"
-                  className="text-danger-500 self-start"
+                  className="self-start text-red-500"
                 />
                 <Field
                   type="subject"
@@ -88,7 +88,7 @@ export default function Contact() {
                 <ErrorMessage
                   name="subject"
                   component="div"
-                  className="text-danger-500 self-start"
+                  className="self-start text-red-500"
                 />
                 <Field
                   type="message"
@@ -102,7 +102,7 @@ export default function Contact() {
                 <ErrorMessage
                   name="message"
                   component="div"
-                  className="text-danger-500 self-start"
+                  className="self-start text-red-500"
                 />
                 <input
                   type="submit"

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,16 +1,18 @@
 import Image from 'next/image'
-import Link from '@/components/Link'
-import styles from '../styles/Footer.module.css'
+import Link from 'components/Link'
 import SectionContainer from './SectionContainer'
+import headerNavLinks from 'data/headerNavLinks'
+import {icons} from 'data/icons'
+import styles from 'styles/Footer.module.css'
 
 const Footer = () => {
   return (
-    <footer className="border-t-gray min-h-[400px] w-full overflow-hidden border-t py-3 dark:bg-[#111827] dark:text-gray-400">
+    <footer className="w-full border-y border-y-gray-300 py-3 text-gray-500 dark:bg-[#111827]">
       <div>
         <SectionContainer>
           <div className="power-by text-center">
             <Link
-              className="pb-10 text-anchor"
+              className="pb-10 text-blue-700"
               href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
             >
               Powered by{' '}
@@ -24,103 +26,66 @@ const Footer = () => {
               </span>
             </Link>
           </div>
-          <div className="mt-8 grid auto-rows-auto content-center justify-items-center gap-7 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
+          <div className="flex flex-col items-stretch justify-between space-y-3 space-x-2 py-8 sm:flex-row sm:space-y-1 sm:space-x-3">
             <nav className="relative w-full">
-              <ul className=" flex flex-col items-center md:items-start md:after:absolute md:after:right-0 md:after:h-full md:after:w-[1px] md:after:bg-gray-500 md:after:content-['']">
-                <h4 className="mt-2 mb-5 text-center font-bold md:text-left">
-                  General resources
-                </h4>
-                <li className="pb-4">
-                  <Link href="/" className="inline-block text-anchor">
-                    Home
-                  </Link>
-                </li>
-                <li className="pb-4">
-                  <Link href="/#about" className="inline-block text-anchor">
-                    About
-                  </Link>
-                </li>
-                <li className="pb-4">
-                  <Link href="/#skills" className="inline-block text-anchor">
-                    Skills
-                  </Link>
-                </li>
-                <li className="pb-4">
-                  <Link href="/#portfolio" className="inline-block text-anchor">
-                    Portfolio
-                  </Link>
-                </li>
-                <li className="pb-4">
-                  <Link href="/#resume" className="inline-block text-anchor">
-                    Resume
-                  </Link>
-                </li>
-                <li className="pb-4">
-                  <Link href="/blog" className="inline-block text-anchor">
-                    Blog
-                  </Link>
-                </li>
-              </ul>
+              <div className="h-full w-full p-3 md:after:absolute md:after:right-0 md:after:top-0 md:after:h-full md:after:w-[1px] md:after:bg-gray-300 md:after:content-['']">
+                <ul className="flex flex-col items-center md:items-start">
+                  <h4 className="mt-2 mb-5 text-center text-2xl font-bold md:text-left lg:text-3xl">
+                    General resources
+                  </h4>
+                  {headerNavLinks.map(link => (
+                    <li
+                      key={link.href}
+                      className="rounded-md p-2 duration-500 ease-in-out hover:bg-gray-100 hover:transition-all"
+                    >
+                      <Link
+                        href={link.href}
+                        className="inline-block text-blue-700"
+                      >
+                        {link.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
             </nav>
             <div className="relative w-full">
-              <ul className="m-0 flex flex-col items-center p-0 md:items-start md:after:absolute md:after:right-0 md:after:h-full md:after:w-[1px] md:after:bg-gray-500 md:after:content-['']">
-                <h4 className="mt-2 mb-5 text-center font-bold md:text-left">
+              <div className="h-full w-full p-3 md:after:absolute md:after:right-0 md:after:top-0 md:after:h-full md:after:w-[1px] md:after:bg-gray-300 md:after:content-['']">
+                <h4 className="mt-2 mb-5 text-center text-2xl font-bold md:text-left lg:text-3xl">
                   Social
                 </h4>
-                <li className="mb-4">
-                  <Link
-                    href="/~https://github.com/mojib2014"
-                    title="Github"
-                    aria-label="Github"
-                    className="flex items-center justify-start text-anchor"
-                  >
-                    Github
-                    <i className="fab fa-github fa-1x ml-3 text-gray-900"></i>
-                  </Link>
-                </li>
-                <li className="mb-4">
-                  <Link
-                    href="https://twitter.com/mojib_mohammad1"
-                    title="Twitter"
-                    aria-label="Twitter"
-                    className="flex items-center justify-start text-anchor"
-                  >
-                    Twitter
-                    <i className="fab fa-twitter fa-1x ml-3"></i>
-                  </Link>
-                </li>
-                <li className="mb-4">
-                  <Link
-                    href="https://www.linkedin.com/in/mojib-mohammad/"
-                    title="Linkedin"
-                    aria-label="Linkedin"
-                    className="flex items-center justify-start text-anchor"
-                  >
-                    Linkedin
-                    <i className="fab fa-linkedin fa-1x ml-3"></i>
-                  </Link>
-                </li>
-                <li className="mb-4">
-                  <Link
-                    href="#facebook"
-                    title="Facebook"
-                    aria-label="Facebook"
-                    className="flex items-center justify-start text-anchor"
-                  >
-                    Facebook
-                    <i className="fab fa-facebook fa-1x ml-3"></i>
-                  </Link>
-                </li>
-              </ul>
+                <ul className="m-0 flex flex-wrap items-center justify-between p-0">
+                  {icons.map(icon => (
+                    <li key={icon.title}>
+                      <Link
+                        href={icon.href}
+                        title={icon.title}
+                        aria-label={icon.title}
+                        className="flex items-center hover:scale-150 dark:rounded-full dark:bg-gray-200 dark:p-2"
+                      >
+                        <Image
+                          src={icon.icon}
+                          width={30}
+                          height={30}
+                          alt={icon.title}
+                        />
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
             </div>
             <div className="flex w-full flex-col items-center md:items-start">
-              <div className="legal-title">
-                <h4 className="mt-2 mb-5 text-center font-bold md:text-left">
+              <div className="legal-title p-3">
+                <h4 className="mt-2 mb-5 text-center text-2xl font-bold md:text-left lg:text-3xl">
                   Legal
                 </h4>
                 <ul>
                   <li>
-                    <Link href="#privacy-policy" className="text-anchor">
+                    <Link
+                      href="/privacy-policy"
+                      className="rounded-md p-2 text-blue-700 duration-500 ease-in-out hover:bg-gray-100 hover:transition-all"
+                    >
                       Privacy Policy
                     </Link>
                   </li>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,11 +1,11 @@
 import React, {useState, useEffect, MouseEventHandler} from 'react'
-import Link from './ActiveLink'
+import ActiveLink from './ActiveLink'
 import headerNavLinks from '@/data/headerNavLinks'
 import MobileOverlay from './MobileOverlay'
 import SectionContainer from './SectionContainer'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
-import '@fortawesome/fontawesome-free/css/all.css'
+import smoothscroll from 'smoothscroll-polyfill'
 
 const Header = () => {
   const [scrolled, setScrolled] = useState(false)
@@ -16,6 +16,7 @@ const Header = () => {
     else setScrolled(false)
   }
   useEffect(() => {
+    smoothscroll.polyfill()
     window.addEventListener('scroll', handleHeaderScroll)
 
     return () => window.removeEventListener('scroll', handleHeaderScroll)
@@ -42,20 +43,20 @@ const Header = () => {
       >
         <SectionContainer>
           <div className="header flex items-center">
-            <Link href="/">
+            <ActiveLink href="/">
               <a
                 className={`mr-auto leading-[60px] ${
                   !scrolled ? 'text-gray-700' : 'text-gray-800'
                 } dark:text-gray-100`}
               >
                 Mojib
               </a>
-            </Link>
+            </ActiveLink>
             <nav className="hidden md:block lg:ml-auto">
               <ul className="flex items-center justify-end">
                 {headerNavLinks.map(link => (
                   <li className="relative pl-6 xl:pl-10" key={link.title}>
-                    <Link href={link.href} as={link.href}>
+                    <ActiveLink href={link.href} as={link.href}>
                       <a
                         onClick={handleAchorClick}
                         className={`${
@@ -64,7 +65,7 @@ const Header = () => {
                       >
                         {link.title}
                       </a>
-                    </Link>
+                    </ActiveLink>
                   </li>
                 ))}
               </ul>
@@ -75,18 +76,10 @@ const Header = () => {
               className="line-container block cursor-pointer pl-6 md:hidden xl:pl-10"
               onClick={openMobileMenu}
             >
-              <div
-                className={`line my-1 mx-0 h-[2px] w-[30px] bg-gray-700 transition-all duration-300 ease-in-out dark:bg-gray-100`}
-              ></div>
-              <div
-                className={`line my-1 mx-0 h-[2px] w-[36px] bg-gray-700 transition-all duration-300 ease-in-out dark:bg-gray-100`}
-              ></div>
-              <div
-                className={`line my-1 mx-0 h-[2px] w-[28px] bg-gray-700 transition-all duration-300 ease-in-out dark:bg-gray-100`}
-              ></div>
-              <div
-                className={`line my-1 mx-0 h-[2px] w-[32px] bg-gray-700 transition-all duration-300 ease-in-out dark:bg-gray-100`}
-              ></div>
+              <div className="line my-1 mx-0 h-[2px] w-[30px] bg-gray-700 transition-all duration-300 ease-in-out dark:bg-gray-100"></div>
+              <div className="line my-1 mx-0 h-[2px] w-[36px] bg-gray-700 transition-all duration-300 ease-in-out dark:bg-gray-100"></div>
+              <div className="line my-1 mx-0 h-[2px] w-[28px] bg-gray-700 transition-all duration-300 ease-in-out dark:bg-gray-100"></div>
+              <div className="line my-1 mx-0 h-[2px] w-[32px] bg-gray-700 transition-all duration-300 ease-in-out dark:bg-gray-100"></div>
             </div>
           </div>
         </SectionContainer>