Initial portfolio commit (Next.js + Docker + Gitea integration)

2026-02-25 11:38:31 +01:00
commit 5b7fe3545e
40 changed files with 8919 additions and 0 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,106 @@
+@import "tailwindcss";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ------------------------------------------------ */
+/* Base Typography & Rendering Improvements        */
+/* ------------------------------------------------ */
+
+html {
+  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html, body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+/* ------------------------------------------------ */
+/* Liquid Glass System                             */
+/* ------------------------------------------------ */
+
+.glass {
+  background: rgba(255, 255, 255, 0.62);
+  backdrop-filter: blur(22px) saturate(1.35);
+  -webkit-backdrop-filter: blur(22px) saturate(1.35);
+  border: 1px solid rgba(0, 0, 0, 0.07);
+  box-shadow:
+    0 22px 70px rgba(0, 0, 0, 0.08),
+    0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+.glass-strong {
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(26px) saturate(1.45);
+  -webkit-backdrop-filter: blur(26px) saturate(1.45);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow:
+    0 28px 90px rgba(0, 0, 0, 0.10),
+    0 3px 16px rgba(0, 0, 0, 0.05);
+}
+
+
+/* ------------------------------------------------ */
+/* Specular Highlight Overlay (Apple-like sheen)   */
+/* ------------------------------------------------ */
+
+.specular {
+  position: relative;
+  overflow: hidden;
+}
+
+.specular::before {
+  content: "";
+  position: absolute;
+  inset: -40%;
+  background: radial-gradient(
+    circle at 30% 20%,
+    rgba(255, 255, 255, 0.65),
+    rgba(255, 255, 255, 0.00) 55%
+  );
+  transform: rotate(-8deg);
+  pointer-events: none;
+}
+
+.specular::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.18),
+    rgba(255, 255, 255, 0.00) 30%,
+    rgba(0, 0, 0, 0.02)
+  );
+  pointer-events: none;
+}
+
+/* Hide scrollbars for gallery */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+
+/* ------------------------------------------------ */
+/* Optional Subtle Noise Layer (if used)           */
+/* ------------------------------------------------ */
+
+.noise-overlay {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  opacity: 0.06;
+  mix-blend-mode: soft-light;
+  background-image: url("/noise.png");
+}