[V0_FILE]typescriptreact:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" import type { Config } from 'tailwindcss' const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { colors: { 'soft-blue': '#E6F3FF', 'light-gray': '#F8F9FA', 'text-primary': '#333333', 'text-secondary': '#666666', border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import type React from "react" import AnimatedBackground from "./components/AnimatedBackground" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Jane Doe - Full Stack Developer", description: "Personal blog of Jane Doe, sharing insights on web development", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 51, 51, 51; --background-start-rgb: 230, 243, 255; --background-end-rgb: 248, 249, 250; } body { color: rgb(var(--foreground-rgb)); background: transparent; } [V0_FILE]typescriptreact:file="app/components/AnimatedBackground.tsx" isEdit="true" "use client" import type React from "react" import { useEffect, useRef } from "react" const words = [ "Angular", "React", ".NET", "Framework", "Cloud", "Computing", "API", "JavaScript", "TypeScript", "Azure", "AWS", "Docker", "Kubernetes", "DevOps", "CI/CD", "Microservices", "REST", "GraphQL", ] interface Column { x: number y: number word: string speed: number chars: string[] charIndex: number highlighted: boolean } const AnimatedBackground: React.FC = () => { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationFrameId: number let columns: Column[] = [] const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight columns = [] const columnWidth = 20 // Closer spacing for denser effect const columnCount = Math.ceil(canvas.width / columnWidth) for (let i = 0; i < columnCount; i++) { const word = words[Math.floor(Math.random() * words.length)] columns.push({ x: i * columnWidth, y: Math.random() * canvas.height, word: word, speed: Math.random() * 1 + 1.5, // Faster speed for more dynamic effect chars: word.split(""), charIndex: 0, highlighted: Math.random() < 0.1, // 10% chance to be highlighted }) } } const animate = () => { // Semi-transparent black for trail effect ctx.fillStyle = "rgba(0, 0, 0, 0.1)" ctx.fillRect(0, 0, canvas.width, canvas.height) columns.forEach((column) => { // Draw the word vertically for (let i = 0; i < column.chars.length; i++) { const char = column.chars[(column.charIndex + i) % column.chars.length] const y = column.y - i * 20 if (column.highlighted) { // Brighter green for highlighted words ctx.fillStyle = "#00FF00" ctx.font = "bold 16px monospace" // Add glow effect for highlighted words ctx.shadowColor = "#00FF00" ctx.shadowBlur = 10 } else { // Darker green for regular characters ctx.fillStyle = "#003300" ctx.font = "16px monospace" ctx.shadowBlur = 0 } ctx.fillText(char, column.x, y) } // Reset shadow properties ctx.shadowBlur = 0 column.y += column.speed if (column.y > canvas.height + column.chars.length * 20) { column.y = 0 column.word = words[Math.floor(Math.random() * words.length)] column.chars = column.word.split("") column.charIndex = 0 column.highlighted = Math.random() < 0.1 // Randomize highlight on reset } column.charIndex = (column.charIndex + 1) % column.chars.length }) animationFrameId = requestAnimationFrame(animate) } resizeCanvas() animate() window.addEventListener("resize", resizeCanvas) return () => { cancelAnimationFrame(animationFrameId) window.removeEventListener("resize", resizeCanvas) } }, []) return

Jane Doe

About Me

Recent Posts

{post.title}