[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/crt-toggle.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Monitor } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function CRTToggle() { const [crtEnabled, setCrtEnabled] = useState(false) useEffect(() => { const body = document.body if (crtEnabled) { body.classList.add("crt") } else { body.classList.remove("crt") } // Save preference to localStorage localStorage.setItem("crt-effect", crtEnabled.toString()) return () => { body.classList.remove("crt") } }, [crtEnabled]) // Load preference from localStorage on mount useEffect(() => { const savedPreference = localStorage.getItem("crt-effect") if (savedPreference === "true") { setCrtEnabled(true) } }, []) return ( CRT Effect ) } [V0_FILE]typescriptreact:file="components/ascii-art.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" export function AsciiArt({ art }: { art: string }) { switch (art) { case "welcome": return (

          {`
 ██████╗  ██████╗ ██╗  ██╗██╗   ██╗██╗     
██╔════╝ ██╔═══██╗██║ ██╔╝██║   ██║██║     
██║  ███╗██║   ██║█████╔╝ ██║   ██║██║     
██║   ██║██║   ██║██╔═██╗ ██║   ██║██║     
╚██████╔╝╚██████╔╝██║  ██╗╚██████╔╝███████╗
 ╚═════╝  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚══════╝
                                           
███████╗ █████╗ ████████╗██╗   ██╗ █████╗  
██╔════╝██╔══██╗╚══██╔══╝╚██╗ ██╔╝██╔══██╗ 
███████╗███████║   ██║    ╚████╔╝ ███████║ 
╚════██║██╔══██║   ██║     ╚██╔╝  ██╔══██║ 
███████║██║  ██║   ██║      ██║   ██║  ██║ 
╚══════╝╚═╝  ╚═╝   ╚═╝      ╚═╝   ╚═╝  ╚═╝ 
`}

) case "about": return (

          {`
 ██████╗  ██████╗ ██╗  ██╗██╗   ██╗██╗     
██╔════╝ ██╔═══██╗██║ ██╔╝██║   ██║██║     
██║  ███╗██║   ██║█████╔╝ ██║   ██║██║     
██║   ██║██║   ██║██╔═██╗ ██║   ██║██║     
╚██████╔╝╚██████╔╝██║  ██╗╚██████╔╝███████╗
 ╚═════╝  ╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚══════╝
                                           
███████╗ █████╗ ████████╗██╗   ██╗ █████╗  
██╔════╝██╔══██╗╚══██╔══╝╚██╗ ██╔╝██╔══██╗ 
███████╗███████║   ██║    ╚████╔╝ ███████║ 
╚════██║██╔══██║   ██║     ╚██╔╝  ██╔══██║ 
███████║██║  ██║   ██║      ██║   ██║  ██║ 
╚══════╝╚═╝  ╚═╝   ╚═╝      ╚═╝   ╚═╝  ╚═╝ 
`}

) case "education": return (

          {`
 _____    _                 _   _             
| ____|__| |_   _  ___ __ _| |_(_) ___  _ __  
|  _| / _\` | | | |/ __/ _\` | __| |/ _ \\| '_ \\ 
| |__| (_| | |_| | (_| (_| | |_| | (_) | | | |
|_____\\__,_|\\__,_|\\___\\__,_|\\__|_|\\___/|_| |_|
                                              
`}

) case "skills": return (

          {`
 ____  _    _ _ _     
/ ___|| | _(_) | |___ 
\\___ \\| |/ / | | / __|
 ___) |   <| | | \\__ \\
|____/|_|\\_\\_|_|_|___/
                      
`}

) case "experience": return (

          {`
 _____                      _                      
| ____|_  ___ __   ___ _ __(_) ___ _ __   ___ ___ 
|  _| \\ \\/ / '_ \\ / _ \\ '__| |/ _ \\ '_ \\ / __/ _ \\
| |___ >  <| |_) |  __/ |  | |  __/ | | | (_|  __/
|_____/_/\\_\\ .__/ \\___|_|  |_|\\___|_| |_|\\___\\___|
           |_|                                    
`}

) case "projects": return (

          {`
 ____            _           _       
|  _ \\ _ __ ___ (_) ___  ___| |_ ___ 
| |_) | '__/ _ \\| |/ _ \\/ __| __/ __|
|  __/| | | (_) | |  __/ (__| |_\\__ \\
|_|   |_|  \\___// |\\___|\\___|\\__|___/
              |__/                   
`}

) case "certifications": return (

          {`
  ____           _   _  __ _           _   _                 
 / ___|___ _ __ | |_(_)/ _(_) ___ __ _| |_(_) ___  _ __  ___ 
| |   / _ \\ '_ \\| __| | |_| |/ __/ _\` | __| |/ _ \\| '_ \\/ __|
| |__|  __/ | | | |_| |  _| | (_| (_| | |_| | (_) | | | \\__ \\
 \\____\\___|_| |_|\\__|_|_| |_|\\___\\__,_|\\__|_|\\___/|_| |_|___/
                                                              
`}

) case "contact": return (

          {`
  ____            _             _   
 / ___|___  _ __ | |_ __ _  ___| |_ 
| |   / _ \\| '_ \\| __/ _\` |/ __| __|
| |__| (_) | | | | || (_| | (__| |_ 
 \\____\\___/|_| |_|\\__\\__,_|\\___|\\__|
                                    
`}

) default: return null } } [V0_FILE]typescriptreact:file="components/sections/about-section.tsx" isEdit="true" isMerged="true" import { AsciiArt } from "@/components/ascii-art" import { AsciiPortraitComparison } from "@/components/ascii-portrait-comparison" export function AboutSection() { return (

Gokul Sathiyamurthy
Cybersecurity Professional

Hello! I'm Gokul Sathiyamurthy, a cybersecurity professional specializing in threat detection, incident response, and security operations.

With experience as a SOC Analyst and Microsoft Threat Expert, I focus on identifying and mitigating security threats across enterprise environments.

Personal Bio:

I'm someone who thrives on challenges, whenever someone tells me something is impossible, my first thought is always "how can I make this possible?" This mindset drives me in both my personal and professional life.

I'm passionate about sports and physical fitness. Cricket is one of my favorite activities, and I also make time to hit the gym for at least an hour every day.

Staying active is an important part of my routine that helps me maintain both physical and mental balance.

On the football field, I play as a defender. While I didn't score many goals in that position, I took pride in preventing the opposition from scoring.

Thinking about it now, it's interesting how that defensive mindset may have influenced my career path—perhaps that's what drew me to become a Defender endpoint expert in cybersecurity!

I'm passionate about staying ahead of emerging cyber threats and implementing robust security measures to protect critical infrastructure and data.

Quick Facts:

Location: New York, NY
Education: M.S. in Cybersecurity, Pace University
Specialty: Threat Hunting, Incident Response, Security Operations
Certifications: Microsoft Certified Security Operations Associate (SC-200)

) } [V0_FILE]typescriptreact:file="components/sections/projects-section.tsx" isEdit="true" isMerged="true" import { AsciiArt } from "@/components/ascii-art" export function ProjectsSection() { return (

TerraGuard

            {`
  +-------------+     +----------------+     +----------------+
  | Terraform   |---->| Static Code    |---->| Vulnerability  |
  | Config Files|     | Analysis Engine|     | Detection      |
  +-------------+     +----------------+     +----------------+
        |                    |                      |
        |                    v                      |
        |             +--------------+              |
        +------------>| AWS Security |<-------------+
                      | Best Practices|
                      +--------------+
                             |
                             v
                      +---------------+
                      | Remediation   |
                      | Report        |
                      +---------------+
`}

A Python tool that automatically detects 20+ security vulnerabilities in Terraform infrastructure code through static analysis of AWS configurations, generating detailed remediation reports.

Technologies: Python, Terraform, AWS, Static Code Analysis

ToadBud Chrome Extension

            {`
  +-------------+     +----------------+     +----------------+
  | Chrome      |---->| VirusTotal     |---->| Threat         |
  | Extension   |     | API            |     | Assessment     |
  +-------------+     +----------------+     +----------------+
        |                                            |
        v                                            v
  +-------------+                            +----------------+
  | URL/IP/Hash |                            | Security       |
  | Detection   |                            | Report         |
  +-------------+                            +----------------+
`}

A Chrome extension utilizing VirusTotal API to analyze URLs, IP addresses, and file hashes for security threats, providing real-time threat assessments with JavaScript and Tailwind CSS.

Technologies: JavaScript, Chrome Extensions API, VirusTotal API, Tailwind CSS

) } [V0_FILE]typescriptreact:file="components/sections/skills-section.tsx" isEdit="true" isMerged="true" import { AsciiArt } from "@/components/ascii-art" export function SkillsSection() { return (

Programming Languages & Tools

Ethical Hacking & Penetration Testing

Cloud Platforms & Databases

Networking & Frameworks

Operating Systems

Specialty Areas

) } function SkillBar({ name, percentage }: { name: string; percentage: number }) { return (

{name} {percentage}%

) } [V0_FILE]typescriptreact:file="components/sections/experience-section.tsx" isEdit="true" isMerged="true" import { AsciiArt } from "@/components/ascii-art" export function ExperienceSection() { return (

Cyber Range Student Assistant

Pace University, Pleasantville, NY | February 2024 - Present

Design and implement UX/UI elements and cybersecurity infrastructure for Con Edison Critical Infrastructure Training Series
Configure virtual environments and security tools for hands-on cybersecurity training scenarios
Lead demonstrations and technical setup for training sessions in PLV Pace Cyber Range

Security Engineer Intern

Cantonica, Inc., New York, NY | June 2024 - September 2024

Conducted vulnerability & open port scans, prioritizing risks using MITRE ATT&CK framework
Reduced vulnerabilities by 40% while enhancing threat detection through improved SIEM monitoring & incident response
Authored blogs on Progressive Web Application security, boosting Cantonica's visibility & engagement

SOC Analyst (Security Operations Center)

LTIMindtree Ltd., Chennai, India | November 2022 - August 2023

Investigated 1,000 positive malware files & audited 200 critical IT alerts, reducing incident response times by 25%
Developed & standardized 100+ security documents, detections using YAML and JSON
Coordinated high-severity escalations involving malware like ransomware cases, resolving issues & mitigating future threats

Microsoft Threat Expert

Mindtree Ltd., Chennai, India | April 2021 - November 2022

Conducted 1,000+ threat hunts, performing threat analysis, incident triaging, and IOCs filing & documentation
Deployed EDR solutions, reducing threat resolution times by 30% & strengthening defense mechanisms
Led 100+ security awareness and security research KT sessions across departments

) } [V0_FILE]typescriptreact:file="components/sections/contact-section.tsx" isEdit="true" isMerged="true" import { AsciiArt } from "@/components/ascii-art" import { Mail, Phone, MapPin, Linkedin, Github } from "lucide-react" export function ContactSection() { return (

sathiyamurthygokul@gmail.com 551-358-1893

New York, NY 10038

linkedin.com/in/gokulsathiyamurthy088 github.com/gokulsatya

) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="components/ui/toggle.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3",
        sm: "h-9 px-2.5",
        lg: "h-11 px-5",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }

[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
  ),
)
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
  ),
)
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
  ),
)
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
)
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
  ),
)
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

[V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="components/sections/education-section.tsx" isMerged="true"
import { AsciiArt } from "@/components/ascii-art"

export function EducationSection() {
  return (
    <div className="space-y-4">
      <AsciiArt art="education" />

<div className="space-y-6">
        <div className="p-3 border border-primary/20 rounded bg-primary/5">
          <h3 className="text-primary font-bold">Pace University, New York, NY</h3>
          <p className="text-sm">M.S. in Cybersecurity | GPA: 3.77</p>
          <p className="text-xs text-muted-foreground">May 2025</p>
          <div className="mt-2">
            <h4 className="text-sm font-semibold">Relevant Coursework:</h4>
            <ul className="text-xs mt-1 space-y-1 list-disc pl-4">
              <li>Network Security & Defense</li>
              <li>Information Security Management</li>
              <li>Ethical Hacking & Penetration Testing</li>
              <li>Mobile Forensics Investigation</li>
              <li>Automating Information Security Python & Shell Scripting</li>
              <li>Cyber Security</li>
              <li>Cyber Threat Intelligence</li>
            </ul>
          </div>
        </div>

<div className="p-3 border border-primary/20 rounded bg-primary/5">
          <h3 className="text-primary font-bold">Anna University, Chennai, India</h3>
          <p className="text-sm">B.E. in Computer Science & Engineering | GPA: 3.61</p>
          <p className="text-xs text-muted-foreground">April 2020</p>
          <div className="mt-2">
            <h4 className="text-sm font-semibold">Relevant Coursework:</h4>
            <ul className="text-xs mt-1 space-y-1 list-disc pl-4">
              <li>Data Structures & Algorithms</li>
              <li>Cyber Forensics</li>
              <li>Information Systems</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/sections/certifications-section.tsx" isMerged="true"
import { AsciiArt } from "@/components/ascii-art"
import { Award, Trophy, Flag } from "lucide-react"

export function CertificationsSection() {
  return (
    <div className="space-y-4">
      <AsciiArt art="certifications" />

<div className="space-y-6">
        <div>
          <h3 className="text-primary font-bold mb-2 flex items-center">
            <Award className="h-4 w-4 mr-2" />
            Certifications
          </h3>
          <ul className="space-y-2 pl-6">
            <li className="flex items-start">
              <span className="text-primary mr-2">•</span>
              <div>
                <p className="font-medium">Microsoft Certified Security Operations Associate (SC-200)</p>
                <p className="text-xs text-muted-foreground">Microsoft</p>
              </div>
            </li>
            <li className="flex items-start">
              <span className="text-primary mr-2">•</span>
              <div>
                <p className="font-medium">CISSP (In-progress)</p>
                <p className="text-xs text-muted-foreground">(ISC)²</p>
              </div>
            </li>
          </ul>
        </div>

<div>
          <h3 className="text-primary font-bold mb-2 flex items-center">
            <Trophy className="h-4 w-4 mr-2" />
            Competitions
          </h3>
          <ul className="space-y-2 pl-6">
            <li className="flex items-start">
              <span className="text-primary mr-2">•</span>
              <p>National Cyber League</p>
            </li>
            <li className="flex items-start">
              <span className="text-primary mr-2">•</span>
              <p>NSA Codebreaker</p>
            </li>
            <li className="flex items-start">
              <span className="text-primary mr-2">•</span>
              <p>Tech Duels Debate (Data Privacy vs. National Security)</p>
            </li>
            <li className="flex items-start">
              <span className="text-primary mr-2">•</span>
              <p>TryHackMe Player (CTF)</p>
            </li>
          </ul>
        </div>

<div>
          <h3 className="text-primary font-bold mb-2 flex items-center">
            <Flag className="h-4 w-4 mr-2" />
            Cybersecurity Initiatives
          </h3>
          <ul className="space-y-2 pl-6">
            <li className="flex items-start">
              <span className="text-primary mr-2">•</span>
              <p>Cyber Risk Assessment & Insurance Product – American Technology Services (ATS)</p>
            </li>
            <li className="flex items-start">
              <span className="text-primary mr-2">•</span>
              <p>ISACA Student Volunteer</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ascii-portrait.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

interface AsciiPortraitProps {
  width?: number
  height?: number
}

export function AsciiPortrait({ width = 60, height = 80 }: AsciiPortraitProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Load the image
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.src = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pose2.JPEG-6Ua6wNwVYcJtG1UMNf8o6wYovA9RUA.jpeg"

img.onload = () => {
      // Calculate aspect ratio
      const aspectRatio = img.width / img.height
      const adjustedWidth = Math.floor(height * aspectRatio)

// Draw image to canvas
      ctx.drawImage(img, 0, 0, adjustedWidth, height)

// Get image data
      const imageData = ctx.getImageData(0, 0, adjustedWidth, height)
      const data = imageData.data

// Clear canvas for redrawing
      ctx.clearRect(0, 0, adjustedWidth * 10, height * 10)

// ASCII characters from darkest to lightest
      const asciiChars = ["@", "%", "#", "*", "+", "=", "-", ":", ".", " "]

// Draw ASCII art
      ctx.fillStyle = "#000"
      ctx.fillRect(0, 0, adjustedWidth * 10, height * 10)

for (let y = 0; y < height; y++) {
        for (let x = 0; x < adjustedWidth; x++) {
          // Get pixel color
          const i = (y * adjustedWidth + x) * 4
          const r = data[i]
          const g = data[i + 1]
          const b = data[i + 2]

// Calculate brightness
          const brightness = 0.299 * r + 0.587 * g + 0.114 * b

// Map brightness to ASCII character
          const charIndex = Math.floor((brightness / 255) * (asciiChars.length - 1))
          const char = asciiChars[charIndex]

// Use color from image
          ctx.fillStyle = `rgb(${r},${g},${b})`
          ctx.font = '8px "JetBrains Mono"'
          ctx.fillText(char, x * 8, y * 8)
        }
      }
    }
  }, [width, height])

return (
    <div className="ascii-portrait-container flex justify-center my-4 overflow-hidden">
      <div className="relative group">
        <canvas
          ref={canvasRef}
          width={width * 10}
          height={height * 10}
          className="border border-primary/30 rounded transition-all duration-300 filter hover:brightness-110"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ascii-portrait-grid.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState, useRef } from "react"

interface AsciiPortraitGridProps {
  width?: number
  height?: number
  contrast?: number
  brightness?: number
}

export function AsciiPortraitGrid({
  width = 80,
  height = 100,
  contrast = 1.4, // Fixed value as requested
  brightness = 0.7, // Fixed value as requested
}: AsciiPortraitGridProps) {
  const [pixels, setPixels] = useState<Array<{ char: string; color: string }>>([])
  const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    // Load the image
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.src =
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202024-08-19%20at%2023.09.35_bb0e84d7.jpg-vNaMYkbNtPefHIRx2bZUxvJhIofxMZ.jpeg"

img.onload = () => {
      // Calculate aspect ratio and apply better cropping
      const sourceWidth = img.width
      const sourceHeight = img.height

// Define crop area (focus on face and upper body)
      const cropX = sourceWidth * 0.2 // Crop 20% from left
      const cropY = sourceHeight * 0.05 // Crop 5% from top
      const cropWidth = sourceWidth * 0.6 // Use 60% of width
      const cropHeight = sourceHeight * 0.7 // Use 70% of height

const aspectRatio = cropWidth / cropHeight
      const adjustedWidth = Math.floor(height * aspectRatio)

// Create a canvas to process the image
      const canvas = document.createElement("canvas")
      canvas.width = adjustedWidth
      canvas.height = height

const ctx = canvas.getContext("2d", { alpha: false })
      if (!ctx) return

// Draw image to canvas with cropping
      ctx.drawImage(
        img,
        cropX,
        cropY,
        cropWidth,
        cropHeight, // Source rectangle
        0,
        0,
        adjustedWidth,
        height, // Destination rectangle
      )

// Get image data
      const imageData = ctx.getImageData(0, 0, adjustedWidth, height)
      const data = imageData.data

// Apply contrast and brightness
      for (let i = 0; i < data.length; i += 4) {
        // Apply brightness
        data[i] = Math.min(255, data[i] * brightness)
        data[i + 1] = Math.min(255, data[i + 1] * brightness)
        data[i + 2] = Math.min(255, data[i + 2] * brightness)

// Apply contrast
        data[i] = Math.min(255, Math.max(0, ((data[i] / 255 - 0.5) * contrast + 0.5) * 255))
        data[i + 1] = Math.min(255, Math.max(0, ((data[i + 1] / 255 - 0.5) * contrast + 0.5) * 255))
        data[i + 2] = Math.min(255, Math.max(0, ((data[i + 2] / 255 - 0.5) * contrast + 0.5) * 255))
      }

ctx.putImageData(imageData, 0, 0)

// Advanced ASCII character set with varying visual weights
      const asciiChars = [
        "@",
        "%",
        "#",
        "8",
        "&",
        "W",
        "M",
        "B",
        "O",
        "Q",
        "D",
        "X",
        "H",
        "U",
        "A",
        "K",
        "V",
        "Z",
        "Y",
        "N",
        "C",
        "L",
        "T",
        "I",
        "J",
        "F",
        "S",
        "G",
        "P",
        "E",
        "R",
        "?",
        "7",
        "1",
        "/",
        "\\",
        "|",
        "(",
        ")",
        "{",
        "}",
        "[",
        "]",
        "*",
        "+",
        "~",
        "-",
        "_",
        ":",
        ";",
        "!",
        ">",
        "<",
        '"',
        "^",
        "=",
        ",",
        ".",
        "`",
        " ",
      ]

// Process pixels
      const newPixels = []

// Calculate perceived brightness
          const brightness = 0.299 * r + 0.587 * g + 0.114 * b

// Map brightness to ASCII character with more precision
          const charIndex = Math.floor((brightness / 255) * (asciiChars.length - 1))
          const char = asciiChars[charIndex]

// Add to pixels array with original color
          newPixels.push({
            char,
            color: `rgb(${r},${g},${b})`,
          })
        }
      }

setPixels(newPixels)
    }
  }, [width, height, contrast, brightness])

return (
    <div className="ascii-portrait-grid-container flex justify-center my-4">
      <div
        ref={containerRef}
        className="grid border border-primary/30 rounded p-1 bg-black shadow-lg shadow-primary/20 transition-all duration-300 hover:shadow-primary/40 relative overflow-hidden"
        style={{
          gridTemplateColumns: `repeat(${width}, 1fr)`,
          maxWidth: "100%",
          aspectRatio: "3/4",
        }}
      >
        {pixels.map((pixel, index) => (
          <div
            key={index}
            className="flex items-center justify-center font-mono leading-none"
            style={{
              color: pixel.color,
              fontSize: "4px",
              lineHeight: "100%",
              textShadow: "0 0 1px rgba(0,0,0,0.8)",
            }}
          >
            {pixel.char}
          </div>
        ))}
        <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300" />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ascii-portrait-static.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

export function AsciiPortraitStatic() {
  const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    // Add a subtle animation effect
    const container = containerRef.current
    if (!container) return

const handleMouseMove = (e: MouseEvent) => {
      const rect = container.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top

// Calculate rotation based on mouse position
      const rotateX = (y / rect.height - 0.5) * 5
      const rotateY = (x / rect.width - 0.5) * -5

container.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
    }

const handleMouseLeave = () => {
      container.style.transform = "perspective(1000px) rotateX(0) rotateY(0)"
    }

container.addEventListener("mousemove", handleMouseMove)
    container.addEventListener("mouseleave", handleMouseLeave)

return () => {
      container.removeEventListener("mousemove", handleMouseMove)
      container.removeEventListener("mouseleave", handleMouseLeave)
    }
  }, [])

return (
    <div className="ascii-portrait-static-container flex justify-center my-4">
      <div
        ref={containerRef}
        className="border border-primary/30 rounded p-2 bg-black/80 shadow-lg shadow-primary/20 transition-all duration-300 hover:shadow-primary/40 max-w-[300px]"
        style={{ transition: "transform 0.1s ease" }}
        aria-label="Static ASCII portrait with 3D effect"
      >
        <div className="relative overflow-hidden">
          <pre
            className="text-[4px] sm:text-[5px] md:text-[6px] font-mono"
            style={{ lineHeight: 0.8, letterSpacing: "-0.1em" }}
          >
            {/* Pre-processed ASCII art with color spans would go here */}
            {/* This is a simplified version - in a real implementation, this would be much more detailed */}
            <span className="text-blue-900">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-800">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-800">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-700">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-700">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-600">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-600">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-500">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-500">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-400">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-400">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-300">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-300">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-200">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-200">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-100">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-blue-100">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-800">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-800">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-700">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-700">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-600">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-600">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-500">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-500">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-400">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-400">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-300">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-300">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-200">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-200">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-100">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-gray-100">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-900">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-800">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-700">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-600">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-500">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-400">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-300">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-200">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
            <span className="text-amber-100">
              @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            </span>
            <br />
          </pre>
          <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300" />
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ascii-portrait-canvas.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

interface AsciiPortraitCanvasProps {
  width?: number
  height?: number
  contrast?: number
  brightness?: number
}

export function AsciiPortraitCanvas({
  width = 100,
  height = 120,
  contrast = 1.4, // Fixed value as requested
  brightness = 0.7, // Fixed value as requested
}: AsciiPortraitCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d", { alpha: false })
    if (!ctx) return

// Load the image
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.src =
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202024-08-19%20at%2023.09.35_bb0e84d7.jpg-vNaMYkbNtPefHIRx2bZUxvJhIofxMZ.jpeg"

img.onload = () => {
      // Calculate aspect ratio and apply better cropping
      const sourceWidth = img.width
      const sourceHeight = img.height

const aspectRatio = cropWidth / cropHeight
      const adjustedWidth = Math.floor(height * aspectRatio)

// Create a temporary canvas for image processing
      const tempCanvas = document.createElement("canvas")
      const tempCtx = tempCanvas.getContext("2d", { alpha: false })
      if (!tempCtx) return

tempCanvas.width = adjustedWidth
      tempCanvas.height = height

// Draw and process the image with cropping
      tempCtx.drawImage(
        img,
        cropX,
        cropY,
        cropWidth,
        cropHeight, // Source rectangle
        0,
        0,
        adjustedWidth,
        height, // Destination rectangle
      )

// Apply contrast and brightness adjustments
      const imageData = tempCtx.getImageData(0, 0, adjustedWidth, height)
      const data = imageData.data

for (let i = 0; i < data.length; i += 4) {
        // Apply brightness
        data[i] = Math.min(255, data[i] * brightness)
        data[i + 1] = Math.min(255, data[i + 1] * brightness)
        data[i + 2] = Math.min(255, data[i + 2] * brightness)

tempCtx.putImageData(imageData, 0, 0)

// Set up the main canvas
      const charWidth = 6
      const charHeight = 10
      canvas.width = adjustedWidth * charWidth
      canvas.height = height * charHeight

// Clear canvas and set background
      ctx.fillStyle = "#000"
      ctx.fillRect(0, 0, canvas.width, canvas.height)

// Get processed image data
      const processedImageData = tempCtx.getImageData(0, 0, adjustedWidth, height)
      const processedData = processedImageData.data

// Draw ASCII art with enhanced algorithm
      ctx.textBaseline = "top"
      ctx.font = `${charHeight}px "JetBrains Mono"`

for (let y = 0; y < height; y++) {
        for (let x = 0; x < adjustedWidth; x++) {
          const i = (y * adjustedWidth + x) * 4
          const r = processedData[i]
          const g = processedData[i + 1]
          const b = processedData[i + 2]

// Calculate perceived brightness (human eye is more sensitive to green)
          const brightness = 0.299 * r + 0.587 * g + 0.114 * b

// Map brightness to ASCII character with more precision
          const charIndex = Math.floor((brightness / 255) * (asciiChars.length - 1))
          const char = asciiChars[charIndex]

// Create gradient for each character based on surrounding pixels
          const gradient = ctx.createLinearGradient(
            x * charWidth,
            y * charHeight,
            x * charWidth + charWidth,
            y * charHeight + charHeight,
          )

gradient.addColorStop(0, `rgba(${r},${g},${b},1)`)

// Sample nearby pixels for gradient
          if (x < adjustedWidth - 1 && y < height - 1) {
            const i2 = ((y + 1) * adjustedWidth + (x + 1)) * 4
            gradient.addColorStop(1, `rgba(${processedData[i2]},${processedData[i2 + 1]},${processedData[i2 + 2]},1)`)
          } else {
            gradient.addColorStop(1, `rgba(${r},${g},${b},1)`)
          }

ctx.fillStyle = gradient
          ctx.fillText(char, x * charWidth, y * charHeight)
        }
      }
    }
  }, [width, height, contrast, brightness])

return (
    <div className="ascii-portrait-container flex justify-center my-4">
      <div className="relative group">
        <canvas
          ref={canvasRef}
          className="border border-primary/30 rounded shadow-lg shadow-primary/20 transition-all duration-300 hover:shadow-primary/40"
          style={{ maxWidth: "100%", height: "auto" }}
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded" />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ascii-portrait-comparison.tsx" isEdit="true" isMerged="true"
"use client"

import { AsciiPortraitCanvas } from "./ascii-portrait-canvas"

export function AsciiPortraitComparison() {
  // Using fixed values as requested
  const contrast = 1.4
  const brightness = 0.7

return (
    <div className="space-y-4">
      <AsciiPortraitCanvas width={100} height={120} contrast={contrast} brightness={brightness} />
      <div className="text-center text-xs text-muted-foreground mt-2">ASCII Art Portrait</div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Terminal from "@/components/terminal"
import BootSequence from "@/components/boot-sequence"
import { CRTToggle } from "@/components/crt-toggle"

export default function Home() {
  const [booting, setBooting] = useState(true)

useEffect(() => {
    const timer = setTimeout(() => {
      setBooting(false)
    }, 2500)

return () => clearTimeout(timer)
  }, [])

return (
    <main className="min-h-screen bg-background relative overflow-hidden">
      {/* Background Image */}
      <div
        className="fixed inset-0 bg-cover bg-center bg-no-repeat z-0"
        style={{
          backgroundImage:
            'url("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/wp14013807.jpg-R0GMP9bCUVPW5Qfg2rbLlUeYSGymlM.jpeg")',
          backgroundPosition: "center 40%",
          filter: "brightness(0.7) contrast(1.1)",
        }}
        aria-hidden="true"
      >
        {/* Overlay for better text readability - removed blur effect */}
        <div className="absolute inset-0 bg-black/40" />
      </div>

<div className="container mx-auto px-4 py-8 h-screen flex flex-col relative z-10">
        {booting ? <BootSequence /> : <Terminal />}
      </div>
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/terminal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect, useRef, useCallback } from "react"
import { TerminalIcon, User, Briefcase, Code, Mail, GraduationCap, Award, Shield } from "lucide-react"
import { Button } from "@/components/ui/button"
import { AboutSection } from "@/components/sections/about-section"
import { EducationSection } from "@/components/sections/education-section"
import { SkillsSection } from "@/components/sections/skills-section"
import { ExperienceSection } from "@/components/sections/experience-section"
import { ProjectsSection } from "@/components/sections/projects-section"
import { CertificationsSection } from "@/components/sections/certifications-section"
import { ContactSection } from "@/components/sections/contact-section"
import { ImageAsciiLogo } from "@/components/image-ascii-logo"

type Command = {
  input: string
  output: React.ReactNode
  timestamp: Date
}

export default function Terminal() {
  const [input, setInput] = useState("")
  const [commandHistory, setCommandHistory] = useState<Command[]>([])
  const [historyIndex, setHistoryIndex] = useState(-1)
  const [currentSection, setCurrentSection] = useState<string | null>(null)
  const inputRef = useRef<HTMLInputElement>(null)
  const terminalRef = useRef<HTMLDivElement>(null)

// Use useCallback to memoize the scrollToBottom function
  const scrollToBottom = useCallback(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
    }
  }, [])

useEffect(() => {
    // Focus input on mount and when clicking anywhere in the terminal
    inputRef.current?.focus()

const handleClick = () => {
      inputRef.current?.focus()
    }

document.addEventListener("click", handleClick)

// Add welcome message
    setCommandHistory([
      {
        input: "welcome",
        output: (
          <div className="space-y-2">
            <ImageAsciiLogo />
            <p className="font-mono text-white">
              Welcome to Gokul Sathiyamurthy's cybersecurity portfolio! Type help to see available commands.
            </p>
          </div>
        ),
        timestamp: new Date(),
      },
    ])

return () => {
      document.removeEventListener("click", handleClick)
    }
  }, [])

useEffect(() => {
    scrollToBottom()
  }, [commandHistory, currentSection, scrollToBottom])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (!input.trim()) return

const command = input.trim().toLowerCase()
    let output: React.ReactNode

// Process command
    switch (command) {
      case "help":
        output = (
          <div className="space-y-2 text-white">
            <p className="font-bold">Available commands:</p>
            <ul className="space-y-1">
              <li>
                <span className="text-white font-bold">about</span> - Learn about Gokul
              </li>
              <li>
                <span className="text-white font-bold">education</span> - View educational background
              </li>
              <li>
                <span className="text-white font-bold">skills</span> - See technical skills
              </li>
              <li>
                <span className="text-white font-bold">experience</span> - View work experience
              </li>
              <li>
                <span className="text-white font-bold">projects</span> - View projects
              </li>
              <li>
                <span className="text-white font-bold">certifications</span> - View certifications and competitions
              </li>
              <li>
                <span className="text-white font-bold">contact</span> - Get contact information
              </li>
              <li>
                <span className="text-white font-bold">clear</span> - Clear the terminal
              </li>
              <li>
                <span className="text-white font-bold">help</span> - Show this help message
              </li>
              <li>
                <span className="text-white font-bold">scan</span> - Run a security scan
              </li>
            </ul>
          </div>
        )
        setCurrentSection(null)
        break

case "about":
        output = <AboutSection />
        setCurrentSection("about")
        break

case "education":
        output = <EducationSection />
        setCurrentSection("education")
        break

case "skills":
        output = <SkillsSection />
        setCurrentSection("skills")
        break

case "experience":
        output = <ExperienceSection />
        setCurrentSection("experience")
        break

case "projects":
        output = <ProjectsSection />
        setCurrentSection("projects")
        break

case "certifications":
        output = <CertificationsSection />
        setCurrentSection("certifications")
        break

case "contact":
        output = <ContactSection />
        setCurrentSection("contact")
        break

case "clear":
        setCommandHistory([])
        setCurrentSection(null)
        setInput("")
        return

case "scan":
        output = (
          <div className="space-y-2 text-white">
            <p>Running security scan...</p>
            <pre className="text-xs my-2 text-white/70">
              {`
[+] Scanning system for vulnerabilities...
[+] Checking for open ports...
[+] Analyzing network traffic...
[+] Inspecting file integrity...
[+] Scanning for malware signatures...
[+] Checking for suspicious processes...
[+] Checking for suspicious processes...
`}
            </pre>
            <p className="text-green-500">Scan complete! No threats detected. System secure.</p>
          </div>
        )
        setCurrentSection(null)
        break

default:
        output = (
          <p className="text-white">
            Command not found: {command}. Type <span className="text-white font-bold">help</span> to see available
            commands.
          </p>
        )
        setCurrentSection(null)
    }

// Add command to history
    setCommandHistory((prev) => [
      ...prev,
      {
        input: command,
        output,
        timestamp: new Date(),
      },
    ])

// Reset input and history index
    setInput("")
    setHistoryIndex(-1)
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    // Handle up/down arrows for command history navigation
    if (e.key === "ArrowUp") {
      e.preventDefault()
      if (historyIndex < commandHistory.length - 1) {
        const newIndex = historyIndex + 1
        setHistoryIndex(newIndex)
        setInput(commandHistory[commandHistory.length - 1 - newIndex].input)
      }
    } else if (e.key === "ArrowDown") {
      e.preventDefault()
      if (historyIndex > 0) {
        const newIndex = historyIndex - 1
        setHistoryIndex(newIndex)
        setInput(commandHistory[commandHistory.length - 1 - newIndex].input)
      } else if (historyIndex === 0) {
        setHistoryIndex(-1)
        setInput("")
      }
    }
  }

return (
    <div className="flex flex-col h-full">
      <div className="bg-black border border-white/30 rounded-t-md p-2 flex items-center">
        <TerminalIcon className="h-4 w-4 text-white mr-2" />
        <span className="text-sm font-mono text-white">
          gokul@cybersec ~ {currentSection ? `/${currentSection}` : ""}
        </span>
      </div>

<div ref={terminalRef} className="flex-1 bg-black border-x border-white/30 p-4 overflow-y-auto font-mono text-sm">
        {commandHistory.map((cmd, index) => (
          <div key={index} className="mb-4">
            <div className="flex items-center text-white/70">
              <span className="text-white mr-2">$</span>
              <span>{cmd.input}</span>
            </div>
            <div className="mt-1 ml-4">{cmd.output}</div>
          </div>
        ))}
      </div>

<div className="bg-black border border-white/30 rounded-b-md p-2">
        <form onSubmit={handleSubmit} className="flex items-center">
          <span className="text-white mr-2">$</span>
          <input
            ref={inputRef}
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            className="flex-1 bg-transparent border-none outline-none font-mono text-white"
            aria-label="Terminal input"
            autoComplete="off"
            spellCheck="false"
          />
        </form>
      </div>

<nav className="mt-4 flex flex-wrap justify-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setInput("about")
            handleSubmit({ preventDefault: () => {} } as React.FormEvent)
          }}
          className="text-xs bg-black/50 hover:bg-black/70 text-white border-white/30"
        >
          <User className="h-3 w-3 mr-1" />
          About
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setInput("education")
            handleSubmit({ preventDefault: () => {} } as React.FormEvent)
          }}
          className="text-xs bg-black/50 hover:bg-black/70 text-white border-white/30"
        >
          <GraduationCap className="h-3 w-3 mr-1" />
          Education
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setInput("skills")
            handleSubmit({ preventDefault: () => {} } as React.FormEvent)
          }}
          className="text-xs bg-black/50 hover:bg-black/70 text-white border-white/30"
        >
          <Shield className="h-3 w-3 mr-1" />
          Skills
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setInput("experience")
            handleSubmit({ preventDefault: () => {} } as React.FormEvent)
          }}
          className="text-xs bg-black/50 hover:bg-black/70 text-white border-white/30"
        >
          <Briefcase className="h-3 w-3 mr-1" />
          Experience
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setInput("projects")
            handleSubmit({ preventDefault: () => {} } as React.FormEvent)
          }}
          className="text-xs bg-black/50 hover:bg-black/70 text-white border-white/30"
        >
          <Code className="h-3 w-3 mr-1" />
          Projects
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setInput("certifications")
            handleSubmit({ preventDefault: () => {} } as React.FormEvent)
          }}
          className="text-xs bg-black/50 hover:bg-black/70 text-white border-white/30"
        >
          <Award className="h-3 w-3 mr-1" />
          Certifications
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setInput("contact")
            handleSubmit({ preventDefault: () => {} } as React.FormEvent)
          }}
          className="text-xs bg-black/50 hover:bg-black/70 text-white border-white/30"
        >
          <Mail className="h-3 w-3 mr-1" />
          Contact
        </Button>
      </nav>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/boot-sequence.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"

const bootMessages = [
  "Initializing system...",
  "Loading kernel...",
  "Mounting file systems...",
  "Starting security services...",
  "Scanning for threats...",
  "Loading portfolio data...",
  "Initializing secure terminal interface...",
]

export default function BootSequence() {
  const [currentMessageIndex, setCurrentMessageIndex] = useState(0)

useEffect(() => {
    if (currentMessageIndex < bootMessages.length) {
      const timer = setTimeout(() => {
        setCurrentMessageIndex((prev) => prev + 1)
      }, 400)

return () => clearTimeout(timer)
    }
  }, [currentMessageIndex])

return (
    <div className="flex flex-col items-center justify-center h-full">
      <div className="w-full max-w-2xl bg-black/70 p-8 rounded-md border border-primary/30 font-mono text-primary">
        <div className="mb-6 text-center">
          <pre className="text-xs sm:text-sm md:text-base whitespace-pre overflow-x-auto">
            {`
  ██████╗ ██╗   ██╗██████╗ ███████╗██████╗ ███████╗███████╗ ██████╗
 ██╔════╝ ╚██╗ ██╔╝██╔══██╗██╔════╝██╔══██╗██╔════╝██╔════╝██╔════╝
 ██║  ███╗ ╚████╔╝ ██████╔╝█████╗  ██████╔╝███████╗█████╗  ██║     
 ██║   ██║  ╚██╔╝  ██╔══██╗██╔══╝  ██╔══██╗╚════██║██╔══╝  ██║     
 ╚██████╔╝   ██║   ██████╔╝███████╗██║  ██║███████║███████╗╚██████╗
  ╚═════╝    ╚═╝   ╚═════╝ ╚══════╝╚═╝  ╚═╝╚══════╝╚══════╝ ╚═════╝
                                                                    
`}
          </pre>
        </div>

<div className="space-y-2">
          {bootMessages.slice(0, currentMessageIndex).map((message, index) => (
            <div key={index} className="flex">
              <span className="text-primary mr-2">></span>
              <span className="text-foreground/90">{message}</span>
              {index === currentMessageIndex - 1 && index !== bootMessages.length - 1 && (
                <span className="ml-1 cursor-blink">_</span>
              )}
            </div>
          ))}

{currentMessageIndex === bootMessages.length && (
            <div className="flex mt-4">
              <span className="text-primary mr-2">></span>
              <span className="typing-animation text-foreground/90">
                Boot sequence complete. Welcome to Gokul's secure terminal.
              </span>
              <span className="cursor-blink">_</span>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="next.config.js" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["v0.blob.com"],
  },
}

module.exports = nextConfig

[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "ascii-portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toggle": "^1.0.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "lucide-react": "^0.344.0",
    "next": "14.1.0",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[V0_FILE]javascript:file="postcss.config.js" isMerged="true"
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

[V0_FILE]plaintext:file=".gitignore" isMerged="true"
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

[V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        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)",
      },
      fontFamily: {
        sans: ["var(--font-sans)"],
        mono: ["var(--font-mono)"],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 0%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 0%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 70%;
    --accent: 0 0% 10%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 30%;
    --input: 0 0% 30%;
    --ring: 0 0% 100%;
    --radius: 0.5rem;
  }

.dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 0%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 0%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 70%;
    --accent: 0 0% 10%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 30%;
    --input: 0 0% 30%;
    --ring: 0 0% 100%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 50;
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}

.cursor-blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.terminal-text {
  @apply font-mono text-white relative;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.scanline {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%);
  background-size: 100% 4px;
  animation: scanlines 1s steps(60) infinite;
}

@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.typing-animation {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3.5s steps(40, end);
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.reflection {
  position: relative;
  overflow: hidden;
}

.reflection::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: reflection 8s linear infinite;
}

@keyframes reflection {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter, JetBrains_Mono } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-mono",
})

export const metadata: Metadata = {
  title: "Gokul Sathiyamurthy | Cybersecurity Professional",
  description: "Cybersecurity portfolio of Gokul Sathiyamurthy - SOC Analyst, Security Engineer, and Threat Expert",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning className="dark">
      <body className={`${inter.variable} ${jetbrainsMono.variable} font-sans`}>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem={false}
          disableTransitionOnChange
          forcedTheme="dark"
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/simple-ascii-logo.tsx" isMerged="true"
"use client"

export function SimpleAsciiLogo() {
  return (
    <pre className="font-mono text-white text-xs sm:text-sm md:text-base whitespace-pre bg-black p-2 overflow-x-auto">
      {`
   ######    #######   ##    ##  ##     ##  ##       
  ##    ##  ##     ##  ##   ##   ##     ##  ##       
  ##        ##     ##  ##  ##    ##     ##  ##       
  ##   #### ##     ##  #####     ##     ##  ##       
  ##    ##  ##     ##  ##  ##    ##     ##  ##       
  ##    ##  ##     ##  ##   ##   ##     ##  ##       
   ######    #######   ##    ##   #######   ########
                                                    
   ######     ###    ######## ##    ##    ###       
  ##    ##   ## ##      ##     ##  ##    ## ##      
  ##        ##   ##     ##      ####    ##   ##     
   ######  ##     ##    ##       ##    ##     ##    
        ## #########    ##       ##    #########    
  ##    ## ##     ##    ##       ##    ##     ##    
   ######  ##     ##    ##       ##    ##     ##    
`}
    </pre>
  )
}

[V0_FILE]typescriptreact:file="components/image-ascii-logo.tsx" isEdit="true"
"use client"

export function ImageAsciiLogo() {
  return (
    <div className="bg-black p-2 font-mono text-white">
      <pre className="text-white whitespace-pre overflow-x-auto text-xs sm:text-sm md:text-base">
        {`
$ echo "GOKUL SATYA"
GOKUL SATYA

$ whoami
gokul@cybersec

$ pwd
/home/gokul/portfolio

$ ls
about  education  skills  experience  projects  certifications  contact
`}
      </pre>
    </div>
  )
}
</article></body></html>