Removed tailwind CSS; Added theming;

Components/About/About.module.scss

@@ -0,0 +1,61 @@
+.aboutMainContainer {
+  padding: 0 1rem;
+  margin: 0 auto;
+}
+
+.aboutMainContentContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+}
+
+.aboutTextContainer {
+  padding: 0 1rem;
+  margin: 3rem 0 0 0;
+  text-align: left;
+}
+
+.aboutTextHeader {
+  font-weight: 700;
+}
+
+.aboutTextContent {
+  margin-top: 1.5rem;
+  font-weight: 300;
+}
+
+.aboutTextPara {
+  margin-bottom: 1rem;
+}
+
+.buttonDiv {
+  font-weight: 700;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.buttonDiv:hover {
+  background: #9ca3af;
+}
+
+.buttonSVG {
+  fill: white;
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.5rem;
+}
+
+.imageContainer {
+  margin-top: 3rem;
+  padding: 0 1rem;
+  margin-bottom: 2.5rem;
+  flex-shrink: 0;
+}
+
+.imageContent {
+  border-radius: 999999px;
+}

Components/About.js → Components/About/index.js

@@ -1,47 +1,48 @@
 import React from "react"
 import Image from "next/image"
-import profile from "../public/images/profile.jpg"
+import profile from "../../public/images/profile.jpg"
+import Styles from "./About.module.scss";
 
 const About = () => {
     return (
-        <div className="container px-4 mx-auto">
-            <div className="lg:space-x-5 lg:flex lg:flex-row item-center lg:-mx-4 flex flex-col-reverse text-center lg:text-left">
-                <div className="lg:px-4 lg:mt-12 ">
-                    <h1 className="text-2xl font-bold text-gray-900 lg:text-5xl dark:text-white">
+        <div className={`container ${Styles.aboutMainContainer}`}>
+            <div className={Styles.aboutMainContentContainer}>
+                <div className={Styles.aboutTextContainer}>
+                    <h1 className={Styles.aboutTextHeader}>
                         Hey, I'm Saif Ali
                     </h1>
-                    <div className="mt-6 text-gray-800 dark:text-white">
-                        <p className="mb-4">
+                    <div className={Styles.aboutTextContent}>
+                        <p className={Styles.aboutTextPara}>
                             I am a Developer and a future Freelancer. I work as a Software Engineer with McAfee Enterprise.
                         </p>
-                        <p className="mb-4">
+                        <p className={Styles.aboutTextPara}>
 
                         Life is strange and so is the path everybody takes in it. I love architecting and developing solutions
                             to various real world problems with the knowledge I gather in this path.
                         </p>
-                        <p className="mb-4">
+                        <p className={Styles.aboutTextPara}>
                         Currently developing applications in Python, Node.js, Powershell and learning about taking them to 
                             the cloud. 
 
                         </p>
-                        <p className="mb-4">
+                        <p className={Styles.aboutTextPara}>
                         Welcome to my little corner of Internet, built with Next.js, Tailwindcss and GCP, 
                             brought to life to learn about my journey in technology, biking, travel and more. 
 
                         </p>
-                        <a class="bg-black hover:bg-gray-400 text-white dark:bg-white dark:text-black font-bold py-2 px-4 rounded inline-flex items-center" href='/docs/resume.pdf' download>
-                            <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
+                        <a className={`resume-download-button ${Styles.buttonDiv}`} href='/docs/resume.pdf' download>
+                            <svg className={Styles.buttonSVG} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
                             <span>Resume</span>
                         </a>
 
                     </div>
                 </div>
-                <div className="flex-shrink-0 lg:mt-12 lg:px-4 mb-10">
+                <div className={Styles.imageContainer}>
                     <Image
                         src={profile}
                         alt="Profile"
                         priority={true}
-                        className="rounded-full"
+                        className={Styles.imageContent}
                         width={250}
                         height={250}
                         placeholder="blur"

Components/Footer/Footer.module.scss

@@ -0,0 +1,44 @@
+@import "../../styles/colors";
+
+.footerMainContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 56rem;
+  margin: 3rem auto 0 auto;
+  padding: 3rem 1rem 9rem 1rem;
+}
+
+.footerMainContentContainer {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.footerBorder {
+  border-top: 2px solid;
+  border-top-color: $gray;
+  padding-bottom: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.footerData {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.linksContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.linkData {
+  color: inherit;
+  text-decoration: none;
+  margin: 1rem;
+}
+
+.linkData:hover {
+  color: $yellow;
+}

Components/Footer.js → Components/Footer/index.js

@@ -1,35 +1,35 @@
 import React from "react";
-import Link from "next/link";
+import Styles from './Footer.module.scss';
 
 const Footer = () => {
     return (
-        <div className="mt-12 lg:mt-18 sm:pb-36 sm:py-12 py-6">
-            <div className="max-w-4xl px-4 mx-auto text-gray-800 dark:text-white">
-                <div className="pb-8 mb-2 border-t-2 border-gray-300 dark:border-white-300"></div>
-                <div className="flex flex-col justify-between lg:flex-row items-center">
+        <div className={Styles.footerMainContainer}>
+            <div className={Styles.footerMainContentContainer}>
+                <div className={Styles.footerBorder} />
+                <div className={Styles.footerData}>
                     <p> Built with Next.js, TailwindCss and GCP</p>
 
 
-                    <div className="flex flex-wrap pt-2 sm:space-x-4 space-x-2 font-medium lg:pt-0">
+                    <div className={Styles.linksContainer}>
                         <a
                             href="https://twitter.com/biker_unlocked"
-                            className={"transition-colors hover:text-yellow-500"}
+                            className={Styles.linkData}
                             target="_blank"
                             rel="noreferrer"
                         >
                             Twitter
                         </a>
                         <a
                             href="https://www.linkedin.com/in/saaifali/"
-                            className={"transition-colors hover:text-yellow-500"}
+                            className={Styles.linkData}
                             target="_blank"
                             rel="noreferrer"
                         >
                             LinkedIn
                         </a>
                         <a
                             href="https://github.com/saaifali"
-                            className={"transition-colors hover:text-yellow-500"}
+                            className={Styles.linkData}
                             target="_blank"
                             rel="noreferrer"
                         >