GitHub Invertocat

[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "shaders": "2.2.24" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/logos/github-logo.tsx" isMerged="true" export function GitHubLogo({ className }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="components/logos/x-logo.tsx" isMerged="true" export function XLogo({ className }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="hooks/use-responsive-line-spacing.ts" isMerged="true" "use client" import { useState, useEffect } from "react" /** * Calculate responsive spacing using viewport units and mathematical constraints * Ensures lines never overlap with content or viewport edges on any screen size */ export function useResponsiveLineSpacing() { const [spacing, setSpacing] = useState({ horizontal: 376, vertical: 215 }) const [isMobile, setIsMobile] = useState(false) useEffect(() => { function calculateSpacing() { const vw = window.innerWidth const vh = window.innerHeight const mobile = vw < 768 setIsMobile(mobile) if (mobile) { // Mobile: use minimal spacing to maximize content area // Horizontal (top/bottom): 15% of viewport height, min 60px, max 120px const horizontal = Math.max(60, Math.min(120, vh * 0.15)) // Vertical (left/right): 10% of viewport width, min 24px, max 60px const vertical = Math.max(24, Math.min(60, vw * 0.1)) setSpacing({ horizontal, vertical }) } else { // Desktop: use percentage-based spacing with larger bounds // Horizontal: 25% of viewport height, min 150px, max 400px const horizontal = Math.max(150, Math.min(400, vh * 0.25)) // Vertical: 15% of viewport width, min 100px, max 300px const vertical = Math.max(100, Math.min(300, vw * 0.15)) setSpacing({ horizontal, vertical }) } } calculateSpacing() window.addEventListener("resize", calculateSpacing) return () => window.removeEventListener("resize", calculateSpacing) }, []) return { spacing, isMobile } } [V0_FILE]typescriptreact:file="components/hover-zones.tsx" isMerged="true" interface HoverZonesProps { spacing: { horizontal: number; vertical: number } isMobile: boolean } export function HoverZones({ spacing, isMobile }: HoverZonesProps) { if (isMobile) return null return ( <> {/* Top-left corner */}

{/* Top center */}

{/* Top-right corner */}

{/* Middle-left edge */}

{/* Middle-right edge */}

{/* Bottom-left corner */}

{/* Bottom center */}

{/* Bottom-right corner */}

) } [V0_FILE]png:file="public/og-cris.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/og-cris-Ve7ZQ8utdp6Tw3YIa97Pmv6HOwRE6c.png" isMerged="true" [V0_FILE]plaintext:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon-cris.ico-6Sj2uMXRYHSdy3P30yGkdhcaPHr2Rp.png" isMerged="true" [V0_FILE]typescriptreact:file="components/logos/linkedin-logo.tsx" isMerged="true" interface LinkedInLogoProps { className?: string } export function LinkedInLogo({ className }: LinkedInLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/logos/instagram-logo.tsx" isEdit="true" isMerged="true" interface InstagramLogoProps { className?: string } export function InstagramLogo({ className }: InstagramLogoProps) { return ( ) } [V0_FILE]typescriptreact:file="components/glitch-effect.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef, type ReactNode } from "react" function useIsMobile() { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkMobile = () => setIsMobile(window.innerWidth < 768) checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) return isMobile } /** * Glitch effect component that provides canvas-based displacement animation * Only runs on desktop - disabled on mobile */ export function GlitchEffect() { const canvasRef = useRef(null) const feImageRef = useRef(null) const isMobile = useIsMobile() useEffect(() => { if (isMobile) return const canvas = canvasRef.current const feImage = feImageRef.current if (!canvas || !feImage) return const context = canvas.getContext("2d") if (!context) return const canvasHeight = 200 canvas.height = canvasHeight const w = canvas.width const h = canvas.height let frameCount = 0 const maxFrames = 240 // 4 seconds at 60fps const fadeOutFrames = 80 const glitchIntensity = 0.15 let animationId: number let lastTime = 0 const frameInterval = 1000 / 60 // 60fps on all devices function generateNoise(ctx: CanvasRenderingContext2D, width: number, height: number, intensity: number) { const pixelCount = width * height const image = ctx.createImageData(width, height) const pixels = image.data const base = 128 const glitchiness = glitchIntensity * intensity for (let i = 0; i < pixelCount * 4; i += 4) { const chance = Math.random() <= glitchiness const offset = chance ? Math.floor(Math.random() * 255) : base pixels[i] = offset pixels[i + 1] = base pixels[i + 3] = 255 } return image } function nextFrame(currentTime: number) { if (frameCount >= maxFrames) { context.clearRect(0, 0, w, h) return } const elapsed = currentTime - lastTime if (elapsed >= frameInterval) { lastTime = currentTime const framesRemaining = maxFrames - frameCount const intensity = framesRemaining <= fadeOutFrames ? framesRemaining / fadeOutFrames : 1.0 const noise = generateNoise(context, w, h, intensity) context.putImageData(noise, 0, 0) feImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvas.toDataURL()) frameCount++ } animationId = requestAnimationFrame(nextFrame) } animationId = requestAnimationFrame(nextFrame) return () => { if (animationId) { cancelAnimationFrame(animationId) } } }, [isMobile]) if (isMobile) return null return ( <>

Color Controls

Shader Colors

Border Lines

Text Selection

Cris

About

Tags

Share

About

Tags

Share

More from camilocbarrera

More Templates Like This

About

Tags

Share

About

Tags

Share

More from camilocbarrera

More Templates Like This