mobile PQA

src/components/Footer.tsx

@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebook, faXTwitter, faInstagram, faLinkedin } from '@fortawesome/free-brands-svg-icons';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import { faEnvelope, faLightbulb } from '@fortawesome/free-solid-svg-icons';
+import { AppContext } from '../controllers/AppContext';
 
 const Footer = () => {
+  const appContext = useContext(AppContext);
+  const isDarkMode = appContext?.isDarkMode;
+
   const handleLinkClick = (url: string) => {
     window.open(url, '_blank');
   };
@@ -12,15 +16,22 @@ const Footer = () => {
     <footer className="z-50">
       <div className="flex justify-center z-20 h-auto space-x-6">
         <FontAwesomeIcon
-          icon={faFacebook}
-          className="sm:text-4xl text-2xl hover:translate-y-[-2px] hover:scale-110 transition-all duration-300"
-          onClick={() => handleLinkClick('https://www.facebook.com/jonathan.lane.5473')}
+          icon={faLightbulb}
+          className="sm:block hidden sm:text-4xl text-2xl hover:translate-y-[-2px] hover:scale-110 transition-all duration-300"
+          onClick={() => appContext?.setIsDarkMode && appContext.setIsDarkMode(!isDarkMode)}
         />
+        <div className='flex sm:hidden'>
         <FontAwesomeIcon
           icon={faXTwitter}
-          className="sm:text-4xl text-2xl hover:translate-y-[-2px] hover:scale-110 transition-all duration-300"
+          className="sm:hidden block sm:text-4xl text-2xl hover:translate-y-[-2px] hover:scale-110 transition-all duration-300 -ml-6"
           onClick={() => handleLinkClick('https://twitter.com/jlane_')}
         />
+        </div>
+        <FontAwesomeIcon
+          icon={faFacebook}
+          className="sm:text-4xl text-2xl hover:translate-y-[-2px] hover:scale-110 transition-all duration-300"
+          onClick={() => handleLinkClick('https://www.facebook.com/jonathan.lane.5473')}
+        />
         <FontAwesomeIcon
           icon={faInstagram}
           className="sm:text-4xl text-2xl hover:translate-y-[-2px] hover:scale-110 transition-all duration-300"

src/pages/index.tsx

@@ -50,10 +50,10 @@ const IndexPage: React.FC<PageProps> = () => {
         <div className="flex flex-col sm:items-center justify-center sm:p-6 z-50">
           <Navbar />
           <div className="z-50">
-            <div className={`sm:text-4xl md:text-4xl text-4xl sm:my-6 mt-10 font-pixel ${isDarkMode ? 'text-white' : 'text-black'} sm:text-center sm:ml-auto ml-6`}>
+            <div className={`xs:text-4xl xxs:text-3xl text-2xl sm:my-6 mt-10 font-pixel ${isDarkMode ? 'text-white' : 'text-black'} sm:text-center sm:ml-auto ml-6`}>
               <span className="max-sm:hidden">:// </span><span className="type-devTitle tracking-wide"></span>
             </div>
-            <p className="sm:hidden mt-4 mx-6 mb-20 tracking-wide leading-relaxed max-w-md">
+            <p className="xs:text-base xs:leading-relaxed xxs:text-sm xxs:leading-relaxed text-xs leading-relaxed sm:hidden mt-4 mx-6 xs:mb-20 mb-16 tracking-wide max-w-md">
               I'm Jono Lane, a full-stack developer based in Nashville. I enjoy creating impactful products that adapt to the ever-changing landscape of technology.
             </p>
             <h2 className={`sm:hidden border-t ${isDarkMode ? 'border-white' : 'border-black'} border-solid mx-7 uppercase pt-2 tracking-wide`}>

tailwind.config.js

@@ -1,12 +1,19 @@
 /** @type {import('tailwindcss').Config} */
+
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
   content: [
     `./src/pages/**/*.{js,jsx,ts,tsx}`,
     `./src/components/**/*.{js,jsx,ts,tsx}`,
   ],
   theme: {
+    screens: {
+      'xs': '379px',
+      'xxs': '320px',
+      ...defaultTheme.screens,
+    },
     extend: {
-
       // remove if you want pitch black
       colors: {
         black: '#111111',