refactored textimagebox, image display now it's owncomponent, and fixed some css placement issues

Author: trsctr

src/App.tsx

@@ -2,27 +2,29 @@ import React from 'react';
 import About from './components/About';
 import Header from './components/Header';
 
+
 const App: React.FC = () => {
   return (
-    <div className=" min-h-screen mt-0 flex items-center justify-center">
-      {/* Top-Left Text for Large Screens */}
-      <div className="absolute top-0 left-0 p-5 hidden md:block">
-        <Header text="trsctr.github.io" textSize="text-2xl" className="tracking-widest font-mono" hasGradient gradientColors="from-accent to-primary"/>
-      </div>
-      <About title="Hello, my name is Otto" imageUrl="src/assets/meika.jpg" imageOnRight>
-      <p className="mb-2">
-        This is my webpage.
-      </p>
-      <p>
-        There are many like it, but this one is mine.
-      </p>
-      <p className="mt-2">
-        Something something something about something and I like cats and good music.</p>
-      <p className="mt-2">I'm beginning to like Tailwind. It's useful and makes CSS less nervewracking than it could be.</p>
+
+     <div className="bg-black min-h-screen mt-0 flex items-center justify-center w-full h-full">
+
+       <div className="absolute top-0 left-0 p-5 hidden md:block">
+        <Header text="trsctr.github.io" textSize="text-2xl" className="tracking-widest font-mono" hasGradient gradientColors="from-primary to-secondary"/>
+       </div>
+       <About title="Hello, my name is Otto" imageUrl="src/assets/meika.jpg" imageOnRight>
+       <p className="mb-2">
+         This is my webpage.
+       </p>
+       <p>
+         There are many like it, but this one is mine.
+       </p>
+       <p className="mt-2">
+         Something something something about something and I like cats and good music.</p>
+       <p className="mt-2">I'm beginning to like Tailwind. It's useful and makes CSS less nervewracking than it could be.</p>
 
-      <p className="mt-2">Which is nice.</p>
-      </About>
-    </div>
+       <p className="mt-2">Which is nice.</p>
+       </About>
+     </div>
   );
 };
 

src/components/About.tsx

@@ -11,17 +11,27 @@ interface AboutProps {
     children?: React.ReactNode;
 }
 
+/*
+    * A component that displays an about section with an image.
+    * 
+    * @param title The title of the about section.
+    * @param imageUrl The URL of the image to display.
+    * @param imageOnRight Whether to display the image on the right side of the text box.
+    * @param children The content to display in the about section.
+*/
 const About: React.FC<AboutProps> = ( {title, imageUrl, children, imageOnRight = false}) => {
     return (
-    <div className="absolute left-0 top-0 md:top-1/4 md:left-32  w-full md:w-9/12 max-w-[900px]">
+    <div className="absolute flex left-0 top-0 md:top-1/4 md:left-32  w-full md:w-9/12 max-w-[900px]">
     <ContentBox className="rounded-lg shadow-lg">
             {title && <Header text={title} gradientColors="from-primary to-secondary" hasGradient/>}
             <TextImageBox imageUrl={imageUrl} imageOnRight={imageOnRight}>
                 {children}
             </TextImageBox>
-    <Footer/>
+        <Footer/>
     </ContentBox>
+
     </div>
+    
     );
   };
 

src/components/ContentBox.tsx

@@ -6,11 +6,18 @@ interface ContentBoxProps {
     children: React.ReactNode
 }
 
+/*
+    * A component that displays a content box with a background color.
+    * 
+    * @param background The background color of the content box.
+    * @param className Additional classes to apply to the content box.
+    * @param children The content to display in the content box.
+*/
 const ContentBox: React.FC<ContentBoxProps> = ({ background = "bg-background", className, children }) => {
   return (
     <section className={`${background} relative p-4 flex justify-center ${className}`}>
       {/* Content Box */}
-      <div className="w-full">
+      <div className="w-full flex-col">
         {children}
       </div>
     </section>

src/components/Footer.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 
+/*
+    * A component that displays the footer of the page.
+*/
+
 const Footer: React.FC = () => {
     return (
     <footer className="bg-transparent">
     <div className="mx-auto w-full pt-2 md:pt-5 md:flex md:items-center md:justify-between">
     <ul className="flex flex-wrap items-center mt-3 text-sm font-medium text-primary sm:mt-0">
+        <li>
+            <a href="http://github.com/trsctr/trsctr.github.io" className="hover:underline hover:text-accent me-4 md:me-12">Source code</a>
+        </li>
         <li>
             <a href="http://github.com/trsctr" className="hover:underline hover:text-accent me-4 md:me-12">GitHub</a>
         </li>
+
         <li>
             <a href="#" className="hover:underline hover:text-accent me-4 md:me-12">LinkedIn</a>
         </li>

src/components/Header.tsx

@@ -9,7 +9,18 @@ interface HeaderProps {
     textSize?: string;
 }
 
+/*
+    * A component that displays a header with optional gradient text.
+    * 
+    * @param text The text to display in the header.
+    * @param color The color of the text.
+    * @param gradientColors The gradient colors to apply to the text.
+    * @param className Additional classes to apply to the header.
+    * @param hasGradient Whether to apply a gradient to the text.
+    * @param textSize The size of the text.
+*/
 const Header: React.FC<HeaderProps> = ({ text, color = "text-text", gradientColors, className, hasGradient = false, textSize = "text-4xl lg:text-6xl" }) => {
+    // tsekkaa clsx
     let gradientSettings = ""
     if (hasGradient && gradientColors)
         gradientSettings = "text-transparent bg-clip-text bg-gradient-to-r " + gradientColors;

src/components/TextImageBox.tsx

@@ -7,23 +7,37 @@ interface TextImageBoxProps {
     altText?: string;
 }
 
+const TextImage: React.FC<Pick<TextImageBoxProps, 'imageUrl' | 'altText'>> = ({ imageUrl, altText = "Image"}) => {
+    return (
+        <div className="w-full sm:flex flex-shrink-0 justify-center md:block md:w-1/4 mx-4 mb-0 lg:mb-4">
+        <img src={`${imageUrl}`} alt={altText} className="w-full max-w-[250px] md:max-w-[200px] mx-auto justify-center rounded" />
+    </div>
+    )
+};
+
+/*
+    * A component that displays a text box with an image on the left or right.
+    * 
+    * @param imageUrl The URL of the image to display.
+    * @param children The content to display in the text box.
+    * @param imageOnRight Whether to display the image on the right side of the text box.
+    * @param altText The alt text for the image.  
+*/
 const TextImageBox: React.FC<TextImageBoxProps> = ({ imageUrl, children, imageOnRight = false, altText = "Image"}) => {
 return (
-    <div className="flex flex-col sm:flex-row text-text text-lg items-start pt-5">
+    <div className="flex flex-col md:flex-row text-text text-lg items-center md:items-start pt-5">
         {!imageOnRight && imageUrl && (
-        <div className="flex-shrink-0 hidden md:block w-1/4 ml-4 mb-0 lg:mb-4">
-            <img src={`${imageUrl}`} alt={altText} className="w-full max-w-[200px] h-auto rounded" />
-        </div>
+            <TextImage imageUrl={imageUrl} altText={altText}/>
         )}
-        <div className="flex-1 flex-col justify-between">
+        <div className="flex flex-1 flex-col items-start justify-start">
             {children}
         </div>
         {imageOnRight && imageUrl && (
-        <div className="flex-shrink-0 hidden md:block w-1/4 ml-4 mb-0 lg:mb-4 mr-0">
-            <img src={`${imageUrl}`} alt={altText} className="w-full max-w-[200px] h-auto rounded" />
-        </div>
+            <TextImage imageUrl={imageUrl} altText={altText}/>
         )}
     </div>)
 };
 
+
+
 export default TextImageBox;