Updating sytling and project descriptions

Author: BennettTaylor

public/background.jpg

@@ -19,22 +19,24 @@ export default function Art() {
     <div className="space-y-12">
         {artSections.map(section => (
         <div key={section.key}>
-            <h2 className="text-center chicle-regular text-3xl font-semibold mb-4">{section.title}</h2>
-            <div className="flex items-center justify-center flex-wrap gap-6">
-            {section.images.map((src, idx) => (
-                <div
-                key={src}
-                className="bg-white shadow-xl rounded-lg cursor-pointer transform hover:scale-105 transition-transform duration-300 pop-in-div"
-                style={{ border: "8px solid #FFFFFF" }}
-                >
-                <img
-                    src={src}
-                    alt={`${section.title} ${idx + 1}`}
-                    className="max-w-xs max-h-80 object-contain cursor-pointer"
-                    onClick={() => setModalImg(src)}
-                />
-                </div>
-            ))}
+            <div className="flex flex-col justify-center items-center mb-6">
+              <h2 className="bg-white py-2 px-6 rounded-lg shadow-2xl w-fit text-center tinos-400 text-3xl font-semibold mb-6">{section.title}</h2>
+              <div className="flex items-center justify-center flex-wrap gap-6">
+              {section.images.map((src, idx) => (
+                  <div
+                  key={src}
+                  className="bg-white shadow-xl rounded-lg cursor-pointer transform hover:scale-105 transition-transform duration-300 pop-in-div"
+                  style={{ border: "8px solid #FFFFFF" }}
+                  >
+                  <img
+                      src={src}
+                      alt={`${section.title} ${idx + 1}`}
+                      className="max-w-xs max-h-80 object-contain cursor-pointer"
+                      onClick={() => setModalImg(src)}
+                  />
+                  </div>
+              ))}
+            </div>
             </div>
         </div>
         ))}
@@ -47,7 +49,7 @@ export default function Art() {
         <img
             src={modalImg}
             alt="Full size art"
-            className="max-w-3xl max-h-[90vh] rounded-lg border-8 border-white shadow-2xl"
+            className="max-w-3xl max-h-[90vh] rounded-lg border-8 border-white shadow-2xl max-w-full max-h-full object-contain"
         />
         </div>
     )}

src/app/art/page.js

@@ -3,7 +3,7 @@ import React from 'react';
 
 const CV = () => {
     return (
-        <div className="max-w-4xl mx-auto p-6 lg:p-10 shadow-2xl bg-white rounded-xl my-8 text-black chicle-regular pop-in-div">
+        <div className="max-w-4xl mx-auto p-6 lg:p-10 shadow-2xl bg-white rounded-xl my-8 text-black tinos-400 pop-in-div">
             <main className=" space-y-8">
                 <section>
                     <h2 className="text-lg font-extrabold border-b pb-1 mb-4">EDUCATION</h2>    

src/app/cv/page.js

@@ -1,11 +1,10 @@
 /* Tailwind CSS Directives */
 @import "tailwindcss";
-@import url('https://fonts.googleapis.com/css2?family=Chicle&display=swap');
 
 @theme {
   --color-black: #252627;
   --color-peach: #FFCAB1;
-  --color-whiter: #EEF0EB;
+  --color-whiter: #FFFCF7;
   --color-lightgreen: #A1C084;
   --color-green: #659157;
   --color-blue: #69A2B0;
@@ -14,6 +13,37 @@
   --color-olive: #BFB48F;
 }
 
+.chicle-regular {
+  font-family: Chicle,serif;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.roboto-slab-400 {
+  font-family: "Roboto Slab", serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.playfair-400 {
+  font-family: "Playfair Display", serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.tinos-400 {
+  font-family: "Tinos", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.tinos-bold {
+  font-family: "Tinos", serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
 @keyframes popIn {
   0% {
     transform: scale(0.5);
@@ -27,12 +57,6 @@
   animation: popIn 0.4s ease-out forwards;
 }
 
-.chicle-regular {
-  font-family: "Chicle", serif;
-  font-weight: 400;
-  font-style: normal;
-}
-
 @layer base {
   h1, h2, h3, h4, h5, h6 {
     @apply font-bold;

src/app/globals.css

@@ -1,19 +1,51 @@
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import './globals.css';
+import { Roboto_Slab, Chicle, Playfair, Tinos } from 'next/font/google';
 
 export const metadata = {
   title: 'Bennett Taylor',
   description: 'A portfolio showcasing the work of Bennett Taylor',
 }
+
+const robotoSlab = Roboto_Slab({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-roboto-slab',
+});
+
+const chicle = Chicle({
+  weight: '400',
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-chicle',
+});
+
+const playfair = Playfair({
+  weight: '400',
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-playfair',
+});
+
+const tinos = Tinos({
+  weight: '400',
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-tinos',
+});
+
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" className="bg-gradient-to-t from-lightgreen to-black">
+    <html lang="en" className={`${robotoSlab.variable} ${chicle.variable} ${playfair.variable} ${tinos.variable} bg-gradient-to-t from-lightgreen to-black`}>
       <body>
-        <div className="bg-stone-50 flex flex-col min-h-screen flex flex-col min-h-screen">
-          <Header />
-          <main className="flex-grow">{children}</main>
-          <Footer />
+        <div className="relative isolate flex flex-col min-h-screen bg-[url(/background.jpg)]">
+          <div className="absolute inset-0 backdrop-blur-xs" aria-hidden="true" />
+          <div className="relative z-10 flex flex-col flex-grow">
+            <Header />
+            <main className="flex-grow">{children}</main>
+            <Footer />
+          </div>
         </div>
       </body>
     </html>

src/app/layout.js

@@ -6,7 +6,7 @@ import Contact from "../components/Contact";
 export default function Home() {
   return (
     <div className="flex flex-col min-h-screen">
-      <main className="flex-grow">
+      <main className="">
         <Welcome />
         <About />
         <Projects />

src/app/page.js

@@ -5,49 +5,48 @@ return (
     <section className="p-4 md:p-10 mx-auto max-w-7xl">
         <div className="flex flex-row items-center justify-center pop-in-div">
             <div className="max-w-3xl bg-white p-8 shadow-2xl rounded-lg">
-                <h2 className="chicle-regular text-2xl md:text-3xl font-bold text-center mb-6">Who am I?</h2>
-                <p className="indent-8 chicle-regular text-md md:text-lg font-bold mb-6">
-                    As the URL, GitHub respository, and header for this website might suggest, my name is Bennett Taylor!
+                <h2 className="tinos-400 text-2xl md:text-3xl font-bold text-center mb-6">Who Am I?</h2>
+                <p className="indent-8 tinos-400 text-md md:text-lg font-bold mb-6">
+                    As the URL, GitHub repository, and header for this website might suggest, my name is Bennett Taylor!
                     I am currently pursuing a Master's degree in Electrical and Computer Engineering at Boston University,
                     where I am deepening my expertise in embedded systems, computer architecture, and hardware-software integration.
                 </p>
-                <p className="indent-8 chicle-regular text-md md:text-lg font-bold mb-6">
-                    Generally speaking, I like to work on challenging and interesting project where I can learn something new.
-                    Understanding how things work and figuring out how to make them better is at the core of what I want to do.
+                <p className="indent-8 tinos-400 text-md md:text-lg font-bold mb-6">
+                    Generally speaking, I enjoy working on challenging and interesting projects where I can learn something new.
+                    Understanding how things work and figuring out how to make them better is at the core of what drives me.
                 </p>
-                <p className="indent-8 chicle-regular text-md md:text-lg font-bold mb-6">
-                    While I complete my degree, I'm looking for job or co-op opportunities in software engineering, embedded systems,
+                <p className="indent-8 tinos-400 text-md md:text-lg font-bold mb-6">
+                    While I complete my degree, I'm seeking job or co-op opportunities in software engineering, embedded systems,
                     or hardware design. If you have an opportunity that you think I might be a good fit for, please don't hesitate
                     to reach out via email (betaylor83@gmail.com).
                 </p>
-                <h2 className="chicle-regular text-2xl md:text-3xl font-bold text-center mb-6">My Backgound</h2>
-                <p className="indent-8 chicle-regular text-md md:text-lg font-bold mb-6">
-                    Originally I'm from Groton, Massachusetts, where I graduated from Groton-Dunstable Regional High School
+                <h2 className="tinos-400 text-2xl md:text-3xl font-bold text-center mb-6">My Background</h2>
+                <p className="indent-8 tinos-400 text-md md:text-lg font-bold mb-6">
+                    I'm originally from Groton, Massachusetts, where I graduated from Groton-Dunstable Regional High School
                     and attained the rank of Eagle Scout (Troop 3 Groton, 2021).
                 </p>
-                <p className="indent-8 chicle-regular text-md md:text-lg font-bold mb-6">
-                    I completed my undergraduate studies at
-                    Boston University, graduating Cum Laude in 2025 with a B.S. in Computer Engineering. I started my academic
-                    journey as a Biomedical Engineering major, but changed course after completing an arthroscopic equipment
-                    internship at Johnson & Johnson during the summer of 2022. During this internship I had the opportunity to
-                    join the embedded software team to work on a project to improve & test the device's mechanical performance
-                    through software improvements. This experience sparked my interest in embedded systems and computer engineering,
-                    and I decided to switch majors to learn more about how embedded devices and computers work beneath the hood.
+                <p className="indent-8 tinos-400 text-md md:text-lg font-bold mb-6">
+                    I completed my undergraduate studies at Boston University, graduating Cum Laude in 2025 with a B.S. in Computer Engineering.
+                    I began my academic journey as a Biomedical Engineering major but changed my focus after an internship centered on arthroscopic equipment
+                    at Johnson & Johnson during the summer of 2022. During this internship, I had the opportunity to
+                    join the embedded software team to work on a project improving and testing the device's mechanical performance
+                    through software enhancements. This experience sparked my interest in embedded systems and computer engineering,
+                    prompting me to switch majors to learn more about how these devices and computers work "under the hood."
                 </p>
-                <p className="indent-8 chicle-regular text-md md:text-lg font-bold mb-6">
-                    Since then I've had the opportunity to work on a variety of projects between coursework, personal projects, and an internship.
-                    More information about those projects can be found below this section or on the projects page. Through this work I've developed
+                <p className="indent-8 tinos-400 text-md md:text-lg font-bold mb-6">
+                    Since then, I've had the opportunity to work on a variety of projects through coursework, personal projects, and an internship.
+                    More information about those projects can be found below or on the projects page. Through this work, I've developed
                     my skills in C, Linux, BASH, Verilog, and Python. Although I have experience with many other programming languages, frameworks,
-                    and tools, these are what I would consider my core strengths. I find myself most interested in the design and interaction of 
-                    hardware and software, which I hope to pursue in my future career.
+                    and tools, these are what I would consider my core strengths. I find myself most interested in the design and interaction between 
+                    hardware and software, which I hope to pursue in my career.
                 </p>
-                <h2 className="chicle-regular text-2xl md:text-3xl font-bold text-center mb-6">In My Free Time</h2>
-                <p className="indent-8 chicle-regular text-md md:text-lg font-bold mb-6">
-                    Outside of technical work, I enjoy hiking, backpacking, running, rock climbing, painting, drawing, and photography.
-                    You can view the highlights of my artistic work on the Art page of this website! I developed a love of the outdoors
-                    while in the Boy Scouts, where I first started backpacking and completed many, many conservation projects.
-                    The wilderness seems to have a calming, motivating effect on me, and I definitely feel refreshed after spending time outside.
-                    I would also consider myself quite active, having played soccer and baseball as a kid, and run during cross country and track
+                <h2 className="tinos-400 text-2xl md:text-3xl font-bold text-center mb-6">In My Free Time</h2>
+                <p className="indent-8 tinos-400 text-md md:text-lg font-bold mb-6">
+                    Outside of my technical work, I enjoy hiking, backpacking, running, rock climbing, painting, drawing, and photography.
+                    You can view the highlights of my artistic work on the Art page of this website! I developed a love for the outdoors
+                    while in the Boy Scouts, where I first started backpacking and completed many conservation projects.
+                    The wilderness has a calming, motivating effect on me, and I always feel refreshed after spending time outside.
+                    I've always been active, having played soccer and baseball as a kid and run on cross country and track teams
                     in high school and college (although I was never particularly fast).
                 </p>
             </div>

src/components/About.js

@@ -5,8 +5,8 @@ const Contact = () => {
   return (
     <section className="p-4 md:p-10 mx-auto max-w-7xl flex flex-col items-center justify-center">
       <div className="bg-white shadow-2xl rounded-lg m-10 p-10">
-        <h2 className="chicle-regular text-3xl text-center font-bold mb-4">Contact Me</h2>
-        <p className="chicle-regular mb-6 text-lg text-center">
+        <h2 className="tinos-400 text-3xl text-center font-bold mb-4">Contact Me</h2>
+        <p className="tinos-400 mb-6 text-lg text-center">
           Feel free to reach out via email or connect with me on LinkedIn!
         </p>
 
@@ -17,7 +17,7 @@ const Contact = () => {
           className="block w-full max-w-md text-center mb-4"
         >
           <button
-            className="chicle-regular bg-lightgreen text-white rounded px-4 py-2 w-full hover:bg-green"
+            className="tinos-400 bg-lightgreen text-white rounded px-4 py-2 w-full hover:bg-green"
             type="button"
           >
             Connect on LinkedIn
@@ -28,14 +28,14 @@ const Contact = () => {
           className="block w-full max-w-md text-center"
         >
           <button
-            className="chicle-regular bg-lightgreen text-white rounded px-4 py-2 w-full hover:bg-green"
+            className="tinos-400 bg-lightgreen text-white rounded px-4 py-2 w-full hover:bg-green"
             type="button"
           >
             Email Me Directly
           </button>
         </a>
 
-        <p className="chicle-regular mt-4 text-center text-sm text-gray-500">
+        <p className="tinos-400 mt-4 text-center text-sm text-gray-500">
             {emailAddress}
         </p>
       </div>

src/components/Contact.js

@@ -4,17 +4,17 @@ const Footer = () => {
   return (
     <footer className="bg-black text-white py-4 mt-auto">
       <div className="container mx-auto text-center px-4 lg:px-100">
-        <p className="chicle-regular text-sm">
+        <p className="tinos-400 text-sm">
           © {new Date().getFullYear()} Bennett Taylor. All rights reserved.
         </p>
         <div className="flex justify-center space-x-3 sm:space-x-4 mt-2">
-          <a href="https://github.com/bennetttaylor" target="_blank" rel="noopener noreferrer" className="text-white chicle-regular text-bold text-xs sm:text-sm hover:text-lightgreen">
+          <a href="https://github.com/bennetttaylor" target="_blank" rel="noopener noreferrer" className="text-white tinos-400 text-bold text-xs sm:text-sm hover:text-lightgreen">
             GitHub
           </a>
-          <a href="https://www.linkedin.com/in/bennettetaylor/" target="_blank" rel="noopener noreferrer" className="text-white chicle-regular text-bold text-xs sm:text-sm hover:text-lightgreen">
+          <a href="https://www.linkedin.com/in/bennettetaylor/" target="_blank" rel="noopener noreferrer" className="text-white tinos-400 text-bold text-xs sm:text-sm hover:text-lightgreen">
             LinkedIn
           </a>
-          <a href="mailto:betaylor83@gmail.com" className="text-white chicle-regular text-bold text-xs sm:text-sm hover:text-lightgreen">
+          <a href="mailto:betaylor83@gmail.com" className="text-white tinos-400 text-bold text-xs sm:text-sm hover:text-lightgreen">
             Email
           </a>
         </div>

src/components/Footer.js

@@ -60,11 +60,11 @@ export default function Header() {
         ${isLoaded ? 'top-0' : '-top-24'} 
       `}
     >
-      <header className="p-4 md:p-6 pt-4 md:pt-6">
+      <header className="p-4 md:p-6">
         <div className="flex justify-between items-center px-2 md:px-6">
           <Link
             href="/"
-            className="tracking-wider chicle-regular text-3xl md:text-4xl focus:outline-none hover:text-black"
+            className="tracking-wider playfair-400 text-3xl md:text-4xl focus:outline-none hover:text-black"
             style={{ whiteSpace: "pre" }}
           >
             BENNETT TAYLOR
@@ -75,7 +75,7 @@ export default function Header() {
                 <li key={href}>
                   <Link
                     href={href}
-                    className="chicle-regular pr-4 py-3 text-xl font-bold hover:text-lightgreen transition-colors"
+                    className="playfair-400 pr-5 py-3 text-xl font-bold hover:text-lightgreen transition-colors"
                   >
                     {label}
                   </Link>
@@ -113,7 +113,7 @@ export default function Header() {
             <li key={href} className="w-full text-center border-b last:border-b-0 border-gray-100">
               <Link
                 href={href}
-                className="chicle-regular block w-full py-3 text-xl font-bold hover:bg-gray-50 transition-colors"
+                className="tinos-400 block w-full py-3 text-xl font-bold hover:bg-gray-50 transition-colors"
                 onClick={() => setIsMenuOpen(false)}
               >
                 {label}