Release 2.2

Release 2.1

README.md

@@ -1,6 +1,6 @@
-# Vayan - CV page
+# Vayan - Personal Website
 
-I'm not a React- nor frontend-dev, but I'm trying my best :)
+It's hosted on the web of the world wide: [vayan.zindustries.ch](https://vayan.zindustries.ch)
 
 ## Run the app
 
@@ -9,14 +9,15 @@ I'm not a React- nor frontend-dev, but I'm trying my best :)
 > npm i
 > npm run start
 ```
+
 ## Checklist
 
-| Status          | Thing           |
-|:---------------:|:----------------|
-| :x:             | Define content  |
-| :x:             | Write content   |
-| :x:             | Make pretty     |
-| :grey_question: | Dynamic content |
+| Status | Thing           |
+|:------:|:----------------|
+|   ✅    | Define content  |
+|   ✅    | Write content   |
+|   ✅    | Make pretty     |
+|   ❔    | Dynamic content |
 
 ## Future stuff
 

package.json

@@ -14,8 +14,9 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.3",
-    "@types/node": "^20.4.2",
+    "@types/node": "^20.12.5",
     "@types/react-dom": "^18.2.7",
+    "@vercel/analytics": "^1.2.2",
     "@vercel/node": "^3.0.25",
     "@vercel/postgres": "^0.7.2",
     "axios": "^1.6.5",
@@ -32,11 +33,11 @@
     "@types/aos": "^3.0.4",
     "@types/bootstrap": "^5.2.6",
     "@types/react": "^18.2.14",
-    "@types/react-bootstrap": "^0.32.32",
+    "@types/react-bootstrap": "^0.32.36",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.38",
     "postcss-cli": "^10.1.0",
-    "postcss-import": "^15.1.0",
+    "postcss-import": "^16.1.0",
     "tailwindcss": "^3.3.2"
   },
   "eslintConfig": {

src/App.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import './index.css'
 import {BrowserRouter} from 'react-router-dom';
-import {Footer, Navbar, Router} from './components';
+import {Footer, Navbar, Router, ScrollToTop} from './components';
+import {Analytics} from "@vercel/analytics/react";
 
 function App() {
 
     return (
         <BrowserRouter>
+            <ScrollToTop/>
             <div className="flex flex-col min-h-screen justify-between items-center">
                 <Navbar/>
                 <Router/>
                 <Footer/>
             </div>
+            <Analytics/>
         </BrowserRouter>
     );
 }

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'