feature(update-projects-page): More projects

package.json

@@ -16,6 +16,8 @@
     "@types/jest": "^29.5.3",
     "@types/node": "^20.4.2",
     "@types/react-dom": "^18.2.7",
+    "@vercel/node": "^3.0.25",
+    "@vercel/postgres": "^0.7.2",
     "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/content/ProjectSection.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {Link} from "react-router-dom";
+
+interface ProjectSectionProps {
+    name: string,
+    shortDesc: string,
+    desc: string,
+    url: string,
+    image: string,
+}
+export const ProjectSection = ({ name, shortDesc, desc, url, image }: ProjectSectionProps) => {
+    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}
+                         alt={name}
+                         className="mr-5 w-20 h-20 rounded-lg"/>
+                    <span>
+                        <Link to={url}
+                              target={"_blank"}
+                              className="w-full h-48 object-cover">
+                            <h3 className="text-xl font-bold mb-2">➡️ {name}</h3>
+                        </Link>
+                        <p className="text-gray-700 text-base">{shortDesc}</p>
+                    </span>
+                </span>
+                <p className="mt-2 text-sm">{desc}</p>
+            </div>
+        </>
+    )
+}

src/components/content/index.js

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

src/components/navigation/Footer.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import {socialMediaElements} from "../../domain";
+import {ContactFormContainer} from "./contact";
 
 export const Footer = () => {
 
     return(
-        <div className="sticky w-full h-40 p-8 bg-dark-0 flex flex-col items-center justify-center pb-20 sm:pb-8 ">
-            <ul className="flex flex-row">
+        <div className="sticky w-full h-min-40 p-8 bg-dark-0 flex flex-col items-center justify-center pb-20 sm:pb-8 ">
+            <ul className="flex flex-row mb-5">
                 {socialMediaElements.map((social, index) => (
                     <li key={index} className="m-2 sm:px-2">
                         <a href={social.url}
@@ -16,7 +17,8 @@ export const Footer = () => {
                     </li>
                 ))}
             </ul>
-            <p className="text-light-2">© Copyright 2024 Z-100</p>
+            <ContactFormContainer/>
+            <p className="text-light-2 mt-5">© Copyright 2024 Z-100</p>
         </div>
     )
 }

src/components/navigation/Navbar.tsx

@@ -16,19 +16,12 @@ export const Navbar = () => {
                               onClick={() => setActive(route.name)}
                               className="">
 
-                                <span className="visible sm:invisible w-6 ">
-                                    <route.icon
-                                        className={active === route.name ? "bg-dark-3 h-7 w-auto rounded-full transition-all duration-150" : "w-6 h-auto"}/>
-                                </span>
-
-                            <span className="invisible sm:visible">
-                                <p className={active === route.name ? "font-bold" : ""}>{route.name}</p>
-                            </span>
+                            <p className={active === route.name ? "font-bold" : "text-light-2"}>{route.name}</p>
                         </Link>
                     ))}
                 </div>
             </div>
-            <div className="h-16 hidden sm:block"></div>
+            <div className="h-12 sm:h-16 sm:block"></div>
         </>
     )
 }

src/components/navigation/contact/components/contact-form/ContactFormContainer.tsx

@@ -0,0 +1,86 @@
+import React, {useState} from 'react'
+
+export const ContactFormContainer = () => {
+
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        phoneNumber: '',
+        message: '',
+    });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...formData,
+            [name]: value,
+        });
+    };
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const {name, phoneNumber, message} = formData;
+        openMail(message, name, phoneNumber);
+    };
+
+    const openMail = (
+        message: string,
+        name: string,
+        phoneNumber: string,
+    ) => {
+        const recipient = '[email protected]';
+        const subject = 'Interested in hiring';
+
+        message += `\n\nName: ${name}`;
+        if (phoneNumber) {
+            message += `\nPhone: ${phoneNumber}`
+        }
+
+        window.location.href = `mailto:${recipient}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`;
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="my-2">
+                <label htmlFor="name">Name/Company</label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-2 py-1 border rounded-md focus:outline-none bg-dark-2 focus:border-purple-500"
+                />
+            </div>
+            <div className="my-2">
+                <label htmlFor="phoneNumber">Phone Number</label>
+                <input
+                    type="text"
+                    id="phoneNumber"
+                    name="phoneNumber"
+                    value={formData.phoneNumber}
+                    onChange={handleChange}
+                    className="w-full px-2 py-1 border rounded-md focus:outline-none bg-dark-2 focus:border-purple-500"
+                />
+            </div>
+            <div className="my-2">
+                <label htmlFor="message">Your Message</label>
+                <textarea
+                    id="message"
+                    name="message"
+                    value={formData.message}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-2 py-1 border rounded-md focus:outline-none bg-dark-2 focus:border-purple-500"
+                />
+            </div>
+            <button
+                className="w-full px-2 py-1 border-[1px] border-b-light-0 rounded-md bg-dark-3 border-purple-500"
+                type="submit"
+            >
+                Submit
+            </button>
+        </form>
+    );
+}

src/components/navigation/contact/index.js

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

src/components/router/RouterData.tsx

@@ -1,11 +1,11 @@
 import {RouteGroup, RouteType} from "../../domain";
 import React from "react";
-import {ContactPage, DemoPage, HomePage, ProjectsPage} from "../../pages";
+import {HomePage, ProjectsPage} from "../../pages";
 import {BiHomeHeart,} from "react-icons/bi";
 
 export const routerData: RouteType[] = [
     {
-        path: "/*",
+        path: "/",
         element: <HomePage/>,
         name: "Home",
         icon: BiHomeHeart,
@@ -18,18 +18,4 @@ export const routerData: RouteType[] = [
         icon: BiHomeHeart,
         group: RouteGroup.MID,
     },
-    {
-        path: "/demo",
-        element: <DemoPage/>,
-        name: "Demo",
-        icon: BiHomeHeart,
-        group: RouteGroup.MID,
-    },
-    {
-        path: "/contact",
-        element: <ContactPage/>,
-        name: "Contact",
-        icon: BiHomeHeart,
-        group: RouteGroup.RIGHT,
-    },
 ]

src/domain/functions/MapContentContainers.tsx

@@ -5,7 +5,7 @@ export function mapContentContainers(containers: JSX.Element[]): JSX.Element {
     return (
         <div className="flex flex-col items-center">
             {containers.map((container, index) => (
-                <div className="w-full md:bg-dark-3 my-2 px-4 md:rounded-xl">
+                <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">
                     {container}
                 </div>
             ))}

src/domain/mock-db/featured-projects-data.ts

@@ -0,0 +1,46 @@
+import {Project} from "../models";
+
+export const featuredProjectsData: Project[] = [
+    {
+        name: "Vayan",
+        shortDesc: "This Website",
+        desc: "I'm no frontend dev. I'm really not. At least it doesn't look like the original Apache Java Docs :)",
+        url: "https://github.com/Z-100/vayan",
+        img: "/favicon.ico"
+    },
+    {
+        name: "Sömi-Weather",
+        shortDesc: "Weather app",
+        desc: "Camunda-, kTor- & React-Microservices running in AKS",
+        url: "https://github.com/Z-100/soemi-weather",
+        img: "/aks-logo.png"
+    },
+    {
+        name: "GeoPal",
+        shortDesc: "Geo Reminder App",
+        desc: "Basically a location based reminder app",
+        url: "https://github.com/ZE-100/GeoPal",
+        img: "/logo171.png"
+    },
+    {
+        name: "BackFusion",
+        shortDesc: "Kotlin and Spring Boot",
+        desc: "FitFubile's backend, written in Kotlin. More of an experiment.",
+        url: "https://github.com/FitFusion/BackFusion",
+        img: "/fitfusion-logo.jpg"
+    },
+    {
+        name: "DayCounter",
+        shortDesc: "Cute day counter app",
+        desc: "One of my first Android apps! It counts down days in a cute way",
+        url: "https://github.com/ZE-100/DayCounter",
+        img: "/logo171.png"
+    },
+    {
+        name: "More projects",
+        shortDesc: "",
+        desc: "There are some more on my GitHub!",
+        url: "https://github.com/Z-100?tab=repositories",
+        img: "/github-logo.png"
+    },
+]

src/domain/mock-db/planned-projects-data.ts

@@ -0,0 +1,18 @@
+import {Project} from "../models";
+
+export const plannedProjectsData: Project[] = [
+    {
+        name: "DMZ",
+        shortDesc: "Document Management Zystem",
+        desc: "I wanna create my own DMS-System to manage... documents 🥁",
+        url: "https://github.com/Z-100/DMZ",
+        img: "/logo171.png"
+    },
+    {
+        name: "k8s",
+        shortDesc: "Soon to be self hosted Kubernetes Cluster",
+        desc: "All of my projects should run here eventually. That's the end goal.",
+        url: "https://github.com/Z-100/k8s",
+        img: "/kubernetes-logo.png"
+    },
+]

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

@@ -18,7 +18,8 @@ export const aboutWebsiteTexts: TextSection[] = [
             'I\'m a passionate backend developer in need of a website.\n' +
             'And what better way is there to cut costs - I mean to learn new stuff - than by doing it myself?\n' +
             'br\n' +
-            'As said, I\'m a backend dev, who has no idea about proper frontend-\'deving\', so don\'t judge Vayan to hard :)',
+            'I\'m a backend dev who is currently learning how to frontend.\n' +
+            'So don\'t judge Vayan to hard :)',
     },
 ]
 
@@ -50,14 +51,16 @@ export const skillsTexts: TextSection[] = [
                 text:
                     'I started writing Java back in 2021 and have been using it ever since.\n' +
                     '> Both professionally and for my own projects\n' +
+                    'It\'s a good language and I like it, but...\n' +
                     'br\n',
             },
             {
                 title: 'Kotlin',
                 text:
-                    '> Easily my favourite language. Period.\n' +
+                    '> Easily my favourite language.\n' +
                     'Mostly, I\'ve used Kotlin for Android apps\n' +
                     'But as time went on I started using it in other use cases as well, e.g. Spring Boot\n' +
+                    '> Going forward I definitely wanna improve my skills in that language!\n' +
                     'br\n',
             },
             {
@@ -71,10 +74,20 @@ export const skillsTexts: TextSection[] = [
             {
                 title: 'Other languages',
                 text:
-                    '- C# along Unity, for... well, Unity\n' +
+                    '- C# along Unity, for... well, Unity Games\n' +
                     '- C++ for an Arduino/M5Stack project\n' +
                     'br\n',
             },
+            {
+                title: 'Other technologies',
+                text:
+                    '> Git, GitHub, GitLab, BitBucket\n' +
+                    '> Jira, GitHub Projects\n' +
+                    '> IntelliJ, VSCode, Ubuntu\n' +
+                    '> GitHub Actions, GitLab CI\n' +
+                    '> Kubernetes (learning)\n' +
+                    'br\n',
+            },
         ],
     },
 ]

src/domain/models/Project.ts

@@ -0,0 +1,7 @@
+export interface Project {
+    name: string,
+    shortDesc: string,
+    desc: string,
+    url: string,
+    img: string,
+}

src/domain/models/index.js

@@ -1,6 +1,7 @@
 export * from './CardContent'
-export * from './RouteType'
-export * from './RouteGroup'
 export * from './GithubRepository'
+export * from './Project'
+export * from './RouteGroup'
+export * from './RouteType'
 export * from './SocialMediaElement'
 export * from './TextSection'