create-reactivite 1.4.0 → 1.6.0

package/template3/src/index.css

@@ -1,46 +1,189 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
 :root {
-  --bg: #0b0d12;
-  --fg: #e7eaf0;
-  --muted: #8b93a7;
-  --accent: #6aa9ff;
-  font-family: system-ui, -apple-system, sans-serif;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-* {
-  box-sizing: border-box;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
-body {
-  margin: 0;
-  min-height: 100vh;
-  background: radial-gradient(circle at 30% 20%, #161a23, var(--bg));
-  color: var(--fg);
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
 
-.app {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  text-align: center;
-  padding: 24px;
+/* ── Matrix theme override ───────────────────────────────── */
+.dark {
+  --background: oklch(0.13 0.012 160);
+  --foreground: oklch(0.9 0.16 150);
+  --card: oklch(0.16 0.02 160 / 70%);
+  --card-foreground: oklch(0.92 0.15 150);
+  --popover: oklch(0.12 0.015 160);
+  --popover-foreground: oklch(0.92 0.15 150);
+  --primary: oklch(0.85 0.24 148);
+  --primary-foreground: oklch(0.12 0.02 160);
+  --secondary: oklch(0.22 0.03 160);
+  --secondary-foreground: oklch(0.9 0.15 150);
+  --muted: oklch(0.2 0.02 160);
+  --muted-foreground: oklch(0.62 0.1 150);
+  --accent: oklch(0.28 0.06 150);
+  --accent-foreground: oklch(0.92 0.18 148);
+  --destructive: oklch(0.62 0.22 25);
+  --border: oklch(0.85 0.24 148 / 22%);
+  --input: oklch(0.85 0.24 148 / 18%);
+  --ring: oklch(0.85 0.24 148 / 70%);
 }
 
-.app h1 {
-  font-size: 2.5rem;
-  margin: 0 0 0.5rem;
+@theme inline {
+  --font-display: 'Orbitron', sans-serif;
+  --font-mono: 'Share Tech Mono', ui-monospace, monospace;
 }
 
-.app p {
-  color: var(--muted);
-  margin: 0;
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Share Tech Mono', ui-monospace, monospace;
+    background-color: #04070a;
+  }
 }
 
-.badge {
-  display: inline-block;
-  margin-bottom: 1rem;
-  padding: 4px 12px;
-  border: 1px solid #2a2f3a;
-  border-radius: 9999px;
-  font-size: 0.8rem;
-  color: var(--accent);
+@layer utilities {
+  .text-glow {
+    text-shadow:
+      0 0 4px oklch(0.85 0.24 148 / 70%),
+      0 0 18px oklch(0.85 0.24 148 / 45%);
+  }
+  .box-glow {
+    box-shadow:
+      0 0 0 1px oklch(0.85 0.24 148 / 25%),
+      0 0 24px oklch(0.85 0.24 148 / 14%),
+      inset 0 0 32px oklch(0.85 0.24 148 / 6%);
+  }
+  /* CRT scanline overlay */
+  .scanlines::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 30;
+    background: repeating-linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent 2px,
+      oklch(0 0 0 / 28%) 3px,
+      transparent 4px
+    );
+    mix-blend-mode: multiply;
+  }
+  @keyframes flicker {
+    0%, 19%, 21%, 55%, 57%, 100% { opacity: 1; }
+    20%, 56% { opacity: 0.78; }
+  }
+  .flicker { animation: flicker 4.5s infinite steps(1); }
+  @keyframes rise {
+    from { opacity: 0; transform: translateY(18px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
 }

package/template3/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template3/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-import './index.css';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/template3/src/pages/about.tsx

@@ -0,0 +1,113 @@
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardContent } from '@/components/ui/card';
+
+const SKILLS = [
+  { name: 'React / Next.js', level: 95 },
+  { name: 'TypeScript', level: 92 },
+  { name: 'Tailwind / shadcn', level: 90 },
+  { name: 'Rspack / Vite', level: 84 },
+  { name: 'Node / APIs', level: 78 },
+];
+
+const STACK = [
+  'React', 'TypeScript', 'Next.js', 'Rspack', 'Tailwind v4',
+  'shadcn/ui', 'TanStack Query', 'Zustand', 'Zod', 'Vitest',
+];
+
+const TIMELINE = [
+  { year: '2024', text: 'Building design-system-grade UIs & dev tooling.' },
+  { year: '2022', text: 'Shipped large-scale Next.js platforms, i18n + SSR.' },
+  { year: '2020', text: 'Went full frontend — React, state, performance.' },
+  { year: '2018', text: 'First lines of code entered the Matrix.' },
+];
+
+export default function About() {
+  return (
+    <section className="space-y-10">
+      <div className="rise flex items-center gap-5">
+        <Avatar className="size-20 box-glow border border-primary/40">
+          <AvatarFallback className="bg-secondary font-display text-2xl text-primary">
+            JS
+          </AvatarFallback>
+        </Avatar>
+        <div>
+          <h1 className="font-display text-3xl font-bold text-primary text-glow sm:text-4xl">
+            ./about
+          </h1>
+          <p className="font-mono text-sm text-muted-foreground">
+            operator profile — clearance: green
+          </p>
+        </div>
+      </div>
+
+      <Tabs defaultValue="bio" className="rise" style={{ animationDelay: '120ms' }}>
+        <TabsList className="font-mono">
+          <TabsTrigger value="bio">bio</TabsTrigger>
+          <TabsTrigger value="skills">skills</TabsTrigger>
+          <TabsTrigger value="log">log</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="bio" className="pt-4">
+          <Card className="box-glow border-primary/20 bg-card/60 backdrop-blur-sm">
+            <CardContent className="space-y-4 pt-6 text-sm leading-relaxed text-muted-foreground sm:text-base">
+              <p>
+                <span className="text-primary">&gt;</span> I'm{' '}
+                <span className="text-primary text-glow">Javid Salimov</span>, a
+                frontend engineer who treats the browser like a programmable
+                reality. I care about typed contracts, fast bundles and
+                interfaces that feel inevitable.
+              </p>
+              <p>
+                <span className="text-primary">&gt;</span> Daily I architect
+                component systems, squeeze build pipelines, and turn fuzzy
+                product ideas into crisp, accessible UI.
+              </p>
+              <Separator className="bg-primary/15" />
+              <div className="flex flex-wrap gap-2">
+                {STACK.map((t) => (
+                  <Badge
+                    key={t}
+                    variant="secondary"
+                    className="font-mono text-xs text-primary/90"
+                  >
+                    {t}
+                  </Badge>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="skills" className="space-y-5 pt-6">
+          {SKILLS.map((s) => (
+            <div key={s.name} className="space-y-2">
+              <div className="flex justify-between font-mono text-xs sm:text-sm">
+                <span className="text-foreground">{s.name}</span>
+                <span className="text-primary text-glow">{s.level}%</span>
+              </div>
+              <Progress value={s.level} className="h-2 bg-secondary" />
+            </div>
+          ))}
+        </TabsContent>
+
+        <TabsContent value="log" className="pt-6">
+          <ol className="relative space-y-6 border-l border-primary/25 pl-6">
+            {TIMELINE.map((t) => (
+              <li key={t.year} className="relative">
+                <span className="absolute -left-[31px] top-1 size-3 rounded-full bg-primary box-glow" />
+                <div className="font-display text-lg text-primary text-glow">
+                  {t.year}
+                </div>
+                <p className="font-mono text-sm text-muted-foreground">{t.text}</p>
+              </li>
+            ))}
+          </ol>
+        </TabsContent>
+      </Tabs>
+    </section>
+  );
+}

package/template3/src/pages/contact.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { Briefcase, Code2, Package, Send } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+const CHANNELS = [
+  { icon: Code2, label: 'github', href: 'https://github.com/javidselimov' },
+  { icon: Briefcase, label: 'linkedin', href: 'https://www.linkedin.com/in/javidsalim/' },
+  { icon: Package, label: 'npm', href: 'https://www.npmjs.com/~ubuligan' },
+];
+
+export default function Contact() {
+  const [sending, setSending] = useState(false);
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSending(true);
+    toast.loading('Encrypting transmission...', { id: 'tx' });
+    window.setTimeout(() => {
+      setSending(false);
+      toast.success('Message routed through the construct.', {
+        id: 'tx',
+        description: 'Javid will decode it shortly.',
+      });
+    }, 1200);
+  };
+
+  return (
+    <section className="grid gap-8 lg:grid-cols-[1fr_0.8fr]">
+      <Card className="rise box-glow border-primary/20 bg-card/60 backdrop-blur-sm">
+        <CardHeader>
+          <CardTitle className="font-display text-2xl text-primary text-glow">
+            ./contact --secure
+          </CardTitle>
+          <CardDescription className="font-mono">
+            Open an encrypted channel to the operator.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name" className="font-mono text-xs text-primary/80">
+                ALIAS
+              </Label>
+              <Input id="name" required placeholder="neo" className="font-mono" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email" className="font-mono text-xs text-primary/80">
+                NODE_ADDRESS
+              </Label>
+              <Input
+                id="email"
+                type="email"
+                required
+                placeholder="you@zion.io"
+                className="font-mono"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="msg" className="font-mono text-xs text-primary/80">
+                PAYLOAD
+              </Label>
+              <Textarea
+                id="msg"
+                required
+                rows={4}
+                placeholder="Knock, knock..."
+                className="font-mono"
+              />
+            </div>
+            <Button type="submit" disabled={sending} className="box-glow w-full font-mono">
+              <Send className="size-4" />
+              {sending ? 'TRANSMITTING...' : 'TRANSMIT'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <div className="rise space-y-3" style={{ animationDelay: '120ms' }}>
+        <p className="font-mono text-xs tracking-widest text-muted-foreground">
+          // DIRECT CHANNELS
+        </p>
+        {CHANNELS.map((c) => (
+          <a
+            key={c.label}
+            href={c.href}
+            target="_blank"
+            rel="noreferrer"
+            className="group flex items-center gap-3 rounded-md border border-primary/20 bg-card/50 px-4 py-3 font-mono text-sm text-muted-foreground transition-colors hover:border-primary/60 hover:text-primary hover:text-glow"
+          >
+            <c.icon className="size-4 text-primary" />
+            <span className="flex-1">{c.label}</span>
+            <span className="text-primary opacity-0 transition-opacity group-hover:opacity-100">
+              ↗
+            </span>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template3/src/pages/home.tsx

@@ -0,0 +1,81 @@
+import { Link } from 'react-router-dom';
+import { ArrowRight, Terminal } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+const STATS = [
+  { label: 'YEARS_ONLINE', value: '6+' },
+  { label: 'REPOS_DECRYPTED', value: '120+' },
+  { label: 'STACK', value: 'FRONTEND' },
+];
+
+export default function Home() {
+  return (
+    <section className="space-y-12">
+      <div className="space-y-6">
+        <div className="rise" style={{ animationDelay: '40ms' }}>
+          <Badge variant="outline" className="border-primary/40 font-mono tracking-widest">
+            <span className="mr-1 inline-block size-1.5 animate-pulse rounded-full bg-primary" />
+            WAKE UP, NEO...
+          </Badge>
+        </div>
+
+        <h1
+          className="rise font-display text-5xl font-black leading-[0.95] tracking-tight text-primary text-glow sm:text-7xl"
+          style={{ animationDelay: '120ms' }}
+        >
+          JAVID
+          <br />
+          SALIMOV
+        </h1>
+
+        <p
+          className="rise max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg"
+          style={{ animationDelay: '200ms' }}
+        >
+          <span className="text-primary">$</span> Frontend engineer operating
+          inside the construct. I bend React, TypeScript and pixels until the
+          interface obeys. There is no spoon — only well-typed components.
+        </p>
+
+        <div className="rise flex flex-wrap gap-3" style={{ animationDelay: '280ms' }}>
+          <Button asChild className="box-glow font-mono">
+            <Link to="/about">
+              Enter the construct <ArrowRight className="size-4" />
+            </Link>
+          </Button>
+          <Button asChild variant="outline" className="font-mono border-primary/40">
+            <Link to="/contact">
+              <Terminal className="size-4" /> Open channel
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        {STATS.map((s, i) => (
+          <Card
+            key={s.label}
+            className="rise box-glow border-primary/20 bg-card/60 backdrop-blur-sm"
+            style={{ animationDelay: `${360 + i * 90}ms` }}
+          >
+            <CardHeader className="pb-2">
+              <CardTitle className="font-display text-4xl text-primary text-glow">
+                {s.value}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="font-mono text-xs tracking-widest text-muted-foreground">
+              {s.label}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template3/tsconfig.json

@@ -1,20 +1,24 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}