(WIP) Migrate away from styled components towards using just Tailwind for CSS

.eslintrc.js

@@ -5,10 +5,6 @@ module.exports = {
 
   extends: 'react-app',
 
-  globals: {
-    tw: true
-  },
-
   plugins: ['@emotion'],
 
   rules: {

content/PortfolioProjects.json

@@ -49,7 +49,6 @@
       "GraphQL",
       "TailwindCSS",
       "CSS",
-      "Emotion JS",
       "Netlify"
     ],
     "repoLink": "https://github.com/markschnabel/mark-schnabel-dot-com",

gatsby-browser.js

@@ -5,3 +5,4 @@
  */
 
 // You can delete this file if you're not using it
+import './src/styles/global.css';

gatsby-config.js

@@ -20,8 +20,7 @@ module.exports = {
     );
   },
   plugins: [
-    'gatsby-plugin-tailwindcss',
-    'gatsby-plugin-emotion',
+    'gatsby-plugin-postcss',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',

package.json

@@ -8,17 +8,12 @@
     "Portfolio"
   ],
   "dependencies": {
-    "@emotion/css": "^11.10.6",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
     "gatsby": "^5.8.1",
     "gatsby-image": "^3.11.0",
-    "gatsby-plugin-emotion": "^8.8.0",
     "gatsby-plugin-manifest": "^5.8.0",
     "gatsby-plugin-offline": "^6.8.0",
     "gatsby-plugin-react-helmet": "^6.8.0",
     "gatsby-plugin-sharp": "^5.8.1",
-    "gatsby-plugin-tailwindcss": "^1.0.3",
     "gatsby-source-filesystem": "^5.8.0",
     "gatsby-transformer-json": "^5.8.0",
     "gatsby-transformer-sharp": "^5.8.0",
@@ -33,18 +28,20 @@
     "react-reveal": "^1.2.2",
     "react-scroll": "^1.8.9",
     "react-svg-spinner": "^1.0.4",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.3",
     "typeface-inter": "^3.18.1",
     "typeface-lato": "1.1.13",
     "validator": "^13.9.0"
   },
   "devDependencies": {
-    "@emotion/eslint-plugin": "^11.10.0",
+    "autoprefixer": "^10.4.15",
     "dotenv": "^16.0.3",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-react-app": "^7.0.1",
+    "gatsby-plugin-postcss": "^6.12.0",
     "http-proxy-middleware": "^2.0.6",
-    "netlify-lambda": "^2.0.16"
+    "netlify-lambda": "^2.0.16",
+    "postcss": "^8.4.29"
   },
   "scripts": {
     "format": "prettier --write '**/*.js'",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

src/components/about/About.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Grid, Row, Col } from 'react-flexbox-grid';
-import styled from '@emotion/styled';
 import { StaticQuery, graphql } from 'gatsby';
 import Fade from 'react-reveal/Fade';
 
@@ -10,16 +9,6 @@ import Bio from './Bio';
 import SkillsHeader from './SkillsHeader';
 import Skill from './Skill';
 
-const SkillsSectionHeader = styled.h2`
-  ${tw`text-xl m-0 text-center tracking-wide font-semibold uppercase mt-20`};
-`;
-
-const Underline = styled.div`
-  ${tw`bg-white w-100% mb-2 m-auto mt-1`};
-  max-width: 180px;
-  height: 1px;
-`;
-
 function formatSkills(skills) {
   return skills.map(skillName => {
     return <Skill key={'skill-' + skillName} name={skillName} />;
@@ -66,12 +55,12 @@ const About = () => {
                 <Row>
                   <Col xs={12}>
                     <Fade left delay={50} distance="25px">
-                      <SkillsSectionHeader>
+                      <h3 className="text-xl m-0 text-center tracking-wide font-semibold uppercase mt-20">
                         Technical Skills
-                      </SkillsSectionHeader>
+                      </h3>
                     </Fade>
                     <Fade right delay={50} distance="25px">
-                      <Underline />
+                      <hr className="bg-white w-100% mb-2 m-auto mt-1 max-w-180" />
                     </Fade>
                   </Col>
                 </Row>

src/components/about/Bio.js

@@ -1,84 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Fade from 'react-reveal/Fade';
 
-const BioWrapper = styled.div`
-  ${tw`h-100% flex flex-col justify-between py-2 text-center lg:text-left lg:py-8`};
-  max-width: 500px;
-  margin: auto;
 
-  @media only screen and (min-width: 992px) {
-    margin-left: 25px;
-    min-height: 350px;
-  }
-`;
-
-const BioTitle = styled.h2`
-  ${tw`text-xl m-0 tracking-wide font-semibold uppercase`};
-`;
-
-const Underline = styled.div`
-  ${tw`bg-white w-100% mb-2 max-w-12 m-auto lg:m-0 mb-4`};
-  height: 1px;
-`;
-
-const BioBody = styled.p`
-  ${tw`text-base font-secondary my-1 font-light text-grey-light tracking-wide pt-2 lg:mt-0 mb-12 lg:mb-4`};
-  font-size: 16px;
-
-  @media only screen and (max-width: 576px) {
-    font-size: 0.95rem;
-  }
-`;
-
-const ResumeLink = styled.a`
-  ${tw`border-solid border-2px border-white text-white bg-transparent py-2 px-3
-  text-lg font-thin cursor-pointer w-100% my-2 no-underline
-  hover:bg-white hover:text-black inline mr-5%`};
-  transition: all 0.3s ease;
-
-  @media only screen and (min-width: 992px) {
-    max-width: 160px;
-  }
-
-  @media only screen and (max-width: 450px) {
-    display: block;
-  }
-`;
+// @media only screen and (min-width: 992px) {
+//   margin-left: 25px;
+//   min-height: 350px;
+// }
 
 const Bio = ({ professionalBio, personalBio }) => {
   return (
     <Fade bottom delay={50} distance="25px">
-      <BioWrapper>
+      <div className="h-100% flex flex-col justify-between py-2 text-center lg:text-left lg:py-2 m-auto max-w-lg">
         <div>
           <Fade left delay={50} distance="25px">
-            <BioTitle>Bio</BioTitle>
+            <h2 className="text-2xl m-0 tracking-wide font-semibold uppercase">Bio</h2>
           </Fade>
 
           <Fade right delay={50} distance="25px">
-            <Underline />
+            <hr className="bg-white w-100% max-w-12 m-auto lg:m-0 mb-4 max-w-4xs" />
           </Fade>
-          <BioBody>{professionalBio}</BioBody>
-          <BioBody>{personalBio}</BioBody>
+          <p className="text-base font-secondary my-1 font-light text-grey-light tracking-wide pt-2 lg:mt-0 mb-12 lg:mb-4">
+            {professionalBio}
+          </p>
+          <p className="text-base font-secondary my-1 font-light text-grey-light tracking-wide pt-2 lg:mt-0 mb-12 lg:mb-4">
+            {personalBio}
+          </p>
         </div>
         <div>
-          <ResumeLink
+          <button
+            className="resume-button"
             href="https://drive.google.com/file/d/1gFIOl2FB78QCDlLfV1fZKAjQ4sxJs3Oe/view?usp=sharing"
             target="_blank"
             rel="noopener noreferrer"
           >
             RESUME (PDF)
-          </ResumeLink>
-          <ResumeLink
+          </button>
+          <button
+            className="resume-button"
             href="https://docs.google.com/document/d/1TP3NgI6gz1RBJ5tmNzjpJ5YQ5pczfPp1fPRrcAuk6Dg/edit?usp=sharing"
             target="_blank"
             rel="noopener noreferrer"
           >
             RESUME (DOC)
-          </ResumeLink>
+          </button>
         </div>
-      </BioWrapper>
+      </div>
     </Fade>
   );
 };

src/components/about/ProfilePicture.js

@@ -1,26 +1,8 @@
 import React from 'react';
-import Img from 'gatsby-image';
+import Image from 'gatsby-image';
 import { StaticQuery, graphql } from 'gatsby';
-import styled from '@emotion/styled';
 import Fade from 'react-reveal/Fade';
 
-const ImageContainer = styled.div`
-  position: relative;
-  max-width: 325px;
-  max-height: 300px;
-  height: 100%;
-  width: 100%;
-  transition: all 0.6s ease;
-  margin: auto;
-
-  @media only screen and (min-width: 992px) {
-    margin-left: auto;
-    margin-right: 35px;
-    max-width: 400px;
-    max-height: 350px;
-  }
-`;
-
 const ProfilePicture = () => {
   return (
     <StaticQuery
@@ -35,20 +17,19 @@ const ProfilePicture = () => {
           }
         }
       `}
+
       render={data => {
         return (
-          <>
-            <div>
-              <Fade top delay={50} distance="25px">
-                <ImageContainer>
-                  <Img
-                    style={{ borderRadius: '5px' }}
-                    fluid={data.file.childImageSharp.fluid}
-                  />
-                </ImageContainer>
-              </Fade>
-            </div>
-          </>
+          <div>
+            <Fade top delay={50} distance="25px">
+              <div className="profile-picture">
+                <Image
+                  style={{ borderRadius: '5px' }}
+                  fluid={data.file.childImageSharp.fluid}
+                />
+              </div>
+            </Fade>
+          </div>
         );
       }}
     />

src/components/about/Skill.js

@@ -1,13 +1,7 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-const SkillStyle = styled.p`
-  ${tw`bg-grey px-3 py-2 font-semibold text-black inline-block m-1 `};
-  border-radius: 2px;
-`;
 
 const Skill = ({ name }) => {
-  return <SkillStyle>{name}</SkillStyle>;
+  return <p className="bg-grey px-3 py-2 font-semibold text-black inline-block m-1 rounded-sm">{name}</p>;
 };
 
 export default Skill;

src/components/about/SkillsHeader.js

@@ -1,13 +1,7 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-const HeaderText = styled.h2`
-  ${tw`m-0 tracking-wide font-semibold uppercase mt-8 text-center mb-2`};
-  font-size: 1.1rem;
-`;
 
 const SkillsHeader = ({ headerText }) => {
-  return <HeaderText>{headerText}</HeaderText>;
+  return <h4 className="m-0 tracking-wide font-semibold uppercase mt-8 text-center mb-2 text-base">{headerText}</h4>;
 };
 
 export default SkillsHeader;

src/components/contact/Contact.js

@@ -4,15 +4,6 @@ import Fade from 'react-reveal/Fade';
 
 import SectionHeader from '../shared/SectionHeader';
 import ContactLinks from './ContactLinks';
-import styled from '@emotion/styled';
-
-const Header = styled.h2`
-  ${tw`text-6xl m-2`};
-
-  @media only screen and (max-width: 992px) {
-    ${tw`text-3xl text-center m-0`};
-  }
-`;
 
 const Contact = () => {
   return (
@@ -22,10 +13,10 @@ const Contact = () => {
         <Row>
           <Col lg={6}>
             <Fade left delay={50} distance="50px">
-              <Header>Let's build</Header>
+              <h3 className="text-3xl sm:text-center lg:text-6xl lg:m-2">Let's build</h3>
             </Fade>
             <Fade right delay={50} distance="50px">
-              <Header>something</Header>
+              <h3 className="text-3xl sm:text-center lg:text-6xl lg:m-2">something</h3>
             </Fade>
           </Col>
           <Col lg={6}>