:
{line}
- } - +{line ||
}
- 
);
}
- if (!textSection.texts) {
+ if (!textSection.subTexts) {
return (
-
- {textSection.title}
- {mapTextToP(textSection.text, textPos)} -{textSection.title}
@@ -61,7 +45,7 @@ export const ContentSection = ({textSection, textPos = 'left', image}: ContentSe{textSection.title}
{mapTextToP(textSection.text, textPos)} - {textSection.texts!.map((text, i) => ( + {textSection.subTexts!.map((text, i) => ( <>{text.title}
{mapTextToP(text.text, textPos)} diff --git a/src/components/content/ProjectSection.tsx b/src/components/content/ProjectSection.tsx index d41c1fa..43c52f1 100644 --- a/src/components/content/ProjectSection.tsx +++ b/src/components/content/ProjectSection.tsx @@ -20,7 +20,7 @@ export const ProjectSection = ({ name, shortDesc, desc, url, image }: ProjectSec -➡️ {name}
+GitHub/{name}
{shortDesc}
diff --git a/src/components/navigation/Navbar.tsx b/src/components/navigation/Navbar.tsx index d0a64e8..60e1b1d 100644 --- a/src/components/navigation/Navbar.tsx +++ b/src/components/navigation/Navbar.tsx @@ -12,7 +12,7 @@ export const Navbar = () => { return ( <> -
+
{routerData.map(route => (
{
return (
-
+ {routerData.map(({path, element, name}) => (
+
);
}
diff --git a/src/domain/mock-db/featured-projects-data.ts b/src/domain/mock-db/featured-projects-data.ts
deleted file mode 100644
index f687eda..0000000
--- a/src/domain/mock-db/featured-projects-data.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-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: "/android-logo.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: "/android-logo.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"
- },
-]
diff --git a/src/domain/mock-db/index.js b/src/domain/mock-db/index.js
index 24054f9..8843dcc 100644
--- a/src/domain/mock-db/index.js
+++ b/src/domain/mock-db/index.js
@@ -1,2 +1,3 @@
export * from './socials-data';
export * from './text-data';
+export * from './projects-data';
diff --git a/src/domain/mock-db/planned-projects-data.ts b/src/domain/mock-db/planned-projects-data.ts
deleted file mode 100644
index af020dc..0000000
--- a/src/domain/mock-db/planned-projects-data.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-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"
- },
-]
diff --git a/src/domain/mock-db/projects-data.ts b/src/domain/mock-db/projects-data.ts
new file mode 100644
index 0000000..214f3ff
--- /dev/null
+++ b/src/domain/mock-db/projects-data.ts
@@ -0,0 +1,63 @@
+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: 'Literal weather app...',
+ desc: 'Camunda-, kTor- & React-Microservices running in AKS',
+ url: 'https://github.com/Z-100/soemi-weather',
+ img: '/logos/aks-logo.png'
+ },
+ {
+ name: 'GeoPal',
+ shortDesc: 'Geo Reminder App',
+ desc: 'Basically a location based reminder app, where I also focused on the UI. I\'m definitely a backend dev',
+ url: 'https://github.com/ZE-100/GeoPal',
+ img: '/logos/android-logo.png'
+ },
+ {
+ name: 'BackFusion',
+ shortDesc: 'Kotlin and Spring Boot',
+ desc: 'The backend to a gym-tracking app written in Kotlin. More of an experiment.',
+ url: 'https://github.com/FitFusion/BackFusion',
+ img: '/logos/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: '/logos/android-logo.png'
+ },
+ {
+ name: 'More projects',
+ shortDesc: 'Wanna see more?',
+ desc: 'There are lots of other projects on my GitHub!',
+ url: 'https://github.com/Z-100?tab=repositories',
+ img: '/logos/github-logo.png'
+ },
+]
+
+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: "/logos/elmo-logo.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: "/logos/kubernetes-logo.png"
+ },
+]
diff --git a/src/domain/mock-db/text-data.ts b/src/domain/mock-db/text-data.ts
index 2d85e5b..8ae4fed 100644
--- a/src/domain/mock-db/text-data.ts
+++ b/src/domain/mock-db/text-data.ts
@@ -9,84 +9,95 @@ export const introTexts: TextSection[] = [
},
]
-export const aboutWebsiteTexts: TextSection[] = [
- {
- title: 'What\'s this website about?',
- text:
- 'TL;DR: Backend dev doing frontend\n' +
- 'br\n' +
- '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' +
- 'I\'m a backend dev who is currently learning how to frontend.\n' +
- 'So don\'t judge Vayan to hard :)',
- },
-]
-
export const aboutMeTexts: TextSection[] = [
{
- title: 'About me',
- text: '',
- texts: [
+ 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: [
+ {
+ title: 'Stuff I like',
+ text: [
+ 'Motorcycles',
+ 'Programming',
+ 'Games',
+ 'Programming Games',
+ 'Food (non cheesey stuff as well)',
+ ]
+ },
{
title: 'I am...',
- text:
- '- 🗿 ... a passionate backend developer in love with Spring Boot\n' +
- '- 💻 ... trying my best with Vayan in the web\n' +
- '- 🎩 ...experimenting with Android-apps, Arduino & Unity\n' +
- '- 🚢 ...looking for jobs\n' +
- '- 🌈 ...constantly learning new stuff'
+ text: [
+ '...a passionate backend developer in love with Spring Boot',
+ '...trying my best with Vayan in the web',
+ '...experimenting with Android apps, Arduino & Unity',
+ '...looking for jobs (there\'s a contact form)',
+ '...constantly learning new stuff',
+ ]
},
],
},
]
+export const aboutWebsiteTexts: TextSection[] = [
+ {
+ title: 'What even is this website tho?',
+ text:
+ 'TL;DR: Backend dev doing frontend\n' +
+ '\n' +
+ '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' +
+ '\n' +
+ 'Basically, I\'m a backend dev who is currently learning how to frontend.\n' +
+ 'So don\'t judge Vayan too hard :)',
+ },
+]
+
export const skillsTexts: TextSection[] = [
{
title: 'Tech stack',
- text: '',
- texts: [
+ text: 'A rough overview of the stuff I\'ve used so far',
+ subTexts: [
{
title: 'Java',
- 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',
+ text: [
+ 'I started writing Java back in 2021 and have been using it ever since',
+ 'Both professionally and for my own projects',
+ 'It\'s a good language, and I like it, but...',
+ ],
},
{
title: 'Kotlin',
- text:
- '> 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',
+ text: [
+ 'Easily my favourite language',
+ 'Mostly, I\'ve used Kotlin for Android apps',
+ 'But as time went on, I started using it in other use cases as well, e.g. Spring Boot',
+ 'Going forward I definitely wanna improve my skills in that language!',
+ ],
},
{
title: 'Web development',
- text:
- '- React/Typescript\n' +
- '- Javascript, HTML, CSS\n' +
- '- PHP\n' +
- 'br\n',
+ text: [
+ 'React/Typescript',
+ 'JavaScript, HTML, CSS',
+ 'PHP',
+ ],
},
{
title: 'Other languages',
- text:
- '- C# along Unity, for... well, Unity Games\n' +
- '- C++ for an Arduino/M5Stack project\n' +
- 'br\n',
+ text: [
+ 'C# along Unity, for... well, Unity Games',
+ 'C++ for an Arduino/M5Stack project',
+ ],
},
{
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',
+ text: [
+ 'Git, GitHub, GitLab, BitBucket',
+ 'Jira, GitHub Projects',
+ 'IntelliJ, VSCode, Ubuntu',
+ 'GitHub Actions, GitLab CI',
+ 'Kubernetes (learning)',
+ ],
},
],
},
diff --git a/src/domain/models/TextSection.ts b/src/domain/models/TextSection.ts
index 04e197f..46e151b 100644
--- a/src/domain/models/TextSection.ts
+++ b/src/domain/models/TextSection.ts
@@ -1,5 +1,5 @@
export interface TextSection {
title: string,
- text: string,
- texts?: TextSection[]
+ text: string | string[],
+ subTexts?: TextSection[],
}
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index f51f588..383ca33 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,19 +1,28 @@
import React, {JSX} from 'react'
-import {AboutMeContainer, AboutWebsiteContainer, IntroContainer, SkillsContainer} from "./components";
+import {AboutMeContainer, AboutWebsiteContainer, SkillsContainer} from "./components";
import {mapContentContainers} from "../../domain";
export const HomePage = () => {
const containers: JSX.Element[] = [
-
-
- {routerData.map(({path, element, name}) => (
-
-
+
- {mapContentContainers(containers)}
+
+
);
}
diff --git a/src/pages/projects/ProjectsPage.tsx b/src/pages/projects/ProjectsPage.tsx
index 084ad8c..e320498 100644
--- a/src/pages/projects/ProjectsPage.tsx
+++ b/src/pages/projects/ProjectsPage.tsx
@@ -9,5 +9,9 @@ export const ProjectsPage = () => {
+ 
+ 
+
+
+
+
+
+ Z-100
+Swiss Backend Dev
+ +
+ {mapContentContainers(containers)}
+
+ {mapContentContainers(containers)}
+
+ );
}
diff --git a/src/pages/projects/components/featured-projects/FeaturedProjectsContainer.tsx b/src/pages/projects/components/featured-projects/FeaturedProjectsContainer.tsx
index 8026fc4..e2258f0 100644
--- a/src/pages/projects/components/featured-projects/FeaturedProjectsContainer.tsx
+++ b/src/pages/projects/components/featured-projects/FeaturedProjectsContainer.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import {ProjectSection} from "../../../../components";
-import {featuredProjectsData} from "../../../../domain/mock-db/featured-projects-data";
+import {featuredProjectsData} from "../../../../domain";
export const FeaturedProjectsContainer = () => {
diff --git a/src/pages/projects/components/planned-projects/PlannedProjectsContainer.tsx b/src/pages/projects/components/planned-projects/PlannedProjectsContainer.tsx
index 0c5e18d..9b0ca90 100644
--- a/src/pages/projects/components/planned-projects/PlannedProjectsContainer.tsx
+++ b/src/pages/projects/components/planned-projects/PlannedProjectsContainer.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import {ProjectSection} from "../../../../components";
-import {plannedProjectsData} from "../../../../domain/mock-db/planned-projects-data";
+import {plannedProjectsData} from "../../../../domain";
export const PlannedProjectsContainer = () => {
diff --git a/tailwind.config.js b/tailwind.config.js
index 4aac98f..ef29f1b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,8 @@ module.exports = {
'light-1': '#b5b5b5',
'light-2': '#d5d5d5',
'light-3': '#f5f5f5',
+ 'link-1': '#3f35cf',
+ 'link-2': '#356DCF',
},
future: {
hoverOnlyWhenSupported: true,