Initial Commit

2025-05-18 23:51:19 +02:00 · 2025-05-18 23:51:19 +02:00 · 75f4febcf9
commit 75f4febcf9
45 changed files with 9206 additions and 0 deletions
--- a/.forgejo/workflows/docker-publish.yml
+++ b/.forgejo/workflows/docker-publish.yml
@ -0,0 +1,34 @@
+name: Docker
+on:
+  push:
+    branches: [ "main" ]
+
+env:
+  REGISTRY: git.lycaknight.de
+
+jobs:
+  build:
+    runs-on: docker
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+
+    steps:
+      - name: Log into Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.PORTFOLIO_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@v6
+        with:
+          tags: ${{ env.REGISTRY }}/${{ gitea.repository }}:latest
+          platforms: linux/arm64
+          push: true
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,198 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/macos,react,nova,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=macos,react,nova,node
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist/electron
+dist/release
+dist/vite
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### nova ###
+.nova/*
+
+### react ###
+.DS_*
+**/*.backup.*
+**/*.back.*
+
+node_modules
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+# End of https://www.toptal.com/developers/gitignore/api/macos,react,nova,node
+
+dist
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,211 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/macos,node,nova,react,yarn
+# Edit at https://www.toptal.com/developers/gitignore?templates=macos,node,nova,react,yarn
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### nova ###
+.nova/*
+
+### react ###
+.DS_*
+**/*.backup.*
+**/*.back.*
+
+node_modules
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+### yarn ###
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# if you are NOT using Zero-installs, then:
+# comment the following lines
+!.yarn/cache
+
+# and uncomment the following lines
+# .pnp.*
+
+# End of https://www.toptal.com/developers/gitignore/api/macos,node,nova,react,yarn
--- a/15
+++ b/15
@ -0,0 +1,15 @@
+FROM alpine:latest
+
+RUN apk update && apk upgrade
+RUN apk add bash nginx nodejs npm git
+
+COPY src/nginx.conf /etc/nginx/http.d/default.conf
+
+RUN mkdir /app
+WORKDIR /app
+
+RUN git clone https://git.lycaknight.de/lycaknight/portfolio.git /app
+RUN npm install && npm run build
+
+CMD ["/bin/bash", "-c", "nginx -g 'daemon off;'"]
+EXPOSE 80
--- a/README.md
+++ b/README.md
@ -0,0 +1,37 @@
+# Personal Website
+
+Portfolio
+
+## Build
+
+Voraussetzungen:
+
+```
+- NodeJS: https://nodejs.org/en/download/current/
+- NPM: in NodeJS enthalten
+```
+
+Download des Repository:
+
+```
+- git clone https://git.lycaknight.de/lycaknight/portfolio.git
+```
+
+Installation der benötigten Module:
+
+```
+cd portfolio
+npm install
+```
+
+Start Development Server:
+
+```
+npm run dev
+```
+
+Build Package:
+
+```
+npm run build
+```
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,19 @@
+import js from "@eslint/js";
+import globals from "globals";
+import pluginReact from "eslint-plugin-react";
+import json from "@eslint/json";
+import markdown from "@eslint/markdown";
+import css from "@eslint/css";
+import { defineConfig } from "eslint/config";
+
+
+export default defineConfig([
+  { files: ["**/*.{js,mjs,cjs,jsx}"], plugins: { js }, extends: ["js/recommended"] },
+  { files: ["**/*.{js,mjs,cjs,jsx}"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
+  pluginReact.configs.flat.recommended,
+  { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
+  { files: ["**/*.jsonc"], plugins: { json }, language: "json/jsonc", extends: ["json/recommended"] },
+  { files: ["**/*.json5"], plugins: { json }, language: "json/json5", extends: ["json/recommended"] },
+  { files: ["**/*.md"], plugins: { markdown }, language: "markdown/gfm", extends: ["markdown/recommended"] },
+  { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
+]);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,33 @@
+{
+    "name": "lycaknight_portfolio",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test": "snyk test",
+        "update": "taze -r -I -i -w",
+        "clean": "rimraf build",
+        "clean-node": "rimraf node_modules build"
+    },
+    "dependencies": {
+        "@vitejs/plugin-react": "^4.4.1",
+        "lottie-web": "^5.12.2",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0"
+    },
+    "devDependencies": {
+        "@eslint/css": "^0.8.1",
+        "@eslint/js": "^9.27.0",
+        "@eslint/json": "^0.12.0",
+        "@eslint/markdown": "^6.4.0",
+        "autoprefixer": "^10.4.21",
+        "eslint": "^9.27.0",
+        "eslint-plugin-react": "^7.37.5",
+        "globals": "^16.1.0",
+        "postcss": "^8.4.47",
+        "prettier": "2.6.2",
+        "tailwindcss": "^3.4.12",
+        "vite": "^5.4.7"
+    }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/src/nginx.conf
+++ b/src/nginx.conf
@ -0,0 +1,18 @@
+server {
+    root /app/dist;
+    index index.html index.htm;
+
+    server_name localhost;
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
+        expires 1w;
+    }
+
+    location / {
+        try_files $uri $uri/ @root;
+    }
+
+    location @root {
+        rewrite .* / redirect;
+    }
+}
--- a/src/vite/App.jsx
+++ b/src/vite/App.jsx
@ -0,0 +1,71 @@
+import React, { Suspense, useState, useEffect } from "react";
+
+const Hero = React.lazy(() => import("./pages/Hero.jsx"));
+const Project = React.lazy(() => import("./pages/Project.jsx"));
+const Skill = React.lazy(() => import("./pages/Skill.jsx"));
+const Contact = React.lazy(() => import("./pages/Contact.jsx"));
+const Experience = React.lazy(() => import("./pages/Experience.jsx"));
+
+function App() {
+  const [scrolled, setScrolled] = useState("0%");
+
+  function scrollProgress() {
+    const scrollPx = document.documentElement.scrollTop;
+    const winHeightPx =
+      document.documentElement.scrollHeight -
+      document.documentElement.clientHeight;
+    const scrolling = `${(scrollPx / winHeightPx) * 100}%`;
+    setScrolled(scrolling);
+  }
+
+  const progressContainerStyle = {
+    height: "10px",
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    zIndex: 99,
+  };
+
+  const progressBarStyle = {
+    height: "10px",
+    background: "linear-gradient(43deg, #a162e8 0%, #f7ce68 46%, #85ffbd 100%)",
+    width: scrolled,
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", scrollProgress);
+  }, []);
+
+  return (
+    <div>
+      <Suspense
+        fallback={
+          <div className="sk-folding-cube">
+            <div className="sk-cube" />
+            <div className="sk-cube2 sk-cube" />
+            <div className="sk-cube4 sk-cube" />
+            <div className="sk-cube3 sk-cube" />
+          </div>
+        }
+      >
+        <div className="container mx-auto bg-black">
+          {scrolled !== "0%" && (
+            <div style={progressContainerStyle}>
+              <div style={progressBarStyle} />
+            </div>
+          )}
+          <main>
+            <Hero />
+            <Experience />
+            <Project />
+            <Skill />
+            <Contact />
+          </main>
+        </div>
+      </Suspense>
+    </div>
+  );
+}
+
+export default App;
--- a/src/vite/components/astronaout.json
+++ b/src/vite/components/astronaout.json
--- a/src/vite/components/exData.jsx
+++ b/src/vite/components/exData.jsx
@ -0,0 +1,29 @@
+const workHistory = [
+	{
+        id: 1,
+		companyName: "Fischer Systempartner GmbH",
+		role: "IT Consultant",
+		duration: "Sept'16 – Current",
+		workDes: [
+			"Supervising IT department employees",
+			"Providing support to Customers",
+			"Keeping up to date with advancements",
+			"Manage Network Security",
+			"Maintain Computer Systems",
+		],
+		link: "https://itfischer.de/",
+	},
+	{
+        id: 2,
+		companyName: "Fischer Systempartner GmbH",
+		role: "Trainee",
+		duration: "July'13 – Aug'16",
+		workDes: [
+			"Provide assistance with technical issues",
+			"System Installs and Upgrades",
+		],
+		link: "https://itfischer.de/",
+	},
+];
+
+export default workHistory;
--- a/src/vite/components/projectData.jsx
+++ b/src/vite/components/projectData.jsx
@ -0,0 +1,21 @@
+import helpdesk from "../images/projects/helpdesk.svg";
+import portfolio from "../images/projects/portfolio.png";
+
+const projects = [
+  {
+    id: 1,
+    title: "HelpDesk",
+    image: helpdesk,
+    description: "Desktop App to provide support to Costumers.",
+    tools: ["ReactJs", "ElectronJs", "TailwindCSS"],
+  },
+  {
+    id: 2,
+    title: "Portfolio Website",
+    image: portfolio,
+    description: "Personal Portfolio Website",
+    tools: ["ReactJs", "TailwindCSS", "Vite"],
+  },
+];
+
+export default projects;
--- a/src/vite/components/root.link.jsx
+++ b/src/vite/components/root.link.jsx
@ -0,0 +1,7 @@
+export const GIT = "https://git.lycaknight.de/";
+export const DAILYDEV_USERNAME = "lycaknight";
+export const FIRST_NAME = "Tobias";
+export const LAST_NAME = "Brummer";
+export const ADDRESS = "Bayern, Germany";
+export const FRONT_PAGE_NAME = "Tobias";
+export const FRONT_PAGE_DESC = "IT Consultant, Web Developer & Tech Enthusiast";
--- a/src/vite/components/skillData.jsx
+++ b/src/vite/components/skillData.jsx
@ -0,0 +1,67 @@
+import javascript from "../images/skills/javascript-icon.svg";
+import react from "../images/skills/react-icon.svg";
+import nodejs from "../images/skills/nodejs-icon.svg";
+import html5 from "../images/skills/html5-icon.svg";
+import css3 from "../images/skills/css3-icon.svg";
+
+import firefox from "../images/tools/firefox-icon.svg";
+import git from "../images/tools/git-icon.svg";
+import docker from "../images/tools/docker-icon.svg";
+import sublime from "../images/tools/sublime-icon.svg";
+import mariadb from "../images/tools/mariadb-icon.svg";
+
+const Skills = [
+  {
+    id: 1,
+    skill: "Javascript",
+    logo: javascript,
+  },
+  {
+    id: 2,
+    skill: "React",
+    logo: react,
+  },
+  {
+    id: 3,
+    skill: "Node.js ",
+    logo: nodejs,
+  },
+  {
+    id: 4,
+    skill: "HTML5",
+    logo: html5,
+  },
+  {
+    id: 5,
+    skill: "CSS3",
+    logo: css3,
+  },
+];
+const Tools = [
+  {
+    id: 1,
+    skill: "Firefox",
+    logo: firefox,
+  },
+  {
+    id: 2,
+    skill: "Git",
+    logo: git,
+  },
+  {
+    id: 3,
+    skill: "Docker",
+    logo: docker,
+  },
+  {
+    id: 4,
+    skill: "Sublime",
+    logo: sublime,
+  },
+  {
+    id: 5,
+    skill: "MariaDB",
+    logo: mariadb,
+  },
+];
+export { Skills, Tools };
--- a/src/vite/fonts/OrkneyRegular.ttf
+++ b/src/vite/fonts/OrkneyRegular.ttf
--- a/src/vite/images/bg-effects.png
+++ b/src/vite/images/bg-effects.png
--- a/src/vite/images/icons/dailydev.svg
+++ b/src/vite/images/icons/dailydev.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 784 440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Group">
+        <path id="Path" fill="#989899" stroke="none" opacity="0.56" d="M 672.830627 220.097107 L 586.405457 133.469299 L 629.58429 46.909058 L 770.029358 187.624359 C 787.931335 205.571899 787.931335 234.622314 770.029358 252.569855 L 597.179016 425.757935 C 588.593811 434.363281 576.937805 439.199371 564.782227 439.199371 C 552.62677 439.199371 540.970642 434.363281 532.385498 425.757935 C 514.494751 407.812347 514.494751 378.774902 532.385498 360.829315 Z"/>
+        <path id="path1" fill="#ffffff" stroke="none" d="M 532.402344 14.250488 C 540.98822 5.640015 552.647888 0.800659 564.807556 0.800659 C 576.967224 0.800659 588.626953 5.640015 597.21283 14.250488 L 629.634888 46.740173 L 251.545868 425.605957 C 242.959991 434.216461 231.300293 439.055847 219.140625 439.055847 C 206.981003 439.055847 195.321274 434.216461 186.735428 425.605957 L 154.3302 393.116333 Z M 370.376251 133.334198 L 305.565857 198.279724 L 219.123749 111.651917 L 111.100731 219.928253 L 197.525909 306.539185 L 154.3302 393.116333 L 13.901949 252.401001 C -4.000002 234.45343 -4.000002 205.403046 13.901949 187.455475 L 186.735428 14.250488 C 195.321274 5.640015 206.981003 0.800659 219.140625 0.800659 C 231.300293 0.800659 242.959991 5.640015 251.545868 14.250488 Z"/>
+    </g>
+</svg>
--- a/src/vite/images/icons/git.svg
+++ b/src/vite/images/icons/git.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path d="M31.396 14.575L17.425.604a2.06 2.06 0 0 0-2.914 0l-2.9 2.9 3.68 3.68c.856-.3 1.836-.095 2.518.587a2.45 2.45 0 0 1 .581 2.533l3.547 3.547c.858-.296 1.848-.105 2.533.582a2.45 2.45 0 1 1-3.469 3.468c-.72-.72-.898-1.78-.534-2.667l-3.308-3.308v8.705a2.5 2.5 0 0 1 .65.464 2.45 2.45 0 1 1-3.468 3.468 2.45 2.45 0 0 1 0-3.468c.237-.236.5-.415.803-.535v-8.786c-.292-.12-.566-.297-.803-.535a2.45 2.45 0 0 1-.528-2.681l-3.63-3.628-9.58 9.57a2.06 2.06 0 0 0 0 2.915l13.972 13.97a2.06 2.06 0 0 0 2.914 0L31.396 17.5a2.06 2.06 0 0 0 0-2.915" fill="#f03c2e"/></svg>
--- a/src/vite/images/projects/helpdesk.svg
+++ b/src/vite/images/projects/helpdesk.svg
--- a/src/vite/images/projects/portfolio.png
+++ b/src/vite/images/projects/portfolio.png
--- a/src/vite/images/skills/css3-icon.svg
+++ b/src/vite/images/skills/css3-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#1572B6" d="M18.814 114.123l-10.054-112.771h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z"/><path fill="#33A9DC" d="M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z"/><path fill="#fff" d="M64.001 51.429h18.302l1.264-14.163h-19.566v-13.831h34.681999999999995l-.332 3.711-3.4 38.114h-30.95v-13.831z"/><path fill="#EBEBEB" d="M64.083 87.349l-.061.018-15.403-4.159-.985-11.031h-13.882l1.937 21.717 28.331 7.863.063-.018v-14.39z"/><path fill="#fff" d="M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881h-13.876z"/><path fill="#EBEBEB" d="M64.048 23.435v13.831000000000001h-33.407999999999994l-.277-3.108-.63-7.012-.331-3.711h34.646zM64.001 51.431v13.831000000000001h-15.209l-.277-3.108-.631-7.012-.33-3.711h16.447z"/></svg>
--- a/src/vite/images/skills/html5-icon.svg
+++ b/src/vite/images/skills/html5-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#E44D26" d="M19.037 113.876l-10.005-112.215h109.936l-10.016 112.198-45.019 12.48z"/><path fill="#F16529" d="M64 116.8l36.378-10.086 8.559-95.878h-44.937z"/><path fill="#EBEBEB" d="M64 52.455h-18.212l-1.258-14.094h19.47v-13.762h-34.511l.33 3.692 3.382 37.927h30.799zM64 88.198l-.061.017-15.327-4.14-.979-10.975h-13.817l1.928 21.609 28.193 7.826.063-.017z"/><path fill="#fff" d="M63.952 52.455v13.763h16.947l-1.597 17.849-15.35 4.143v14.319l28.215-7.82.207-2.325 3.234-36.233.335-3.696h-3.708zM63.952 24.599v13.762h33.244l.276-3.092.628-6.978.329-3.692z"/></svg>
--- a/src/vite/images/skills/javascript-icon.svg
+++ b/src/vite/images/skills/javascript-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"/><path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"/></svg>
--- a/src/vite/images/skills/nodejs-icon.svg
+++ b/src/vite/images/skills/nodejs-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 128 128"><path fill="#83CD29" d="M112.771 30.334l-44.097-25.605c-2.781-1.584-6.402-1.584-9.205 0l-44.568 25.605c-2.87 1.651-4.901 4.754-4.901 8.073v51.142c0 3.319 2.084 6.423 4.954 8.083l11.775 6.688c5.628 2.772 7.617 2.772 10.178 2.772 8.333 0 13.093-5.039 13.093-13.828v-50.49c0-.713-.371-1.774-1.071-1.774h-5.623c-.712 0-2.306 1.061-2.306 1.773v50.49c0 3.896-3.524 7.773-10.11 4.48l-12.167-7.013c-.424-.23-.723-.693-.723-1.181v-51.142c0-.482.555-.966.982-1.213l44.424-25.561c.415-.235 1.025-.235 1.439 0l43.882 25.555c.42.253.272.722.272 1.219v51.142c0 .488.183.963-.232 1.198l-44.086 25.576c-.378.227-.847.227-1.261 0l-11.307-6.749c-.341-.198-.746-.269-1.073-.086-3.146 1.783-3.726 2.02-6.677 3.043-.726.253-1.797.692.41 1.929l14.798 8.754c1.417.82 3.027 1.246 4.647 1.246 1.642 0 3.25-.426 4.667-1.246l43.885-25.582c2.87-1.672 4.23-4.764 4.23-8.083v-51.142c0-3.319-1.36-6.414-4.229-8.073zM77.91 81.445c-11.726 0-14.309-3.235-15.17-9.066-.1-.628-.633-1.379-1.272-1.379h-5.731c-.709 0-1.279.86-1.279 1.566 0 7.466 4.059 16.512 23.453 16.512 14.039 0 22.088-5.455 22.088-15.109 0-9.572-6.467-12.084-20.082-13.886-13.762-1.819-15.16-2.738-15.16-5.962 0-2.658 1.184-6.203 11.374-6.203 9.105 0 12.461 1.954 13.842 8.091.118.577.645.991 1.24.991h5.754c.354 0 .692-.143.94-.396.24-.272.367-.613.335-.979-.891-10.568-7.912-15.493-22.112-15.493-12.631 0-20.166 5.334-20.166 14.275 0 9.698 7.497 12.378 19.622 13.577 14.505 1.422 15.633 3.542 15.633 6.395 0 4.955-3.978 7.066-13.309 7.066z"/></svg>
--- a/src/vite/images/skills/react-icon.svg
+++ b/src/vite/images/skills/react-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" enable-background="new 0 0 128 128"><g fill="#61DAFB"><circle cx="64" cy="64" r="11.4"/><path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3-12.5 4.8-19.3 11.4-19.3 18.8s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zm-14.8-30.5c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zm-11.2 59.3c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zm-25.6 27.1c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zm25.6-27.1c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zm-54.5-16.2c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zm-24.7 29c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5-13.8-4-22.1-10-22.1-15.6zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zm60.8-20.3c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"/></g></svg>
--- a/src/vite/images/tools/docker-icon.svg
+++ b/src/vite/images/tools/docker-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 32 32"><defs><clipPath id="A"><path d="M76 2v46H54v23H35.58l-.206 2c-1.15 12.53 1.036 24.088 6.063 33.97l1.688 3.03c1 1.817 2.2 3.523 3.438 5.188s1.686 2.583 2.47 3.688C62.32 133.8 82.13 141 105 141c50.648 0 93.633-22.438 112.656-72.844C231.153 69.54 244.1 66.08 250 54.563c-9.4-5.424-21.478-3.685-28.437-.187L240 2l-72 46h-23V2z"/></clipPath></defs><g transform="matrix(.679423 0 0 .679423 -2.086149 13.781817)"><path d="M30.305-3.553h4.222V.763h2.135a9.26 9.26 0 0 0 2.934-.492c.46-.156.974-.372 1.426-.644-.596-.778-.9-1.76-1-2.73-.122-1.317.144-3.032 1.036-4.063l.444-.513.53.425c1.332 1.07 2.452 2.565 2.65 4.27 1.603-.472 3.486-.36 4.9.456l.58.335-.305.596c-1.187 2.33-3.687 3.053-6.13 2.925-3.656 9.105-11.615 13.416-21.265 13.416-4.986 0-9.56-1.864-12.164-6.287-.153-.275-.283-.562-.422-.844-.88-1.947-1.173-4.08-.975-6.2l.06-.638h3.6V-3.55h4.222v-4.222h8.445v-4.222h5.067v8.445" fill="#394d54"/><g transform="matrix(.184659 0 0 .184659 3.070472 -11.997864)" clip-path="url(#A)"><g id="B"><g id="C" transform="translate(0 -22.866)"><path d="M123.86 3.8h19.818v19.817H123.86z" fill="#00acd3"/><path d="M123.86 26.676h19.818v19.818H123.86z" fill="#20c2ef"/><path id="D" d="M126.292 21.977V5.46m2.972 16.516V5.46m3.002 16.516V5.46m3.003 16.516V5.46m3.003 16.516V5.46m2.97 16.516V5.46" stroke="#394d54" stroke-width="1.56"/><use xlink:href="#D" y="22.866"/></g><use xlink:href="#C" transform="matrix(1 0 0 -1 22.866 4.572651)"/></g><use xlink:href="#B" x="-91.464" y="45.732"/><use xlink:href="#B" x="-45.732" y="45.732"/><use xlink:href="#B" y="45.732"/><path d="M221.57 54.38c1.533-11.915-7.384-21.275-12.914-25.718-6.373 7.368-7.363 26.678 2.635 34.807-5.58 4.956-17.337 9.448-29.376 9.448H34C32.83 85.484 34 146 34 146h217l-.987-91.424c-9.4-5.424-21.484-3.694-28.443-.197" fill="#17b5eb"/><path d="M34 89v57h217V89" fill-opacity=".17"/><path d="M111.237 140.9c-13.54-6.425-20.972-15.16-25.107-24.694L45 118l21 28 45.237-5.1" fill="#d4edf1"/><path d="M222.5 53.938v.03c-20.86 26.9-50.783 50.38-82.906 62.72-28.655 11.008-53.638 11.06-70.875 2.22-1.856-1.048-3.676-2.212-5.5-3.312-12.637-8.832-19.754-23.44-19.156-42.687H34V146h217V50h-25z" fill-opacity=".085"/></g><path d="M11.496 9.613c2.616.143 5.407.17 7.842-.594" fill="none" stroke="#394d54" stroke-width=".628" stroke-linecap="round"/><path d="M21.937 7.753a1.01 1.01 0 0 1-1.009 1.009 1.01 1.01 0 0 1-1.01-1.009 1.01 1.01 0 0 1 1.01-1.01 1.01 1.01 0 0 1 1.009 1.01z" fill="#d4edf1"/><path d="M21.2 7.08c-.088.05-.148.146-.148.256 0 .163.132.295.295.295.112 0 .2-.062.26-.154a.73.73 0 0 1 .055.277c0 .4-.324.723-.723.723s-.723-.324-.723-.723.324-.723.723-.723a.72.72 0 0 1 .262.049zM3.07 4.65h46.964c-1.023-.26-3.235-.6-2.87-1.95-1.86 2.152-6.344 1.5-7.475.448-1.26 1.828-8.597 1.133-9.108-.3-1.58 1.854-6.475 1.854-8.055 0-.512 1.424-7.848 2.12-9.1.3C12.284 4.2 7.8 4.853 5.94 2.7c.365 1.34-1.848 1.7-2.87 1.95" fill="#394d54"/></g></svg>
--- a/src/vite/images/tools/firefox-icon.svg
+++ b/src/vite/images/tools/firefox-icon.svg
@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.01 512.01" style="enable-background:new 0 0 512.01 512.01;" xml:space="preserve" width="512" height="512">
+<g>
+	
+		<linearGradient id="shape-base_00000027569791829998962360000016697435614286852497_" gradientUnits="userSpaceOnUse" x1="-678.6914" y1="6127.4854" x2="-679.495" y2="6126.6841" gradientTransform="matrix(480.0036 0 0 -495.9987 326214.75 3039304)">
+		<stop offset="0.05" style="stop-color:#FFF339"/>
+		<stop offset="0.37" style="stop-color:#FF9800"/>
+		<stop offset="0.53" style="stop-color:#FF3346"/>
+		<stop offset="0.7" style="stop-color:#FF0D8A"/>
+	</linearGradient>
+	<path id="shape-base" style="fill:url(#shape-base_00000027569791829998962360000016697435614286852497_);" d="M485.903,171.728   c-10.782-25.935-32.619-53.934-49.767-62.783c13.956,27.36,22.034,54.806,25.12,75.289c0,0.04,0.016,0.14,0.049,0.413   c-28.052-69.918-75.617-98.111-114.458-159.498c-1.961-3.104-3.928-6.216-5.844-9.497c-0.975-1.675-1.887-3.387-2.731-5.132   c-1.614-3.116-2.858-6.409-3.709-9.813c0.012-0.334-0.232-0.622-0.564-0.665c-0.152-0.044-0.314-0.044-0.466,0   c-0.035,0.012-0.087,0.053-0.124,0.067c-0.055,0.022-0.429,0.244-0.412,0.224c-62.318,36.497-83.125,103.75-85.068,137.529   c-24.885,1.711-48.678,10.879-68.276,26.31c-2.052-1.733-4.197-3.353-6.426-4.852c-5.654-19.782-5.895-40.72-0.696-60.627   c-25.484,11.604-45.306,29.946-59.716,46.142h-0.115c-9.834-12.456-9.141-53.546-8.58-62.125c-0.118-0.532-7.336,3.747-8.282,4.392   c-8.678,6.194-16.791,13.144-24.244,20.769c-8.481,8.6-16.23,17.893-23.166,27.781c0,0.012-0.007,0.027-0.011,0.039   c0-0.013,0.007-0.027,0.011-0.039c-15.952,22.606-27.266,48.149-33.287,75.154c-0.119,0.538-0.219,1.095-0.334,1.637   c-0.467,2.184-2.147,13.11-2.441,15.484c-0.023,0.183-0.033,0.358-0.055,0.541c-2.173,11.296-3.518,22.735-4.026,34.227   c0,0.423-0.026,0.842-0.026,1.267C8.265,400.957,119.336,512.01,256.342,512.01c122.7,0,224.579-89.072,244.524-206.07   c0.42-3.175,0.757-6.367,1.127-9.57C506.924,253.83,501.446,209.118,485.903,171.728z M199.972,365.89   c1.16,0.554,2.25,1.16,3.442,1.692c0.05,0.034,0.118,0.072,0.168,0.103C202.369,367.106,201.166,366.507,199.972,365.89z    M461.324,184.708l-0.033-0.241c0.012,0.088,0.028,0.18,0.041,0.267L461.324,184.708z"/>
+	
+		<radialGradient id="body-outer-ring_00000023282595785137162540000011968843662847919548_" cx="-678.3328" cy="6130.6401" r="1.3213" gradientTransform="matrix(384.0014 0 0 -390.468 260923.6406 2393927.75)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.13" style="stop-color:#FFBD44"/>
+		<stop offset="0.28" style="stop-color:#FF9800"/>
+		<stop offset="0.47" style="stop-color:#FF3450"/>
+		<stop offset="0.78" style="stop-color:#FF027B"/>
+		<stop offset="0.86" style="stop-color:#FF0083"/>
+	</radialGradient>
+	<path id="body-outer-ring" style="fill:url(#body-outer-ring_00000023282595785137162540000011968843662847919548_);" d="   M485.903,171.728c-10.782-25.935-32.619-53.934-49.767-62.783c13.956,27.36,22.034,54.806,25.12,75.289   c0-0.06,0.011,0.05,0.037,0.233c0.012,0.088,0.028,0.18,0.041,0.267c23.406,63.453,10.655,127.978-7.72,167.407   c-28.427,61.007-97.254,123.531-204.982,120.481C132.239,469.327,29.7,382.965,10.559,269.852c-3.488-17.837,0-26.894,1.755-41.377   c-2.138,11.165-2.952,14.39-4.026,34.227c0,0.423-0.026,0.842-0.026,1.267C8.265,400.957,119.336,512.01,256.342,512.01   c122.7,0,224.579-89.072,244.524-206.07c0.42-3.175,0.757-6.367,1.127-9.57C506.924,253.83,501.446,209.118,485.903,171.728z"/>
+	
+		<radialGradient id="body-outer-ring-shadow_00000096046357773761222090000015547138260334618799_" cx="-678.7749" cy="6130.0981" r="1.3213" gradientTransform="matrix(393.6014 0 0 -390.468 267417.7812 2393877.5)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.3" style="stop-color:#AF0611"/>
+		<stop offset="0.35" style="stop-color:#CE1223;stop-opacity:0.74"/>
+		<stop offset="0.43" style="stop-color:#FD243B;stop-opacity:0.34"/>
+		<stop offset="0.5" style="stop-color:#FF304B;stop-opacity:0.09"/>
+		<stop offset="0.53" style="stop-color:#FF3450;stop-opacity:0"/>
+	</radialGradient>
+	
+		<path id="body-outer-ring-shadow" style="fill:url(#body-outer-ring-shadow_00000096046357773761222090000015547138260334618799_);" d="   M485.903,171.728c-10.782-25.935-32.619-53.934-49.767-62.783c13.956,27.36,22.034,54.806,25.12,75.289   c0-0.06,0.011,0.05,0.037,0.233c0.012,0.088,0.028,0.18,0.041,0.267c23.406,63.453,10.655,127.978-7.72,167.407   c-28.427,61.007-97.254,123.531-204.982,120.481C132.239,469.327,29.7,382.965,10.559,269.852c-3.488-17.837,0-26.894,1.755-41.377   c-2.138,11.165-2.952,14.39-4.026,34.227c0,0.423-0.026,0.842-0.026,1.267C8.265,400.957,119.336,512.01,256.342,512.01   c122.7,0,224.579-89.072,244.524-206.07c0.42-3.175,0.757-6.367,1.127-9.57C506.924,253.83,501.446,209.118,485.903,171.728z"/>
+	
+		<radialGradient id="tail-tip_00000033348937748295745630000000484682573222251967_" cx="-674.5927" cy="6144.0962" r="1.4451" gradientTransform="matrix(115.236 0 0 -195.642 78042.3906 1202019.375)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.13" style="stop-color:#FFF339"/>
+		<stop offset="0.53" style="stop-color:#FF9800"/>
+	</radialGradient>
+	<path id="tail-tip" style="fill:url(#tail-tip_00000033348937748295745630000000484682573222251967_);" d="M365.346,200.886   c0.541,0.38,1.032,0.758,1.541,1.135c-6.226-11.05-13.979-21.166-23.03-30.051C266.743,94.865,333.043,0.322,333.061,0.302   c-62.318,36.497-83.184,103.778-85.127,137.556c2.89-0.2,5.773-0.443,8.714-0.443C303.152,137.416,343.656,162.985,365.346,200.886   L365.346,200.886z"/>
+	
+		<radialGradient id="globe-base_00000080184773766387035040000015885096926909371788_" cx="-677.5864" cy="6138.3994" r="1.0323" gradientTransform="matrix(213.483 0 0 -233.9799 144848.2969 1436665.5)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.35" style="stop-color:#008EE9"/>
+		<stop offset="0.67" style="stop-color:#A059FF"/>
+		<stop offset="1" style="stop-color:#DF36EA"/>
+	</radialGradient>
+	<path id="globe-base" style="fill:url(#globe-base_00000080184773766387035040000015885096926909371788_);" d="M256.804,216.282   c-0.406,6.171-22.208,27.451-29.832,27.451c-70.544,0-81.995,42.669-81.995,42.669c3.125,35.933,28.14,65.523,58.437,81.18   c1.382,0.714,2.781,1.359,4.181,1.997c2.4,1.063,4.83,2.056,7.287,2.979c10.388,3.678,21.269,5.776,32.28,6.226   c123.644,5.799,147.599-147.814,58.369-192.422c22.851-3.974,46.57,5.216,59.816,14.521   c-21.69-37.898-62.194-63.468-108.697-63.468c-2.942,0-5.823,0.243-8.714,0.443c-24.885,1.711-48.678,10.879-68.276,26.31   c3.782,3.2,8.052,7.478,17.047,16.339C213.535,197.092,256.712,214.267,256.804,216.282L256.804,216.282z"/>
+	
+		<radialGradient id="globe-shadow_00000116931814237368977270000009253733651089027476_" cx="-676.9322" cy="6139.1958" r="0.609" gradientTransform="matrix(192.1347 0 0 -233.9799 130310.2734 1436665.5)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.21" style="stop-color:#A059FF;stop-opacity:0"/>
+		<stop offset="0.97" style="stop-color:#80008E;stop-opacity:0.6"/>
+	</radialGradient>
+	<path id="globe-shadow" style="fill:url(#globe-shadow_00000116931814237368977270000009253733651089027476_);" d="   M256.804,216.282c-0.406,6.171-22.208,27.451-29.832,27.451c-70.544,0-81.995,42.669-81.995,42.669   c3.125,35.933,28.14,65.523,58.437,81.18c1.382,0.714,2.781,1.359,4.181,1.997c2.4,1.063,4.83,2.056,7.287,2.979   c10.388,3.678,21.269,5.776,32.28,6.226c123.644,5.799,147.599-147.814,58.369-192.422c22.851-3.974,46.57,5.216,59.816,14.521   c-21.69-37.898-62.194-63.468-108.697-63.468c-2.942,0-5.823,0.243-8.714,0.443c-24.885,1.711-48.678,10.879-68.276,26.31   c3.782,3.2,8.052,7.478,17.047,16.339C213.535,197.092,256.712,214.267,256.804,216.282L256.804,216.282z"/>
+	
+		<radialGradient id="ear_00000140711879134547457310000011691267121237655174_" cx="-667.2682" cy="6207.8057" r="2.9936" gradientTransform="matrix(58.524 0 0 -58.732 39290.8906 364634.9062)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.1" style="stop-color:#FFE200"/>
+		<stop offset="0.79" style="stop-color:#FF7232"/>
+	</radialGradient>
+	<path id="ear" style="fill:url(#ear_00000140711879134547457310000011691267121237655174_);" d="M168.088,155.917   c1.728,1.115,3.442,2.25,5.142,3.406c-5.654-19.782-5.895-40.72-0.696-60.627c-25.484,11.604-45.306,29.946-59.716,46.142   C114.01,144.805,149.994,144.157,168.088,155.917L168.088,155.917z"/>
+	
+		<radialGradient id="body_00000155128087859778917270000012667265649586154429_" cx="-678.6321" cy="6131.3853" r="1.8581" gradientTransform="matrix(450.1546 0 0 -377.8801 305889 2316851.25)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.11" style="stop-color:#FFF339"/>
+		<stop offset="0.46" style="stop-color:#FF9800"/>
+		<stop offset="0.72" style="stop-color:#FF3346"/>
+		<stop offset="0.9" style="stop-color:#FF0D8A"/>
+	</radialGradient>
+	<path id="body" style="fill:url(#body_00000155128087859778917270000012667265649586154429_);" d="M10.559,269.852   C29.7,382.965,132.239,469.327,248.632,472.623c107.728,3.049,176.555-59.479,204.982-120.481   c18.374-39.432,31.127-103.949,7.72-167.407l-0.008-0.027l-0.033-0.24c-0.026-0.184-0.041-0.293-0.037-0.233   c0,0.04,0.016,0.14,0.049,0.413c8.799,57.457-20.428,113.119-66.117,150.756l-0.137,0.323   c-89.027,72.488-174.219,43.735-191.468,31.965c-1.212-0.583-2.417-1.183-3.613-1.799c-51.904-24.804-73.346-72.091-68.749-112.644   c-43.827,0-58.771-36.964-58.771-36.964s39.349-28.056,91.209-3.655c48.031,22.599,93.139,3.657,93.144,3.655   c-0.092-2.015-43.269-19.19-60.101-35.774c-8.994-8.861-13.265-13.133-17.047-16.339c-2.052-1.733-4.197-3.353-6.426-4.852   c-1.702-1.154-3.416-2.289-5.142-3.406c-18.093-11.76-54.078-11.112-55.27-11.081h-0.115c-9.834-12.456-9.141-53.546-8.58-62.126   c-0.118-0.532-7.336,3.747-8.282,4.392c-8.678,6.194-16.791,13.145-24.244,20.769c-8.481,8.602-16.23,17.897-23.166,27.787   c0,0.012-0.007,0.027-0.011,0.039c0-0.013,0.007-0.027,0.011-0.039c-15.952,22.606-27.266,48.149-33.287,75.154   C15.024,211.345,6.213,249.87,10.559,269.852L10.559,269.852z"/>
+	
+		<radialGradient id="tail-flame_00000039826427530162296890000015335833112349427105_" cx="-714.7371" cy="6125.2207" r="3.6006" gradientTransform="matrix(16.0845 151.871 153.0334 -15.9623 -925538.25 206256.9375)" gradientUnits="userSpaceOnUse">
+		<stop offset="0" style="stop-color:#FFF339"/>
+		<stop offset="0.3" style="stop-color:#FF9800"/>
+		<stop offset="0.57" style="stop-color:#FF3346"/>
+		<stop offset="0.74" style="stop-color:#FF0D8A"/>
+	</radialGradient>
+	<path id="tail-flame" style="fill:url(#tail-flame_00000039826427530162296890000015335833112349427105_);" d="M343.858,171.97   c9.051,8.885,16.804,19.001,23.03,30.051c1.366,1.026,2.642,2.049,3.724,3.047c56.24,51.819,26.773,125.11,24.575,130.333   c45.689-37.636,74.916-93.299,66.117-150.756c-28.052-69.917-75.617-98.11-114.458-159.497c-1.961-3.104-3.928-6.216-5.844-9.497   c-0.975-1.675-1.887-3.387-2.731-5.132c-1.614-3.116-2.858-6.409-3.709-9.813c0.012-0.334-0.232-0.622-0.564-0.665   c-0.152-0.044-0.241-0.061-0.394-0.017c-0.035,0.012-0.159,0.07-0.196,0.084c-0.055,0.022-0.123,0.073-0.182,0.103   C323.78,5.073,266.743,94.865,343.858,171.97L343.858,171.97z"/>
+	
+		<radialGradient id="tail-small_00000004548343451468281620000017141347834490497209_" cx="-677.3172" cy="6144.9336" r="2.4609" gradientTransform="matrix(195.1418 0 0 -191.7138 132414.375 1178169.875)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.14" style="stop-color:#FFF339"/>
+		<stop offset="0.48" style="stop-color:#FF9800"/>
+		<stop offset="0.66" style="stop-color:#FF3346"/>
+		<stop offset="0.9" style="stop-color:#FF0D8A"/>
+	</radialGradient>
+	<path id="tail-small" style="fill:url(#tail-small_00000004548343451468281620000017141347834490497209_);" d="M370.612,205.068   c-1.083-0.998-2.359-2.021-3.724-3.047c-0.505-0.38-1-0.758-1.541-1.135c-13.246-9.305-36.965-18.495-59.816-14.521   c89.23,44.608,65.275,198.221-58.369,192.422c-11.011-0.449-21.892-2.548-32.28-6.226c-2.457-0.924-4.886-1.917-7.287-2.979   c-1.4-0.638-2.798-1.283-4.181-1.997c0.05,0.034,0.118,0.072,0.168,0.103c17.249,11.768,102.441,40.523,191.468-31.965l0.137-0.323   C397.385,330.182,426.851,256.889,370.612,205.068L370.612,205.068z"/>
+	
+		<radialGradient id="cheek-tufts_00000087374028332401807970000013052991941015548819_" cx="-675.5709" cy="6150.4473" r="3.232" gradientTransform="matrix(178.5936 0 0 -159.7733 121018.7734 982806.125)" gradientUnits="userSpaceOnUse">
+		<stop offset="0.09" style="stop-color:#FFF339"/>
+		<stop offset="0.63" style="stop-color:#FF9800"/>
+	</radialGradient>
+	<path id="cheek-tufts" style="fill:url(#cheek-tufts_00000087374028332401807970000013052991941015548819_);" d="M144.976,286.402   c0,0,11.451-42.669,81.995-42.669c7.626,0,29.429-21.28,29.832-27.451c0.404-6.171-45.11,18.944-93.144-3.655   c-51.86-24.401-91.209,3.655-91.209,3.655s14.944,36.964,58.771,36.964c-4.597,40.553,16.845,87.845,68.749,112.644   c1.16,0.554,2.25,1.16,3.441,1.692C173.117,351.925,148.101,322.335,144.976,286.402z"/>
+	
+		<linearGradient id="overlay-yellow_00000062876945044336489620000004081868831753027202_" gradientUnits="userSpaceOnUse" x1="-678.7422" y1="6127.4795" x2="-679.3823" y2="6126.7568" gradientTransform="matrix(479.9996 0 0 -495.9987 326212 3039304)">
+		<stop offset="0.17" style="stop-color:#FFF339;stop-opacity:0.8"/>
+		<stop offset="0.6" style="stop-color:#FFF339;stop-opacity:0"/>
+	</linearGradient>
+	<path id="overlay-yellow" style="fill:url(#overlay-yellow_00000062876945044336489620000004081868831753027202_);" d="   M485.903,171.728c-10.782-25.935-32.619-53.934-49.767-62.783c13.956,27.36,22.034,54.806,25.12,75.289   c0,0.04,0.016,0.14,0.049,0.413c-28.052-69.918-75.617-98.111-114.458-159.498c-1.961-3.104-3.928-6.216-5.844-9.497   c-0.975-1.675-1.887-3.387-2.731-5.132c-1.614-3.116-2.858-6.409-3.709-9.813c0.012-0.334-0.232-0.622-0.564-0.665   c-0.152-0.044-0.241-0.061-0.394-0.017c-0.035,0.012-0.159,0.07-0.196,0.084c-0.055,0.022-0.253,0.135-0.276,0.149   c-64.085,38.36-83.261,103.826-85.204,137.604c2.89-0.2,5.772-0.443,8.714-0.443c46.506,0,87.01,25.569,108.697,63.468   c-13.246-9.305-36.965-18.495-59.816-14.521c89.23,44.608,65.275,198.221-58.369,192.422c-11.011-0.449-21.892-2.548-32.28-6.225   c-2.457-0.924-4.886-1.917-7.287-2.979c-1.4-0.638-2.798-1.283-4.181-1.997c0.05,0.034,0.118,0.072,0.168,0.103   c-1.212-0.583-2.417-1.183-3.613-1.799c1.16,0.554,2.25,1.16,3.442,1.692c-30.297-15.657-55.313-45.247-58.437-81.18   c0,0,11.451-42.669,81.995-42.669c7.626,0,29.429-21.28,29.832-27.451c-0.092-2.015-43.269-19.19-60.101-35.774   c-8.994-8.861-13.265-13.133-17.047-16.339c-2.052-1.733-4.197-3.353-6.426-4.852c-5.654-19.782-5.895-40.72-0.696-60.627   c-25.484,11.604-45.306,29.946-59.716,46.142h-0.115c-9.834-12.456-9.141-53.546-8.58-62.126c-0.118-0.532-7.336,3.747-8.282,4.392   c-8.678,6.194-16.791,13.144-24.244,20.769c-8.478,8.602-16.225,17.895-23.159,27.784c0,0.012-0.007,0.027-0.011,0.039   c0-0.013,0.007-0.027,0.011-0.039c-15.952,22.606-27.266,48.149-33.287,75.154c-0.119,0.538-0.219,1.095-0.334,1.637   c-0.467,2.184-2.566,13.268-2.859,15.645c-0.023,0.183,0.022-0.182,0,0c-1.915,11.453-3.136,23.011-3.658,34.612   c0,0.423-0.026,0.842-0.026,1.267c0,136.989,111.071,248.042,248.077,248.042c122.7,0,224.579-89.072,244.524-206.07   c0.42-3.175,0.757-6.367,1.127-9.57C506.924,253.83,501.446,209.118,485.903,171.728z M461.293,184.467   c0.012,0.088,0.028,0.18,0.041,0.267l-0.008-0.027L461.293,184.467z"/>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>
--- a/src/vite/images/tools/git-icon.svg
+++ b/src/vite/images/tools/git-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><path d="M31.396 14.575L17.425.604a2.06 2.06 0 0 0-2.914 0l-2.9 2.9 3.68 3.68c.856-.3 1.836-.095 2.518.587a2.45 2.45 0 0 1 .581 2.533l3.547 3.547c.858-.296 1.848-.105 2.533.582a2.45 2.45 0 1 1-3.469 3.468c-.72-.72-.898-1.78-.534-2.667l-3.308-3.308v8.705a2.5 2.5 0 0 1 .65.464 2.45 2.45 0 1 1-3.468 3.468 2.45 2.45 0 0 1 0-3.468c.237-.236.5-.415.803-.535v-8.786c-.292-.12-.566-.297-.803-.535a2.45 2.45 0 0 1-.528-2.681l-3.63-3.628-9.58 9.57a2.06 2.06 0 0 0 0 2.915l13.972 13.97a2.06 2.06 0 0 0 2.914 0L31.396 17.5a2.06 2.06 0 0 0 0-2.915" fill="#f03c2e"/></svg>
--- a/src/vite/images/tools/mariadb-icon.svg
+++ b/src/vite/images/tools/mariadb-icon.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -43 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M250.382523,0.00447241672 C246.426131,0.130891567 247.677353,1.27087056 239.128415,3.37469592 C230.495553,5.49917829 219.950359,4.84773528 210.654095,8.74649903 C182.903099,20.3847485 177.335232,60.1626339 152.106938,74.4118517 C133.249415,85.0635193 114.223916,85.9130759 97.1188786,91.2730771 C85.8778244,94.7980074 73.5811418,102.026905 63.3964279,110.803626 C55.49096,117.618586 55.2845466,123.610697 47.0245784,132.158212 C38.1894743,141.300822 11.9101646,132.312705 0,146.305625 C3.83670733,150.185042 5.51875114,151.271649 13.0796841,150.265122 C11.5142932,153.232113 2.28663486,155.732479 4.09296236,160.097129 C5.99360595,164.689675 28.3022154,167.802917 48.5816837,155.559279 C58.0261053,149.857249 65.5486285,141.638595 80.2576532,139.676806 C99.2917078,137.139881 121.218611,141.30404 143.253683,144.481588 C139.986431,154.22355 133.426672,160.702176 128.172006,168.461009 C126.544787,170.213508 131.440311,170.409956 137.025262,169.350783 C147.071883,166.866533 154.312169,164.86632 161.894457,160.453039 C171.209327,155.030397 172.62088,141.127864 184.04984,138.119701 C190.417778,147.907219 207.737102,150.219223 218.48411,142.390618 C209.053925,139.721295 206.447626,119.648695 209.630855,110.803626 C212.646122,102.431204 215.625486,89.0383196 218.662065,77.9709494 C221.922199,66.0849867 223.124932,51.1038191 227.070434,45.0492956 C233.00651,35.9401552 239.565643,32.81205 245.260156,27.675489 C250.954656,22.538928 256.166954,17.538894 255.995904,5.78538669 C255.940809,1.99964564 253.983391,-0.11060033 250.382523,0.00447241672 L250.382523,0.00447241672 Z" fill="#002B64">
+
</path>
+        <path d="M241.905484,6.96809574 C242.853676,10.2001831 244.337002,11.6835082 250.750076,12.2768382 C249.813239,20.407447 244.389521,24.8545834 238.308598,29.1214497 C232.957272,32.8744751 227.094944,36.4883945 223.327724,42.3507224 C219.46824,48.3564147 217.01827,68.9100487 211.033869,89.2081817 C205.861394,106.746904 198.050161,124.088323 184.409248,131.686638 C182.98412,128.099688 184.590937,121.479374 181.756296,119.303358 C179.922367,124.53403 177.848551,129.524816 175.419872,134.163578 C167.415594,149.462409 155.564607,160.917369 135.760443,164.414894 C145.157201,151.699462 154.142319,138.568131 154.336783,116.651825 C147.723566,118.082631 147.864092,133.703676 141.069185,137.879698 C136.712894,138.353794 132.299824,138.350955 127.858366,138.084099 C109.618435,136.991122 90.9072468,131.509207 73.84404,136.984025 C62.2258429,140.71292 52.7240456,149.509251 42.8858386,153.776117 C31.323,158.791033 22.5664139,160.853494 8.16751449,158.791033 C6.33926307,156.328288 18.7055102,153.150139 17.9659769,147.803072 C12.3307609,147.179933 9.058929,148.545444 4.16040754,146.319747 C4.70121793,145.323293 5.49610985,144.492915 6.49682201,143.801643 C15.4748424,137.587291 40.9766785,142.333932 47.8013935,135.632709 C52.0143206,131.499271 54.7779895,127.172788 57.6396004,122.966958 C60.4146249,118.886039 63.2833331,114.918677 67.6538192,111.343083 C69.2677337,110.022994 71.0221737,108.71852 72.8844919,107.445273 C80.3323453,102.348029 89.5459944,97.7248808 98.6134401,94.5382159 C110.965493,90.1961188 123.482202,89.8384174 136.647599,84.8078871 C144.781047,81.6992919 153.625639,77.8596801 160.835025,72.4870623 C162.546881,71.2095575 164.166473,69.8483051 165.663993,68.3891106 C186.250274,48.3209285 190.331193,12.9212684 222.449085,9.62246697 C226.3327,9.22360156 229.512267,9.3527715 232.406525,9.26476561 C235.742233,9.16540412 238.694688,8.77789431 241.905484,6.96809574 Z M202.75118,120.267107 C203.134432,126.40197 206.695831,138.573752 209.839913,141.531886 C203.682339,143.029405 193.074791,140.555304 190.353705,136.211788 C191.751863,129.940658 199.027963,124.2075 202.75118,120.267107 Z" fill="#C49A6C" fill-rule="nonzero">
+
</path>
+        <path d="M244.218787,13.8370641 C242.980829,16.4335799 240.610981,19.7812981 240.610981,26.3910072 C240.60081,27.5258023 239.749351,28.3031588 239.734821,26.5537435 C239.798753,20.0936937 241.508937,17.3010225 243.32519,13.6307377 C244.169385,12.12688 244.677936,12.7473121 244.218787,13.8370641 Z M242.972111,12.8591933 C241.511843,15.3365629 237.995576,19.8554012 237.414375,26.4404093 C237.306853,27.5693924 236.388555,28.2682867 236.528044,26.5232305 C237.161553,20.0951467 239.97166,16.0717822 242.104668,12.5744048 C243.072368,11.1519152 243.527158,11.8144844 242.972111,12.8591933 Z M241.835862,11.5631149 C240.172174,13.9082613 234.759739,19.3352263 233.62785,25.8490372 C233.42443,26.9634903 232.450918,27.5853754 232.73716,25.8577553 C233.90828,19.5037746 238.573871,14.5098044 240.993121,11.2071293 C242.077061,9.86891382 242.473731,10.5678081 241.835862,11.5631149 Z M240.821667,10.1173773 L240.274318,10.6995682 C237.854262,13.2941372 232.232203,19.6224619 230.358594,25.4145894 C229.99825,26.4898114 228.947729,26.9693023 229.475169,25.2983492 C231.526809,19.17249 237.177536,12.5744048 240.037045,9.64515141 C241.299704,8.47257825 241.593211,9.22087463 240.821667,10.1173773 Z M211.771784,23.2321794 C213.025725,17.8458985 217.214732,15.391777 224.446326,15.9904141 C226.191383,24.0298779 216.425752,27.2729799 211.771784,23.2321794 Z" fill="#002B64">
+
</path>
+    </g>
+</svg>
--- a/src/vite/images/tools/sublime-icon.svg
+++ b/src/vite/images/tools/sublime-icon.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-38 0 332 332" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <linearGradient x1="55.1170996%" y1="58.6795405%" x2="63.6801778%" y2="39.5971572%" id="linearGradient-1">
+            <stop stop-color="#FF9700" offset="0%">
+
</stop>
+            <stop stop-color="#F48E00" offset="53%">
+
</stop>
+            <stop stop-color="#D06F00" offset="100%">
+
</stop>
+        </linearGradient>
+    </defs>
+    <g>
+				<path d="M255.288325,166.794648 C255.288325,162.908052 252.415934,160.666877 248.891046,161.780372 L6.39727934,238.675387 C2.86530029,239.795974 0,243.859878 0,247.73938 L0,326.329461 C0,330.216057 2.86530029,332.464324 6.39727934,331.343737 L248.891046,254.455814 C252.415934,253.335227 255.288325,249.271323 255.288325,245.384729 L255.288325,166.794648 L255.288325,166.794648 Z" fill="url(#linearGradient-1)">
+
</path>
+				<path d="M5.68434189e-14,164.291056 C5.68434189e-14,168.177652 2.86530029,172.241555 6.39727934,173.362144 L248.926508,250.26425 C252.458487,251.384837 255.323787,249.13657 255.323787,245.257067 L255.323787,166.659893 C255.323787,162.780391 252.458487,158.716487 248.926508,157.595899 L6.39727934,80.693793 C2.86530029,79.5732052 5.68434189e-14,81.8143808 5.68434189e-14,85.7009761 L5.68434189e-14,164.291056 Z" fill="#FF9800">
+
</path>
+				<path d="M255.288325,5.30235244 C255.288325,1.41575701 252.415934,-0.83251079 248.891046,0.288076943 L6.39727934,77.1759986 C2.86530029,78.2965864 0,82.36049 0,86.2470854 L0,164.837165 C0,168.723761 2.86530029,170.964936 6.39727934,169.851441 L248.891046,92.9564272 C252.415934,91.8358394 255.288325,87.7719358 255.288325,83.8924327 L255.288325,5.30235244 Z" fill="#FF9800">
+
</path>
+		</g>
+</svg>
--- a/src/vite/index.css
+++ b/src/vite/index.css
@ -0,0 +1,819 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@font-face {
+  font-family: "OrkneyRegular";
+  src: url("./fonts/OrkneyRegular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  background-color: rgb(18, 18, 18);
+  color: rgba(255, 255, 255, 0.87);
+  font-size: 1rem;
+  font-family: "OrkneyRegular";
+  line-height: 1.5rem;
+  font-weight: 400;
+  text-rendering: optimizelegibility;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+h1 {
+  background-color: #4158d0;
+  background-image: linear-gradient(
+    43deg,
+    #a162e8 0%,
+    #f7ce68 46%,
+    #85ffbd 100%
+  );
+
+  background-clip: border-box;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+h3 {
+  font-size: 1.4rem !important;
+  background-color: #8e9ffa;
+  background-image: linear-gradient(
+    45deg,
+    #8e9ffa 0%,
+    #f874ef 10%,
+    #ffcc70 29%,
+    #ffffff 100%
+  );
+
+  background-clip: border-box;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.patterns {
+  background-image: url("./images/bg-effects.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+input {
+  height: 40px;
+}
+
+.gradient:focus {
+  border: 1px solid transparent;
+  background-image: linear-gradient(#141414, #141414),
+    linear-gradient(43deg, #a162e8 0%, #f7ce68 46%, #85ffbd 100%);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+}
+
+input,
+textarea {
+  background: #121212c5;
+  border-radius: 0.3rem;
+  border: 1px solid transparent;
+}
+
+*:focus:not(.focus-visible) {
+  outline: none;
+}
+
+/* Loader */
+
+.sk-folding-cube {
+  margin: 20px auto;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.sk-folding-cube .sk-cube {
+  float: left;
+  width: 50%;
+  height: 50%;
+  position: relative;
+  -webkit-transform: scale(1.1);
+  -ms-transform: scale(1.1);
+  transform: scale(1.1);
+}
+.sk-folding-cube .sk-cube:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
+  animation: sk-foldCubeAngle 2.4s infinite linear both;
+  -webkit-transform-origin: 100% 100%;
+  -ms-transform-origin: 100% 100%;
+  transform-origin: 100% 100%;
+}
+.sk-folding-cube .sk-cube2 {
+  -webkit-transform: scale(1.1) rotateZ(90deg);
+  transform: scale(1.1) rotateZ(90deg);
+}
+.sk-folding-cube .sk-cube3 {
+  -webkit-transform: scale(1.1) rotateZ(180deg);
+  transform: scale(1.1) rotateZ(180deg);
+}
+.sk-folding-cube .sk-cube4 {
+  -webkit-transform: scale(1.1) rotateZ(270deg);
+  transform: scale(1.1) rotateZ(270deg);
+}
+.sk-folding-cube .sk-cube2:before {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.sk-folding-cube .sk-cube3:before {
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+.sk-folding-cube .sk-cube4:before {
+  -webkit-animation-delay: 0.9s;
+  animation-delay: 0.9s;
+}
+@-webkit-keyframes sk-foldCubeAngle {
+  0%,
+  10% {
+    -webkit-transform: perspective(140px) rotateX(-180deg);
+    transform: perspective(140px) rotateX(-180deg);
+    opacity: 0;
+  }
+  25%,
+  75% {
+    -webkit-transform: perspective(140px) rotateX(0deg);
+    transform: perspective(140px) rotateX(0deg);
+    opacity: 1;
+  }
+  90%,
+  100% {
+    -webkit-transform: perspective(140px) rotateY(180deg);
+    transform: perspective(140px) rotateY(180deg);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-foldCubeAngle {
+  0%,
+  10% {
+    -webkit-transform: perspective(140px) rotateX(-180deg);
+    transform: perspective(140px) rotateX(-180deg);
+    opacity: 0;
+  }
+  25%,
+  75% {
+    -webkit-transform: perspective(140px) rotateX(0deg);
+    transform: perspective(140px) rotateX(0deg);
+    opacity: 1;
+  }
+  90%,
+  100% {
+    -webkit-transform: perspective(140px) rotateY(180deg);
+    transform: perspective(140px) rotateY(180deg);
+    opacity: 0;
+  }
+}
+
+.main-cont {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.cd-container {
+  width: 90%;
+  max-width: 1080px;
+  margin: 0 auto;
+  /* background: #2b343a; */
+
+  padding: 0 10%;
+  border-radius: 2px;
+}
+.cd-container::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+#cd-timeline {
+  position: relative;
+  padding: 2em 0;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+#cd-timeline::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 25px;
+  height: 100%;
+  width: 4px;
+  background: #7e57c2;
+}
+@media (min-width: 1170px) {
+  #cd-timeline {
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+  #cd-timeline::before {
+    left: 50%;
+    margin-left: -2px;
+  }
+}
+
+.cd-timeline-block {
+  position: relative;
+  margin: 2em 0;
+}
+.cd-timeline-block:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.cd-timeline-block:first-child {
+  margin-top: 0;
+}
+.cd-timeline-block:last-child {
+  margin-bottom: 0;
+}
+@media (min-width: 1170px) {
+  .cd-timeline-block {
+    margin: 4em 0;
+  }
+  .cd-timeline-block:first-child {
+    margin-top: 0;
+  }
+  .cd-timeline-block:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.cd-timeline-img {
+  position: absolute;
+  top: 8px;
+  left: 12px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  box-shadow:
+    0 0 0 4px #7e57c2,
+    inset 0 2px 0 rgba(0, 0, 0, 0.08),
+    0 3px 0 4px rgba(0, 0, 0, 0.05);
+}
+.cd-timeline-img {
+  background: #673ab7;
+}
+@media (min-width: 1170px) {
+  .cd-timeline-img {
+    width: 30px;
+    height: 30px;
+    left: 50%;
+    margin-left: -15px;
+    margin-top: 7px;
+    /* Force Hardware Acceleration in WebKit */
+    -webkit-transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+  }
+}
+
+.cd-timeline-content {
+  position: relative;
+  margin-left: 60px;
+  margin-right: 30px;
+  background: #323232;
+
+  border-radius: 2px;
+  padding: 1em;
+  text-align: left !important;
+}
+
+.cd-timeline-content,
+.timeline-content-info {
+  background: #323232;
+
+  padding: 5px 10px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+  /* box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08); */
+  border-radius: 2px;
+  text-align: left;
+}
+@media (max-width: 500px) {
+  .timeline-content-info-title,
+  .timeline-content-info-date {
+    display: block;
+    width: 100%;
+  }
+}
+.cd-timeline-content,
+.timeline-content-info,
+i {
+  width: 80%;
+  margin-right: 5px;
+}
+.cd-timeline-content,
+.timeline-content-info,
+.timeline-content-info-title,
+.timeline-content-info-date {
+  display: inline-block;
+}
+
+.cd-timeline-content,
+.content-skills {
+  font-size: 12px;
+  padding: 0;
+  margin-bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.cd-timeline-content,
+.content-skills {
+  /* background: #40484d; */
+  border-radius: 2px;
+  display: inline-block;
+  padding: 2px 10px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  flex-grow: 1;
+}
+
+.cd-timeline-content:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.cd-timeline-content h2 {
+  color: rgba(255, 255, 255, 0.9);
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.cd-timeline-content p,
+.cd-timeline-content .cd-date {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.cd-timeline-content .cd-date {
+  display: inline-block;
+}
+.cd-timeline-content p {
+  margin: 1em 0;
+  line-height: 1.6;
+}
+
+.cd-timeline-content::before {
+  content: "";
+  position: absolute;
+  top: 16px;
+  right: 100%;
+  height: 0;
+  width: 0;
+  border: 7px solid transparent;
+  border-right: 7px solid #333c42;
+}
+
+@media (min-width: 768px) {
+  .cd-timeline-content h2 {
+    font-size: 20px;
+    font-size: 1.25rem;
+  }
+  .cd-timeline-content p {
+    font-size: 16px;
+    font-size: 1rem;
+  }
+  .cd-timeline-content .cd-read-more,
+  .cd-timeline-content .cd-date {
+    font-size: 14px;
+    font-size: 0.875rem;
+  }
+}
+@media (min-width: 1170px) {
+  .cd-timeline-content {
+    color: white;
+    margin-left: 0;
+    padding: 1.6em;
+    width: 40%;
+    margin: 0 5%;
+  }
+  .cd-timeline-content::before {
+    top: 24px;
+    left: 100%;
+    border-color: transparent;
+    border-left-color: #333c42;
+  }
+  .cd-timeline-content .cd-date {
+    position: absolute;
+    width: 100%;
+    left: 122%;
+    top: 6px;
+    font-size: 16px;
+    font-size: 1rem;
+  }
+  .cd-timeline-block:nth-child(even) .cd-timeline-content {
+    float: right;
+  }
+  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
+    top: 24px;
+    left: auto;
+    right: 100%;
+    border-color: transparent;
+    border-right-color: #333c42;
+  }
+  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
+    float: right;
+  }
+  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
+    left: auto;
+    right: 122%;
+    text-align: right;
+  }
+}
+/*=============================================
+[ Rocket ]
+==============================================*/
+
+.rocket_inner {
+  transform: translateY(15px) translateX(-3px);
+  -webkit-transition: 0.3s;
+  -moz-transition: 0.3s;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.icon_circle {
+  fill: #282e3a;
+  stroke: #fff;
+  stroke-width: 7px;
+  cursor: pointer;
+}
+
+.large_window_path {
+  fill: url(#SVGID_2_);
+  stroke-width: 0px;
+}
+
+.small_window_path {
+  fill: #28b767;
+  stroke-width: 0px;
+}
+
+.wing_shadow {
+  display: block;
+  fill: #fc9252;
+}
+
+.rocket_bottom {
+  fill: #34495e;
+}
+
+.rocket_base {
+  fill: #ffffff;
+  stroke-width: 0px;
+}
+
+.rocket_shadow {
+  fill: #ededed;
+  stroke-width: 0px;
+}
+
+.window_grandient {
+  stop-color: #2dcb73;
+}
+
+.window_grandient1 {
+  stop-color: #2ac16d;
+}
+
+.window_grandient2 {
+  stop-color: #29b968;
+}
+
+.window_grandient3 {
+  stop-color: #28b767;
+}
+
+.wing_base {
+  fill: #e16e36;
+  stroke-width: 0px;
+}
+
+.fire_path {
+  fill: #fc0;
+}
+
+/*=============================================
+[ Hover Styles ]
+==============================================*/
+
+.rocket_wrap:hover .rocket_bottom {
+  fill: #2dcb73 !important;
+  stroke-width: 0px !important;
+}
+
+.rocket_wrap:hover .rocket_inner {
+  transform: translateY(0px) translateX(-3px) !important;
+}
+
+/*=============================================
+[ Animation Classes ]
+==============================================*/
+.fire {
+  display: none;
+  animation-delay: 0s;
+  fill-opacity: 1;
+  animation-timing-function: ease-in;
+  stroke-width: 0px;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  transform-origin: 50% 50%;
+  animation-direction: normal;
+}
+
+.rocket_wrap:hover #fireLeft {
+  display: block;
+  animation-delay: 0s;
+  animation-name: fireLeft, fillOpacity1;
+  animation-duration: 1.2s;
+}
+
+.rocket_wrap:hover #fireMiddle {
+  display: block;
+  animation-delay: 0s;
+  animation-name: fireMiddle, fillOpacity1;
+  animation-duration: 1s;
+}
+
+.rocket_wrap:hover #fireRight {
+  display: block;
+  animation-delay: 0s;
+  animation-name: fireRight, fillOpacity1;
+  animation-duration: 1.3s;
+}
+
+.rocket_wrap:hover #fireSmallLeft {
+  display: block;
+  animation-delay: 0s;
+  animation-name: fireSmall, fillOpacity2;
+  animation-duration: 1.3s;
+  transform-origin: bottom;
+}
+
+.rocket_wrap:hover #fireSmallRight {
+  display: block;
+  animation-delay: 0.3s;
+  animation-name: fireSmall, fillOpacity3;
+  animation-duration: 1.6s;
+  transform-origin: bottom;
+}
+
+/*=============================================
+[ KeyFrame Animations ]
+==============================================*/
+@keyframes fireSmall {
+  10% {
+    transform: rotate(17deg) translateY(1px);
+  }
+
+  20% {
+    transform: rotate(-13deg) translateY(2px);
+  }
+
+  30% {
+    transform: rotate(21deg) translateY(3px);
+  }
+
+  40% {
+    transform: rotate(-34deg) translateY(4px);
+  }
+
+  50% {
+    transform: rotate(24deg) translateY(5px);
+  }
+
+  60% {
+    transform: rotate(-17deg) translateY(6px);
+  }
+
+  70% {
+    transform: rotate(31deg) translateY(7px);
+  }
+
+  80% {
+    transform: rotate(-28deg) translateY(8px);
+  }
+
+  90% {
+    transform: rotate(14deg) translateY(9px);
+  }
+
+  99% {
+    transform: rotate(0deg) translateY(10px);
+  }
+}
+
+@keyframes fireLeft {
+  6% {
+    transform: rotate(25deg);
+  }
+
+  15% {
+    transform: rotate(-19deg);
+  }
+
+  25% {
+    transform: rotate(25deg);
+  }
+
+  32% {
+    transform: rotate(-30deg);
+  }
+
+  46% {
+    transform: rotate(22deg);
+  }
+
+  54% {
+    transform: rotate(-29deg);
+  }
+
+  61% {
+    transform: rotate(32deg);
+  }
+
+  74% {
+    transform: rotate(-9deg);
+  }
+
+  83% {
+    transform: rotate(16deg);
+  }
+
+  99% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes fireMiddle {
+  10% {
+    transform: rotate(25deg);
+  }
+
+  20% {
+    transform: rotate(-25deg);
+  }
+
+  30% {
+    transform: rotate(30deg);
+  }
+
+  40% {
+    transform: rotate(-22deg);
+  }
+
+  50% {
+    transform: rotate(29deg);
+  }
+
+  60% {
+    transform: rotate(-45deg);
+  }
+
+  70% {
+    transform: rotate(37deg);
+  }
+
+  80% {
+    transform: rotate(-15deg);
+  }
+
+  90% {
+    transform: rotate(16deg);
+  }
+
+  99% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes fireRight {
+  15% {
+    transform: rotate(17deg);
+  }
+
+  23% {
+    transform: rotate(-13deg);
+  }
+
+  37% {
+    transform: rotate(21deg);
+  }
+
+  45% {
+    transform: rotate(-34deg);
+  }
+
+  54% {
+    transform: rotate(24deg);
+  }
+
+  67% {
+    transform: rotate(-17deg);
+  }
+
+  72% {
+    transform: rotate(31deg);
+  }
+
+  84% {
+    transform: rotate(-28deg);
+  }
+
+  96% {
+    transform: rotate(14deg);
+  }
+
+  99% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes fillOpacity1 {
+  0% {
+    fill-opacity: 1;
+    stroke-opacity: 1;
+  }
+
+  50% {
+    fill-opacity: 1;
+    stroke-opacity: 1;
+  }
+
+  100% {
+    fill-opacity: 0;
+    stroke-opacity: 0;
+  }
+}
+
+@keyframes fillOpacity2 {
+  0% {
+    fill-opacity: 1;
+    stroke-opacity: 1;
+  }
+
+  25% {
+    fill-opacity: 1;
+    stroke-opacity: 1;
+  }
+
+  100% {
+    fill-opacity: 0;
+    stroke-opacity: 0;
+  }
+}
+
+@keyframes fillOpacity3 {
+  0% {
+    fill-opacity: 1;
+    stroke-opacity: 1;
+  }
+
+  67% {
+    fill-opacity: 1;
+    stroke-opacity: 1;
+  }
+
+  100% {
+    fill-opacity: 0;
+    stroke-opacity: 0;
+  }
+}
+
+@keyframes rocektMove {
+  0% {
+    transform: translateY(0px);
+  }
+
+  100% {
+    transform: translateY(20px);
+  }
+}
--- a/src/vite/index.html
+++ b/src/vite/index.html
@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <link rel="apple-touch-icon" sizes="128x128" href="/favicon-128.png" />
+    <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128.png" />
+    <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
+    <link rel="mask-icon" href="/favicon/favicon-512.png" color="#5bbad5" />
+    <title>LycaKnight's Portfolio</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="./main.jsx"></script>
+</body>
+
+</html>
--- a/src/vite/main.jsx
+++ b/src/vite/main.jsx
@ -0,0 +1,13 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
--- a/src/vite/pages/Contact.jsx
+++ b/src/vite/pages/Contact.jsx
@ -0,0 +1,197 @@
+import React from "react";
+import {
+	FIRST_NAME,
+	LAST_NAME,
+	ADDRESS,
+	GIT,
+	DAILYDEV_USERNAME,
+} from "../components/root.link.jsx";
+import git from "../images/icons/git.svg";
+import dailydev from "../images/icons/dailydev.svg";
+
+function Contact() {
+  return <section className="my-28 px-5" id="contact">
+			<div className="flex flex-col flex-wrap justify-between md:mx-6 md:flex-row">
+				<div className="my-5 p-5 md:w-6/12 md:px-0">
+					<div>
+						<p className="font-bold">
+							{FIRST_NAME} {LAST_NAME}
+						</p>
+						<p className="font-thin">{ADDRESS}</p>
+					</div>
+					<div className="mt-7 flex flex-row flex-wrap">
+						<div className="mr-4">
+							<a
+								href={`${GIT}`}
+								target="_blank"
+								rel="noreferrer"
+							>
+								<span className="mb-2 flex flex-row items-end rounded-lg border border-gray-500 p-2 text-sm">
+									<img
+										src={git}
+										alt=""
+										width="24px"
+										height="24px"
+										className="mr-1"
+									/>
+									Git
+								</span>
+							</a>
+						</div>
+
+						<div className="mr-4">
+							<a
+								href={`https://app.daily.dev/${DAILYDEV_USERNAME}`}
+								target="_blank"
+								rel="noreferrer"
+							>
+								<span className="mb-2 flex flex-row items-end rounded-lg border border-gray-500 p-2 text-sm">
+									<img
+										src={dailydev}
+										alt=""
+										width="24px"
+										height="24px"
+										className="mr-1"
+									/>
+									Daily.dev
+								</span>
+							</a>
+						</div>
+					</div>
+				</div>
+
+				<div className="flex flex-col flex-wrap items-center justify-between md:mx-6 md:flex-row">
+					<svg
+						version="1.1"
+						x="0px"
+						y="0px"
+						width="307px"
+						height="283px"
+						id="rocket"
+					>
+						<g
+							className="rocket_wrap"
+							onClick={() => window.scroll({top: 0, left: 0, behavior: "smooth"})}
+						>
+							<circle
+								cx="147.5"
+								cy="138.6"
+								r="105.5"
+								className="icon_circle"
+							/>
+							<g className="rocket_inner">
+								<path
+									className="fire fire_path"
+									id="fireMiddle"
+									d="M148.891,179.906c3.928,0,7.111,3.176,7.111,7.094 c0,7.78-7.111,16-7.111,16s-7.111-8.349-7.111-16C141.78,183.082,144.963,179.906,148.891,179.906z"
+								/>
+								<path
+									className="fire_path fire"
+									id="fireRight"
+									d="M154.063,181.092c3.577-1.624,7.788-0.048,9.408,3.52 c3.216,7.084,0.139,17.508,0.139,17.508s-9.927-4.662-13.09-11.63C148.9,186.923,150.487,182.715,154.063,181.092z"
+								/>
+								<path
+									className="fire_path fire"
+									id="fireLeft"
+									d="M143.392,182.519c3.25,2.207,4.098,6.623,1.896,9.864 c-4.372,6.436-14.873,9.238-14.873,9.238s-1.191-10.902,3.108-17.23C135.725,181.149,140.143,180.312,143.392,182.519z"
+								/>
+								<path
+									className="fire_path fire"
+									id="fireSmallLeft"
+									d="M143.193 187.531c2.226 0.4 3.7 2.6 3.2 4.8 c-0.875 4.407-5.829 8.264-5.829 8.264s-3.09-5.53-2.229-9.865C138.807 188.5 141 187.1 143.2 187.531z"
+								/>
+								<path
+									className="fire_path fire"
+									id="fireSmallRight"
+									d="M152.089 188.599c2.043-0.985 4.496-0.132 5.5 1.9 c1.952 4 0.3 10.1 0.3 10.107s-5.795-2.56-7.713-6.541C149.186 192 150 189.6 152.1 188.599z"
+								/>
+								<path
+									className="rocket_bottom"
+									d="M157.069 171.31h-3.292c-1.562-0.048-3.178-0.076-4.846-0.076 s-3.284 0.028-4.846 0.076h-3.292c-7.277-7.938-12.371-26.182-12.371-47.434c0-28.54 9.182-51.676 20.508-51.676 c11.327 0 20.5 23.1 20.5 51.676C169.44 145.1 164.3 163.4 157.1 171.31z"
+								/>
+								<g id="right_wing_wrap">
+									<path
+										className="wing_base"
+										d="M166.678 127.161c0 0 17.7 3.3 12.9 48.099l-18.06-14.05 L166.678 127.161z"
+									/>
+									<path
+										className="wing_shadow"
+										d="M158.225 140.336c10.481-5.584 22.7 22.2 21.4 34.9 l-18.06-14.05C161.542 161.2 156.1 144.3 158.2 140.336z"
+									/>
+								</g>
+								<g id="left_wing_wrap">
+									<path
+										className="wing_base"
+										d="M135.131 161.21l-18.06 14.1 c-4.805-44.793 12.924-48.099 12.924-48.099L135.131 161.21z"
+									/>
+									<path
+										className="wing_shadow"
+										d="M135.131 161.21l-18.06 14.1 c-1.367-12.746 10.896-40.509 21.377-34.924C140.614 144.3 135.1 161.2 135.1 161.21z"
+									/>
+								</g>
+								<g id="rocket_body_wrap">
+									<path
+										className="rocket_base"
+										d="M162.728 167.358c-3.778-0.623-8.573-0.996-13.796-0.996 s-10.018 0.373-13.795 0.996c-5.033-10.186-8.257-25.808-8.257-43.338c0-30.688 9.873-55.566 22.052-55.566 s22.053 24.9 22.1 55.566C170.984 141.6 167.8 157.2 162.7 167.358z"
+									/>
+									<path
+										className="rocket_shadow"
+										d="M145.464 166.417c19.578-40.575 7.26-85.229 4.112-98.067 c11.88 0.9 21.4 25.4 21.4 55.525c0 17.529-3.225 33.152-8.257 43.337c0 0-3.786-0.472-8.069-0.697 S145.464 166.4 145.5 166.417z"
+									/>
+								</g>
+								<g id="large_window_wrap">
+									<radialGradient
+										id="SVGID_2_"
+										cx="148.9"
+										cy="112.5"
+										r="15.2"
+										fx="139.4853"
+										fy="112.5239"
+									>
+										<stop
+											offset="0"
+											className="window_grandient"
+										/>
+										<stop
+											offset="0.5868"
+											className="window_grandient"
+										/>
+										<stop
+											offset="0.6834"
+											className="window_grandient"
+										/>
+										<stop
+											offset="0.6845"
+											className="window_grandient1"
+										/>
+										<stop
+											offset="0.6861"
+											className="window_grandient2"
+										/>
+										<stop
+											offset="0.6897"
+											className="window_grandient3"
+										/>
+									</radialGradient>
+									<circle
+										className="large_window_path"
+										cx="148.9"
+										cy="111.3"
+										r="10.5"
+									/>
+								</g>
+								<circle
+									className="small_window_path"
+									cx="148.9"
+									cy="132.4"
+									r="5.2"
+								/>
+							</g>
+						</g>
+					</svg>
+				</div>
+			</div>
+		</section>
+}
+
+export default Contact;
--- a/src/vite/pages/Experience.jsx
+++ b/src/vite/pages/Experience.jsx
@ -0,0 +1,46 @@
+import React from "react";
+import workHistory from "../components/exData.jsx";
+
+function Experience() {
+  return (
+    <section className="my-28 px-5" id="experience">
+      <header className="pt-10 text-2xl font-bold">
+        <h2>Experience</h2>
+      </header>
+      <div className="main-cont">
+        <section id="cd-timeline" className="cd-container">
+          {workHistory &&
+            workHistory.map((work) => (
+              <div className="cd-timeline-block" key={work.id}>
+                <div className="cd-timeline-img" />
+                <div className="cd-timeline-content">
+                  <h1 className="pl-3 pt-2 text-2xl font-bold uppercase">
+                    <a href={work.link} target="_blank" rel="noreferrer">
+                      {work.companyName}
+                    </a>
+                  </h1>
+                  <h4 className="pl-3 pt-2 text-base font-bold uppercase">
+                    {work.role}
+                  </h4>
+                  <div className="timeline-content-info">
+                    <h5 className="text-sm">{work.duration}</h5>
+                  </div>
+                  <div className="pl-2">
+                    {work.workDes &&
+                      work.workDes.map((x) => (
+                        <h4 className="pt-2 text-base" key={x}>
+                          <span className="text-xl">- </span>
+                          {x}
+                        </h4>
+                      ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+        </section>
+      </div>
+    </section>
+  );
+}
+
+export default Experience;
--- a/src/vite/pages/Hero.jsx
+++ b/src/vite/pages/Hero.jsx
@ -0,0 +1,34 @@
+import React, { useEffect, useRef } from "react";
+import Lottie from "lottie-web";
+import animationData from "../components/astronaout.json";
+import { FRONT_PAGE_DESC, FRONT_PAGE_NAME } from "../components/root.link.jsx";
+
+function Hero() {
+  const container = useRef(null);
+
+  useEffect(() => {
+    Lottie.loadAnimation({
+      container: container.current,
+      renderer: "svg",
+      loop: true,
+      autoplay: true,
+      animationData
+    });
+  }, []);
+
+  return (
+    <section className="patterns mb-10 flex flex-col flex-wrap space-y-16 px-5 md:space-y-0">
+      <div className="ml-auto w-72 md:w-96 lg:w-2/5">
+        <div className="container" ref={container} />
+      </div>
+      <div className="mb-auto max-w-md space-y-5">
+        <h1 className="text-5xl font-bold md:text-7xl">
+          Hi there. I’m {FRONT_PAGE_NAME}
+        </h1>
+        <p className="leading-relaxed tracking-wide">{FRONT_PAGE_DESC} </p>
+      </div>
+    </section>
+  );
+}
+
+export default Hero;
--- a/src/vite/pages/Project.jsx
+++ b/src/vite/pages/Project.jsx
@ -0,0 +1,59 @@
+import React from "react";
+import projects from "../components/projectData.jsx";
+import git from "../images/icons/git.svg";
+
+function Project() {
+  return (
+    <section className="my-28 px-5" id="projects">
+      <header className="pt-10 text-2xl font-bold">
+        <h2>Projects</h2>
+      </header>
+      <div className="my-7 space-y-24">
+        {projects.map((project) => (
+          <article
+            className="flex flex-wrap md:items-center md:justify-between"
+            key={project.id}
+          >
+            <picture
+              className={
+                project.id % 2 === 0
+                  ? "w-full shadow-lg md:w-6/12 "
+                  : "w-full shadow-lg md:order-1 md:w-6/12"
+              }
+            >
+              <img src={project.image} alt={project.title} />
+            </picture>
+            <div className="mx-1 my-3 flex  w-full flex-col space-y-3 overflow-auto md:w-5/12 ">
+              <h3 className="text-lg font-bold uppercase">{project.title}</h3>
+              <p>{project.description}</p>
+              <div className="flex space-x-3 overflow-auto pb-2 md:flex-wrap">
+                {project.tools.map((disc) => (
+                  <span
+                    className="mt-2 rounded-lg border border-gray-500 px-2 py-1 text-sm"
+                    key={disc}
+                  >
+                    {disc}
+                  </span>
+                ))}
+              </div>
+              <div className="relative flex w-auto space-x-5 ">
+                {project?.git && (
+                  <a href={project.git} target="_blank" rel="noreferrer">
+                    <img
+                      src={git}
+                      alt="link to git page"
+                      width="24px"
+                      height="24px"
+                    />
+                  </a>
+                )}
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default Project;
--- a/src/vite/pages/Skill.jsx
+++ b/src/vite/pages/Skill.jsx
@ -0,0 +1,64 @@
+import React from "react";
+import { Skills, Tools } from "../components/skillData.jsx";
+
+function Skill() {
+  return (
+    <section className="my-28 px-5" id="skill">
+      <header className="mb-5 pt-10 text-2xl font-bold">
+        <h2>Skills & Tools</h2>
+      </header>
+      {Skills.length > 0 && (
+        <div className="pl-3">
+          <h2 className="text-xl"> Skills </h2>
+          <div className="my-7 grid grid-cols-3 content-center gap-5 md:grid-cols-6">
+            {Skills.map((x) => (
+              <div
+                className="flex flex-col items-center"
+                role="img"
+                aria-label={x.skill}
+                key={x.id}
+              >
+                <img
+                  src={x.logo}
+                  alt=""
+                  loading="lazy"
+                  className="mb-1 w-16"
+                  width="64px"
+                  height="64px"
+                />
+                {x.skill}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {Tools.length > 0 && (
+        <div className="pl-3">
+          <h2 className="text-xl"> Tools </h2>
+          <div className="my-7 grid grid-cols-3 content-center gap-5 md:grid-cols-6">
+            {Tools.map((x) => (
+              <div
+                className="flex flex-col items-center"
+                role="img"
+                aria-label={x.skill}
+                key={x.id}
+              >
+                <img
+                  src={x.logo}
+                  alt=""
+                  loading="lazy"
+                  className="mb-1 w-16"
+                  width="64px"
+                  height="64px"
+                />
+                {x.skill}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
+
+export default Skill;
--- a/src/vite/public/favicon-128.png
+++ b/src/vite/public/favicon-128.png
--- a/src/vite/public/favicon-512.png
+++ b/src/vite/public/favicon-512.png
--- a/src/vite/public/manifest.json
+++ b/src/vite/public/manifest.json
@ -0,0 +1,22 @@
+{
+    "name": "Tobias Brummer",
+    "short_name": "Tobias Brummer",
+    "icons": [
+        {
+            "src": "/favicon-128.png",
+            "sizes": "128x128",
+            "type": "image/png",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/favicon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ],
+    "start_url": ".",
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,21 @@
+module.exports = {
+  content: ["./src/vite/index.html", "./src/vite/**/*.{vue,js,jsx}"],
+  theme: {
+    minHeight: {
+      70: "70vh",
+    },
+    extend: {},
+    backgroundColor: (theme) => ({
+      ...theme("colors"),
+      primary: "#3490dc",
+      secondary: "#ffed4a",
+      danger: "#e3342f",
+      black: "#121212",
+      gray: "#1c1c1c",
+    }),
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,22 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { join } from "path";
+
+const srcRoot = join(__dirname, "src/vite");
+
+export default defineConfig({
+  root: srcRoot,
+  base: "./",
+  plugins: [react()],
+  build: {
+    outDir: join(srcRoot, "../../dist"),
+    emptyOutDir: true,
+  },
+  server: {
+    host: true,
+    port: 8080,
+  },
+  optimizeDeps: {
+    exclude: ["path"],
+  },
+});
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"><path d="M31.396 14.575L17.425.604a2.06 2.06 0 0 0-2.914 0l-2.9 2.9 3.68 3.68c.856-.3 1.836-.095 2.518.587a2.45 2.45 0 0 1 .581 2.533l3.547 3.547c.858-.296 1.848-.105 2.533.582a2.45 2.45 0 1 1-3.469 3.468c-.72-.72-.898-1.78-.534-2.667l-3.308-3.308v8.705a2.5 2.5 0 0 1 .65.464 2.45 2.45 0 1 1-3.468 3.468 2.45 2.45 0 0 1 0-3.468c.237-.236.5-.415.803-.535v-8.786c-.292-.12-.566-.297-.803-.535a2.45 2.45 0 0 1-.528-2.681l-3.63-3.628-9.58 9.57a2.06 2.06 0 0 0 0 2.915l13.972 13.97a2.06 2.06 0 0 0 2.914 0L31.396 17.5a2.06 2.06 0 0 0 0-2.915" fill="#f03c2e"/></svg>