diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..aa80668 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +public/videos/** filter=lfs diff=lfs merge=lfs -text +source-videos/** filter=lfs diff=lfs merge=lfs -text diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..da5d8a7 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,49 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Next.js: debug server-side", + "type": "node-terminal", + "request": "launch", + "command": "npm run dev" + }, + { + "name": "Next.js: debug client-side", + "type": "chrome", + "request": "launch", + "url": "http://localhost:3000" + }, + { + "name": "Next.js: debug client-side (Firefox)", + "type": "firefox", + "request": "launch", + "url": "http://localhost:3000", + "reAttach": true, + "pathMappings": [ + { + "url": "webpack://_N_E", + "path": "${workspaceFolder}" + } + ] + }, + { + "name": "Next.js: debug full stack", + "type": "node", + "request": "launch", + "program": "${workspaceFolder}/node_modules/.bin/next", + "runtimeArgs": [ + "--inspect" + ], + "skipFiles": [ + "/**" + ], + "serverReadyAction": { + "action": "debugWithEdge", + "killOnServerStop": true, + "pattern": "- Local:.+(https?://.+)", + "uriFormat": "%s", + "webRoot": "${workspaceFolder}" + } + } + ] +} diff --git a/public/cebula.mp4 b/public/cebula.mp4 deleted file mode 100644 index c173301..0000000 Binary files a/public/cebula.mp4 and /dev/null differ diff --git a/public/site.webmanifest b/public/site.webmanifest index ccf313a..a7b5140 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -1,6 +1,6 @@ { - "name": "MyWebSite", - "short_name": "MySite", + "name": "CebulaCamp", + "short_name": "Cebula", "icons": [ { "src": "/web-app-manifest-192x192.png", @@ -18,4 +18,4 @@ "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" -} \ No newline at end of file +} diff --git a/public/videos/ceboola_gradient-white_full.mp4 b/public/videos/ceboola_gradient-white_full.mp4 new file mode 100644 index 0000000..6503aaa --- /dev/null +++ b/public/videos/ceboola_gradient-white_full.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:479a8309ab997cca4e5477ecdd84dc395e7fd6d6e23d9b78570488a41cf5d37e +size 5022115 diff --git a/public/videos/ceboola_gradient-white_full.ogv b/public/videos/ceboola_gradient-white_full.ogv new file mode 100644 index 0000000..8a15fb5 --- /dev/null +++ b/public/videos/ceboola_gradient-white_full.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8a1c85cb4dff3eca79cbb95fe2c7b3f80bebcdd32889c119b142d39ddd75da09 +size 9189084 diff --git a/public/videos/ceboola_gradient-white_full.webm b/public/videos/ceboola_gradient-white_full.webm new file mode 100644 index 0000000..211a16d --- /dev/null +++ b/public/videos/ceboola_gradient-white_full.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4201a4c07a9c9fdc6f61d8b5c3a07c1248c91fb6748cf376e0b8c9c27d6d8bad +size 6109118 diff --git a/public/videos/ceboola_gradient-white_hd.mp4 b/public/videos/ceboola_gradient-white_hd.mp4 new file mode 100644 index 0000000..651936d --- /dev/null +++ b/public/videos/ceboola_gradient-white_hd.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3841ba73db15e09bf381c5689e092a928154801da49ae2cbab8d20c578e6e95c +size 1620217 diff --git a/public/videos/ceboola_gradient-white_hd.ogv b/public/videos/ceboola_gradient-white_hd.ogv new file mode 100644 index 0000000..2854b4f --- /dev/null +++ b/public/videos/ceboola_gradient-white_hd.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d03739f3a7caf8cbf7558840177b1175f42b2a4e16c678effe2cf1cea535be87 +size 2897517 diff --git a/public/videos/ceboola_gradient-white_hd.webm b/public/videos/ceboola_gradient-white_hd.webm new file mode 100644 index 0000000..4b32c32 --- /dev/null +++ b/public/videos/ceboola_gradient-white_hd.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:dedca04858532761e97383c2ed6f565d16c52796cfaf1a06cc5471842259de63 +size 3948462 diff --git a/public/videos/ceboola_gradient-white_mobile.mp4 b/public/videos/ceboola_gradient-white_mobile.mp4 new file mode 100644 index 0000000..ca87e55 --- /dev/null +++ b/public/videos/ceboola_gradient-white_mobile.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:41bb4a8b49d9f39f1ee99bd96ff842c17a5e52618dca0eb6a7dad6cd491e3123 +size 529587 diff --git a/public/videos/ceboola_gradient-white_mobile.ogv b/public/videos/ceboola_gradient-white_mobile.ogv new file mode 100644 index 0000000..c190904 --- /dev/null +++ b/public/videos/ceboola_gradient-white_mobile.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c93e049801dae95c6acc5e4c7e1bb500d573ee8674c67e1489209d5d5d4fc7a3 +size 778943 diff --git a/public/videos/ceboola_gradient-white_mobile.webm b/public/videos/ceboola_gradient-white_mobile.webm new file mode 100644 index 0000000..da08ee4 --- /dev/null +++ b/public/videos/ceboola_gradient-white_mobile.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:594467d8b430b5f6592d847e60d70637aa831b1d18af52b6e82f97e4adf1e627 +size 1303023 diff --git a/public/videos/ceboola_gradient-white_tablet.mp4 b/public/videos/ceboola_gradient-white_tablet.mp4 new file mode 100644 index 0000000..9ab3792 --- /dev/null +++ b/public/videos/ceboola_gradient-white_tablet.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d45969de9228546db71657a0f525776a98d6626042ea495b3f0a402ca705883a +size 955082 diff --git a/public/videos/ceboola_gradient-white_tablet.ogv b/public/videos/ceboola_gradient-white_tablet.ogv new file mode 100644 index 0000000..e909da4 --- /dev/null +++ b/public/videos/ceboola_gradient-white_tablet.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:39de321bbb46e127b633cce09c2c20ab0b1e03dfdd77d943540cf6c63fa880d1 +size 1662519 diff --git a/public/videos/ceboola_gradient-white_tablet.webm b/public/videos/ceboola_gradient-white_tablet.webm new file mode 100644 index 0000000..6f0f065 --- /dev/null +++ b/public/videos/ceboola_gradient-white_tablet.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b6100d1d560239abe7d3f2297cceb71b6c22e1fbee9cee2a96985917af9d3b1d +size 2504705 diff --git a/public/videos/ceboola_gradient-white_twok.mp4 b/public/videos/ceboola_gradient-white_twok.mp4 new file mode 100644 index 0000000..dd08510 --- /dev/null +++ b/public/videos/ceboola_gradient-white_twok.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:95399dd7af78b5bde8ceacd257fcc64330b12441cb6efc342fdeeaac7122680f +size 2281572 diff --git a/public/videos/ceboola_gradient-white_twok.ogv b/public/videos/ceboola_gradient-white_twok.ogv new file mode 100644 index 0000000..478ce3d --- /dev/null +++ b/public/videos/ceboola_gradient-white_twok.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7a724c928b48bf3e9808024f30a940333b5c1b724c275b13e377d40de782e95f +size 4052558 diff --git a/public/videos/ceboola_gradient-white_twok.webm b/public/videos/ceboola_gradient-white_twok.webm new file mode 100644 index 0000000..94b97eb --- /dev/null +++ b/public/videos/ceboola_gradient-white_twok.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:534c063ba32369280ddcc6a4c15fb1fa4a4e08e5c6290eede4fcfcbcc9443c60 +size 5371507 diff --git a/public/videos/ceboola_gradient-white_uhd.mp4 b/public/videos/ceboola_gradient-white_uhd.mp4 new file mode 100644 index 0000000..39f5884 --- /dev/null +++ b/public/videos/ceboola_gradient-white_uhd.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1aca4fc690f091ade1bdc18660fd6da217dd59b063fd496dd0c1e1d088535893 +size 3508343 diff --git a/public/videos/ceboola_gradient-white_uhd.ogv b/public/videos/ceboola_gradient-white_uhd.ogv new file mode 100644 index 0000000..e6359e8 --- /dev/null +++ b/public/videos/ceboola_gradient-white_uhd.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9ed19ad6c726f9c9b98d1fb9126292f677f3b302bc9f5eb5d615ed40f91990f2 +size 6294757 diff --git a/public/videos/ceboola_gradient-white_uhd.webm b/public/videos/ceboola_gradient-white_uhd.webm new file mode 100644 index 0000000..0f9e3a7 --- /dev/null +++ b/public/videos/ceboola_gradient-white_uhd.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:dca3c7e593b5b4c3b45589b51cbc4795335f6bc14a0e0824e370c6caabb6bb32 +size 8735047 diff --git a/public/videos/ceboola_gradient_full.mp4 b/public/videos/ceboola_gradient_full.mp4 new file mode 100644 index 0000000..97f99d1 --- /dev/null +++ b/public/videos/ceboola_gradient_full.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e8f0f8e22dcb9e6e1203a9756b09bb50fab8b3e008e38c298820ffc89d9c7ded +size 6730944 diff --git a/public/videos/ceboola_gradient_full.ogv b/public/videos/ceboola_gradient_full.ogv new file mode 100644 index 0000000..3783220 --- /dev/null +++ b/public/videos/ceboola_gradient_full.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6f4a1bcf80c7f4699fc936eaa6c5c4c73a0beee88a319fda4a77e26a8b335994 +size 10679791 diff --git a/public/videos/ceboola_gradient_full.webm b/public/videos/ceboola_gradient_full.webm new file mode 100644 index 0000000..243f95f --- /dev/null +++ b/public/videos/ceboola_gradient_full.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:35f83e8e7337972274f11ccab6586c0543f18bc6a5d90671cb607e6b1e15f0a3 +size 7132836 diff --git a/public/videos/ceboola_gradient_hd.mp4 b/public/videos/ceboola_gradient_hd.mp4 new file mode 100644 index 0000000..9ac8098 --- /dev/null +++ b/public/videos/ceboola_gradient_hd.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c0cdf3b3f81019906571943592816b075ca270e9036e31f3a7757d0a8db1518b +size 1895875 diff --git a/public/videos/ceboola_gradient_hd.ogv b/public/videos/ceboola_gradient_hd.ogv new file mode 100644 index 0000000..c74244e --- /dev/null +++ b/public/videos/ceboola_gradient_hd.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:55d20107b226d5d0a23ad9f64d09badc59ca6d6ac2adc175717a1c40a96a8ca6 +size 3501934 diff --git a/public/videos/ceboola_gradient_hd.webm b/public/videos/ceboola_gradient_hd.webm new file mode 100644 index 0000000..71c6892 --- /dev/null +++ b/public/videos/ceboola_gradient_hd.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7f8ea6ce3cda2497a67b7492a7dd108b2710c79d7e390b19e21681d304636b6f +size 4671344 diff --git a/public/videos/ceboola_gradient_mobile.mp4 b/public/videos/ceboola_gradient_mobile.mp4 new file mode 100644 index 0000000..77e7fa8 --- /dev/null +++ b/public/videos/ceboola_gradient_mobile.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e92a3b05a291e3aa4a03c2b447f2f75c8f904a90df05e14f3e047621ed96a61b +size 642730 diff --git a/public/videos/ceboola_gradient_mobile.ogv b/public/videos/ceboola_gradient_mobile.ogv new file mode 100644 index 0000000..7b24f00 --- /dev/null +++ b/public/videos/ceboola_gradient_mobile.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e56dff36efb5cc2335b49cc80c3e83e2710df728619a2024bca28de6e1aed03c +size 1164951 diff --git a/public/videos/ceboola_gradient_mobile.webm b/public/videos/ceboola_gradient_mobile.webm new file mode 100644 index 0000000..8847319 --- /dev/null +++ b/public/videos/ceboola_gradient_mobile.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f60c400bb8191ab92fc901141b520b303288214a7e09ba06de83e3f177fdb985 +size 1640616 diff --git a/public/videos/ceboola_gradient_tablet.mp4 b/public/videos/ceboola_gradient_tablet.mp4 new file mode 100644 index 0000000..149b152 --- /dev/null +++ b/public/videos/ceboola_gradient_tablet.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:199994c470ac7c33e23f8075237504d151c764c328d60e7d2ac136ccc6bcf8c5 +size 1108068 diff --git a/public/videos/ceboola_gradient_tablet.ogv b/public/videos/ceboola_gradient_tablet.ogv new file mode 100644 index 0000000..56c3ca6 --- /dev/null +++ b/public/videos/ceboola_gradient_tablet.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:921fa69c1f540fae2cd1a1167a3fd24ea2ef28c76340c7545c0602e9addcb836 +size 2222202 diff --git a/public/videos/ceboola_gradient_tablet.webm b/public/videos/ceboola_gradient_tablet.webm new file mode 100644 index 0000000..0817638 --- /dev/null +++ b/public/videos/ceboola_gradient_tablet.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a7b4b30ca6b39d7067071c0292b14511cc03c0dc7ba965a6c8d5b2974c5300e0 +size 3053914 diff --git a/public/videos/ceboola_gradient_twok.mp4 b/public/videos/ceboola_gradient_twok.mp4 new file mode 100644 index 0000000..028ee02 --- /dev/null +++ b/public/videos/ceboola_gradient_twok.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ca8bcb198aaadafd0803aee7f2bea342564fe65b8481f2f86cb2795d32ffbb2d +size 2768834 diff --git a/public/videos/ceboola_gradient_twok.ogv b/public/videos/ceboola_gradient_twok.ogv new file mode 100644 index 0000000..091bcb4 --- /dev/null +++ b/public/videos/ceboola_gradient_twok.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:37505e8c804a31db01cd9835e4ed299ac774908bcc0d1516bfda44c1b20af6a5 +size 4758195 diff --git a/public/videos/ceboola_gradient_twok.webm b/public/videos/ceboola_gradient_twok.webm new file mode 100644 index 0000000..45a213c --- /dev/null +++ b/public/videos/ceboola_gradient_twok.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:85f65f4b51124e236d26ec74d966ab2cf22632d70588abbb361970433b043730 +size 6293353 diff --git a/public/videos/ceboola_gradient_uhd.mp4 b/public/videos/ceboola_gradient_uhd.mp4 new file mode 100644 index 0000000..3b88127 --- /dev/null +++ b/public/videos/ceboola_gradient_uhd.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:58320ba955d6704177abeb9945a526bbf37b67428e2b39f2c8e062d3eff710d7 +size 4496739 diff --git a/public/videos/ceboola_gradient_uhd.ogv b/public/videos/ceboola_gradient_uhd.ogv new file mode 100644 index 0000000..0c46f16 --- /dev/null +++ b/public/videos/ceboola_gradient_uhd.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:89a868e76fb1a5aa0cd4efdba9f5cf5427a4d2037933458ff118a7eb9c60b1a8 +size 7344573 diff --git a/public/videos/ceboola_gradient_uhd.webm b/public/videos/ceboola_gradient_uhd.webm new file mode 100644 index 0000000..24e9a33 --- /dev/null +++ b/public/videos/ceboola_gradient_uhd.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6a41c44366e885f06c22eaa0cad18508d1b566d75d9d05108c85c9a54e832533 +size 10330832 diff --git a/scripts/reencode-videos.sh b/scripts/reencode-videos.sh new file mode 100755 index 0000000..24d6da2 --- /dev/null +++ b/scripts/reencode-videos.sh @@ -0,0 +1,94 @@ +#!/bin/bash + +# Define directories +SOURCE_DIR="./source-videos" +DEST_DIR="./public/videos" + +# Define sizes and names +SIZES=(480 720 1080 1440 2160) +NAMES=("mobile" "tablet" "hd" "twok" "uhd") + +# Create destination directory if it doesn't exist +mkdir -p "$DEST_DIR" + +for video in "$SOURCE_DIR"/*.mkv; do + if [ -f "$video" ]; then + filename=$(basename "$video" .mkv) + echo "Processing: $filename" + + # Get video dimensions + width=$(ffprobe -v error -select_streams v:0 -show_entries stream=width -of csv=p=0 "$video") + height=$(ffprobe -v error -select_streams v:0 -show_entries stream=height -of csv=p=0 "$video") + + # Process each size + for i in "${!SIZES[@]}"; do + size="${SIZES[$i]}" + name="${NAMES[$i]}" + + echo "Debug: Processing $name with height=$size" + + if [ "$size" -le "$height" ]; then + echo "Processing size $name (${size}p)" + # MP4 + ffmpeg -n -i "$video" \ + -c:v libx264 \ + -vf "scale=-1:${size}" \ + -preset slow \ + -crf 23 \ + -an \ + "${DEST_DIR}/${filename}_${name}.mp4" + + # WebM + ffmpeg -n -i "$video" \ + -c:v libvpx-vp9 \ + -deadline good \ + -cpu-used 2 \ + -row-mt 1 \ + -threads 8 \ + -vf "scale=-1:${size}" \ + -quality good \ + -an \ + -crf 20 \ + "${DEST_DIR}/${filename}_${name}.webm" + + # Ogg + ffmpeg -n -i "$video" \ + -c:v libtheora \ + -q:v 5 \ + -vf "scale=-1:${size}" \ + -an \ + "${DEST_DIR}/${filename}_${name}.ogv" + fi + done + + # Create original resolution version + echo "Creating original resolution version" + + ffmpeg -n -i "$video" \ + -c:v libx264 \ + -preset slow \ + -an \ + "${DEST_DIR}/${filename}_full.mp4" + + ffmpeg -n -i "$video" \ + -c:v libvpx-vp9 \ + -deadline good \ + -cpu-used 2 \ + -row-mt 1 \ + -threads 8 \ + -quality good \ + -an \ + "${DEST_DIR}/${filename}_full.webm" + + ffmpeg -n -i "$video" \ + -c:v libtheora \ + -q:v 5 \ + -an \ + "${DEST_DIR}/${filename}_full.ogv" + + echo "Completed processing: $filename" + echo "----------------------------" + fi +done + +echo "All videos have been processed." diff --git a/source-videos/ceboola_gradient-white.mkv b/source-videos/ceboola_gradient-white.mkv new file mode 100755 index 0000000..660b8e6 Binary files /dev/null and b/source-videos/ceboola_gradient-white.mkv differ diff --git a/source-videos/ceboola_gradient.mkv b/source-videos/ceboola_gradient.mkv new file mode 100755 index 0000000..bd2c258 Binary files /dev/null and b/source-videos/ceboola_gradient.mkv differ diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 8d002bd..333c093 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -2,10 +2,12 @@ import "../../globals.css"; import type React from "react"; -import { Lang, locales } from "@/i18n/locales"; +import { getLocale, Lang } from "@/i18n/locales"; import Head from 'next/head'; +import { ThemeProvider } from "@/components/providers"; import { Oxanium } from "next/font/google"; +import { headers } from "next/headers"; const oxanium = Oxanium({ subsets: ["latin-ext"] }) @@ -16,20 +18,34 @@ export default async function RootLayout({ children: React.ReactNode params: Promise<{ locale: Lang }> }) { - const { locale } = await params - const currentLang = locales.includes(locale) ? locale : "en" + const [{ locale }, head] = await Promise.all([ + params, + headers(), + ]); + + const preferedTheme = head.get("Sec-CH-Prefers-Color-Scheme")?.toLowerCase(); + const supportedThemes = ["dark", "light"]; + + const isDarkOrLight = + preferedTheme && supportedThemes.includes(preferedTheme); + + const currentLang = getLocale(locale); + const defaultTheme = isDarkOrLight ? preferedTheme : "dark"; + return ( - + - + - {children} + + {children} + ) diff --git a/src/app/[locale]/loading.tsx b/src/app/[locale]/loading.tsx new file mode 100644 index 0000000..558db1e --- /dev/null +++ b/src/app/[locale]/loading.tsx @@ -0,0 +1,4 @@ + +export default function Loading() { + return
Loading...
+} diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx new file mode 100644 index 0000000..c363b3b --- /dev/null +++ b/src/app/[locale]/not-found.tsx @@ -0,0 +1,5 @@ + + +export default function NotFound() { + return
Not Found
+} diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index 9270e39..b711c17 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -1,130 +1,17 @@ -"use client" - -import { Nav } from "@/components/nav" -import { translations } from "@/i18n/translations" -import { useEffect, useRef } from "react" +import LandingPage from "@/components/landing-page"; +import { getLocale, Lang } from "@/i18n/locales"; +import { translations } from "@/i18n/translations"; -export default function Home() { - const videoRef = useRef(null) - const t = translations.pl // For now using Polish, could be made dynamic +export default async function Home( + { params } + : + { params: Promise<{ locale: Lang }> } +) { + const { locale } = await params + const currentLocale = getLocale(locale) + const t = translations[currentLocale]; - - useEffect(() => { - const handleScroll = () => { - if (videoRef.current) { - const scrolled = window.scrollY; - videoRef.current.style.willChange = "transform"; - videoRef.current.style.transform = `translateY(${scrolled * 0.5}px)`; - videoRef.current.style.willChange = "unset"; - } - }; - - const throttledHandleScroll = () => { - requestAnimationFrame(handleScroll); - }; - - window.addEventListener('scroll', throttledHandleScroll); - return () => window.removeEventListener('scroll', throttledHandleScroll); - }, []); - - return ( -
-
- ) + return } diff --git a/src/components/landing-page.tsx b/src/components/landing-page.tsx new file mode 100644 index 0000000..0ab37bd --- /dev/null +++ b/src/components/landing-page.tsx @@ -0,0 +1,173 @@ +"use client" + +import { Nav } from "@/components/nav"; +import { Translations } from "@/i18n/translations"; +import { cn } from "@/lib/utils"; +import { ReactElement, useEffect, useRef } from "react"; +import { useTheme } from "./providers"; + +function Section({ + id, + title, + paragraphs +}: { + id: string + title: string; + paragraphs: ReactElement; +}) { + return (
+
+

{title}

+
+ {paragraphs} +
+
+
) +} + +function getSource({ + src, + type +}: { + src: string; + type: 'mp4' | 'webm' | 'ogv' +}) { + const sourceType = `video/${type}` + return [ + , + + , + + , + + , + + , + + , + ]; +} + +function Video({ sourceBase, hidden }: { + sourceBase: string; + hidden: boolean; +}) { + const videoRef = useRef(null); + + useEffect(() => { + const handleScroll = () => { + if (!videoRef.current || hidden) return; + + videoRef.current.play(); + const scrolled = window.scrollY; + videoRef.current.style.willChange = "transform"; + videoRef.current.style.transform = `translateY(${scrolled * 0.5}px)`; + videoRef.current.style.willChange = "unset"; + }; + + const throttledHandleScroll = () => { + requestAnimationFrame(handleScroll); + }; + + window.addEventListener("scroll", throttledHandleScroll); + handleScroll(); + return () => window.removeEventListener("scroll", throttledHandleScroll); + }, [hidden]); + + const sources = [...getSource({ src: sourceBase, type: 'mp4' }), ...getSource({ src: sourceBase, type: 'ogv' }), ...getSource({ src: sourceBase, type: 'webm' })] + + return ( + + ); +} + +export default function LandingPage( + { t }: { t: Translations } +) { + + const { theme } = useTheme() + + return ( +
+
+ ) +} + diff --git a/src/components/nav.tsx b/src/components/nav.tsx index 5f8b574..364f5ef 100644 --- a/src/components/nav.tsx +++ b/src/components/nav.tsx @@ -3,10 +3,12 @@ import { Button } from "@/components/ui/button" import { Sections, type translations } from "@/i18n/translations" import { cn } from "@/lib/utils" import { MoonIcon, SunIcon } from "lucide-react" -import { useCallback, useEffect, useState } from "react" +import { useEffect, useState } from "react" import { MobileNav } from "./mobile-nav" +import { useTheme } from "./providers" const linksOrder: Array = [ + "hero", "about", "where", "when", @@ -16,41 +18,12 @@ const linksOrder: Array = [ "contact", ] -function useTheme(): [theme: "light" | "dark", setTheme: (theme: "light" | "dark") => void] { - /* eslint-disable react-hooks/rules-of-hooks */ - if (typeof window === "undefined") return ["dark", () => { }] - const [theme, setTheme] = useState<"light" | "dark">("dark") - - const root = window.document.documentElement - - const changeTheme = useCallback((theme: "light" | "dark") => { - root.classList.remove("light", "dark") - root.classList.add(theme) - }, [root]) - - useEffect(() => { - // Determine the user's preferred color scheme - const preferredTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" - setTheme(preferredTheme) - - changeTheme(preferredTheme) - }, [changeTheme]) - - const updateTheme = useCallback((theme: "light" | "dark") => { - setTheme(theme) - changeTheme(theme) - }, [changeTheme, setTheme]) - - return [theme, updateTheme] - /* eslint-enable react-hooks/rules-of-hooks */ -} - export function Nav({ t, }: { t: typeof translations.pl }) { - const [theme, setTheme] = useTheme() + const { theme, setTheme } = useTheme() const [activeSection, setActiveSection] = useState("about") @@ -90,7 +63,7 @@ export function Nav({ }, []); return ( -