[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Personal portfolio website *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/johancampo12-4999s-projects/v0-personal-portfolio-website) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/cEYp5MfNzBD) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/johancampo12-4999s-projects/v0-personal-portfolio-website](https://vercel.com/johancampo12-4999s-projects/v0-personal-portfolio-website)** ## Build your app Continue building your app on: **[https://v0.app/chat/cEYp5MfNzBD](https://v0.app/chat/cEYp5MfNzBD)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter, JetBrains_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _inter = Inter({ subsets: ["latin"] }) const _jetbrainsMono = JetBrains_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Johan Campo | Full-Stack Developer", description: "Full-Stack Developer specializing in Backend & Automation. Node.js, NestJS, Express, TypeScript, and n8n automation expert.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/grid-background.tsx" isMerged="true" "use client" export function GridBackground() { return (

{/* Base gradient */}

{/* Grid pattern */}

{/* Subtle radial glow */}

{/* Bottom fade */}

) } [V0_FILE]typescriptreact:file="components/pixel-background.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" export function PixelBackground() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) const pixelSize = 20 const cols = Math.ceil(canvas.width / pixelSize) + 1 const rows = Math.ceil(canvas.height / pixelSize) + 1 // Dark green/gray/black palette const colors = [ "rgba(20, 30, 25, 0.8)", "rgba(25, 40, 30, 0.6)", "rgba(15, 25, 20, 0.9)", "rgba(30, 45, 35, 0.5)", "rgba(10, 18, 14, 0.95)", "rgba(35, 55, 40, 0.4)", "rgba(22, 35, 28, 0.7)", ] interface Pixel { x: number y: number color: string targetColor: string transitionProgress: number transitionSpeed: number } const pixels: Pixel[] = [] for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { const color = colors[Math.floor(Math.random() * colors.length)] pixels.push({ x: i * pixelSize, y: j * pixelSize, color, targetColor: color, transitionProgress: 1, transitionSpeed: 0.005 + Math.random() * 0.01, }) } } const lerp = (start: number, end: number, t: number) => start + (end - start) * t const parseColor = (color: string) => { const match = color.match(/rgba?$$(\d+),\s*(\d+),\s*(\d+),?\s*([\d.]+)?$$/) if (match) { return { r: Number.parseInt(match[1]), g: Number.parseInt(match[2]), b: Number.parseInt(match[3]), a: Number.parseFloat(match[4] || "1"), } } return { r: 0, g: 0, b: 0, a: 1 } } const animate = () => { ctx.fillStyle = "rgb(10, 15, 12)" ctx.fillRect(0, 0, canvas.width, canvas.height) pixels.forEach((pixel) => { if (pixel.transitionProgress < 1) { pixel.transitionProgress += pixel.transitionSpeed const startColor = parseColor(pixel.color) const endColor = parseColor(pixel.targetColor) const r = Math.round(lerp(startColor.r, endColor.r, pixel.transitionProgress)) const g = Math.round(lerp(startColor.g, endColor.g, pixel.transitionProgress)) const b = Math.round(lerp(startColor.b, endColor.b, pixel.transitionProgress)) const a = lerp(startColor.a, endColor.a, pixel.transitionProgress) ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})` } else { ctx.fillStyle = pixel.targetColor if (Math.random() < 0.001) { pixel.color = pixel.targetColor pixel.targetColor = colors[Math.floor(Math.random() * colors.length)] pixel.transitionProgress = 0 pixel.transitionSpeed = 0.005 + Math.random() * 0.01 } } ctx.fillRect(pixel.x, pixel.y, pixelSize - 1, pixelSize - 1) }) requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", resizeCanvas) } }, []) return (

{category.title}

{exp.title}

{project.title}

{t.education.degree}

{t.contact.heading}