Codebase Improvements

src/components/content/ContentContainer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+interface ContentContainerProps {
+    containers: JSX.Element[]
+}
+
+export const ContentContainer = ({ containers }: ContentContainerProps) => {
+
+    return (
+        <div className="w-full md:w-[50%] mx-auto flex flex-col items-center">
+            {containers.map((container, i) => (
+                <div className={`w-full my-2 px-4 border-t-[1px] border-t-light-0 md:border-none md:bg-dark-3 md:rounded-xl ${i === 0 && 'border-none'}`}>
+                    {container}
+                </div>
+            ))}
+        </div>
+    );
+}

src/components/content/ContentSection.tsx

@@ -10,12 +10,11 @@ interface ContentSectionProps {
 
 export const ContentSection = ({textSection, textPos = 'left'}: ContentSectionProps) => {
 
+    function mapTextToParagraph(text: string | string[], textPos: TextPos): JSX.Element {
 
-    function mapTextToP(text: string | string[], textPos: TextPos): JSX.Element {
-
-        if (typeof text !== 'string') {
+        if (Array.isArray(text)) {
             return (
-                <ul className="mb-8 ml-5 list-disc">
+                <ul className="mb-8 ml-6 list-disc">
                     {text?.map((li, index) => (
                         <li key={index} className="mb-2">{li}</li>
                     ))}
@@ -32,26 +31,16 @@ export const ContentSection = ({textSection, textPos = 'left'}: ContentSectionPr
         );
     }
 
-    if (!textSection.subTexts) {
-        return (
-            <div className="my-5">
-                <h1 className="mb-2">{textSection.title}</h1>
-                {mapTextToP(textSection.text, textPos)}
-            </div>
-        );
-    }
-
     return (
         <div className="my-5">
-            <h1 className="mb-2">{textSection.title}</h1>
-            {mapTextToP(textSection.text, textPos)}
-            {textSection.subTexts!.map((text, i) => (
-                <>
-                    <h2 className="mb-1 mt-2">{text.title}</h2>
-                    {mapTextToP(text.text, textPos)}
-                </>
+            <h2 className="mb-2">{textSection.title}</h2>
+            {mapTextToParagraph(textSection.text, textPos)}
+            {textSection.subSection && textSection.subSection.map((subSection, i) => (
+                <span key={i}>
+                    <h3 className="mb-1 mt-2">{subSection.title}</h3>
+                    {mapTextToParagraph(subSection.text, textPos)}
+                </span>
             ))}
         </div>
     );
 }
-

src/components/content/ProjectSection.tsx

@@ -1,24 +1,24 @@
 import React from 'react'
 import {Link} from "react-router-dom";
+import {Project} from "../../domain";
 
 interface ProjectSectionProps {
-    name: string,
-    shortDesc: string,
-    desc: string,
-    url: string,
-    image: string,
+    project: Project;
 }
-export const ProjectSection = ({ name, shortDesc, desc, url, image }: ProjectSectionProps) => {
+export const ProjectSection = ({ project }: ProjectSectionProps) => {
+
+    const { name, shortDesc, desc, url, img } = project;
+
     return (
         <>
             <div className="p-4 m-2 bg-dark-4 border-[1px] border-light-0 w-96 h-min-48 rounded-lg shadow-md overflow-hidden hover:bg-dark-5 transition">
                 <span className="flex">
-                    <img src={image}
+                    <img src={img}
                          alt={name}
                          className="mr-5 w-20 h-20 rounded-lg"/>
                     <span>
                         <Link to={url}
-                              target={"_blank"}
+                              target="_blank"
                               className="w-full h-48 object-cover">
                             <h3 className="text-xl font-bold py-2 pr-2 hover:underline focus:underline text-link-2 visited:text-link-1">GitHub/{name}</h3>
                         </Link>

src/components/content/index.js

@@ -1,2 +1,3 @@
+export * from './ContentContainer'
 export * from './ContentSection'
 export * from './ProjectSection'

src/components/footer/index.js

@@ -0,0 +1 @@
+export * from './Footer'

src/components/index.js

@@ -1,3 +1,4 @@
+export * from './content'
+export * from './footer'
 export * from './navigation'
 export * from './router'
-export * from './content'

src/components/navigation/index.js

@@ -1,3 +1 @@
-export * from './Footer'
 export * from './Navbar'
-export * from './SideBar'

src/domain/functions/index.js

@@ -1,3 +1,2 @@
 export * from './ExtractDataFromRequest'
 export * from './GroupRoutes'
-export * from './MapContentContainers'

src/domain/mock-db/text-data.ts

@@ -1,19 +1,10 @@
 import {TextSection} from "../models";
 
-export const introTexts: TextSection[] = [
-    {
-        title: 'Hello there',
-        text:
-            'General Keno-...\n' +
-            'Anyway. Thanks for checking in!',
-    },
-]
-
 export const aboutMeTexts: TextSection[] = [
     {
         title: 'Hi there, Marvin here',
         text: 'I\'m a backend dev from Switzerland, the land of the cows and the cheese and the more cows',
-        subTexts: [
+        subSection: [
             {
                 title: 'Stuff I like',
                 text: [
@@ -56,7 +47,7 @@ export const skillsTexts: TextSection[] = [
     {
         title: 'Tech stack',
         text: 'A rough overview of the stuff I\'ve used so far',
-        subTexts: [
+        subSection: [
             {
                 title: 'Java',
                 text: [

src/domain/models/TextSection.ts

@@ -1,5 +1,5 @@
 export interface TextSection {
     title: string,
     text: string | string[],
-    subTexts?: TextSection[],
+    subSection?: TextSection[],
 }

src/index.css

@@ -17,10 +17,10 @@
     src: url('/public/Montserrat-Regular.ttf');
 }
 
-h1 {
+h2 {
     font-size: 2rem;
 }
 
-h2 {
+h3 {
     font-size: 1.5rem;
 }

src/pages/home/HomePage.tsx

@@ -1,6 +1,6 @@
 import React, {JSX} from 'react'
-import {AboutMeContainer, AboutWebsiteContainer, SkillsContainer} from "./components";
-import {mapContentContainers} from "../../domain";
+import {AboutMeContainer, AboutWebsiteContainer, SkillsContainer} from "./containers";
+import {ContentContainer} from "../../components";
 
 export const HomePage = () => {
 
@@ -20,9 +20,7 @@ export const HomePage = () => {
                     <h2 className="text-4xl md:text-5xl mt-5 hover:drop-shadow-2xl">Swiss Backend Dev</h2>
                 </span>
             </div>
-            <div className="w-full md:w-[50%] mx-auto">
-                {mapContentContainers(containers)}
-            </div>
+            <ContentContainer containers={containers}/>
         </div>
     );
 }

src/pages/home/components/about-me/AboutMeContainer.tsx → src/pages/home/containers/AboutMeContainer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {ContentSection} from "../../../../components";
-import {aboutMeTexts} from "../../../../domain";
+import {ContentSection} from "../../../components";
+import {aboutMeTexts} from "../../../domain";
 
 export const AboutMeContainer = () => {
 

src/pages/home/components/about-website/AboutWebsiteContainer.tsx → src/pages/home/containers/AboutWebsiteContainer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {ContentSection} from "../../../../components";
-import {aboutWebsiteTexts} from "../../../../domain";
+import {ContentSection} from "../../../components";
+import {aboutWebsiteTexts} from "../../../domain";
 
 export const AboutWebsiteContainer = () => {
 

src/pages/home/components/skills/SkillsContainer.tsx → src/pages/home/containers/SkillsContainer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {ContentSection} from "../../../../components";
-import {skillsTexts} from "../../../../domain";
+import {ContentSection} from "../../../components";
+import {skillsTexts} from "../../../domain";
 
 export const SkillsContainer = () => {
 

src/pages/home/containers/index.js

@@ -0,0 +1,3 @@
+export * from './AboutMeContainer'
+export * from './AboutWebsiteContainer'
+export * from './SkillsContainer'

src/pages/projects/ProjectsPage.tsx

@@ -1,6 +1,6 @@
 import React, {JSX} from 'react'
-import {PlannedProjectsContainer, FeaturedProjectsContainer} from "./components";
-import {mapContentContainers} from "../../domain";
+import {PlannedProjectsContainer, FeaturedProjectsContainer} from "./containers";
+import {ContentContainer} from "../../components";
 
 export const ProjectsPage = () => {
 
@@ -10,8 +10,8 @@ export const ProjectsPage = () => {
     ];
 
     return (
-        <div className="w-full md:w-[50%] mx-auto">
-            {mapContentContainers(containers)}
-        </div>
+        <>
+            <ContentContainer containers={containers}/>
+        </>
     );
 }

src/pages/projects/containers/FeaturedProjectsContainer.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {ProjectSection} from "../../../components";
+import {featuredProjectsData} from "../../../domain";
+
+export const FeaturedProjectsContainer = () => {
+
+    return (
+        <>
+            <h2 className="mt-5 ml-5">Featured Projects</h2>
+            <div className="flex flex-wrap justify-evenly py-6">
+                {featuredProjectsData.map((project, index) => (
+                    <ProjectSection key={index} project={project}/>
+                ))}
+            </div>
+        </>
+    )
+}