From 44f70c0e3a0f05eed6e211215bd44e3f1c408ce8 Mon Sep 17 00:00:00 2001
From: schererleander <leander@schererleander.de>
Date: Mon, 14 Jul 2025 18:06:54 +0200
Subject: feat: add tools, project section

---
 public/icons/docker.svg     |   6 +++
 public/icons/git.svg        |  10 ++++
 public/icons/java.svg       |  13 +++++
 public/icons/linux.svg      | 121 ++++++++++++++++++++++++++++++++++++++++++++
 public/icons/mongodb.svg    |   1 +
 public/icons/nix.svg        |  89 ++++++++++++++++++++++++++++++++
 public/icons/python.svg     |  17 +++++++
 public/icons/react.svg      |   4 ++
 public/icons/tailwind.svg   |  10 ++++
 public/icons/typescript.svg |  10 ++++
 src/pages/Home.tsx          | 103 +++++++++++++++++++++++++++----------
 11 files changed, 357 insertions(+), 27 deletions(-)
 create mode 100644 public/icons/docker.svg
 create mode 100644 public/icons/git.svg
 create mode 100644 public/icons/java.svg
 create mode 100644 public/icons/linux.svg
 create mode 100644 public/icons/mongodb.svg
 create mode 100644 public/icons/nix.svg
 create mode 100644 public/icons/python.svg
 create mode 100644 public/icons/react.svg
 create mode 100644 public/icons/tailwind.svg
 create mode 100644 public/icons/typescript.svg

diff --git a/public/icons/docker.svg b/public/icons/docker.svg
new file mode 100644
index 0000000..3fafadf
--- /dev/null
+++ b/public/icons/docker.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="185px" viewBox="0 0 256 185" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M250.715745,70.4971666 C244.951102,66.4973277 231.740464,64.997388 221.412146,66.9973071 C220.211179,56.9977092 214.68673,48.2480609 205.078993,40.4983724 L199.554544,36.4985331 L195.711449,42.248302 C190.90758,49.7480006 188.505646,60.2475786 189.226226,70.2471769 C189.46642,73.7470364 190.667387,79.9967847 194.270289,85.496564 C190.90758,87.4964838 183.941971,89.996383 174.814621,89.996383 L1.15476998,89.996383 L0.674383104,91.9963028 C-1.00697093,101.9959 -1.00697093,133.244645 18.6888904,157.243681 C33.5808831,175.492947 55.6786788,184.742575 84.7420842,184.742575 C147.672763,184.742575 194.270289,154.493791 216.127891,99.7459909 C224.774854,99.9959813 243.269748,99.7459909 252.637292,80.996745 C252.877486,80.4967649 253.357872,79.4968046 255.039227,75.7469554 L256,73.7470364 L250.715745,70.4971666 L250.715745,70.4971666 Z M139.986573,0 L113.565295,0 L113.565295,24.9989952 L139.986573,24.9989952 L139.986573,0 L139.986573,0 Z M139.986573,29.9987943 L113.565295,29.9987943 L113.565295,54.9977896 L139.986573,54.9977896 L139.986573,29.9987943 L139.986573,29.9987943 Z M108.761427,29.9987943 L82.3401495,29.9987943 L82.3401495,54.9977896 L108.761427,54.9977896 L108.761427,29.9987943 L108.761427,29.9987943 Z M77.5362814,29.9987943 L51.1150037,29.9987943 L51.1150037,54.9977896 L77.5362814,54.9977896 L77.5362814,29.9987943 L77.5362814,29.9987943 Z M46.311135,59.9975886 L19.8898576,59.9975886 L19.8898576,84.9965839 L46.311135,84.9965839 L46.311135,59.9975886 L46.311135,59.9975886 Z M77.5362814,59.9975886 L51.1150037,59.9975886 L51.1150037,84.9965839 L77.5362814,84.9965839 L77.5362814,59.9975886 L77.5362814,59.9975886 Z M108.761427,59.9975886 L82.3401495,59.9975886 L82.3401495,84.9965839 L108.761427,84.9965839 L108.761427,59.9975886 L108.761427,59.9975886 Z M139.986573,59.9975886 L113.565295,59.9975886 L113.565295,84.9965839 L139.986573,84.9965839 L139.986573,59.9975886 L139.986573,59.9975886 Z M171.211719,59.9975886 L144.790441,59.9975886 L144.790441,84.9965839 L171.211719,84.9965839 L171.211719,59.9975886 L171.211719,59.9975886 Z" fill="#2396ED" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/git.svg b/public/icons/git.svg
new file mode 100644
index 0000000..1f41450
--- /dev/null
+++ b/public/icons/git.svg
@@ -0,0 +1,10 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_21_3)">
+<path d="M501.862 279.793L279.792 501.858C266.93 514.708 246.098 514.708 233.252 501.858L10.141 278.762C-2.713 265.911 -2.713 245.072 10.141 232.209L163.121 79.2351L221.054 137.177C215.114 151.406 217.902 168.41 229.49 179.988C233.277 183.787 237.643 186.623 242.309 188.532V328.83C237.643 330.743 233.27 333.596 229.49 337.372C214.193 352.667 214.193 377.443 229.49 392.755C244.771 408.051 269.564 408.051 284.863 392.755C300.158 377.443 300.158 352.667 284.863 337.372C281.753 334.278 278.234 331.816 274.505 329.97L274.509 190.96L327.335 243.786C321.509 257.96 324.353 274.86 335.856 286.371C351.164 301.675 375.944 301.675 391.248 286.371C406.543 271.072 406.543 246.292 391.248 230.999C380.303 220.037 364.492 216.984 350.79 221.706L294.15 165.067C298.879 151.36 295.805 135.566 284.864 124.613C273.977 113.725 258.318 110.632 244.658 115.244L185.891 56.4751L232.217 10.1421C245.073 -2.70995 265.913 -2.70995 278.75 10.1421L501.862 233.24C514.712 246.092 514.712 266.938 501.862 279.793Z" fill="#F1502F"/>
+</g>
+<defs>
+<clipPath id="clip0_21_3">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/java.svg b/public/icons/java.svg
new file mode 100644
index 0000000..228b75f
--- /dev/null
+++ b/public/icons/java.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="346px" viewBox="0 0 256 346" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M82.5539491,267.472524 C82.5539491,267.472524 69.35552,275.147869 91.9468218,277.745105 C119.315549,280.867375 133.303389,280.419607 163.463913,274.711273 C163.463913,274.711273 171.393396,279.683258 182.467491,283.989644 C114.855564,312.966982 29.4483782,282.311215 82.5539491,267.472524" fill="#5382A1"></path>
+		<path d="M74.2921309,229.658996 C74.2921309,229.658996 59.4888145,240.616727 82.0968727,242.955171 C111.333004,245.971316 134.421411,246.218007 174.373236,238.524975 C174.373236,238.524975 179.899113,244.127185 188.588218,247.190807 C106.841367,271.094691 15.79008,249.075898 74.2921309,229.658996" fill="#5382A1"></path>
+		<path d="M143.941818,165.514705 C160.601367,184.695156 139.564684,201.955142 139.564684,201.955142 C139.564684,201.955142 181.866124,180.117876 162.438982,152.772422 C144.294633,127.271098 130.380335,114.600495 205.706705,70.9138618 C205.706705,70.9138618 87.4691491,100.44416 143.941818,165.514705" fill="#E76F00"></path>
+		<path d="M233.364015,295.441687 C233.364015,295.441687 243.131113,303.489396 222.60736,309.715316 C183.580858,321.537862 60.1748945,325.107898 25.8932364,310.186356 C13.5698618,304.825251 36.67968,297.385425 43.9491491,295.824291 C51.5304727,294.180305 55.8629236,294.486575 55.8629236,294.486575 C42.15808,284.832116 -32.7195927,313.443607 17.8287709,321.637469 C155.681513,343.993251 269.121164,311.570618 233.364015,295.441687" fill="#5382A1"></path>
+		<path d="M88.9008873,190.479825 C88.9008873,190.479825 26.1287564,205.389265 66.6717091,210.803433 C83.7901964,213.095331 117.915462,212.576815 149.702284,209.913484 C175.680233,207.722124 201.765236,203.062924 201.765236,203.062924 C201.765236,203.062924 192.605091,206.985775 185.977949,211.510924 C122.233949,228.275665 -0.907636364,220.476509 34.5432436,203.328233 C64.5241018,188.83584 88.9008873,190.479825 88.9008873,190.479825" fill="#5382A1"></path>
+		<path d="M201.506444,253.422313 C266.305164,219.7504 236.344785,187.392 215.432844,191.751447 C210.307258,192.818269 208.021876,193.742662 208.021876,193.742662 C208.021876,193.742662 209.924655,190.761891 213.558924,189.471651 C254.929455,174.927127 286.746065,232.368873 200.204102,255.11936 C200.204102,255.120291 201.206691,254.223825 201.506444,253.422313" fill="#5382A1"></path>
+		<path d="M162.438982,0.371432727 C162.438982,0.371432727 198.325527,36.27008 128.402153,91.4720582 C72.3307055,135.753542 115.616116,161.001658 128.37888,189.848669 C95.6490473,160.318371 71.6297309,134.322735 87.7437673,110.128407 C111.395375,74.6132945 176.918342,57.3942691 162.438982,0.371432727" fill="#E76F00"></path>
+		<path d="M95.2683055,344.665367 C157.466996,348.646865 252.980131,342.45632 255.24224,313.025629 C255.24224,313.025629 250.893964,324.182575 203.838371,333.042967 C150.750487,343.033484 85.2740655,341.867055 46.4393309,335.464262 C46.4402618,335.463331 54.3892945,342.043927 95.2683055,344.665367" fill="#5382A1"></path>
+	</g>
+</svg>
diff --git a/public/icons/linux.svg b/public/icons/linux.svg
new file mode 100644
index 0000000..b6ca3d2
--- /dev/null
+++ b/public/icons/linux.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="295px" viewBox="0 0 256 295" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+        </filter>
+        <linearGradient x1="48.5477412%" y1="115.276174%" x2="51.0473804%" y2="41.3637237%" id="linearGradient-2">
+            <stop stop-color="#FFEED7" offset="0%"></stop>
+            <stop stop-color="#BDBFC2" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="54.4065463%" y1="2.40410545%" x2="46.1753957%" y2="90.5422349%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" stop-opacity="0.8" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="51.859653%" y1="88.2477484%" x2="47.9469396%" y2="9.74782136%" id="linearGradient-4">
+            <stop stop-color="#FFEED7" offset="0%"></stop>
+            <stop stop-color="#BDBFC2" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.9251097%" y1="85.4900173%" x2="49.9236843%" y2="13.8109272%" id="linearGradient-5">
+            <stop stop-color="#FFEED7" offset="0%"></stop>
+            <stop stop-color="#BDBFC2" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="53.9014071%" y1="3.10177585%" x2="45.9555354%" y2="93.8949571%" id="linearGradient-6">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="45.5928761%" y1="5.47459052%" x2="54.811359%" y2="93.5235162%" id="linearGradient-7">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.9844987%" y1="89.8452442%" x2="49.9844987%" y2="40.6316864%" id="linearGradient-8">
+            <stop stop-color="#FFEED7" offset="0%"></stop>
+            <stop stop-color="#BDBFC2" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="53.5047131%" y1="99.97524%" x2="42.7455968%" y2="23.5451715%" id="linearGradient-9">
+            <stop stop-color="#FFEED7" offset="0%"></stop>
+            <stop stop-color="#BDBFC2" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.8413363%" y1="13.2289558%" x2="50.2412612%" y2="94.6729694%" id="linearGradient-10">
+            <stop stop-color="#FFFFFF" stop-opacity="0.8" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.9272298%" y1="37.3270337%" x2="50.7270446%" y2="92.7824735%" id="linearGradient-11">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.8755597%" y1="2.29900584%" x2="49.8755597%" y2="81.203617%" id="linearGradient-12">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.8334391%" y1="2.27189065%" x2="49.8240398%" y2="71.7989617%" id="linearGradient-13">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="53.4670683%" y1="48.9213861%" x2="38.9488708%" y2="98.0999776%" id="linearGradient-14">
+            <stop stop-color="#FFA63F" offset="0%"></stop>
+            <stop stop-color="#FFFF00" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="52.3731508%" y1="143.008909%" x2="47.57909%" y2="-64.6215389%" id="linearGradient-15">
+            <stop stop-color="#FFEED7" offset="0%"></stop>
+            <stop stop-color="#BDBFC2" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="30.580815%" y1="34.0241079%" x2="65.8867024%" y2="89.175349%" id="linearGradient-16">
+            <stop stop-color="#FFA63F" offset="0%"></stop>
+            <stop stop-color="#FFFF00" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="59.5715091%" y1="-17.2155207%" x2="48.3608522%" y2="66.1184465%" id="linearGradient-17">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="47.7689553%" y1="1.56481301%" x2="51.3733028%" y2="104.312856%" id="linearGradient-18">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="43.5495626%" y1="4.5334861%" x2="57.1143288%" y2="92.8267174%" id="linearGradient-19">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="49.7328042%" y1="17.6085216%" x2="50.5582487%" y2="99.3854667%" id="linearGradient-20">
+            <stop stop-color="#FFA63F" offset="0%"></stop>
+            <stop stop-color="#FFFF00" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50.1697217%" y1="2.89048531%" x2="49.6802359%" y2="94.1704279%" id="linearGradient-21">
+            <stop stop-color="#FFFFFF" stop-opacity="0.65" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g fill="none">
+        <g transform="translate(10.000000, 0.000000)">
+            <path d="M235.125423,249.358628 C235.125423,266.714271 182.507524,280.855905 117.584567,280.855905 C52.6616093,280.855905 0.0437105058,266.806099 0.0437105058,249.358628 L0.0437105058,249.358628 C0.0437105058,232.002986 52.6616093,217.861352 117.584567,217.861352 C182.507524,217.861352 235.033594,232.002986 235.125423,249.358628 L235.125423,249.358628 L235.125423,249.358628 Z" fill="#000" fill-opacity="0.2" filter="url(#filter-1)"></path>
+            <path d="M53.2125821,215.473804 C41.8258117,199.128278 39.6219206,145.867578 66.160442,113.084699 C79.2919595,97.3819748 82.6896249,86.4543483 83.6997416,71.6699125 C84.434372,54.8652433 71.8538272,4.81855066 119.237485,1.05357012 C167.263944,-2.80323922 164.600909,44.5804184 164.325423,69.6496791 C164.141765,90.7703016 179.844489,102.799874 190.680286,119.329056 C210.607135,149.632558 208.954216,201.791313 186.915306,230.074582 C158.999353,265.428667 135.123866,250.093259 119.237485,251.378862 C89.4849556,253.123609 88.4748389,268.918162 53.2125821,215.473804 L53.2125821,215.473804 Z" fill="#000000"></path>
+            <path d="M169.10052,122.451235 C177.365111,130.073025 198.76122,164.141508 164.876395,185.445788 C152.938652,192.88392 175.528535,221.167189 186.364333,207.484699 C205.556551,182.874582 193.343321,143.571858 181.772893,129.522053 C174.059275,119.604543 162.121532,115.747734 169.10052,122.451235 L169.10052,122.451235 Z" fill="url(#linearGradient-2)"></path>
+            <path d="M166.8048,117.859796 C180.395461,128.879251 205.097407,167.447344 169.008691,192.608434 C157.162777,200.413881 179.477174,225.115827 192.057718,212.535282 C235.676395,168.641119 190.955773,118.227111 175.528535,100.871469 C161.754216,85.719718 149.540987,104.360963 166.8048,117.859796 L166.8048,117.859796 Z" stroke="#000000" stroke-width="0.9773" fill="#000000"></path>
+            <path d="M147.245267,25.0208853 C146.786123,37.60143 132.919975,48.5290565 116.298963,49.5391732 C99.6779518,50.54929 86.638263,40.9990954 87.097407,28.4185507 L87.097407,28.4185507 C87.556551,15.8380059 101.422699,4.91037946 118.043711,3.90026272 C134.664722,2.98197479 147.704411,12.4403405 147.245267,25.0208853 L147.245267,25.0208853 L147.245267,25.0208853 Z" fill="url(#linearGradient-3)"></path>
+            <path d="M107.483399,54.9570721 C107.942543,63.1298347 104.085734,70.0169942 98.7596638,70.2924806 C93.4335938,70.567967 88.7503253,64.2317802 88.2911813,56.0590176 L88.2911813,56.0590176 C87.8320374,47.8862549 91.6888467,40.9990954 97.0149167,40.723609 C102.340987,40.4481226 107.024255,46.7843094 107.483399,54.9570721 L107.483399,54.9570721 L107.483399,54.9570721 Z" fill="url(#linearGradient-4)"></path>
+            <path d="M117.125423,55.5998736 C117.30908,65.0582394 123.461609,72.5882005 130.807913,72.4045429 C138.154216,72.2208853 143.93943,64.4154378 143.755773,54.8652433 L143.755773,54.8652433 C143.572115,45.4068775 137.419586,37.8769164 130.073282,38.060574 C122.726979,38.2442316 116.849936,46.1415079 117.125423,55.5998736 L117.125423,55.5998736 L117.125423,55.5998736 Z" fill="url(#linearGradient-5)"></path>
+            <path d="M123.186123,57.7119359 C123.094294,62.9461771 125.6655,67.1703016 129.063166,67.1703016 C132.369002,67.1703016 135.215695,62.9461771 135.307524,57.8037647 L135.307524,57.8037647 C135.399353,52.5695234 132.828146,48.3453989 129.430481,48.3453989 C126.032816,48.3453989 123.277952,52.5695234 123.186123,57.7119359 L123.186123,57.7119359 L123.186123,57.7119359 Z" fill="#000000"></path>
+            <path d="M101.973672,57.8037647 C102.432816,62.119718 100.779897,65.7928697 98.3923486,66.1601849 C96.0048,66.4356713 93.7090802,63.2216635 93.2499362,58.9057102 L93.2499362,58.9057102 C92.7907922,54.5897569 94.4437105,50.9166051 96.8312591,50.54929 C99.2188078,50.2738036 101.514528,53.4878114 101.973672,57.8037647 L101.973672,57.8037647 L101.973672,57.8037647 Z" fill="#000000"></path>
+            <path d="M124.563555,54.7734145 C124.288068,57.7119359 125.6655,60.0994845 127.593905,60.2831421 C129.52231,60.4667997 131.358886,58.1710798 131.634372,55.3243872 L131.634372,55.3243872 C131.909858,52.3858658 130.532426,49.9983172 128.604022,49.8146596 C126.675617,49.631002 124.839041,51.9267219 124.563555,54.7734145 L124.563555,54.7734145 L124.563555,54.7734145 Z" fill="url(#linearGradient-6)"></path>
+            <path d="M99.9534381,55.5080448 C100.228925,57.8955935 99.2188078,60.0076557 97.7495471,60.1913133 C96.2802864,60.3749709 94.9028545,58.538395 94.6273681,56.0590176 L94.6273681,56.0590176 C94.3518817,53.6714689 95.3619984,51.5594067 96.8312591,51.3757491 C98.3005198,51.1920915 99.6779518,53.1204962 99.9534381,55.5080448 L99.9534381,55.5080448 L99.9534381,55.5080448 Z" fill="url(#linearGradient-7)"></path>
+            <path d="M71.0273681,145.68392 C77.5472125,130.899485 91.4133603,104.911936 91.6888467,84.80143 C91.6888467,68.8232199 139.531648,64.9664106 143.388458,80.9446207 C147.245267,96.9228308 156.979119,120.798317 163.223477,132.368745 C169.467835,143.847344 187.558107,180.487033 168.274061,212.443453 C150.918419,240.726722 98.3005198,263.132948 70.2009089,208.586644 C60.6507144,189.669913 62.3954615,166.25357 71.0273681,145.68392 L71.0273681,145.68392 Z" fill="url(#linearGradient-8)"></path>
+            <path d="M65.1503253,134.664465 C59.5487689,145.224776 47.9783409,172.957072 76.2616093,188.108823 C106.65694,204.270691 106.565111,237.420885 70.0172514,221.626333 C36.5915704,207.39287 51.3760062,149.724387 60.7425432,135.950068 C66.8032436,126.308045 75.986123,114.46213 65.1503253,134.664465 L65.1503253,134.664465 Z" fill="url(#linearGradient-9)"></path>
+            <path d="M69.9254226,122.726722 C61.0180296,137.235671 39.7137494,171.395983 68.2725043,189.210769 C106.65694,212.810769 95.8211424,236.31894 60.7425432,215.106488 C11.3386521,185.537617 54.7736716,125.848901 74.5168623,103.07536 C97.1067455,77.5469553 78.8328156,107.758628 69.9254226,122.726722 L69.9254226,122.726722 Z" stroke="#000000" stroke-width="1.25" fill="#000000"></path>
+            <path d="M156.428146,151.285477 C156.428146,167.447344 140.90908,188.384309 114.27873,188.200652 C86.8219206,188.384309 75.1596638,167.447344 75.1596638,151.285477 C75.1596638,135.123609 93.341765,121.992092 115.747991,121.992092 C138.246045,122.08392 156.428146,135.123609 156.428146,151.285477 L156.428146,151.285477 Z" fill="url(#linearGradient-10)"></path>
+            <path d="M141.919197,100.504154 C141.643711,117.216994 130.716084,121.165632 116.941765,121.165632 C103.167446,121.165632 93.1581074,118.686255 91.9643331,100.504154 C91.9643331,89.1173833 103.167446,82.5057102 116.941765,82.5057102 C130.716084,82.4138814 141.919197,89.0255546 141.919197,100.504154 L141.919197,100.504154 Z" fill="url(#linearGradient-11)"></path>
+            <path d="M58.6304809,126.216216 C67.6297027,112.533726 86.638263,91.504932 62.2118039,129.154737 C42.3767844,160.19287 54.8655004,180.119718 61.293516,185.629446 C79.8429323,202.158628 79.1083019,213.269913 64.5075237,204.546177 C33.1939051,185.904932 39.7137494,154.499485 58.6304809,126.216216 L58.6304809,126.216216 Z" fill="url(#linearGradient-12)"></path>
+            <path d="M188.935539,131.817772 C181.130092,115.747734 156.336318,74.9757491 190.129314,122.359407 C220.89196,165.243453 199.312193,195.087811 195.455384,198.026333 C191.598574,200.964854 178.650714,206.933726 182.415695,196.557072 C186.272504,186.180418 205.372893,166.529056 188.935539,131.817772 L188.935539,131.817772 Z" fill="url(#linearGradient-13)"></path>
+            <path d="M51.8351502,258.541508 C31.2655004,247.613881 1.42114241,260.65357 12.2569401,231.084699 C14.4608311,224.381197 9.0429323,214.280029 12.5324265,207.760185 C16.6647222,199.77108 25.5721152,201.515827 30.8981852,196.189757 C36.1324265,190.680029 39.438263,181.129835 49.263944,182.599095 C58.9977961,184.068356 65.5176405,196.006099 72.3129712,210.698706 C77.3635549,221.167189 95.1783409,235.951625 93.9845665,247.70571 C92.5153058,265.704154 72.0374848,269.101819 51.8351502,258.541508 L51.8351502,258.541508 Z" stroke="#E68C3F" stroke-width="6.25" fill="url(#linearGradient-14)"></path>
+            <path d="M201.607913,189.11894 C198.485734,194.995983 185.446045,204.454348 176.72231,201.974971 C167.906746,199.587422 163.866279,186.180418 165.611026,175.987422 C167.263944,164.600652 176.72231,163.95785 188.660053,169.651235 C201.516084,175.987422 205.372893,181.313492 201.607913,189.11894 L201.607913,189.11894 Z" fill="url(#linearGradient-15)"></path>
+            <path d="M194.445267,253.490924 C209.505189,235.216994 243.022699,238.981975 220.432816,213.912714 C215.657718,208.494815 217.126979,196.924387 211.249936,191.965632 C204.362777,185.904932 196.740987,190.863687 189.761998,187.741508 C182.78301,184.343842 175.436707,177.823998 166.896629,182.415438 C158.356551,187.098706 157.438263,199.220107 156.611804,215.198317 C155.877174,226.676916 145.408691,245.869134 151.010247,256.429446 C159.091181,272.774971 180.119975,270.57108 194.445267,253.490924 L194.445267,253.490924 Z" stroke="#E68C3F" stroke-width="6.2507" fill="url(#linearGradient-16)"></path>
+            <path d="M187.925423,229.064465 C211.249936,194.628667 193.894294,194.904154 188.017251,192.241119 C182.140209,189.486255 175.987679,184.068356 169.10052,187.833337 C162.21336,191.690146 161.846045,201.607656 161.662388,214.647344 C161.386901,224.013881 153.581454,239.716605 158.264722,248.440341 C163.958107,258.633337 177.732426,243.848901 187.925423,229.064465 L187.925423,229.064465 Z" fill="url(#linearGradient-17)"></path>
+            <path d="M47.0600529,234.02322 C12.1651113,211.433337 28.5106366,203.719718 33.7448778,200.138395 C40.0810646,195.546955 40.1728934,186.731391 47.9783409,187.55785 C55.7837883,188.384309 60.375228,198.026333 65.6094693,209.964076 C69.4662786,218.504154 82.8732825,229.890924 81.8631658,239.716605 C80.5775626,251.287033 62.1199751,243.665243 47.0600529,234.02322 L47.0600529,234.02322 Z" fill="url(#linearGradient-18)"></path>
+            <path d="M199.587679,188.843453 C196.832816,193.618551 185.629703,201.148512 178.19157,199.128278 C170.569781,197.199874 167.080286,186.455905 168.641376,178.374971 C170.018808,169.192092 178.19157,168.732948 188.476395,173.324387 C199.404022,178.283142 202.801687,182.507267 199.587679,188.843453 L199.587679,188.843453 Z" fill="#000000"></path>
+            <path d="M192.057718,186.180418 C190.312971,189.486255 182.966668,194.720496 177.824255,193.343064 C172.681843,191.965632 170.110637,184.5275 170.937096,178.925944 C171.671726,172.589757 177.181454,172.222442 184.160442,175.344621 C191.690403,178.834115 194.077952,181.772636 192.057718,186.180418 L192.057718,186.180418 Z" fill="url(#linearGradient-19)"></path>
+            <path d="M97.1067455,66.3438425 C100.779897,62.9461771 109.68729,52.5695234 126.583788,63.4053211 C129.705967,65.4255546 132.277174,65.6092121 138.246045,68.1804184 C150.275617,73.1391732 144.582232,85.0769164 131.726201,89.1173833 C126.216473,90.8621304 121.257718,97.5656324 111.340209,96.9228308 C102.800131,96.4636868 100.59624,90.8621304 95.3619984,87.8317802 C86.0872903,82.597539 84.7098584,75.5267219 89.760442,71.7617413 C94.8110257,67.9967608 96.7394304,66.6193289 97.1067455,66.3438425 L97.1067455,66.3438425 Z" stroke="#E68C3F" stroke-width="3.75" fill="url(#linearGradient-20)"></path>
+            <path d="M138.429703,75.9858658 C133.379119,76.2613522 122.451493,87.1889787 110.972893,87.1889787 C99.4942942,87.1889787 92.6071346,76.5368386 90.8623875,76.5368386" stroke="#E68C3F" stroke-width="2.5"></path>
+            <path d="M102.800131,65.4255546 C104.636707,63.7726363 110.421921,59.2730254 118.043711,63.8644651 C119.696629,64.782753 121.349547,65.7928697 123.737096,67.1703016 C128.604022,70.0169942 126.216473,74.14929 120.33943,76.7204962 C117.676395,77.8224417 113.268613,80.2099904 109.962777,80.0263328 C106.289625,79.6590176 103.810247,77.2714689 101.422699,75.7103795 C96.9230879,72.7718581 97.1985743,70.2924806 99.3106366,68.364076 C100.871726,66.8948153 102.616473,65.5173833 102.800131,65.4255546 L102.800131,65.4255546 Z" fill="url(#linearGradient-21)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/mongodb.svg b/public/icons/mongodb.svg
new file mode 100644
index 0000000..2ff3767
--- /dev/null
+++ b/public/icons/mongodb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.88 1333.33" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><g fill-rule="nonzero"><path d="M295.27 3.65l35.58 66.83c8 12.33 16.67 23.25 26.87 33.42 29.79 29.79 58.08 60.99 83.5 94.41 60.28 79.16 100.95 167.07 129.98 262.14 17.42 58.08 26.87 117.66 27.58 177.9 2.91 180.11-58.83 334.76-183.31 463.28-20.33 20.33-42.08 39.16-65.41 55.91-12.33 0-18.17-9.46-23.25-18.16-9.45-15.96-15.25-34.17-18.16-52.29-4.38-21.8-7.25-43.58-5.83-66.08v-10.16c-1-2.17-11.87-1002.07-7.54-1007.19v.01z" fill="#599636"/><path d="M295.27 1.43c-1.46-2.91-2.91-.71-4.38.71.71 14.58-4.38 27.58-12.33 40-8.75 12.33-20.33 21.8-31.96 31.96-64.57 55.91-115.4 123.45-156.11 198.98C36.33 374.74 8.41 483.68.5 598.38c-3.62 41.37 13.09 187.36 26.13 229.48 35.58 111.82 99.49 205.52 182.27 286.84 20.33 19.58 42.08 37.74 64.58 55.2 6.54 0 7.25-5.83 8.74-10.17 2.85-9.28 5.06-18.76 6.54-28.34l14.58-108.9L295.26 1.43z" fill="#6cac48"/><path d="M330.85 1201.77c1.46-16.67 9.46-30.5 18.17-44.29-8.75-3.62-15.25-10.83-20.33-18.87-4.38-7.25-8-15.96-10.83-23.96-10.17-30.5-12.33-62.5-15.25-93.66v-18.87c-3.62 2.91-4.38 27.58-4.38 31.25-2.03 32.85-6.54 65.8-13.08 98.05-2.17 13.08-3.62 26.12-11.67 37.74 0 1.46 0 2.91.71 5.09 13.08 38.5 16.67 77.7 18.87 117.66v14.58c0 17.41-.71 13.74 13.75 19.58 5.83 2.17 12.33 2.91 18.16 7.25 4.38 0 5.09-3.62 5.09-6.54l-2.17-23.96v-66.83c-.71-11.67 1.46-23.25 2.91-34.16l.05-.06z" fill="#c2bfbf"/></g></svg>
\ No newline at end of file
diff --git a/public/icons/nix.svg b/public/icons/nix.svg
new file mode 100644
index 0000000..a40c4f7
--- /dev/null
+++ b/public/icons/nix.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="141.5919mm" height="122.80626mm" viewBox="0 0 501.70361 435.14028" id="svg2" version="1.1" inkscape:version="0.92.0 r15299" sodipodi:docname="nix-snowflake.svg">
+  <defs id="defs4">
+    <linearGradient inkscape:collect="always" id="linearGradient5562">
+      <stop style="stop-color:#699ad7;stop-opacity:1" offset="0" id="stop5564"/>
+      <stop id="stop5566" offset="0.24345198" style="stop-color:#7eb1dd;stop-opacity:1"/>
+      <stop style="stop-color:#7ebae4;stop-opacity:1" offset="1" id="stop5568"/>
+    </linearGradient>
+    <linearGradient inkscape:collect="always" id="linearGradient5053">
+      <stop style="stop-color:#415e9a;stop-opacity:1" offset="0" id="stop5055"/>
+      <stop id="stop5057" offset="0.23168644" style="stop-color:#4a6baf;stop-opacity:1"/>
+      <stop style="stop-color:#5277c3;stop-opacity:1" offset="1" id="stop5059"/>
+    </linearGradient>
+    <linearGradient id="linearGradient5960" inkscape:collect="always">
+      <stop id="stop5962" offset="0" style="stop-color:#637ddf;stop-opacity:1"/>
+      <stop style="stop-color:#649afa;stop-opacity:1" offset="0.23168644" id="stop5964"/>
+      <stop id="stop5966" offset="1" style="stop-color:#719efa;stop-opacity:1"/>
+    </linearGradient>
+    <linearGradient inkscape:collect="always" id="linearGradient5867">
+      <stop style="stop-color:#7363df;stop-opacity:1" offset="0" id="stop5869"/>
+      <stop id="stop5871" offset="0.23168644" style="stop-color:#6478fa;stop-opacity:1"/>
+      <stop style="stop-color:#719efa;stop-opacity:1" offset="1" id="stop5873"/>
+    </linearGradient>
+    <linearGradient y2="515.97058" x2="282.26105" y1="338.62445" x1="213.95642" gradientTransform="translate(983.36076,601.38885)" gradientUnits="userSpaceOnUse" id="linearGradient5855" xlink:href="#linearGradient5960" inkscape:collect="always"/>
+    <linearGradient y2="515.97058" x2="282.26105" y1="338.62445" x1="213.95642" gradientTransform="translate(-197.75174,-337.1451)" gradientUnits="userSpaceOnUse" id="linearGradient5855-8" xlink:href="#linearGradient5867" inkscape:collect="always"/>
+    <linearGradient y2="247.58188" x2="-702.75317" y1="102.74675" x1="-775.20807" gradientTransform="translate(983.36076,601.38885)" gradientUnits="userSpaceOnUse" id="linearGradient4544" xlink:href="#linearGradient5960" inkscape:collect="always"/>
+    <clipPath id="clipPath4501" clipPathUnits="userSpaceOnUse">
+      <circle r="241.06563" cy="686.09473" cx="335.13995" id="circle4503" style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#adadad;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"/>
+    </clipPath>
+    <clipPath id="clipPath5410" clipPathUnits="userSpaceOnUse">
+      <circle r="241.13741" cy="340.98975" cx="335.98114" id="circle5412" style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"/>
+    </clipPath>
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient5053" id="linearGradient5137" gradientUnits="userSpaceOnUse" gradientTransform="translate(864.55062,-2197.497)" x1="-584.19934" y1="782.33563" x2="-496.29703" y2="937.71399"/>
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient5053" id="linearGradient5147" gradientUnits="userSpaceOnUse" gradientTransform="translate(864.55062,-2197.497)" x1="-584.19934" y1="782.33563" x2="-496.29703" y2="937.71399"/>
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient5562" id="linearGradient5162" gradientUnits="userSpaceOnUse" gradientTransform="translate(70.505061,-1761.3076)" x1="200.59668" y1="351.41116" x2="290.08701" y2="506.18814"/>
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient5562" id="linearGradient5172" gradientUnits="userSpaceOnUse" gradientTransform="translate(70.505061,-1761.3076)" x1="200.59668" y1="351.41116" x2="290.08701" y2="506.18814"/>
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient5562" id="linearGradient5182" gradientUnits="userSpaceOnUse" gradientTransform="translate(70.505061,-1761.3076)" x1="200.59668" y1="351.41116" x2="290.08701" y2="506.18814"/>
+    <linearGradient y2="506.18814" x2="290.08701" y1="351.41116" x1="200.59668" gradientTransform="translate(70.505061,-1761.3076)" gradientUnits="userSpaceOnUse" id="linearGradient5201" xlink:href="#linearGradient5562" inkscape:collect="always"/>
+    <linearGradient y2="937.71399" x2="-496.29703" y1="782.33563" x1="-584.19934" gradientTransform="translate(864.55062,-2197.497)" gradientUnits="userSpaceOnUse" id="linearGradient5205" xlink:href="#linearGradient5053" inkscape:collect="always"/>
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient5562" id="linearGradient4328" gradientUnits="userSpaceOnUse" gradientTransform="translate(70.650339,-1055.1511)" x1="200.59668" y1="351.41116" x2="290.08701" y2="506.18814"/>
+    <linearGradient inkscape:collect="always" xlink:href="#linearGradient5053" id="linearGradient4330" gradientUnits="userSpaceOnUse" gradientTransform="translate(864.69589,-1491.3405)" x1="-584.19934" y1="782.33563" x2="-496.29703" y2="937.71399"/>
+  </defs>
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.98318225" inkscape:cx="113.58176" inkscape:cy="-45.193301" inkscape:document-units="px" inkscape:current-layer="layer3" showgrid="false" inkscape:window-width="2560" inkscape:window-height="1577" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:snap-global="true" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
+  <metadata id="metadata7">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g inkscape:groupmode="layer" id="layer7" inkscape:label="bg" style="display:none" transform="translate(-23.75651,-24.84972)">
+    <rect transform="translate(-132.5822,958.04022)" style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" id="rect5389" width="1543.4283" height="483.7439" x="132.5822" y="-957.77832"/>
+  </g>
+  <g inkscape:groupmode="layer" id="layer6" inkscape:label="logo-guide" style="display:none" transform="translate(-156.33871,933.1905)">
+    <rect y="-958.02759" x="132.65129" height="484.30399" width="550.41602" id="rect5379" style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#5c201e;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" inkscape:export-filename="/home/tim/dev/nix/homepage/logo/nix-wiki.png" inkscape:export-xdpi="22.07" inkscape:export-ydpi="22.07"/>
+    <rect style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#c24a46;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" id="rect5372" width="501.94415" height="434.30405" x="156.12303" y="-933.02759" inkscape:export-filename="/home/tim/dev/nix/homepage/logo/nixos-logo-only-hires-print.png" inkscape:export-xdpi="212.2" inkscape:export-ydpi="212.2"/>
+    <rect style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#d98d8a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" id="rect5381" width="24.939611" height="24.939611" x="658.02826" y="-958.04022"/>
+  </g>
+  <g inkscape:label="print-logo" inkscape:groupmode="layer" id="layer1" style="display:inline" transform="translate(-156.33871,933.1905)" sodipodi:insensitive="true">
+    <path style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#5277c3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" d="m 309.40365,-710.2521 122.19683,211.6751 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4902 -33.22946,-57.8256 z" id="path4861" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccc"/>
+    <path style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#7ebae4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" d="m 353.50926,-797.4433 -122.21756,211.6631 -28.53477,-48.37 32.93839,-56.6875 -65.41521,-0.1719 -13.9414,-24.1698 14.23637,-24.721 93.11177,0.2939 33.46371,-57.6903 z" id="use4863" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccc"/>
+    <path style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#7ebae4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" d="m 362.88537,-628.243 244.41439,0.012 -27.62229,48.8968 -65.56199,-0.1817 32.55876,56.7371 -13.96098,24.1585 -28.52722,0.032 -46.3013,-80.7841 -66.69317,-0.1353 z" id="use4865" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccc"/>
+    <path style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#7ebae4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" d="m 505.14318,-720.9886 -122.19683,-211.6751 56.15706,-0.5268 32.6236,56.8692 32.85645,-56.5653 27.90237,0.011 14.29086,24.6896 -46.81047,80.4902 33.22946,57.8256 z" id="use4867" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccc"/>
+    <path sodipodi:nodetypes="cccccccccc" inkscape:connector-curvature="0" id="path4873" d="m 309.40365,-710.2521 122.19683,211.6751 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4902 -33.22946,-57.8256 z" style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#5277c3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"/>
+    <path sodipodi:nodetypes="cccccccccc" inkscape:connector-curvature="0" id="use4875" d="m 451.3364,-803.53264 -244.4144,-0.012 27.62229,-48.89685 65.56199,0.18175 -32.55875,-56.73717 13.96097,-24.15851 28.52722,-0.0315 46.3013,80.78414 66.69317,0.13524 z" style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#5277c3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"/>
+    <path sodipodi:nodetypes="cccccccccc" inkscape:connector-curvature="0" id="use4877" d="m 460.87178,-633.8425 122.21757,-211.66304 28.53477,48.37003 -32.93839,56.68751 65.4152,0.1718 13.9414,24.1698 -14.23636,24.7211 -93.11177,-0.294 -33.46371,57.6904 z" style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#5277c3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"/>
+    <g id="layer2" inkscape:label="guides" style="display:none" transform="translate(72.039038,-1799.4476)">
+      <path d="M 460.60629,594.72881 209.74183,594.7288 84.309616,377.4738 209.74185,160.21882 l 250.86446,1e-5 125.43222,217.255 z" inkscape:randomized="0" inkscape:rounded="0" inkscape:flatsided="true" sodipodi:arg2="1.5707963" sodipodi:arg1="1.0471976" sodipodi:r2="217.25499" sodipodi:r1="250.86446" sodipodi:cy="377.47382" sodipodi:cx="335.17407" sodipodi:sides="6" id="path6032" style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.23600003;fill:#4e4d52;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" sodipodi:type="star"/>
+      <path transform="translate(0,-308.26772)" sodipodi:type="star" style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#4e4d52;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" id="path5875" sodipodi:sides="6" sodipodi:cx="335.17407" sodipodi:cy="685.74158" sodipodi:r1="100.83495" sodipodi:r2="87.32563" sodipodi:arg1="1.0471976" sodipodi:arg2="1.5707963" inkscape:flatsided="true" inkscape:rounded="0" inkscape:randomized="0" d="m 385.59154,773.06721 -100.83495,0 -50.41747,-87.32564 50.41748,-87.32563 100.83495,10e-6 50.41748,87.32563 z"/>
+      <path transform="translate(0,-308.26772)" sodipodi:nodetypes="ccccccccc" inkscape:connector-curvature="0" id="path5851" d="m 1216.5591,938.53395 123.0545,228.14035 -42.6807,-1.2616 -43.4823,-79.7725 -39.6506,80.3267 -32.6875,-19.7984 53.4737,-100.2848 -37.1157,-73.88955 z" style="fill:url(#linearGradient5855);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
+      <rect style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.41499999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#c53a3a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" id="rect5884" width="48.834862" height="226.22897" x="-34.74221" y="446.17056" transform="rotate(-30)"/>
+      <path transform="translate(0,-308.26772)" sodipodi:type="star" style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.50899999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" id="path3428" sodipodi:sides="6" sodipodi:cx="223.93674" sodipodi:cy="878.63831" sodipodi:r1="28.048939" sodipodi:r2="24.291094" sodipodi:arg1="0" sodipodi:arg2="0.52359878" inkscape:flatsided="true" inkscape:rounded="0" inkscape:randomized="0" d="m 251.98568,878.63831 -14.02447,24.29109 h -28.04894 l -14.02447,-24.29109 14.02447,-24.2911 h 28.04894 z"/>
+      <use x="0" y="0" xlink:href="#rect5884" id="use4252" transform="rotate(60,268.29786,489.4515)" width="100%" height="100%"/>
+      <rect style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:0.6507937;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" id="rect4254" width="5.3947482" height="115.12564" x="545.71014" y="467.07007" transform="rotate(30,575.23539,-154.13386)"/>
+    </g>
+  </g>
+  <g inkscape:groupmode="layer" id="layer3" inkscape:label="gradient-logo" style="display:inline;opacity:1" sodipodi:insensitive="true" transform="translate(-156.33871,933.1905)">
+    <path sodipodi:nodetypes="cccccccccc" inkscape:connector-curvature="0" id="path3336-6" d="m 309.54892,-710.38827 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8257 z" style="opacity:1;fill:url(#linearGradient4328);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
+    <use height="100%" width="100%" transform="rotate(60,407.11155,-715.78724)" id="use3439-6" inkscape:transform-center-y="151.59082" inkscape:transform-center-x="124.43045" xlink:href="#path3336-6" y="0" x="0"/>
+    <use height="100%" width="100%" transform="rotate(-60,407.31177,-715.70016)" id="use3445-0" inkscape:transform-center-y="75.573958" inkscape:transform-center-x="-168.20651" xlink:href="#path3336-6" y="0" x="0"/>
+    <use height="100%" width="100%" transform="rotate(180,407.41868,-715.7565)" id="use3449-5" inkscape:transform-center-y="-139.94592" inkscape:transform-center-x="59.669705" xlink:href="#path3336-6" y="0" x="0"/>
+    <path style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4330);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" d="m 309.54892,-710.38827 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8256 z" id="path4260-0" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccc"/>
+    <use height="100%" width="100%" transform="rotate(120,407.33916,-716.08356)" id="use4354-5" xlink:href="#path4260-0" y="0" x="0" style="display:inline"/>
+    <use height="100%" width="100%" transform="rotate(-120,407.28823,-715.86995)" id="use4362-2" xlink:href="#path4260-0" y="0" x="0" style="display:inline"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/python.svg b/public/icons/python.svg
new file mode 100644
index 0000000..cfbb36f
--- /dev/null
+++ b/public/icons/python.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<svg width="256px" height="255px" viewBox="0 0 256 255" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <linearGradient x1="12.9593594%" y1="12.0393928%" x2="79.6388325%" y2="78.2008538%" id="linearGradient-1">
+            <stop stop-color="#387EB8" offset="0%"></stop>
+            <stop stop-color="#366994" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="19.127525%" y1="20.5791813%" x2="90.7415328%" y2="88.4290372%" id="linearGradient-2">
+            <stop stop-color="#FFE052" offset="0%"></stop>
+            <stop stop-color="#FFC331" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+        <path d="M126.915866,0.0722755491 C62.0835831,0.0722801733 66.1321288,28.1874648 66.1321288,28.1874648 L66.2044043,57.3145115 L128.072276,57.3145115 L128.072276,66.0598532 L41.6307171,66.0598532 C41.6307171,66.0598532 0.144551098,61.3549438 0.144551098,126.771315 C0.144546474,192.187673 36.3546019,189.867871 36.3546019,189.867871 L57.9649915,189.867871 L57.9649915,159.51214 C57.9649915,159.51214 56.8001363,123.302089 93.5968379,123.302089 L154.95878,123.302089 C154.95878,123.302089 189.434218,123.859386 189.434218,89.9830604 L189.434218,33.9695088 C189.434218,33.9695041 194.668541,0.0722755491 126.915866,0.0722755491 L126.915866,0.0722755491 L126.915866,0.0722755491 Z M92.8018069,19.6589497 C98.9572068,19.6589452 103.932242,24.6339846 103.932242,30.7893845 C103.932246,36.9447844 98.9572068,41.9198193 92.8018069,41.9198193 C86.646407,41.9198239 81.6713721,36.9447844 81.6713721,30.7893845 C81.6713674,24.6339846 86.646407,19.6589497 92.8018069,19.6589497 L92.8018069,19.6589497 L92.8018069,19.6589497 Z" fill="url(#linearGradient-1)"></path>
+        <path d="M128.757101,254.126271 C193.589403,254.126271 189.540839,226.011081 189.540839,226.011081 L189.468564,196.884035 L127.600692,196.884035 L127.600692,188.138693 L214.042251,188.138693 C214.042251,188.138693 255.528417,192.843589 255.528417,127.427208 C255.52844,62.0108566 219.318366,64.3306589 219.318366,64.3306589 L197.707976,64.3306589 L197.707976,94.6863832 C197.707976,94.6863832 198.87285,130.896434 162.07613,130.896434 L100.714182,130.896434 C100.714182,130.896434 66.238745,130.339138 66.238745,164.215486 L66.238745,220.229038 C66.238745,220.229038 61.0044225,254.126271 128.757101,254.126271 L128.757101,254.126271 L128.757101,254.126271 Z M162.87116,234.539597 C156.715759,234.539597 151.740726,229.564564 151.740726,223.409162 C151.740726,217.253759 156.715759,212.278727 162.87116,212.278727 C169.026563,212.278727 174.001595,217.253759 174.001595,223.409162 C174.001618,229.564564 169.026563,234.539597 162.87116,234.539597 L162.87116,234.539597 L162.87116,234.539597 Z" fill="url(#linearGradient-2)"></path>
+    </g>
+</svg>
diff --git a/public/icons/react.svg b/public/icons/react.svg
new file mode 100644
index 0000000..00dbe11
--- /dev/null
+++ b/public/icons/react.svg
@@ -0,0 +1,4 @@
+<svg width="384" height="344" viewBox="0 0 384 344" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M192 201C211.882 201 228 184.882 228 165C228 145.118 211.882 129 192 129C172.118 129 156 145.118 156 165C156 184.882 172.118 201 192 201Z" fill="#61DAFB"/>
+<path d="M253.47 200.43C277.015 158.037 292.713 114.359 297.111 79.0015C301.508 43.644 294.246 19.5035 276.92 11.8896C259.594 4.27575 233.624 13.8121 204.723 38.4011C175.821 62.9901 146.354 100.618 122.804 143.008C99.2538 185.399 83.5486 229.08 79.1429 264.444C74.7372 299.809 81.9917 323.96 99.3109 331.586C116.63 339.212 142.595 329.687 171.496 305.108C200.396 280.529 229.865 242.908 253.42 200.52L253.47 200.43ZM130.58 200.52C154.135 242.908 183.604 280.529 212.504 305.108C241.405 329.687 267.37 339.212 284.689 331.586C302.008 323.96 309.263 299.809 304.857 264.444C300.451 229.08 284.746 185.399 261.196 143.008C237.646 100.618 208.179 62.9901 179.277 38.4011C150.376 13.8121 124.406 4.27575 107.08 11.8896C89.7544 19.5035 82.4916 43.644 86.8892 79.0015C91.2868 114.359 106.985 158.037 130.53 200.43L130.58 200.52ZM192.05 235.95C240.58 235.945 287.118 228.461 321.427 215.144C355.736 201.828 375.007 183.769 375 164.94C374.993 146.112 355.71 128.055 321.392 114.742C287.073 101.429 240.53 93.95 192 93.95C143.47 93.95 96.9267 101.429 62.6083 114.742C28.2899 128.055 9.00663 146.112 9 164.94C8.99337 183.769 28.2639 201.828 62.5729 215.144C96.882 228.461 143.42 235.945 191.95 235.95H192.05Z" stroke="#61DAFB" stroke-width="18"/>
+</svg>
diff --git a/public/icons/tailwind.svg b/public/icons/tailwind.svg
new file mode 100644
index 0000000..ce4361b
--- /dev/null
+++ b/public/icons/tailwind.svg
@@ -0,0 +1,10 @@
+<svg width="135" height="135" viewBox="0 0 135 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_20)">
+<path d="M67.5056 27C49.5056 27 38.2556 36 33.7556 54C40.5056 45 48.3806 41.625 57.3806 43.875C62.5162 45.1575 66.1837 48.8812 70.2506 53.01C76.8712 59.7262 84.5269 67.5 101.256 67.5C119.256 67.5 130.506 58.5 135.006 40.5C128.256 49.5 120.381 52.875 111.381 50.625C106.245 49.3425 102.578 45.6187 98.5106 41.49C91.8956 34.7737 84.24 27 67.5056 27ZM33.7556 67.5C15.7556 67.5 4.50562 76.5 0.00562286 94.5C6.75562 85.5 14.6306 82.125 23.6306 84.375C28.7662 85.6575 32.4337 89.3813 36.5006 93.51C43.1212 100.226 50.7769 108 67.5056 108C85.5056 108 96.7556 99 101.256 81C94.5056 90 86.6306 93.375 77.6306 91.125C72.495 89.8425 68.8275 86.1188 64.7606 81.99C58.1456 75.2738 50.49 67.5 33.7556 67.5Z" fill="#0EA5E9"/>
+</g>
+<defs>
+<clipPath id="clip0_19_20">
+<rect width="135" height="135" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/typescript.svg b/public/icons/typescript.svg
new file mode 100644
index 0000000..d55901a
--- /dev/null
+++ b/public/icons/typescript.svg
@@ -0,0 +1,10 @@
+<svg width="225" height="225" viewBox="0 0 225 225" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_18)">
+<path d="M0 112.5V225H225V0H0V112.5ZM181.308 103.528C187.024 104.955 191.377 107.522 195.405 111.656C197.459 113.85 200.531 117.879 200.791 118.87C200.862 119.166 191.088 125.719 185.154 129.382C184.936 129.53 184.057 128.616 183.101 127.181C180.211 122.97 177.166 121.141 172.519 120.811C165.705 120.368 161.311 123.926 161.346 129.895C161.311 131.358 161.641 132.827 162.295 134.107C163.8 137.222 166.62 139.085 175.331 142.861C191.447 149.78 198.33 154.357 202.612 160.84C207.408 168.089 208.47 179.663 205.249 188.304C201.663 197.641 192.797 204.012 180.345 206.1C176.498 206.796 167.344 206.684 163.202 205.917C154.16 204.307 145.589 199.835 140.316 193.978C138.227 191.707 134.198 185.737 134.459 185.337C134.571 185.189 135.485 184.605 136.512 184.015C137.538 183.424 141.307 181.23 144.865 179.177L151.348 175.409L152.705 177.42C154.61 180.309 158.745 184.268 161.241 185.583C168.42 189.394 178.27 188.845 183.143 184.486C185.119 182.841 186.223 180.309 186.075 177.75C186.075 175.148 185.745 173.981 184.388 172.034C182.63 169.545 179.079 167.421 168.933 163.027C157.324 158.006 152.304 154.934 147.769 149.991C144.914 146.728 142.791 142.889 141.581 138.748C140.737 135.562 140.52 127.575 141.18 124.39C143.564 113.147 152.058 105.349 164.25 103.043C168.209 102.277 177.434 102.565 181.315 103.521L181.308 103.528ZM128.503 112.943L128.573 122.133H99.2742V205.376H78.5461V122.133H49.2891V113.126C49.2891 108.105 49.4016 103.936 49.5422 103.823C49.6547 103.676 67.4508 103.605 89.0578 103.641L128.391 103.753L128.503 112.943Z" fill="#3178C6"/>
+</g>
+<defs>
+<clipPath id="clip0_19_18">
+<rect width="225" height="225" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9b73c05..3e65128 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,36 +1,85 @@
-import Gallery from "../components/Gallery";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Projects } from "@/data/projects";
+import { Tools } from "@/data/tools";
+import { Github, Linkedin, Mail } from "lucide-react";
 
 export default function Home() {
   return (
     <>
-      <title>߸ hi</title>
-      <h1>Hi, <span className="text-blue-500 dark:text-purple-500">I'm Leander.</span></h1>
+      <title>Hi, I'm Leander</title>
+      <main className="container mx-auto py-12">
+        <div className="relative flex justify-center items-center pt-24">
+          {/* Gradient Blob */}
+          <div
+            aria-hidden="true"
+            className="absolute left-1/2 -translate-x-1/2 w-[32rem] h-[32rem] bg-gradient-to-tr from-blue-400 via-purple-300 to-pink-300 opacity-60 blur-3xl rounded-full z-0 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400 dark:opacity-30"
+            style={{ pointerEvents: 'none' }}
+          />
+          <section className="text-center relative z-10">
+            <h1 className="text-4xl font-bold mb-4">
+              Hi, <span className="text-blue-500 dark:text-purple-500">I'm Leander.</span>
+            </h1>
+            <p className="text-lg max-w-2xl mx-auto">
+              Passionate about hardware & software, pursuing computer science studies. Currently building 3D-printing projects and exploring homelabing.
+            </p>
+            <div className="flex justify-center gap-4">
+              <Button asChild className="mt-4"><a href="https://github.com/schererleander" target="_blank" rel="noopener noreferrer"><Github /> Github</a></Button>
+              <Button asChild className="mt-4 bg-blue-500 dark:bg-purple-500"><a href="mailto:leander@schererleander.de" target="_blank" rel="noopener noreferrer"><Mail /> Mail</a></Button>
+            </div>
+          </section>
+        </div>
+        <section className="mt-12">
+          <h2 className="text-2xl font-semibold mb-4">Interests</h2>
+          <ul className="list-disc pl-6 space-y-2">
+            <li>*nix systems</li>
+            <li>3D printing</li>
+            <li>Homelab & self-hosting</li>
+          </ul>
+        </section>
 
-      <p className="leading-relaxed mb-6">
-        I have a passion for hardware and software, studying computer science. Currently building own 3d printing projects and learning nix.
-      </p>
+        <section className="mt-12">
+          <h2 className="text-2xl font-semibold mb-6">Tools & Technologies</h2>
+          <div className="grid grid-cols-2 gap-6">
+            {Tools.map((tool) => (
+              <Card className="bg-secondary border border-border py-2">
+                <div className="flex items-center px-4 py-2">
+                  <div className={`p-2 rounded-sm ${tool.color}`}>
+                    <img src={tool.image} alt={tool.name} className="w-6 h-6" />
+                  </div>
+                  <div className="ml-4">
+                    <CardTitle>{tool.name}</CardTitle>
+                    <CardDescription>{tool.description}</CardDescription>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </section>
 
-      <Gallery
-        images={[
-          { src: "/images/3ds.webp", alt: "Nintendo 3DS", id: 1 },
-          { src: "/images/esp32.webp", alt: "ESP 32", id: 2 },
-          { src: "/images/rice.webp", alt: "Linux rice", id: 3 },
-          { src: "/images/setup.webp", alt: "Setup", id: 4 },
-          { src: "/images/luigimansion.webp", alt: "Luigi Mansion", id: 5 },
-          { src: "/images/ocarinaoftime.webp", alt: "Ocarina of Time", id: 6 },
-          { src: "/images/hellsparadise.webp", alt: "Hells paradise", id: 7 }
-        ]}
-      />
-
-      <p className="mb-4">A few things I'm interrested in:</p>
-
-      <ul className="list-disc pl-6 space-y-1">
-        <li>Digital minimalism</li>
-        <li>*nix systems</li>
-        <li>3D printing</li>
-        <li>Homelab / self-hosting</li>
-        <li>Seinen manga</li>
-      </ul>
+        <section className="mt-12">
+          <h2 className="text-2xl font-semibold mb-6">Projects</h2>
+          <div className="grid grid-cols-2 gap-6">
+            {Projects.map((project) => (
+              <a href={project.link} target="_blank" rel="noopener noreferrer">
+                <Card className="bg-secondary border border-border py-2">
+                  <CardContent>
+                    <img src={project.image} alt={project.name} className="w-64 h-64 rounded-lg mb-4 object-contain mx-auto" />
+                    <CardTitle>{project.name}</CardTitle>
+                    <CardDescription>{project.description}</CardDescription>
+                    <div className="flex flex-wrap gap-2 my-4">
+                      {project.badges.map((badge) => (
+                        <Badge  key={badge}>{badge}</Badge>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              </a>
+            ))}
+          </div>
+        </section>
+      </main>
     </>
   );
 }
-- 
cgit v1.3.1