Updating site to better support mobile browsers.

Author: BennettTaylor

README.md

@@ -1,72 +1,31 @@
 # Bennett Taylor's Portfolio
+Welcome to the GitHub repository for my portfolio website! The site was built using React, Next.js, PostCSS, and Tailwind CSS. It is currently hosted on GitHub pages as my user site, BennettTaylor.github.io. I chose to forgo using jekyll for GitHub Pages for extra flexibility in frameworks, and to learn more about standard web development.
 
-Welcome to the personal portfolio website of Bennett Taylor, an Electrical and Computer Engineering (ECE) M.S. student at Boston University. This project is built using Next.js, Tailwind CSS, and React.
+# Development
+With the Next.js framework, development is quite easy for this site. All you need to modify this site is to download the required frameworks (using Node.js), fork my repository and run locally using `npm run dev`. To upload to GitHub pages, you can use the deploy.yml GitHub workflow found in my project. This requires you to set up the repository as a GitHub Pages repository and selecting GitHub Actions as the source. More information can be found here: https://docs.github.com/en/pages/quickstart
 
-## Project Structure
+# Features
+## Reactive
+I experimented with reactive web design in this project by incorporating animations and color changes in response to events like loading and user interaction. Clickable sections will expand when hovered over; cards on the screen will "pop" into existance when loaded for the first time; Links will fade to green when hovered over. These elements help the user experience and bring a sense of life to the otherwise static site.
 
-The project is organized as follows:
+## Mobile Friendly
+Using Tailwind CSS, many sections of the website have different layouts and sizing to support mobile web viewing. Everything that works on desktop should also work just fine on mobile.
 
-```
-bennett-taylor-portfolio
-├── src
-│   ├── app
-│   │   ├── page.js          # Main entry point for the application
-│   │   ├── layout.js        # Layout structure wrapping main content
-│   │   └── globals.css      # Global CSS styles including Tailwind imports
-│   ├── components
-│   │   ├── Header.js        # Navigation menu and branding
-│   │   ├── Footer.js        # Copyright and social media links
-│   │   ├── About.js         # Information about Bennett Taylor
-│   │   ├── Projects.js      # List of projects
-│   │   └── Contact.js       # Contact form or information
-│   └── data
-│       └── projects.js      # Project data used in Projects component
-├── public
-│   └── favicon.ico          # Favicon for the website
-├── tailwind.config.js       # Tailwind CSS configuration
-├── postcss.config.js        # PostCSS configuration
-├── package.json             # npm configuration and dependencies
-├── README.md                # Project documentation
-└── next.config.js           # Next.js configuration
-```
+## Lightweight
+Because this website is a relatively small, static website, it performs relatively well without long load times or delays. Images have been reduced in size to support faster loading times.
 
-## Features
+# Site Structure
+## Homepage
+The homepage has all my basic information and background. It starts with a welcome message and photo of my self, followed by a section describing myself. Beneath this is a project section (identical to the project page) for users who chose to keep scrolling on the homepage. Near the bottom is a contact section and footer.
 
-- **Responsive Design**: The website is designed to be fully responsive, ensuring a great user experience on all devices.
-- **Dynamic Components**: Utilizes React components for modularity and reusability.
-- **Tailwind CSS**: Leverages Tailwind CSS for styling, allowing for rapid UI development with utility-first classes.
-- **Project Showcase**: Displays a curated list of projects that Bennett has worked on, with detailed descriptions and links.
+## C.V.
+The C.V. page contains an up-to-date version of my resume with most of my experinces, skills, and professional/educational background. Fairly standard.
 
-## Getting Started
+## Projects
+The project page contains a few cards showcasing some of the projects I am most proud of contributing to. They can be expanded for more information by clicking on them.
 
-To get started with this project, follow these steps:
+## Art
+The art page contains four different sections: Painting, Digital Art, Film Photography, and Digital Photography. Each section has some of my favorite pieces that I have made in each of the mediums.
 
-1. Clone the repository:
-   ```
-   git clone https://github.com/yourusername/bennett-taylor-portfolio.git
-   ```
-
-2. Navigate to the project directory:
-   ```
-   cd bennett-taylor-portfolio
-   ```
-
-3. Install the dependencies:
-   ```
-   npm install
-   ```
-
-4. Run the development server:
-   ```
-   npm run dev
-   ```
-
-5. Open your browser and navigate to `http://localhost:3000` to view the portfolio.
-
-## Contributing
-
-Contributions are welcome! If you have suggestions for improvements or new features, feel free to open an issue or submit a pull request.
-
-## License
-
-This project is licensed under the MIT License. See the LICENSE file for more details.
+# AI Disclaimer
+My expertise is not in web design, so much of the website was built with the help of LLMs like ChatGPT and Google Gemini. I spent quite a bit of time learning HTML, CSS, and JS so I could understand how the website works and what was possible (and easier to achieve with frameworks). In the end I focused on Tailwind CSS as the main framework for styling the site as it was easy to pick up with some knowledge of CSS. A lot of the work done by AI was for helping to manage the React and Next.js aspects of the sight, which I simply didn't have time to learn properly. I'm quite happy with the final result and am glad to be able to take advantage of these tools. 

src/app/globals.css

@@ -36,10 +36,6 @@
 
 /* Custom global styles */
 @layer base {
-  body {
-    @apply bg-gradient-to-t from-lightgreen to-black text-black;
-  }
-
   h1, h2, h3, h4, h5, h6 {
     @apply font-bold;
   }

src/app/layout.js

@@ -8,9 +8,9 @@ export const metadata = {
 }
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <html lang="en" className="bg-gradient-to-t from-lightgreen to-black">
       <body>
-        <div className="bg-stone-50 flex flex-col min-h-screen">
+        <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 />

src/components/About.js

@@ -2,40 +2,47 @@ import React from 'react';
 
 const About = () => {
 return (
-    <section className="p-10 mx-4">
-        <div className="flex flex-row items-center justify-center gap-10 mb-6 pop-in-div">
+    <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-3xl font-bold text-center mb-6">Who am I?</h2>
-                <p className="chicle-regular text-lg font-bold text-center mb-6">
+                <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!
                     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.
-                    <br /><br />Generally speaking, I like to work on challenging and interesting project where I can learn something new.
+                </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.
-                    <br /><br />While I complete my degree, I'm looking for job or co-op opportunities in software engineering, embedded systems,
+                </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,
                     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-3xl font-bold text-center mb-6">My Backgound</h2>
-                <p className="chicle-regular text-lg font-bold text-center mb-6">
-                    Origionally I'm from Groton, Massachusetts, where I graduated from Groton-Dunstable Regional High School
-                    and attained the rank of Eagle Scout (Troop 3 Groton, 2021). <br /><br />I completed my undergraduate studies at 
+                <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
+                    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>
-                <p className="chicle-regular text-lg font-bold text-center mb-6">
+                <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
                     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.
                 </p>
-                <h2 className="chicle-regular text-3xl font-bold text-center mb-6">In My Free Time</h2>
-                <p className="chicle-regular text-lg font-bold text-center mb-6">
+                <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.

src/components/Contact.js

@@ -3,7 +3,7 @@ import React from 'react';
 const Contact = () => {
   const emailAddress = "betaylor83@gmail.com";
   return (
-    <section className="flex flex-col items-center justify-center p-8">
+    <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">

src/components/Footer.js

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