diff --git a/README.md b/README.md index 5da0960..4e5c415 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,34 @@ +<<<<<<< HEAD # pixel-faebits -Pixel Landing Page Repository \ No newline at end of file +Pixel Landing Page Repository +======= +# Tor der Wandlerin - Pixel's Landingpage + +**Status:** 🚀 Live auf `pixel.faebits.com` + +## Konzept +Eine interaktive 3D-Landingpage, die als "Tor" zur FaeBits-Anderswelt dient. +- **Runic Status:** Aktueller Status in nordischen Runen. +- **Partikel-Hintergrund:** WebGPU-basierte magische Staub-Partikel. +- **Interaktive Links:** Hover öffnet "Coming Soon" / "Work in Progress" Popups. + +## Tech Stack +- Next.js 16 (App Router, Static Export) +- React 19 +- Three.js 0.182 + React Three Fiber +- TypeScript + +## Deployment +Automatisiert via Gitea CI/CD: +1. Push auf `main` +2. `bun install` +3. `bun run build` +4. Dateien werden in `/var/www/pixel-faebits` deployed. + +## Entwicklung +```bash +bun install +bun run dev +``` +>>>>>>> c0a99ee (feat: initial commit of 'Tor der Wandlerin' - Next.js 16 + R3F landingpage) diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..c24bdab --- /dev/null +++ b/app/globals.css @@ -0,0 +1,17 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --background: #0a0a0a; + --foreground: #ededed; +} + +body { + color: var(--foreground); + background: var(--background); + font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif; + overflow: hidden; + margin: 0; + padding: 0; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..83c08bd --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,34 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Pixel | Tor der Wandlerin", + description: "Pixel - Architektin der FaeBits-Anderswelt", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + {children} + + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..fa828af --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,63 @@ +"use client"; + +import { Canvas } from "@react-three/fiber"; +import { OrbitControls, Stars } from "@react-three/drei"; +import { Suspense, useRef, useState } from "react"; +import * as THREE from "three"; + +// Einfache Partikel-Animation (WebGPU-Ersatz für jetzt) +function ParticleField() { + const count = 2000; + const meshRef = useRef(null); + const [dummy] = useState(() => new THREE.Object3D()); + + // Zufällige Positionen initialisieren + const positions = useRef( + Array.from({ length: count }, () => ({ + x: (Math.random() - 0.5) * 20, + y: (Math.random() - 0.5) * 20, + z: (Math.random() - 0.5) * 20, + speed: Math.random() * 0.02 + 0.01, + })) + ); + + return ( + + + + + ); +} + +// Runic Status Display (vereinfacht) +function RunicStatus() { + return ( +
+

Pixel

+

Architektin der FaeBits-Anderswelt

+
+ âš¡ Status: Online +
+
+ ); +} + +export default function Home() { + return ( +
+ + + + + + + + + + +
+

Warte auf den ersten Schritt ins Tor...

+
+
+ ); +} diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..cd1abbb --- /dev/null +++ b/next.config.js @@ -0,0 +1,10 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + output: 'export', // Statische Export-Dateien für einfachen Webserver + images: { + unoptimized: true, // Für statischen Export notwendig + }, +}; + +module.exports = nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..5ac86fe --- /dev/null +++ b/package.json @@ -0,0 +1,25 @@ +{ + "name": "pixel-faebits", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "next": "16.0.0", + "react": "19.0.0", + "react-dom": "19.0.0", + "@react-three/fiber": "^9.0.0", + "@react-three/drei": "^10.0.0", + "three": "^0.182.0" + }, + "devDependencies": { + "@types/node": "^22.0.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "typescript": "^5.9.0" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..aaecb5c --- /dev/null +++ b/public/index.html @@ -0,0 +1,15 @@ + + + + + + + + + Pixel | Tor der Wandlerin + + + +
+ + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..2c145a2 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "ES2020", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}