Upgrade to latest nodejs and completely rework website

2025-01-11 19:11:20 +00:00 · 2025-01-11 19:11:20 +00:00 · 0372c4cd77
commit 0372c4cd77
parent 07270c3aa6
38 changed files with 4135 additions and 6933 deletions
--- a/.gitignore
+++ b/.gitignore
@ -34,4 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo

-.vscode
+.vscode
+.idea
--- a/.npmrc
+++ b/.npmrc
@ -1 +0,0 @@
-@treejs:registry=https://npm.romanjaros.dev
--- a/next-env.d.ts
+++ b/next-env.d.ts
@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />

 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/next.config.js
+++ b/next.config.js
@ -1,11 +1,8 @@
+// @ts-check
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-	reactStrictMode: true,
-	i18n: {
-		locales: ["cs"],
-		defaultLocale: "cs",
-	},
-	trailingSlash: true,
-};
+  
+}

-module.exports = nextConfig;
+module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,39 +3,28 @@
 	"version": "0.1.9",
 	"private": true,
 	"scripts": {
-		"ci:lint": "eslint .",
-		"ci:build": "npm run build",
-		"ci:test": "echo 1",
-		"ci:test-e2e": "echo 1",
-		"ci:increase-version": "npm version --git-tag-version=false",
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint"
 	},
 	"dependencies": {
-		"@reduxjs/toolkit": "1.8.0",
-		"@treejs/components": "0.17.0",
-		"@treejs/constants": "0.17.0",
-		"@treejs/styles": "0.17.0",
-		"next": "12.2.0",
-		"next-seo": "^5.4.0",
-		"ramda": "^0.27.0",
-		"react": "17.0.2",
-		"react-dom": "17.0.2",
-		"react-redux": "8.0.2"
+		"lucide-react": "^0.471.0",
+		"next": "15.1.4",
+		"next-seo": "6.6.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
 	},
 	"devDependencies": {
-		"@types/node": "18.0.0",
-		"@types/ramda": "^0.28.14",
-		"@types/react": "17.0.2",
-		"@types/react-dom": "17.0.2",
-		"autoprefixer": "10.4.4",
-		"classnames": "2.3.1",
-		"eslint": "8.18.0",
-		"eslint-config-next": "12.2.0",
-		"postcss": "8.4.14",
-		"tailwindcss": "^3.1.4",
-		"typescript": "4.7.4"
+		"@types/node": "22.10.5",
+		"@types/react": "^19.0.4",
+		"@types/react-dom": "^19.0.2",
+		"autoprefixer": "10.4.20",
+		"classnames": "2.5.1",
+		"eslint": "9.18.0",
+		"eslint-config-next": "15.1.4",
+		"postcss": "8.4.49",
+		"tailwindcss": "3.4.17",
+		"typescript": "5.7.3"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@ -2,9 +2,7 @@ module.exports = {
 	plugins: {
 		"postcss-import": {},
 		"tailwindcss/nesting": {},
-		tailwindcss: {
-			config: "./src/styles/tailwind.config.js",
-		},
+		tailwindcss: "tailwind.config.js",
 		autoprefixer: {},
 	},
 };
--- a/public/contact.svg
+++ b/public/contact.svg
@ -1 +0,0 @@
-<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#fd0;}.cls-2{fill:#effafe;}.cls-3{fill:#40bdff;}.cls-4{fill:#2197f7;}.cls-5{fill:#228ed6;}.cls-6{fill:#efc803;}.cls-7{fill:#e4ebed;}.cls-8{fill:#263238;}</style></defs><title/><path class="cls-1" d="M44,58H217a7,7,0,0,0,7-7V19a7,7,0,0,0-7-7H44a7,7,0,0,0-7,7V51A7,7,0,0,0,44,58Zm4-23A12,12,0,0,1,60,23H196a12,12,0,0,1,0,24H60A12,12,0,0,1,48,35Z"/><path class="cls-2" d="M154,221.12V179.63l-.59.1A14.93,14.93,0,0,0,141,194.47v11.65a2,2,0,0,1-2,2H113v13c0,12.68,5.32,23,18,23A23,23,0,0,0,154,221.12Z"/><polygon class="cls-3" points="199 111 57 111 128 155.15 199 111"/><polygon class="cls-4" points="57 201.56 111.06 149.32 57 112.6 57 201.56"/><path class="cls-4" d="M204,112.6l-59,36.71.5.44c34.63,30.58,39.39,34.81,58.53,51.77Zm-1.78,86.67h0Z"/><path class="cls-5" d="M199,115.71v81.38l5,4.43V112.6Zm3.22,83.56h0Z"/><path class="cls-3" d="M200.77,204c-15.68-13.92-40.57-35.9-59.35-52.49l-12.37,7.69a2,2,0,0,1-2.11,0l-12.34-7.67L55.28,204H137v-9.53a19,19,0,0,1,19-19,2,2,0,0,1,2,2V204Z"/><polygon class="cls-4" points="57 201.56 111.06 149.32 57 112.6 57 201.56"/><polygon class="cls-5" points="57 112.6 57 116 106.06 149.32 57 196.73 57 201.56 111.06 149.32 57 112.6"/><path class="cls-6" d="M217,12h-5a7,7,0,0,1,7,7V51a7,7,0,0,1-7,7h5a7,7,0,0,0,7-7V19A7,7,0,0,0,217,12Z"/><path class="cls-7" d="M153.41,179.73a15,15,0,0,0-3.41,1v40.35A23,23,0,0,1,129,244c.64.06,1.3.09,2,.09a23,23,0,0,0,23-23V179.63Z"/><polygon class="cls-4" points="194 111 125.5 153.59 128 155.15 199 111 194 111"/><path class="cls-4" d="M141.42,151.51l-2.93,1.82C157,169.69,180.66,190.58,195.77,204h5C185.09,190.08,160.21,168.1,141.42,151.51Z"/><path class="cls-8" d="M39,62.5H217A11.51,11.51,0,0,0,228.5,51V19A11.51,11.51,0,0,0,217,7.5H39A11.51,11.51,0,0,0,27.5,19V51A11.51,11.51,0,0,0,39,62.5ZM32.5,19A6.51,6.51,0,0,1,39,12.5H217a6.51,6.51,0,0,1,6.5,6.5V51a6.51,6.51,0,0,1-6.5,6.5H39A6.51,6.51,0,0,1,32.5,51Z"/><path class="cls-8" d="M60,47.5H196a12.5,12.5,0,0,0,0-25H60a12.5,12.5,0,0,0,0,25Zm0-20H196a7.5,7.5,0,0,1,0,15H60a7.5,7.5,0,0,1,0-15Z"/><path class="cls-8" d="M131,248.62a27.53,27.53,0,0,0,27.5-27.5V208.5H206a2.52,2.52,0,0,0,2.5-2.5V109a2.52,2.52,0,0,0-2.5-2.5H50a2.51,2.51,0,0,0-2.5,2.5v97a2.52,2.52,0,0,0,2.5,2.5h53.5v12.62A27.53,27.53,0,0,0,131,248.62Zm22.5-27.5a22.5,22.5,0,0,1-45,0v-12.5H139a2.5,2.5,0,0,0,2.5-2.5V194.47a14.48,14.48,0,0,1,12-14.24Zm50-20.71c-12-10.66-45.68-40.42-57.7-51l57.7-35.88Zm-6.25-88.91L128,154.56,58.75,111.5Zm-144.75,2,57.72,35.89L52.5,200.45Zm4.1,90,58.05-51.35,12,7.48a2.5,2.5,0,0,0,2.64,0l12.05-7.49c13,11.47,45.24,40,58.09,51.37h-41v-26A2.5,2.5,0,0,0,156,175a19.48,19.48,0,0,0-19.46,19.46v9Z"/><path class="cls-8" d="M128,101.5a2.5,2.5,0,0,0,2.5-2.5V76l6.9,6.9a2.5,2.5,0,1,0,3.54-3.54L129.77,68.23a2.5,2.5,0,0,0-3.54,0L115.06,79.4a2.5,2.5,0,0,0,3.54,3.54l6.9-6.9V99A2.5,2.5,0,0,0,128,101.5Z"/><path class="cls-1" d="M41,149.6H37v-4a1,1,0,0,0-2,0v4H31a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2Z"/><path class="cls-1" d="M222.72,170.33h-4v-4a1,1,0,0,0-2,0v4h-4a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2Z"/><path class="cls-3" d="M21.67,21.5h-4v-4a1,1,0,0,0-2,0v4h-4a1,1,0,1,0,0,2h4v4a1,1,0,1,0,2,0v-4h4a1,1,0,0,0,0-2Z"/><path class="cls-3" d="M81.22,96.5a6,6,0,1,1,6-6A6,6,0,0,1,81.22,96.5Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,81.22,86.5Z"/><path class="cls-1" d="M32,242a6,6,0,1,1,6-6A6,6,0,0,1,32,242Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,32,232Z"/><path class="cls-1" d="M238,58.41a6,6,0,1,1,6-6A6,6,0,0,1,238,58.41Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,238,48.41Z"/><path class="cls-3" d="M199.77,230.82h-2.59L199,229a1,1,0,0,0-1.41-1.41l-1.83,1.83v-2.59a1,1,0,0,0-2,0v2.59l-1.83-1.83a1,1,0,0,0-1.41,1.41l1.83,1.83h-2.59a1,1,0,0,0,0,2h2.59l-1.83,1.83a1,1,0,0,0,1.41,1.41l1.83-1.83v2.59a1,1,0,0,0,2,0v-2.59l1.83,1.83a1,1,0,0,0,1.41-1.41l-1.83-1.83h2.59a1,1,0,0,0,0-2Z"/></svg>
--- a/public/jobs.json
+++ b/public/jobs.json
@ -0,0 +1,146 @@
+[
+	{
+		"name": "Czech Quests",
+		"started": "July 2024",
+		"ended": "today",
+		"description": "Custom project, where I make an addon for World of Warcraft game, which show Czech translation for in-game quests. The translations are made via AI (DeepL and GPT). Text is formated for player and quest giver gender. Keep original names of other NPCs, items or places. I also create a web application where i am able to manage translations",
+		"tags": [
+			"Typescript",
+			"React",
+			"GraphQL",
+			"Kotlin",
+			"Quarkus",
+			"PostgreSQL",
+			"Lua",
+			"Jenkins",
+			"Docker",
+			"Tolgee",
+			"AI",
+			"DeepL",
+			"GPT",
+			"SonarQube"
+		],
+		"link": "https://czquests.romanjaros.cz"
+	},
+	{
+		"name": "Many",
+		"started": "July 2024",
+		"ended": "today",
+		"description": "Custom project for invoice evidence. Generating PDF templates.",
+		"tags": [
+			"Typescript",
+			"GraphQL",
+			"Kotlin",
+			"Quarkus",
+			"Jenkins",
+			"SonarQube",
+			"Keycloak"
+		]
+	},
+	{
+		"name": "Procyon",
+		"started": "March 2019",
+		"ended": "July 2024",
+		"description": "Custom project where i create react components, common utilities and base themes. Similar to @mui. In 2023 i rewrite this project to use react-native-web library and try to make one platform for mobile and web development. For now, i decide to stop this project as react-native-web platform, because it is not the right way.",
+		"tags": [
+			"Typescript",
+			"Jest",
+			"Jenkins",
+			"React Native",
+			"React Native Web",
+			"Styled Native",
+			"SonarQube",
+			"Penpot",
+			"Storybook"
+		],
+		"link": "https://procyon.romanjaros.dev"
+	},
+	{
+		"name": "Mediaportsolutions s.r.o.",
+		"started": "January 2023",
+		"ended": "July 2024",
+		"description": "Company where I was a part of team. We work on web application for exchange money, notify about promising exchange rate and sending money between accounts. We used agile (standups, planning, retrospective). I was here as a frontend developer. First time working with GraphQL on client and REST on backend (apollo-link-rest).",
+		"tags": [
+			"Typescript",
+			"React",
+			"Graphql",
+			"REST",
+			"Mui",
+			"Azure DevOps"
+		]
+	},
+	{
+		"name": "Portfolio",
+		"started": "December 2021",
+		"ended": "December 2021",
+		"description": "This website.",
+		"tags": [
+			"Typescript",
+			"React",
+			"NextJS",
+			"Tailwind"
+		]
+	},
+	{
+		"name": "doservisu.online",
+		"started": "December 2021",
+		"ended": "December 2022",
+		"description": "Project, where customers should be able to make reservation for car services. I make whole frontend. Backend is REST service. Currently this project is created and waiting for marketing part.",
+		"tags": [
+			"Typescript",
+			"React",
+			"AWS Cognito",
+			"Redux Toolkit",
+			"RTQuery"
+		],
+		"link": "https://doservisu.online"
+	},
+	{
+		"name": "Generali Česká Pojišťovna",
+		"started": "January 2020",
+		"ended": "December 2023",
+		"description": "First time work as a self employee. I was frontend leader. We used agile (standups, planing, retrospective). I was responsible for four-person team. Same application as for 'Česká Pojišťovna' company.",
+		"tags": [
+			"React",
+			"Redux",
+			"Jest",
+			"Jenkins",
+			"SonarQube"
+		]
+	},
+	{
+		"name": "Česká Pojišťovna",
+		"started": "October 2017",
+		"ended": "December 2019",
+		"description": "Part of really big team (around 30 peoples, 12 developers). Internal application for company branches. As a junior react developer, i got issues to fix or implement. We used agile (standups, planing, retrospective).",
+		"tags": [
+			"React",
+			"Redux",
+			"Jest"
+		]
+	},
+	{
+		"name": "Českomoravská stavební spořitelna",
+		"started": "June 2017",
+		"ended": "October 2017",
+		"description": "Part of small team. Internal application for company. As a junior react developer, i got issues to fix or implement.",
+		"tags": [
+			"React",
+			"Redux",
+			"Jest"
+		]
+	},
+	{
+		"name": "Dataprojekt s.r.o.",
+		"started": "December 2012",
+		"ended": "June 2017",
+		"description": "My first job as a developer. I was working on many projects under this company. Almost as a full-stack developer. Communicate with customer about requirements and deployments.",
+		"tags": [
+			"PHP",
+			"Javascript",
+			"AngularJS",
+			"React",
+			"Java"
+		]
+	}
+]
--- a/public/me.svg
+++ b/public/me.svg
@ -1 +0,0 @@
-<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#effafe;}.cls-2{fill:#40bdff;}.cls-3{fill:#e4ebed;}.cls-4{fill:#2197f7;}.cls-5{fill:#263238;}.cls-6{fill:#fd0;}</style></defs><title/><path class="cls-1" d="M58.92,143.62l-.38.73H205.47l-.38-.73a68.84,68.84,0,0,0-61.18-37.08H120.1A68.84,68.84,0,0,0,58.92,143.62Z"/><path class="cls-2" d="M220.19,148.35H43.81A8,8,0,0,0,36,157.89l13.57,69.34a8,8,0,0,0,7.85,6.46H206.63a8,8,0,0,0,7.85-6.46L228,157.89A8,8,0,0,0,220.19,148.35Z"/><path class="cls-1" d="M136.66,102.54h0a45.4,45.4,0,1,0-9.31,0Z"/><path class="cls-3" d="M205.08,143.62a68.84,68.84,0,0,0-61.18-37.08h-10a68.84,68.84,0,0,1,61.18,37.08l.38.73h10Z"/><path class="cls-4" d="M220.19,148.35h-10a8,8,0,0,1,7.85,9.54l-13.57,69.35a8,8,0,0,1-7.85,6.46h10a8,8,0,0,0,7.85-6.46L228,157.89A8,8,0,0,0,220.19,148.35Z"/><path class="cls-3" d="M132,12a45.64,45.64,0,0,0-5,.28,45.38,45.38,0,0,1,0,90.21l.36,0h9.31A45.39,45.39,0,0,0,132,12Z"/><path class="cls-5" d="M49.78,143.85h-10a12.5,12.5,0,0,0-12.27,14.9L41.11,228.1a12.53,12.53,0,0,0,12.27,10.1H202.63a12.52,12.52,0,0,0,12.27-10.1l13.57-69.34a12.5,12.5,0,0,0-12.27-14.9h-10A73.71,73.71,0,0,0,149,102.62a49.89,49.89,0,1,0-42,0A73.7,73.7,0,0,0,49.78,143.85Zm166.41,5a7.5,7.5,0,0,1,7.36,8.94L210,227.14a7.51,7.51,0,0,1-7.36,6.06H53.37A7.51,7.51,0,0,1,46,227.14L32.45,157.79a7.5,7.5,0,0,1,7.36-8.94H216.19ZM83.11,57.39A44.89,44.89,0,1,1,132.63,102h-9.26A45,45,0,0,1,83.11,57.39Zm33,49.65H139.9a68.67,68.67,0,0,1,60.74,36.81H55.36A68.67,68.67,0,0,1,116.1,107Z"/><path class="cls-5" d="M228.35,243.5H27.65a2.5,2.5,0,0,0,0,5h200.7a2.5,2.5,0,1,0,0-5Z"/><path class="cls-6" d="M78.15,12.19v4h-4a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2h-4v-4a1,1,0,1,0-2,0Z"/><path class="cls-6" d="M226,118.39v4h-4a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2h-4v-4a1,1,0,0,0-2,0Z"/><path class="cls-6" d="M43,101.54v4H39a1,1,0,0,0,0,2h4v4a1,1,0,1,0,2,0v-4h4a1,1,0,1,0,0-2H45v-4a1,1,0,0,0-2,0Z"/><path class="cls-2" d="M30.54,48a6,6,0,1,1-6-6A6,6,0,0,1,30.54,48Zm-10,0a4,4,0,1,0,4-4A4,4,0,0,0,20.54,48Z"/><path class="cls-2" d="M238.94,197.29a6,6,0,1,1-6-6A6,6,0,0,1,238.94,197.29Zm-10,0a4,4,0,1,0,4-4A4,4,0,0,0,228.94,197.29Z"/></svg>
--- a/public/skills.svg
+++ b/public/skills.svg
--- a/public/story.svg
+++ b/public/story.svg
@ -1 +0,0 @@
-<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#fd0;}.cls-2{fill:#eb5639;}.cls-3{fill:#40bdff;}.cls-4{fill:#efc803;}.cls-5{fill:#2197f7;}.cls-6{fill:#d84936;}.cls-7{fill:#263238;}</style></defs><title/><path class="cls-1" d="M79,50H23a8,8,0,0,0-8,8V78a8,8,0,0,0,8,8H41a2,2,0,0,1,1.79,1.11L51,103.53l8.21-16.42A2,2,0,0,1,61,86H79a8,8,0,0,0,8-8V58A8,8,0,0,0,79,50Z"/><path class="cls-1" d="M239,50H183a8,8,0,0,0-8,8V78a8,8,0,0,0,8,8h18a2,2,0,0,1,1.79,1.11L211,103.53l8.21-16.42A2,2,0,0,1,221,86h18a8,8,0,0,0,8-8V58A8,8,0,0,0,239,50Z"/><path class="cls-2" d="M128,136a8,8,0,0,0,0-16,8,8,0,0,0,0,16Z"/><path class="cls-2" d="M208,120a8,8,0,0,0,0,16,8,8,0,0,0,0-16Z"/><path class="cls-3" d="M159,170H141a2,2,0,0,1-1.79-1.11L131,152.47l-8.21,16.42A2,2,0,0,1,121,170H103a8,8,0,0,0-8,8v20a8,8,0,0,0,8,8h56a8,8,0,0,0,8-8V178A8,8,0,0,0,159,170Z"/><path class="cls-4" d="M79,50H71a8,8,0,0,1,8,8V78a8,8,0,0,1-8,8h8a8,8,0,0,0,8-8V58A8,8,0,0,0,79,50Z"/><path class="cls-4" d="M239,50h-8a8,8,0,0,1,8,8V78a8,8,0,0,1-8,8h8a8,8,0,0,0,8-8V58A8,8,0,0,0,239,50Z"/><path class="cls-5" d="M159,170h-8a8,8,0,0,1,8,8v20a8,8,0,0,1-8,8h8a8,8,0,0,0,8-8V178A8,8,0,0,0,159,170Z"/><circle class="cls-2" cx="48" cy="128" r="8"/><path class="cls-6" d="M48,120a8,8,0,0,0-2,.26,8,8,0,0,1,0,15.47A8,8,0,1,0,48,120Z"/><path class="cls-6" d="M128,120a8,8,0,0,0-2,.26,8,8,0,0,1,0,15.47A8,8,0,1,0,128,120Z"/><path class="cls-6" d="M208,120a8,8,0,0,0-2,.26,8,8,0,0,1,0,15.47A8,8,0,1,0,208,120Z"/><path class="cls-7" d="M246,125.5H220.25a12.5,12.5,0,0,0-24.5,0h-55.5a12.5,12.5,0,0,0-24.5,0H60.25a12.5,12.5,0,0,0-24.5,0H10a2.5,2.5,0,0,0,0,5H35.75a12.5,12.5,0,0,0,24.5,0h55.5a12.5,12.5,0,0,0,24.5,0h55.5a12.5,12.5,0,0,0,24.5,0H246a2.5,2.5,0,0,0,0-5Zm-198,10a7.5,7.5,0,1,1,7.5-7.5A7.51,7.51,0,0,1,48,135.5Zm80,0a7.5,7.5,0,0,1,0-15,7.5,7.5,0,0,1,0,15Zm80,0a7.5,7.5,0,0,1,0-15,7.5,7.5,0,0,1,0,15Z"/><path class="cls-7" d="M20,90.5H36.46l9.31,18.62a2.5,2.5,0,0,0,4.47,0L59.54,90.5H76A12.51,12.51,0,0,0,88.5,78V58A12.51,12.51,0,0,0,76,45.5H20A12.51,12.51,0,0,0,7.5,58V78A12.51,12.51,0,0,0,20,90.5ZM12.5,58A7.51,7.51,0,0,1,20,50.5H76A7.51,7.51,0,0,1,83.5,58V78A7.51,7.51,0,0,1,76,85.5H58a2.5,2.5,0,0,0-2.24,1.38L48,102.41,40.24,86.88A2.5,2.5,0,0,0,38,85.5H20A7.51,7.51,0,0,1,12.5,78Z"/><path class="cls-7" d="M20,65.5H76a2.5,2.5,0,0,0,0-5H20a2.5,2.5,0,0,0,0,5Z"/><path class="cls-7" d="M20,75.5H66a2.5,2.5,0,0,0,0-5H20a2.5,2.5,0,0,0,0,5Z"/><path class="cls-7" d="M236,45.5H180A12.51,12.51,0,0,0,167.5,58V78A12.51,12.51,0,0,0,180,90.5h16.46l9.31,18.62a2.5,2.5,0,0,0,4.47,0l9.31-18.62H236A12.51,12.51,0,0,0,248.5,78V58A12.51,12.51,0,0,0,236,45.5ZM243.5,78a7.51,7.51,0,0,1-7.5,7.5H218a2.5,2.5,0,0,0-2.24,1.38L208,102.41l-7.76-15.53A2.5,2.5,0,0,0,198,85.5H180a7.51,7.51,0,0,1-7.5-7.5V58a7.51,7.51,0,0,1,7.5-7.5h56a7.51,7.51,0,0,1,7.5,7.5Z"/><path class="cls-7" d="M236,60.5H180a2.5,2.5,0,0,0,0,5h56a2.5,2.5,0,0,0,0-5Z"/><path class="cls-7" d="M226,70.5H180a2.5,2.5,0,0,0,0,5h46a2.5,2.5,0,0,0,0-5Z"/><path class="cls-7" d="M156,165.5H139.54l-9.31-18.62a2.5,2.5,0,0,0-4.47,0l-9.31,18.62H100A12.51,12.51,0,0,0,87.5,178v20A12.51,12.51,0,0,0,100,210.5h56A12.51,12.51,0,0,0,168.5,198V178A12.51,12.51,0,0,0,156,165.5Zm7.5,32.5a7.51,7.51,0,0,1-7.5,7.5H100a7.51,7.51,0,0,1-7.5-7.5V178a7.51,7.51,0,0,1,7.5-7.5h18a2.5,2.5,0,0,0,2.24-1.38L128,153.59l7.76,15.53A2.5,2.5,0,0,0,138,170.5h18a7.51,7.51,0,0,1,7.5,7.5Z"/><path class="cls-7" d="M156,180.5H100a2.5,2.5,0,0,0,0,5h56a2.5,2.5,0,0,0,0-5Z"/><path class="cls-7" d="M146,190.5H100a2.5,2.5,0,0,0,0,5h46a2.5,2.5,0,0,0,0-5Z"/><path class="cls-1" d="M80.15,12.19v4h-4a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2h-4v-4a1,1,0,1,0-2,0Z"/><path class="cls-3" d="M196,192v4h-4a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2h-4v-4a1,1,0,0,0-2,0Z"/><path class="cls-3" d="M32.54,28a6,6,0,1,1-6-6A6,6,0,0,1,32.54,28Zm-10,0a4,4,0,1,0,4-4A4,4,0,0,0,22.54,28Z"/><path class="cls-1" d="M234.94,164.23a6,6,0,1,1-6-6A6,6,0,0,1,234.94,164.23Zm-10,0a4,4,0,1,0,4-4A4,4,0,0,0,224.94,164.23Z"/><path class="cls-3" d="M133.06,53.37a6,6,0,1,1-6-6A6,6,0,0,1,133.06,53.37Zm-10,0a4,4,0,1,0,4-4A4,4,0,0,0,123.06,53.37Z"/><path class="cls-3" d="M61,165.83H58.41L60.24,164a1,1,0,0,0-1.41-1.41L57,164.41v-2.59a1,1,0,0,0-2,0v2.59l-1.83-1.83A1,1,0,0,0,51.76,164l1.83,1.83H51a1,1,0,0,0,0,2h2.59l-1.83,1.83a1,1,0,0,0,1.41,1.41L55,169.24v2.59a1,1,0,0,0,2,0v-2.59l1.83,1.83a1,1,0,0,0,1.41-1.41l-1.83-1.83H61a1,1,0,0,0,0-2Z"/></svg>
--- a/src/app/components/AboutMe.tsx
+++ b/src/app/components/AboutMe.tsx
@ -0,0 +1,34 @@
+import {Card} from "../../components/Skills";
+
+export const AboutMe = () => {
+	const age = Math.floor(
+		((new Date() as any) - (new Date("1993-07-11") as any)) / 31557600000
+	);
+
+	const work = Math.floor(
+		((new Date() as any) - (new Date("2012-12-01") as any)) / 31557600000
+	);
+
+	return (
+			<>
+				<section className="leading-snug text-slate-500 dark:text-slate-400">
+					<p>
+						👋, my name is Roman Jaroš. I am {age}. {work} years working as software engineer.
+						I have been programming since I was 15 years old and still love to learn new technologies.
+						Outside of the programming world, I maintain servers with about 120 docker containers.
+						Outside of the IT world, I enjoy reading self improvement books, meditating,
+						alternative medicine and model painting or playing video games.
+					</p>
+					<br/>
+					<p>
+						<b>I am contractor and currently only for full remote jobs.</b>
+					</p>
+					<br />
+					<div className="flex justify-center flex-col md:flex-row gap-2">
+						<Card title="Web development" description="I offer my experience in web development." />
+						<Card title="UI/UX Design" description="I offer design web application in figma or penpot." />
+					</div>
+				</section>
+			</>
+	);
+};
--- a/src/app/components/Contact.tsx
+++ b/src/app/components/Contact.tsx
@ -0,0 +1,31 @@
+import {GithubIcon, InfoIcon, LinkedinIcon, MailIcon} from "lucide-react";
+
+export const Contact = () => {
+	return (
+		<>
+			<section className="leading-relaxed">
+				<p className="flex justify-center">
+					<a
+						type="button"
+						href="mailto:sales@romanjaros.dev"
+						className="flex gap-2 focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg px-5 py-2.5 me-2 mb-2 dark:text-slate-600 dark:focus:ring-yellow-900">
+						<MailIcon/> Send e-mail
+					</a>
+				</p>
+				<p className="flex justify-center gap-4 my-8">
+					<a href="mailto:info@romanjaros.dev"><InfoIcon/></a>
+					<a
+						target="_blank"
+						href="http://linkedin.com/in/roman-jaroš-16a687139"
+						rel="noreferrer"
+					>
+						<LinkedinIcon/>
+					</a>
+					<a target="_blank" href="https://forgejo.romanjaros.dev" rel="noreferrer">
+						<GithubIcon/>
+					</a>
+				</p>
+			</section>
+		</>
+	);
+};
--- a/src/app/components/Footer.tsx
+++ b/src/app/components/Footer.tsx
@ -0,0 +1,20 @@
+export const Footer = () => {
+	return (
+		<>
+			<footer className="text-slate-800 p-2 my-2 leading-relaxed text-sm dark:text-slate-400">
+				<p>
+					IČO 08738734, DIČ CZ9307111946 |
+					Bražec 50, Bochov 36471, Česká Republika
+				</p>
+				<p>
+					<b>Jsem plátce DPH.</b> Fyzická osoba zapsaná v živnostenském
+					rejstříku v Karlových Varech (CZ0412) od 02.12.2019.
+				</p>
+				<p className="mt-2">
+					This website does not use cookies.
+					The measurement of site traffic is completely anonymous.
+				</p>
+			</footer>
+		</>
+	);
+};
--- a/src/app/components/Jobs.tsx
+++ b/src/app/components/Jobs.tsx
@ -0,0 +1,62 @@
+import {ArrowLeftIcon, ExternalLinkIcon, MapPinIcon, MoveRightIcon, SquareArrowOutUpRightIcon} from "lucide-react";
+import {notNil} from "../../utils";
+
+type Job = {
+	name: string,
+	started: string,
+	ended: string,
+	description: string,
+	tags: string[],
+	link?: string
+}
+
+export const Jobs = async () => {
+	const res = await fetch("http://localhost:3000/jobs.json")
+	const data: Job[] | undefined = await res?.json();
+
+	return (
+		<>
+			<section className="px-4">
+				<ol className="relative border-s border-gray-200 dark:border-gray-700">
+					{data?.filter(notNil).map(({name, started, ended, description, tags, link}, index) => (
+						<li key={index} className="mb-10 ms-6">
+							<span
+								className="absolute flex items-center justify-center w-6 h-6 bg-white rounded-full -start-3 ring-8 ring-white dark:ring-slate-800 dark:bg-slate-800">
+								<MapPinIcon className="text-black dark:text-white"/>
+							</span>
+							<h3 className="flex items-center gap-2 mb-1 text-lg font-semibold text-gray-900 dark:text-white">
+								{name}
+							</h3>
+							<time className="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+								{started} - {ended}
+							</time>
+							<p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+								{description}
+							</p>
+							{link != undefined &&
+								<p>
+									<a href={link}
+										 target="_blank"
+										 className="inline-flex gap-2 mb-4 items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+										Visit website
+										<MoveRightIcon />
+									</a>
+								</p>
+							}
+							<p className="flex flex-wrap gap-2">
+								{tags.sort().map((name) => (
+									<span
+										key={name}
+										className="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-purple-900 dark:text-purple-300"
+									>
+										{name}
+									</span>
+								))}
+							</p>
+						</li>
+					))}
+				</ol>
+			</section>
+		</>
+	)
+}
--- a/src/app/components/Skills.tsx
+++ b/src/app/components/Skills.tsx
@ -0,0 +1,41 @@
+import {notNil} from "../../utils";
+import {StarIcon} from "lucide-react";
+
+type Job = {
+	tags: string[]
+}
+
+export const Skills = async () => {
+	const res = await fetch("http://localhost:3000/jobs.json")
+	const data: Job[] | undefined = await res?.json();
+
+	const skills = new Set(data?.filter(notNil).flatMap(({tags}) => tags).sort());
+
+	return (
+		<>
+			<section>
+				<div className="flex items-center my-2">
+					<p className="mr-2 w-12 ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">Czech</p>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
+				</div>
+				<div className="flex items-center my-2">
+					<p className="mr-2 w-12 ms-1 text-sm font-medium text-gray-500 dark:text-gray-400">English&emsp;</p>
+					<StarIcon fill="#fde047" className="w-4 h-4 ms-1 text-yellow-300"/>
+					<StarIcon className="w-4 h-4 ms-1 text-gray-300 dark:text-gray-500"/>
+					<StarIcon className="w-4 h-4 ms-1 text-gray-300 dark:text-gray-500"/>
+				</div>
+			</section>
+			<section className="flex flex-wrap gap-2">
+				{Array.from(skills)?.map((name) => (
+					<span
+						key={name}
+						className="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-indigo-900 dark:text-indigo-300">
+					{name}
+				</span>
+				))}
+			</section>
+		</>
+	)
+}
--- a/src/app/components/Title.tsx
+++ b/src/app/components/Title.tsx
@ -0,0 +1,12 @@
+export const Title = () => {
+	return (
+		<div className="flex justify-center text-4xl sm:text-6xl my-8">
+			<span className="text-gray-600 dark:text-white">&lt;</span>
+			<h1>
+				<span className="text-gray-600 dark:text-white">Just</span>
+				<span className="text-orange-800 dark:text-orange-400">Roman</span>
+			</h1>
+			<span className="text-orange-800 dark:text-orange-400">&nbsp;/&gt;</span>
+		</div>
+	)
+}
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -1,7 +1,9 @@
-@import '@treejs/styles/global.css';
-
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap');

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
    @apply bg-white text-black text-sm;

--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -0,0 +1,20 @@
+import {ReactNode} from "react";
+import "./globals.css"
+
+export default function AppLayout({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return (
+    <html lang="en">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+			</head>
+      <body className="bg-white dark:bg-slate-800">
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -0,0 +1,21 @@
+import {Title} from "./components/Title";
+import {AboutMe} from "./components/AboutMe";
+import {Contact} from "./components/Contact";
+import {Footer} from "./components/Footer";
+import {Jobs} from "./components/Jobs";
+import {Skills} from "./components/Skills";
+
+export default function Page() {
+	return (
+		<>
+			<div className="flex flex-col gap-y-16 md:w-3/4 lg:w-2/3 mx-auto p-4 mb-20">
+				<Title />
+				<AboutMe />
+				<Contact />
+				<Skills />
+				<Jobs />
+				<Footer />
+			</div>
+		</>
+	)
+}
--- a/src/components/AboutMe.tsx
+++ b/src/components/AboutMe.tsx
@ -1,51 +0,0 @@
-import { FC } from "react";
-import MyTitle from "../components/MyTitle";
-import MySection from "./MySection";
-
-const AboutMe: FC = () => {
-	const age = Math.floor(
-		((new Date() as any) - (new Date("1993-07-11") as any)) / 31557600000
-	);
-
-	const work = Math.floor(
-		((new Date() as any) - (new Date("2012-12-01") as any)) / 31557600000
-	);
-
-	return (
-		<MySection iconName="me">
-			<MyTitle left="Dobrý" right="Den" />
-			<div className="mt-10">
-				Jmenuji se <b>Roman Jaroš</b>.
-			</div>
-			<div className="mt-5">
-				<p>
-					Je mi <b>{age} let</b> a již <b>{work} let</b> se profesionálně věnuji
-					vývoji a správě webových aplikací.
-				</p>
-				<p className="mt-3">
-					Programování se věnuji od svých 15 let. Mé dosažené vzdělání je
-					Střední lesnická škola zakončené s maturitou. Fakt, že mám vystudováný
-					zcela jiný obor, jen podtrhuje mé nabité znalosti a zkušenosti. Osobně
-					si i myslím, že na vzdělání tolik nezáleží, pokud je práce i zábavou.
-					Stále se rád učím novým technologiím a snažím se je aplikovat ve svém
-					FW nebo na nových projektech.
-				</p>
-				<p className="mt-3">
-					Rád se vzdělávám i mimo svět programování. Doma mám dva Intel NUC
-					počítače, na kterých mi běží plno aplikací. Na těchto serverech se
-					učím pracovat s aplikacemi pro CI/CD, monitorování různých aktivit a
-					zapracování bezpečnostním prvků.
-				</p>
-				<p className="mt-3">
-					Mimo svět IT se rád zabívám čtením knih o osobním rozvoji, meditacím a
-					alternativní medicíně.
-				</p>
-				<p className="mt-3">
-					<b>Aktuálně spolupracuji pouze na IČO.</b>
-				</p>
-			</div>
-		</MySection>
-	);
-};
-
-export default AboutMe;
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@ -1,47 +0,0 @@
-import { FC } from "react";
-import MySection from "./MySection";
-import MyTitle from "./MyTitle";
-
-const Contact: FC = () => {
-	return (
-		<MySection iconName="contact">
-			<MyTitle left="Můj" right="Kontakt" />
-			<div className="mt-10">
-				<p className="mb-2">
-					Obchodní nabídky prosím zasílejte&nbsp;
-					<a href="mailto:sales@romanjaros.dev">sem</a>.
-				</p>
-				<p className="mb-2">
-					Jiné dotazy prosím <a href="mailto:info@romanjaros.dev">sem</a>.
-				</p>
-				<p className="mt-4">
-					<a
-						target="_blank"
-						href="http://linkedin.com/in/roman-jaroš-16a687139"
-						rel="noreferrer"
-					>
-						LinkedIn
-					</a>
-				</p>
-				<p className="mt-2">
-					<a target="_blank" href="https://git.romanjaros.dev" rel="noreferrer">
-						Gitea (Git)
-					</a>
-				</p>
-				<p className="mt-10">
-					Pokud potřebujete zadat tiket na podporu, použijte prosím&nbsp;
-					<a
-						target="_blank"
-						href="https://helpdesk.romanjaros.dev/index.php?a=add"
-						rel="noreferrer"
-					>
-						tento formulář
-					</a>
-					.
-				</p>
-			</div>
-		</MySection>
-	);
-};
-
-export default Contact;
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -1,36 +0,0 @@
-import { Grid, GridCol } from "@treejs/components/Grid";
-import { FC } from "react";
-
-const Footer: FC = () => {
-	return (
-		<footer className="bg-slate-300 p-2">
-			<Grid cols={2} className="mx-auto w-full lg:w-3/5 md:w-4/5">
-				<GridCol>
-					<p>IČO 08738734</p>
-					<p>DIČ CZ9307111946</p>
-				</GridCol>
-				<GridCol>
-					<p>
-						Bražec 50
-						<br />
-						Bochov 36471
-						<br />
-						Česká Republika
-					</p>
-				</GridCol>
-				<GridCol colSpan={2}>
-					<p>
-						<b>Jsem plátce DPH.</b> Fyzická osoba zapsaná v živnostenském
-						rejstříku v Karlových Varech (CZ0412) od 02.12.2019.
-					</p>
-					<p className="mt-2">
-						Tento web nepoužívá cookies. Měření návšťěvnosti webu je zcela
-						anonymní a probíhá pouze na službě vlastníka webu.
-					</p>
-				</GridCol>
-			</Grid>
-		</footer>
-	);
-};
-
-export default Footer;
--- a/src/components/FullStory.tsx
+++ b/src/components/FullStory.tsx
@ -1,54 +0,0 @@
-import { isNil, map } from "ramda";
-import { FC, Fragment, useMemo } from "react";
-import { projects } from "../constants/projects";
-import MySection from "./MySection";
-import MyTitle from "./MyTitle";
-
-const FullStory: FC = () => {
-	const projectsRender = useMemo(() => {
-		let i = 0;
-		return map((project) => {
-			i++;
-			return (
-				<Fragment key={i}>
-					<div className="border-timeline border-dotted border-l-4 pl-4 my-2">
-						<p className="mb-2 font-bold">{project.name}</p>
-						<p className="mb-2 font-thin">
-							{project.dateFrom} - {project.dateTo}
-						</p>
-						<p>
-							{project.desciption}
-							{!isNil(project.link) ? (
-								<>
-									<a
-										href={project.link}
-										target="_blank"
-										rel="noreferrer"
-										className="ml-1"
-									>
-										Odkaz na projekt
-									</a>
-									.
-								</>
-							) : null}
-						</p>
-					</div>
-					{i === projects.length ? null : (
-						<svg height="20" width="20" className="-ml-2">
-							<circle cx="10" cy="10" r="9" fill="#B25068" />
-						</svg>
-					)}
-				</Fragment>
-			);
-		}, projects);
-	}, []);
-
-	return (
-		<MySection iconName="story">
-			<MyTitle left="Na" right="Projektech" />
-			<div className="mt-10">{projectsRender}</div>
-		</MySection>
-	);
-};
-
-export default FullStory;
--- a/src/components/MySection.tsx
+++ b/src/components/MySection.tsx
@ -1,38 +0,0 @@
-import React, { FC, ReactElement } from "react";
-import { Grid, GridCol } from "@treejs/components/Grid";
-import Image from "next/image";
-import { GRID_SIZE } from "@treejs/components/Grid/types";
-
-type IProps = {
-	iconName: string;
-	children: ReactElement | ReactElement[];
-};
-
-const MySection: FC<IProps> = ({ iconName, children }) => {
-	return (
-		<section>
-			<Grid
-				cols={{ [GRID_SIZE.SM]: 1, [GRID_SIZE.LG]: 6 }}
-				className="mb-28 mx-4"
-			>
-				<GridCol colSpan={1} className="text-center">
-					<Image
-						src={`/${iconName}.svg`}
-						alt={iconName}
-						width={200}
-						height={200}
-						objectFit="contain"
-					/>
-				</GridCol>
-				<GridCol
-					colSpan={{ [GRID_SIZE.SM]: 1, [GRID_SIZE.LG]: 5 }}
-					className="lg:ml-10"
-				>
-					{children}
-				</GridCol>
-			</Grid>
-		</section>
-	);
-};
-
-export default MySection;
--- a/src/components/MyTitle.tsx
+++ b/src/components/MyTitle.tsx
@ -1,23 +0,0 @@
-import React, { FC } from "react";
-import cx from "classnames";
-
-type IProps = {
-	left: string;
-	right: string;
-	className?: string;
-};
-
-const MyTitle: FC<IProps> = ({ left, right, className }) => {
-	return (
-		<div className={cx("mytitle", className)}>
-			<span className="mytitle-left">&lt;</span>
-			<h2>
-				<span className="mytitle-left">{left}</span>
-				<span className="mytitle-right">{right}</span>
-			</h2>
-			<span className="mytitle-left">&nbsp;/&gt;</span>
-		</div>
-	);
-};
-
-export default MyTitle;
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@ -1,81 +1,17 @@
-import { Grid, GridCol } from "@treejs/components/Grid";
-import { FC, useMemo } from "react";
-import { skills } from "../constants/skills";
-import MyTitle from "./MyTitle";
-import { map } from "ramda";
-import { ISkill } from "../types/skills";
-import MySection from "./MySection";
-import { GRID_SIZE } from "@treejs/components/Grid/types";
+import {FC} from "react";

-const Skills: FC = () => {
-	const renderSkills = useMemo(() => {
-		let i = 0;
-		return map((skillList: ISkill[]) => {
-			let z = 0;
-			const skills = map((skill: ISkill) => {
-				z++;
-				return (
-					<li className="flex mb-1" key={z}>
-						<svg height="10" width="10" className="mt-1.5 mr-2">
-							<circle
-								cx="5"
-								cy="5"
-								r="4"
-								fill={skill.level === "full" ? "#90C8AC" : "#FFE7BF"}
-							/>
-						</svg>
-						{skill.name}
-					</li>
-				);
-			})(skillList);
-			i++;
-			return (
-				<ol className="mt-2" key={i}>
-					{skills}
-				</ol>
-			);
-		})(skills);
-	}, []);
+type CardProps = {
+	title: string;
+	description: string;
+}

+export const Card: FC<CardProps> = ({title, description}) => {
 	return (
-		<MySection iconName="skills">
-			<MyTitle left="Umím" right="Ovládat" />
-			<Grid cols={{ [GRID_SIZE.SM]: 4 }} className="mt-10 grid-cols-2">
-				<GridCol>
-					<b>Vývoj FE</b>
-					{renderSkills[0]}
-				</GridCol>
-				<GridCol>
-					<b>Vývoj BE</b>
-					{renderSkills[1]}
-				</GridCol>
-				<GridCol>
-					<b>Další</b>
-					{renderSkills[2]}
-				</GridCol>
-				<GridCol>
-					<b>Správa serveru</b>
-					{renderSkills[3]}
-				</GridCol>
-			</Grid>
-
-			<div className="flex mt-6 text-sm">
-				<div className="flex">
-					<svg height="10" width="10" className="mt-1.5 mr-2">
-						<circle cx="5" cy="5" r="4" fill="#90C8AC" />
-					</svg>
-					používám na projektech
-				</div>
-
-				<div className="flex ml-5">
-					<svg height="10" width="10" className="mt-1.5 mr-2">
-						<circle cx="5" cy="5" r="4" fill="#FFE7BF" />
-					</svg>
-					hraju si a učím se
-				</div>
-			</div>
-		</MySection>
-	);
-};
-
-export default Skills;
+		<div
+			className="w-full md:w-80 block p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
+		>
+			<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{title}</h5>
+			<p className="font-normal text-gray-700 dark:text-gray-400">{description}</p>
+		</div>
+	)
+}
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -1,33 +0,0 @@
-import "../styles/globals.css";
-
-import type { AppProps } from "next/app";
-import { useRouter } from "next/router";
-
-import Skeleton from "@treejs/components/Skeleton";
-import store from "../redux/store";
-import { Provider } from "react-redux";
-import Footer from "../components/Footer";
-
-function PortolioApp({ Component, pageProps }: AppProps) {
-	const router = useRouter();
-
-	return (
-		<Provider store={store}>
-			<Skeleton
-				history={router}
-				menuItems={{}}
-				enabledMenu={{
-					sidebar: false,
-					user: false,
-				}}
-				components={{
-					footer: <Footer />,
-				}}
-			>
-				<Component {...pageProps} />
-			</Skeleton>
-		</Provider>
-	);
-}
-
-export default PortolioApp;
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -1,83 +0,0 @@
-import type { NextPage } from "next";
-
-import AboutMe from "../components/AboutMe";
-import Skills from "../components/Skills";
-import Contact from "../components/Contact";
-import FullStory from "../components/FullStory";
-import { NextSeo, WebPageJsonLd } from "next-seo";
-import Head from "next/head";
-import Script from "next/script";
-
-const date = new Date().toISOString();
-
-const Home: NextPage = () => {
-	return (
-		<>
-			<Script
-				defer
-				type="text/javascript"
-				data-website-id="27410757-9ce4-4dad-a0ad-a1e2a0303495"
-				src="https://wa.romanjaros.dev/script.js"
-			/>
-			<Head>
-				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-			</Head>
-			<WebPageJsonLd
-				description="Roman Developer"
-				id="https://www.romanjaros.cz"
-				lastReviewed={date}
-				reviewedBy={{
-					type: "Person",
-					name: "Roman",
-				}}
-			/>
-			<NextSeo
-				title="Roman - Frontend developer"
-				description="Primárně se zaměřuji na vývoj frontendů webových aplikací. Jsem schopný dělat vývoj backedů webových aplikací a učím se udržovat vlastní server pro dev stack."
-				canonical="https://www.romanjaros.cz"
-				openGraph={{
-					url: "https://www.romanjaros.cz",
-					type: "websites",
-					title: "Roman Jaroš, Developer",
-					description:
-						"Portfolio web frontent and backend vývojáře Roman Jaroš",
-					site_name: "Roman Developer",
-					locale: "Czech Republic",
-					images: [
-						{
-							url: "https://www.romanjaros.cz/icon.svg",
-							alt: "Roman Developer",
-						},
-					],
-				}}
-				additionalLinkTags={[
-					{
-						rel: "icon",
-						href: "https://www.romanjaros.cz/favicon.ico",
-					},
-					{
-						rel: "apple-touch-icon",
-						href: "https://www.romanjaros.cz/icon.svg",
-						sizes: "76x76",
-					},
-				]}
-			/>
-			<div className="mx-auto w-full md:w-4/5">
-				<header className="mytitle text-3xl lg:text-6xl justify-center text-center mb-20">
-					<span className="mytitle-left">&lt;</span>
-					<h1>
-						<span className="mytitle-left">Roman</span>
-						<span className="mytitle-right">Developer</span>
-					</h1>
-					<span className="mytitle-left">&nbsp;/&gt;</span>
-				</header>
-				<AboutMe />
-				<Skills />
-				<Contact />
-				<FullStory />
-			</div>
-		</>
-	);
-};
-
-export default Home;
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@ -1,25 +0,0 @@
-import { combineReducers } from "redux";
-
-import { MODAL_REDUCER_NAME } from "@treejs/components/Modal/constants";
-import modalReducer from "@treejs/components/Modal/reducer";
-import { TOASTER_REDUCER_NAME } from "@treejs/components/Toaster/constants";
-import toasterReducer from "@treejs/components/Toaster/reducer";
-import { ROOT_REDUCER_NAME } from "@treejs/constants/redux";
-import { configureStore } from "@reduxjs/toolkit";
-
-type ITreejsReducer = {
-	[MODAL_REDUCER_NAME]: typeof modalReducer;
-	[TOASTER_REDUCER_NAME]: typeof toasterReducer;
-};
-
-const store = configureStore({
-	reducer: combineReducers({
-		[ROOT_REDUCER_NAME]: combineReducers<ITreejsReducer>({
-			[MODAL_REDUCER_NAME]: modalReducer,
-			[TOASTER_REDUCER_NAME]: toasterReducer,
-		}),
-	}),
-	devTools: process.env.NEXT_PUBLIC__IS_DEV === "true",
-});
-
-export default store;
--- a/src/styles/plugins/mytitle.js
+++ b/src/styles/plugins/mytitle.js
@ -1,22 +0,0 @@
-const title = (theme) => ({
-	".mytitle": {
-		"font-size": "30px",
-		"font-weight": "bold",
-		"padding-top": "40px",
-		display: "flex",
-
-		"&-left": {
-			color: theme("colors.black"),
-		},
-
-		"&-right": {
-			color: theme("colors.primary.DEFAULT"),
-		},
-	},
-});
-
-module.exports = ({ addComponents, theme }) => {
-	addComponents(title(theme));
-};
-
-module.exports.title = title;
--- a/src/styles/plugins/sketeton.js
+++ b/src/styles/plugins/sketeton.js
@ -1,14 +0,0 @@
-const title = () => ({
-	".page-main": {
-		".content": {
-			padding: 0,
-			margin: 0,
-		},
-	},
-});
-
-module.exports = ({ addComponents, theme }) => {
-	addComponents(title(theme));
-};
-
-module.exports.title = title;
--- a/src/styles/tailwind.config.js
+++ b/src/styles/tailwind.config.js
@ -1,27 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-const path = require("path");
-
-const plugin = require("tailwindcss/plugin");
-
-module.exports = {
-	presets: [require("@treejs/styles/tailwind.config")],
-	content: [
-		...require("@treejs/styles/tailwind.config").content,
-		path.resolve(""), // path to place, where are used tailwind styles
-	],
-	safelist: require("@treejs/styles/tailwind.config").safelist,
-	theme: {
-		extend: {
-			colors: {
-				timeline: "var(--color-timeline)",
-			},
-		},
-	},
-	variants: {
-		extend: {},
-	},
-	plugins: [
-		plugin(require("./plugins/mytitle")),
-		plugin(require("./plugins/sketeton")),
-	],
-};
--- a/src/utils.ts
+++ b/src/utils.ts
@ -0,0 +1,5 @@
+export function notNil<TValue>(
+	value: TValue | null | undefined,
+): value is TValue {
+	return value !== null && value !== undefined;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+	content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+	],
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,11 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
@ -13,8 +17,20 @@
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
  },
-  "include": ["next-env.d.ts", "**/**/*.ts", "**/**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "**/**/*.ts",
+    "**/**/*.tsx",
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
				`@ -1 +0,0 @@`
				<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#fd0;}.cls-2{fill:#effafe;}.cls-3{fill:#40bdff;}.cls-4{fill:#2197f7;}.cls-5{fill:#228ed6;}.cls-6{fill:#efc803;}.cls-7{fill:#e4ebed;}.cls-8{fill:#263238;}</style></defs><title/><path class="cls-1" d="M44,58H217a7,7,0,0,0,7-7V19a7,7,0,0,0-7-7H44a7,7,0,0,0-7,7V51A7,7,0,0,0,44,58Zm4-23A12,12,0,0,1,60,23H196a12,12,0,0,1,0,24H60A12,12,0,0,1,48,35Z"/><path class="cls-2" d="M154,221.12V179.63l-.59.1A14.93,14.93,0,0,0,141,194.47v11.65a2,2,0,0,1-2,2H113v13c0,12.68,5.32,23,18,23A23,23,0,0,0,154,221.12Z"/><polygon class="cls-3" points="199 111 57 111 128 155.15 199 111"/><polygon class="cls-4" points="57 201.56 111.06 149.32 57 112.6 57 201.56"/><path class="cls-4" d="M204,112.6l-59,36.71.5.44c34.63,30.58,39.39,34.81,58.53,51.77Zm-1.78,86.67h0Z"/><path class="cls-5" d="M199,115.71v81.38l5,4.43V112.6Zm3.22,83.56h0Z"/><path class="cls-3" d="M200.77,204c-15.68-13.92-40.57-35.9-59.35-52.49l-12.37,7.69a2,2,0,0,1-2.11,0l-12.34-7.67L55.28,204H137v-9.53a19,19,0,0,1,19-19,2,2,0,0,1,2,2V204Z"/><polygon class="cls-4" points="57 201.56 111.06 149.32 57 112.6 57 201.56"/><polygon class="cls-5" points="57 112.6 57 116 106.06 149.32 57 196.73 57 201.56 111.06 149.32 57 112.6"/><path class="cls-6" d="M217,12h-5a7,7,0,0,1,7,7V51a7,7,0,0,1-7,7h5a7,7,0,0,0,7-7V19A7,7,0,0,0,217,12Z"/><path class="cls-7" d="M153.41,179.73a15,15,0,0,0-3.41,1v40.35A23,23,0,0,1,129,244c.64.06,1.3.09,2,.09a23,23,0,0,0,23-23V179.63Z"/><polygon class="cls-4" points="194 111 125.5 153.59 128 155.15 199 111 194 111"/><path class="cls-4" d="M141.42,151.51l-2.93,1.82C157,169.69,180.66,190.58,195.77,204h5C185.09,190.08,160.21,168.1,141.42,151.51Z"/><path class="cls-8" d="M39,62.5H217A11.51,11.51,0,0,0,228.5,51V19A11.51,11.51,0,0,0,217,7.5H39A11.51,11.51,0,0,0,27.5,19V51A11.51,11.51,0,0,0,39,62.5ZM32.5,19A6.51,6.51,0,0,1,39,12.5H217a6.51,6.51,0,0,1,6.5,6.5V51a6.51,6.51,0,0,1-6.5,6.5H39A6.51,6.51,0,0,1,32.5,51Z"/><path class="cls-8" d="M60,47.5H196a12.5,12.5,0,0,0,0-25H60a12.5,12.5,0,0,0,0,25Zm0-20H196a7.5,7.5,0,0,1,0,15H60a7.5,7.5,0,0,1,0-15Z"/><path class="cls-8" d="M131,248.62a27.53,27.53,0,0,0,27.5-27.5V208.5H206a2.52,2.52,0,0,0,2.5-2.5V109a2.52,2.52,0,0,0-2.5-2.5H50a2.51,2.51,0,0,0-2.5,2.5v97a2.52,2.52,0,0,0,2.5,2.5h53.5v12.62A27.53,27.53,0,0,0,131,248.62Zm22.5-27.5a22.5,22.5,0,0,1-45,0v-12.5H139a2.5,2.5,0,0,0,2.5-2.5V194.47a14.48,14.48,0,0,1,12-14.24Zm50-20.71c-12-10.66-45.68-40.42-57.7-51l57.7-35.88Zm-6.25-88.91L128,154.56,58.75,111.5Zm-144.75,2,57.72,35.89L52.5,200.45Zm4.1,90,58.05-51.35,12,7.48a2.5,2.5,0,0,0,2.64,0l12.05-7.49c13,11.47,45.24,40,58.09,51.37h-41v-26A2.5,2.5,0,0,0,156,175a19.48,19.48,0,0,0-19.46,19.46v9Z"/><path class="cls-8" d="M128,101.5a2.5,2.5,0,0,0,2.5-2.5V76l6.9,6.9a2.5,2.5,0,1,0,3.54-3.54L129.77,68.23a2.5,2.5,0,0,0-3.54,0L115.06,79.4a2.5,2.5,0,0,0,3.54,3.54l6.9-6.9V99A2.5,2.5,0,0,0,128,101.5Z"/><path class="cls-1" d="M41,149.6H37v-4a1,1,0,0,0-2,0v4H31a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2Z"/><path class="cls-1" d="M222.72,170.33h-4v-4a1,1,0,0,0-2,0v4h-4a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2Z"/><path class="cls-3" d="M21.67,21.5h-4v-4a1,1,0,0,0-2,0v4h-4a1,1,0,1,0,0,2h4v4a1,1,0,1,0,2,0v-4h4a1,1,0,0,0,0-2Z"/><path class="cls-3" d="M81.22,96.5a6,6,0,1,1,6-6A6,6,0,0,1,81.22,96.5Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,81.22,86.5Z"/><path class="cls-1" d="M32,242a6,6,0,1,1,6-6A6,6,0,0,1,32,242Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,32,232Z"/><path class="cls-1" d="M238,58.41a6,6,0,1,1,6-6A6,6,0,0,1,238,58.41Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,238,48.41Z"/><path class="cls-3" d="M199.77,230.82h-2.59L199,229a1,1,0,0,0-1.41-1.41l-1.83,1.83v-2.59a1,1,0,0,0-2,0v2.59l-1.83-1.83a1,1,0,0,0-1.41,1.41l1.83,1.83h-2.59a1,1,0,0,0,0,2h2.59l-1.83,1.83a1,1,0,0,0,1.41,1.41l1.83-1.83v2.59a1,1,0,0,0,2,0v-2.59l1.83,1.83a1,1,0,0,0,1.41-1.41l-1.83-1.83h2.59a1,1,0,0,0,0-2Z"/></svg>