Update style

.env

@@ -0,0 +1 @@
+MAILGUN_API_KEY=81e4e1eb1cac7c186fb6580b71892ce4-623e10c8-54aef039

.gitignore

@@ -107,3 +107,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+!/.env
+.env
+/.env
+./.env
+*.env.*
+.env.*

package.json

@@ -30,6 +30,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dotenv": "^16.4.5",
     "lucide-react": "^0.400.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/home/OtherWebsites.tsx

@@ -1,29 +1,39 @@
 import {Box, Brush, Camera, Car, History} from 'lucide-react';
 import WebsiteCard from "../../fluffy-pack/components/WebsiteCard.tsx";
+import toyboxImage from "../../assets/Images/toybox-motorsports.jpg";
+import tpsImage from "../../assets/Images/tps.png";
+import spinnyCarImage from "../../assets/Images/spinny-car.png";
+import loomImage from "../../assets/Images/loom.png";
+import oldWebsiteImage from "../../assets/Images/old.png";
 
 const websiteData = [{
     name: "Toybox Motorsports",
     url: "https://toyboxamarillo.com",
+    image: toyboxImage,
     description: "Website made for the business \"Toybox Motorsports.\"",
     icon: <Car className="w-6 h-6"/>
 }, {
     name: "The Photo Store",
     url: "https://thephotostore.com",
+    image: tpsImage,
     description: "Photography business website. As of writing this, it is currently a website I didn't make, but I'm currently working on one to replace it!",
     icon: <Camera className="w-6 h-6"/>
 }, {
     name: "Spinny Car",
     url: "https://spinnycar.kadenfrisk.com/",
+    image: spinnyCarImage,
     description: "An example of using threejs to render a car in your browser.",
     icon: <Box className="w-6 h-6"/>
 }, {
     name: "Loomlabs",
     url: "https://looomlabs.com/",
+    image: loomImage,
     description: "A web design agency that I work with, they designed this website and I host it. Visit loomlabs if you need a website design!",
     icon: <Brush className="w-6 h-6"/>
 }, {
     name: "My Old Website",
     url: "https://old.kadenfrisk.com/",
+    image: oldWebsiteImage,
     description: "The original website that was on this domain I am no longer updating. Originally it was only for selling websites.",
     icon: <History className="w-6 h-6"/>
 },];

src/components/layout/Header.tsx

@@ -1,8 +1,8 @@
 // Header.tsx
 import {useEffect, useState} from "react";
 import {NAV_LINKS, WEBSITE_TITLE} from "../../constants";
-import {generateNavItems} from "../../fluffy-pack/utils/navigationUtils";
-import {SimpleHamburger} from "./../../fluffy-pack/components/SimpleHamburger";
+import {generateNavItems} from "@/fluffy-pack/utils/navigationUtils";
+import {SimpleHamburger} from "@/fluffy-pack/components/SimpleHamburger.tsx";
 
 export default function Header() {
     const [isOpen, setIsOpen] = useState(false);
@@ -25,7 +25,7 @@ export default function Header() {
         };
     }, []);
 
-    return (<header className="header">
+    return (<header className="header left-0 right-0 top-0 pl-4 pr-4 h-16">
         <div className="logo">
             <span className="brand">{WEBSITE_TITLE}</span>
         </div>

src/fluffy-pack/components/Contact.tsx

@@ -25,6 +25,8 @@ const Contact: FC<ContactProps> = ({
     const handleSubmit = (e: FormEvent) => {
         e.preventDefault();
         // Here you would typically handle the form submission
+
+
         setFormSubmitted(true);
     };
 

src/fluffy-pack/components/WebsiteCard.tsx

@@ -1,23 +1,33 @@
-import {ExternalLink} from "lucide-react";
-import {ReactElement} from "react";
-import {InView} from "react-intersection-observer";
+import { ReactElement } from "react";
+import { ExternalLink } from "lucide-react";
+import { InView } from "react-intersection-observer";
 
 interface WebsiteCardProps {
     name: string;
     url: string;
+    image?: string;
     description: string;
     icon: ReactElement;
 }
 
-const WebsiteCard = ({name, url, description, icon}: WebsiteCardProps) => (
+const WebsiteCard = ({ name, url, image, description, icon }: WebsiteCardProps) => (
     <InView threshold={0.1}>
-        {({inView, ref}) => (
-            <div ref={ref}
-                className={`bg-gradient-to-br from-purple-700 to-indigo-800 rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 flex flex-col h-full ${inView ? 'opacity-100 animated-list-item' : 'opacity-0 pointer-events-none'}`}>
+        {({ inView, ref }) => (
+            <div
+                ref={ref}
+                className={`bg-gradient-to-br from-purple-700 to-indigo-800 rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 flex flex-col h-full ${
+                    inView ? 'opacity-100 animated-list-item' : 'opacity-0 pointer-events-none'
+                }`}
+            >
                 <div className="flex items-center mb-4">
                     {icon}
                     <h3 className="text-xl font-bold ml-2 text-white">{name}</h3>
                 </div>
+                {image && (
+                    <div className="mb-4 w-full">
+                        <img src={image} alt={name} className="w-full h-40 object-cover rounded-md" />
+                    </div>
+                )}
                 <p className="text-purple-200 mb-4 flex-grow">{description}</p>
                 <a
                     href={url}
@@ -26,9 +36,10 @@ const WebsiteCard = ({name, url, description, icon}: WebsiteCardProps) => (
                     className="inline-flex items-center text-white bg-purple-600 hover:bg-purple-500 px-4 py-2 rounded transition-colors duration-300"
                 >
                     Visit Site
-                    <ExternalLink className="w-4 h-4 ml-2"/>
+                    <ExternalLink className="w-4 h-4 ml-2" />
                 </a>
-            </div>)}
+            </div>
+        )}
     </InView>
 );
 

src/fluffy-pack/utils/navigationUtils.tsx

@@ -12,14 +12,14 @@ interface GenerateNavItemsProps {
 
 export const generateNavItems = ({navLinks, isOpen}: GenerateNavItemsProps) => {
     return navLinks.map((link, index) => (<li
-            key={index}
-            className={`${link.path === '/' ? 'nav-item' : ''} ${isOpen ? 'visible' : ''}`}
+        key={index}
+        className={`${link.path === '/' ? 'nav-item' : ''} ${isOpen ? 'visible' : ''}`}
+    >
+        <NavLink
+            to={link.path}
+            className="nav-link md:text-xl text-3xl open-sans-nav-items"
         >
-            <NavLink
-                to={link.path}
-                className="nav-link open-sans-nav-items"
-            >
-                {link.label}
-            </NavLink>
-        </li>));
+            {link.label}
+        </NavLink>
+    </li>));
 };

src/main.tsx

@@ -7,6 +7,9 @@ import {StrictMode} from "react";
 import Fallback from "./components/Fallback";
 import {renderToString} from "react-dom/server";
 import {SUPPORT_EMAIL} from "./constants.tsx";
+//
+// import {config} from "dotenv";
+// config({path: '../.env'});
 
 const rootElement = document.getElementById('root');
 

src/styles/App.scss

@@ -41,11 +41,7 @@ header .header {
   background-color: $header-background-color;
   display: flex;
   justify-content: space-between;
-  left: 0;
-  padding: 20px;
   position: fixed; // Make the header sticky
-  right: 0;
-  top: 0;
   transition: background-color .3s ease; // Add transition for background color
   z-index: 1000;
 
@@ -95,7 +91,6 @@ header .header {
 
         .nav-link {
           color: $primary-color;
-          font-size: 1.5em;
           padding: 10px;
           text-decoration: none;
           transition: background-color .3s ease;