Skip to content

README.md

Latest commit

 

History

History
68 lines (51 loc) · 2.39 KB

README.md

File metadata and controls

68 lines (51 loc) · 2.39 KB
Raw

Skylake Computers — frontend

Moderní frontend pro Laravel + Inertia (Vue 3) s GSAP scroll animacemi. Koncept „Silicon Telemetry": web působí jako telemetrický HUD dobře postaveného stroje (teploty, takty, PCB stopy, stress-test).

Stack

  • Vue 3 + TypeScript
  • Inertia.js (@inertiajs/vue3)
  • Tailwind CSS v4 (CSS-first tokeny v resources/css/app.css)
  • GSAP + ScrollTrigger, Lenis (smooth scroll)

Standalone preview (bez PHP)

npm install
npm run dev      # http://localhost:5173 — celý web s routingem přes vue-router
npm run build    # typecheck (vue-tsc) + produkční build

Preview používá resources/js/preview.ts + router.ts. Slouží jen k náhledu — do Laravelu se nekopíruje.

Napojení na Laravel

  1. Zkopíruj do své Laravel appky:

    • resources/js/** (kromě preview.ts, router.ts, PreviewApp.vue)
    • resources/css/app.css

  2. Ostrý vstupní bod je resources/js/app.ts (createInertiaApp).

  3. Nainstaluj balíčky a laravel-vite-plugin, uprav vite.config.ts:

    import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    laravel({ input: 'resources/js/app.ts', refresh: true }),
    vue(),
    tailwindcss(),
  ],
})

  4. Do Blade šablony přidej fonty (Space Grotesk / Inter / JetBrains Mono — viz <link> v index.html) a @vite(['resources/js/app.ts']) + @inertiaHead.

  5. Kontroler vrací Inertia::render('Home') → mapuje na Pages/Home.vue. Persistentní layout (SiteLayout) se přiřazuje automaticky v app.ts.

Kde je jaký obsah

  • resources/js/data/site.ts — veškerý textový obsah, sestavy, služby, kontakt. Uprav tady, nebo přepiš přes Inertia props z kontrolerů.
  • resources/css/app.css — @theme blok = celá paleta a typografie.

Navigace pro obě prostředí

Stránky/komponenty nikdy neimportují Inertii ani vue-router napřímo — používají <AppLink> + useNav() (viz lib/nav.ts). Runtime (Inertia vs. preview) dodá správný <Link> a aktuální cestu přes provide.

Přístupnost & výkon

  • Respektuje prefers-reduced-motion (animace i smooth-scroll se vypnou).
  • Viditelný focus, skip-link, sémantické main/nav/footer.
  • Reveal prvky jsou bez JS viditelné (progresivní vylepšení).