Implemented Font Awesome as SVG+JS instead of CSS and CDN

jstamant · Jan 22, 2024 · bedf74b · bedf74b
1 parent c6e042e
commit bedf74b
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 19 deletions.
diff --git a/app/layout.js b/app/layout.js
@@ -1,8 +1,12 @@
 import './globals.css'
 import { Source_Sans_3 } from 'next/font/google'
-import Script from 'next/script'
 import { GoogleAnalytics } from '@next/third-parties/google'
 
+// Fix Font Awesome for use with Next.js (need to manually import FA's CSS)
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+
+
 const source_sans = Source_Sans_3({
   subsets: ['latin'],
   display: 'swap',
@@ -29,7 +33,6 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en" className={`${source_sans.variable}`}>
       <body className="text-center text-xl text-neutral-700">{children}</body>
-      <Script src="https://kit.fontawesome.com/ae8eac997d.js" crossOrigin="anonymous" />
       <GoogleAnalytics gaId="G-8RBZ9QXX9H" />
     </html>
   )

diff --git a/app/page.js b/app/page.js
@@ -1,6 +1,10 @@
 import Header from '../components/header'
 import Footer from '../components/footer'
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowUpRightFromSquare, faListUl, faRocket } from '@fortawesome/free-solid-svg-icons'
+import { faMessage } from '@fortawesome/free-regular-svg-icons'
+
 export default function Page() {
   return (
     <>
@@ -11,7 +15,7 @@ export default function Page() {
           <p className="mt-8 mb-10 text-2xl">{process.env.site.subtitle}</p>
           <a className="block bg-theme-500 text-white font-bold text-lg p-4 rounded-lg w-64 mx-auto uppercase shadow-xl transition hover:bg-theme-600 hover:-translate-y-1 duration-300"
     href="#about">See why
-            <i className="fa-solid fa-rocket ml-2"></i>
+            <FontAwesomeIcon icon={faRocket} className="ml-2" />
           </a>
         </div>
       </section>
@@ -23,8 +27,8 @@ export default function Page() {
           <div className="grid md:grid-cols-2 gap-4 my-8 justify-around text-left">
             <div className="mb-8">
               <h2 className="text-3xl font-bold text-neutral-800 my-4">Get to know me!</h2>
-              <p className="my-4">I'm a <strong>Frontend Web Developer</strong>, bringing design and ideation to fruition through web technologies. Check out some of my work in the <a className="font-bold hover:text-theme-700" href="#projects">Projects<i className="fa-solid fa-list-ul ml-1 text-base"></i></a> section below.</p>
-              <p className="my-4">I aim to be versatile in all facets - not just programming! I pull my knowledge from many disciplines: engineering, telecommunications, woodworking, skateboarding, <a className="font-bold hover:text-theme-700" href="https://www.tabletop.engineering/" target="_blank">role-playing games<i className="fa-solid fa-arrow-up-right-from-square ml-1 text-base"></i></a>, life-coaching, and more!</p>
+              <p className="my-4">I'm a <strong>Frontend Web Developer</strong>, bringing design and ideation to fruition through web technologies. Check out some of my work in the <a className="font-bold hover:text-theme-700" href="#projects">Projects<FontAwesomeIcon icon={faListUl} className="ml-1 text-base" /></a> section below.</p>
+              <p className="my-4">I aim to be versatile in all facets - not just programming! I pull my knowledge from many disciplines: engineering, telecommunications, woodworking, skateboarding, <a className="font-bold hover:text-theme-700" href="https://www.tabletop.engineering/" target="_blank">role-playing games<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1 text-base" /></a>, life-coaching, and more!</p>
               <p className="my-4">I'm <strong>currently looking for a development job</strong>. If you like what you see and you think we'd be a good match, then don't hesitate to contact me.</p>
             </div>
             <div className="mb-8">
@@ -56,7 +60,7 @@ export default function Page() {
             </div>
           </div>
         </div>
-        <a className="block bg-theme-500 text-white font-bold text-lg p-4 rounded-lg w-64 mx-auto uppercase shadow-xl transition hover:bg-theme-600 hover:-translate-y-1 duration-300" href="#projects">My projects<i className="fa-solid fa-list-ul ml-2"></i></a>
+        <a className="block bg-theme-500 text-white font-bold text-lg p-4 rounded-lg w-64 mx-auto uppercase shadow-xl transition hover:bg-theme-600 hover:-translate-y-1 duration-300" href="#projects">My projects<FontAwesomeIcon icon={faListUl} className="ml-2" /></a>
       </section>
 
       <section id="projects" className="py-24">
@@ -75,11 +79,11 @@ export default function Page() {
               <a className="flex items-center justify-center text-white font-bold text-lg h-16 rounded-lg w-64 uppercase shadow-xl transition-colors duration-300 bg-theme-500 hover:bg-theme-600"
                 href="https://jstamant-haiku.netlify.app/" target="_blank">
                 <p>See live</p>
-                <i className="fa-solid fa-arrow-up-right-from-square ml-2"></i>
+                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
               </a>
               <a className="flex items-center justify-center font-bold text-lg h-16 rounded-lg w-64 uppercase shadow-xl border-2 transition-colors duration-300 bg-white text-theme-500 border-theme-500 hover:bg-theme-100 text-theme-600 hover:border-theme-600" href="https://github.com/jstamant/haiku" target="_blank">
                 <p>Git Repo</p>
-                <i className="fa-solid fa-arrow-up-right-from-square ml-2"></i>
+                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
               </a>
             </div>
           </div>
@@ -91,7 +95,7 @@ export default function Page() {
               <p>Whenever I spend time on this project, I find myself learning more about data-structures and algorithms.</p>
               <a className="flex items-center justify-center font-bold text-lg h-16 rounded-lg w-64 uppercase shadow-xl border-2 transition-colors duration-300 bg-white text-theme-500 border-theme-500 hover:bg-theme-100 text-theme-600 hover:border-theme-600" href="https://github.com/jstamant/zombie-game-project" target="_blank">
                 <p>Git Repo</p>
-                <i className="fa-solid fa-arrow-up-right-from-square ml-2"></i>
+                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
               </a>
             </div>
           </div>
@@ -104,12 +108,12 @@ export default function Page() {
               <a className="flex items-center justify-center text-white font-bold text-lg h-16 rounded-lg w-64 uppercase shadow-xl transition-colors duration-300 bg-theme-500 hover:bg-theme-600"
                 href="https://jstamant.itch.io/burger-burner" target="_blank">
                 <p>See live</p>
-                <i className="fa-solid fa-arrow-up-right-from-square ml-2"></i>
+                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
               </a>
               <a className="flex items-center justify-center font-bold text-lg h-16 rounded-lg w-64 uppercase shadow-xl border-2 transition-colors duration-300 bg-white text-theme-500 border-theme-500 hover:bg-theme-100 text-theme-600 hover:border-theme-600"
                 href="https://github.com/jstamant/burger-burner-deluxe" target="_blank">
                 <p>Git Repo</p>
-                <i className="fa-solid fa-arrow-up-right-from-square ml-2"></i>
+                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
               </a>
             </div>
           </div>
@@ -125,7 +129,7 @@ export default function Page() {
             <p className="my-4">I'm looking for a development position and would love to hear from you if you're interested!<br />I'm excited to see what kind of challenges the future brings!</p>
           </div>
           <a className="block bg-theme-500 text-white font-bold text-lg p-4 rounded-lg w-64 mx-auto uppercase shadow-xl transition hover:bg-theme-600 hover:-translate-y-1 duration-300"
-            href="mailto:[email protected]"><i className="fa-regular fa-message mr-2"></i>Message me</a>
+            href="mailto:[email protected]"><FontAwesomeIcon icon={faMessage} className="mr-2" />Message me</a>
         </div>
       </section>
 

diff --git a/components/footer.js b/components/footer.js
@@ -1,16 +1,20 @@
 import React from 'react'
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub, faInstagram, faLinkedin } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
+
 const Footer = () => {
   return (
     <footer className="bg-neutral-900 text-white py-8 text-left text-base">
       <div className="flex flex-col md:flex-row-reverse justify-between w-11/12 mx-auto">
         <div className="my-8">
           <h1 className="uppercase font-bold mb-4 text-xl">Socials</h1>
           <nav className="text-2xl">
-            <a className="fa-brands fa-github px-1" href="https://github.com/jstamant"></a>
-            <a className="fa-brands fa-linkedin px-1" href="https://www.linkedin.com/in/justinstamant/"></a>
-            <a className="fa-brands fa-instagram px-1" href="https://www.instagram.com/jstamant_/"></a>
-            <a className="fa-regular fa-envelope px-1" href="mailto:[email protected]"></a>
+            <a className="px-1" href="https://github.com/jstamant"><FontAwesomeIcon icon={faGithub} /></a>
+            <a className="px-1" href="https://www.linkedin.com/in/justinstamant/"><FontAwesomeIcon icon={faInstagram} /></a>
+            <a className="px-1" href="https://www.instagram.com/jstamant_/"><FontAwesomeIcon icon={faLinkedin} /></a>
+            <a className="px-1" href="mailto:[email protected]"><FontAwesomeIcon icon={faEnvelope} /></a>
           </nav>
         </div>
         <div className="my-8">

diff --git a/components/header.js b/components/header.js
@@ -1,5 +1,8 @@
 import React from 'react'
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons'
+
 // TODO get home link added?
 /* {{- $home_link := "/" | absURL }}
  * {{- if .IsHome }}
@@ -32,8 +35,8 @@ const Header = () => {
             </li>
             <li className="md:hidden h-full flex items-center">
               <input type="checkbox" className="peer group w-16 h-16 z-10 opacity-0 absolute right-0" />
-              <a className="w-16 peer-checked:hidden"><i className="fa-solid fa-bars text-3xl"></i></a>
-              <a className="w-16 hidden peer-checked:block"><i className="fa-solid fa-xmark text-3xl"></i></a>
+              <a className="w-16 peer-checked:hidden"><FontAwesomeIcon icon={faBars} className="text-3xl" /></a>
+              <a className="w-16 hidden peer-checked:block"><FontAwesomeIcon icon={faXmark} className="text-3xl" /></a>
               <nav className="hidden border text-base md:invisible z-0 bg-white peer-checked:block right-0 top-16 absolute flex flex-col items-center divide-y">
                 <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href="/"><p>Home</p></a>
                 <a className="transition-colors duation-300 hover:text-theme-500 w-32 h-16 flex items-center justify-center" href="#about"><p>About</p></a>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@next/third-parties": "^14.1.0",
     "next": "^14.1.0",
     "react": "^18.2.0",