tomkabel · tomkabel · Apr 1, 2026 · Apr 1, 2026 · Apr 1, 2026 · Apr 1, 2026
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -1,29 +1,21 @@
-# Simple workflow for deploying static content to GitHub Pages
 name: Deploy static content to Pages
 
 on:
-  # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
-
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
   group: "pages"
   cancel-in-progress: false
 
 jobs:
-  # Single deploy job since we're just deploying
-  deploy:
+  build-and-deploy:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
@@ -37,15 +29,18 @@ jobs:
           node-version: '20'
           cache: 'npm'
       - name: Install dependencies
-        run: npm install
+        run: npm ci
+      - name: Type check
+        run: npx tsc --noEmit
+      - name: Lint
+        run: npm run lint
       - name: Build project
         run: npm run build
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload entire repository
           path: './pub'
       - name: Deploy to GitHub Pages
         id: deployment

diff --git a/index.html b/index.html
@@ -2,35 +2,30 @@
 <html lang="et">
   <head>
     <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" media="print" onLoad="this.media='all'" />
+    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" /></noscript>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="ProksiAbel OÜ pakub spetsialiseeritud küberturbe teenuseid, sealhulgas veebirakenduse penetratatsioonitestimist, haavatavuse haldamist ja turvalise arenduse praktikaid. Kaitske oma digitaalseid varasid ekspertide abil." />
     <link rel="canonical" href="https://proksiabel.ee/" />
-
-    <!-- hreflang for bilingual site -->
     <link rel="alternate" hreflang="et" href="https://proksiabel.ee/" />
     <link rel="alternate" hreflang="en" href="https://proksiabel.ee/" />
     <link rel="alternate" hreflang="x-default" href="https://proksiabel.ee/" />
-
-    <!-- Sitemap -->
     <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
-
-    <!-- Open Graph -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://proksiabel.ee/" />
     <meta property="og:title" content="ProksiAbel OÜ - Ekspert MITM kaitse ja turvanõustamine" />
     <meta property="og:description" content="ProksiAbel OÜ pakub spetsialiseeritud küberturbe teenuseid, sealhulgas veebirakenduse penetratatsioonitestimist, haavatavuse haldamist ja turvalise arenduse praktikaid." />
     <meta property="og:image" content="https://proksiabel.ee/og-image.svg" />
-
-    <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:url" content="https://proksiabel.ee/" />
     <meta name="twitter:title" content="ProksiAbel OÜ - Ekspert MITM kaitse ja turvanõustamine" />
     <meta name="twitter:description" content="ProksiAbel OÜ pakub spetsialiseeritud küberturbe teenuseid, sealhulgas veebirakenduse penetratatsioonitestimist, haavatavuse haldamist ja turvalise arenduse praktikaid." />
     <meta name="twitter:image" content="https://proksiabel.ee/og-image.svg" />
-
-    <!-- JSON-LD Structured Data -->
     <script type="application/ld+json">
     {
       "@context": "https://schema.org",
@@ -64,11 +59,10 @@
       "sameAs": []
     }
     </script>
-
     <title>ProksiAbel OÜ - Ekspert MITM kaitse ja turvanõustamine</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/kilo.json b/kilo.json
@@ -4,7 +4,8 @@
     "paths": [
       ".kilocode/skills/code-reviewer",
       ".kilocode/skills/implementation-planner",
-      ".kilocode/skills/web-design-reviewer"
+      ".kilocode/skills/web-design-reviewer",
+      ".kilocode/skills/proksiabel-social-manager"
     ]
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,10 @@
     "build": "vite build",
     "postbuild": "cp pub/index.html pub/404.html",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "optimize-images": "node scripts/optimize-images.js",
+    "check-imagemagick": "bash scripts/check-imagemagick.sh",
+    "verify-requirements": "node scripts/verify-optimization-requirements.js"
   },
   "dependencies": {
     "lucide-react": "0.469.0",
@@ -28,6 +31,7 @@
     "globals": "^15.9.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
+    "terser": "^5.46.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",
     "vite": "^5.4.15"

diff --git a/src/App.tsx b/src/App.tsx
@@ -8,18 +8,19 @@ import Expertise from './components/Expertise';
 import About from './components/About';
 import Contact from './components/Contact';
 import Pgp from './components/Pgp';
-import PrivacyPolicy from './components/PrivacyPolicy';
-import TermsOfService from './components/TermsOfService';
-import CookiePolicy from './components/CookiePolicy';
-import Disclosure from './components/Disclosure';
-import NotFound from './components/NotFound';
 import Footer from './components/Footer';
 
+const PrivacyPolicy = React.lazy(() => import('./components/PrivacyPolicy'));
+const TermsOfService = React.lazy(() => import('./components/TermsOfService'));
+const CookiePolicy = React.lazy(() => import('./components/CookiePolicy'));
+const Disclosure = React.lazy(() => import('./components/Disclosure'));
+const NotFound = React.lazy(() => import('./components/NotFound'));
+
 function HomePage() {
   return (
     <>
       <Navbar />
-      <main id="main-content">
+      <main id="main-content" tabIndex={-1}>
         <Hero />
         <Services />
         <Expertise />
@@ -32,54 +33,37 @@ function HomePage() {
   );
 }
 
+function LegalLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <React.Suspense fallback={<div className="min-h-screen bg-slate-900 flex items-center justify-center"><div className="text-white">Loading...</div></div>}>
+        {children}
+      </React.Suspense>
+      <Footer />
+    </>
+  );
+}
+
 function App() {
   return (
     <LanguageProvider>
       <BrowserRouter>
         <div className="min-h-screen bg-slate-900">
           <a
             href="#main-content"
-            className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-cyan-500 focus:text-white focus:rounded-md"
+            className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-sky-500 focus:text-white focus:rounded-md"
+            onClick={(e) => { e.preventDefault(); const el = document.getElementById('main-content'); el?.focus(); el?.scrollIntoView(); }}
           >
             Skip to main content
           </a>
           <Routes>
             <Route path="/" element={<HomePage />} />
-            <Route path="/privacy" element={
-              <>
-                <Navbar />
-                <PrivacyPolicy />
-                <Footer />
-              </>
-            } />
-            <Route path="/terms" element={
-              <>
-                <Navbar />
-                <TermsOfService />
-                <Footer />
-              </>
-            } />
-            <Route path="/cookies" element={
-              <>
-                <Navbar />
-                <CookiePolicy />
-                <Footer />
-              </>
-            } />
-            <Route path="/disclosure" element={
-              <>
-                <Navbar />
-                <Disclosure />
-                <Footer />
-              </>
-            } />
-            <Route path="*" element={
-              <>
-                <Navbar />
-                <NotFound />
-                <Footer />
-              </>
-            } />
+            <Route path="/privacy" element={<LegalLayout><PrivacyPolicy /></LegalLayout>} />
+            <Route path="/terms" element={<LegalLayout><TermsOfService /></LegalLayout>} />
+            <Route path="/cookies" element={<LegalLayout><CookiePolicy /></LegalLayout>} />
+            <Route path="/disclosure" element={<LegalLayout><Disclosure /></LegalLayout>} />
+            <Route path="*" element={<LegalLayout><NotFound /></LegalLayout>} />
           </Routes>
         </div>
       </BrowserRouter>