[V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import { Marquee } from "@/components/marquee" import { BlinkingText } from "@/components/blinking-text" import { VisitorCounter } from "@/components/visitor-counter" export default function Home() { return (

{/* Header with clashing colors */}

MY AWESOME PORTFOLIO

{/* Navigation with inconsistent styling */} {/* Main content with poor spacing and alignment */}

About Me

YOUR PHOTO HERE

Hello! I am a with amazing skills!

I make websites that look exactly like this one! Aren't they AMAZING?

MY AWESOME PROJECTS

{[1, 2, 3, 4].map((item) => (

Project {item}

PROJECT IMAGE

This is an amazing project that I worked on. It's really cool and you should check it out!

))}

Contact Me Now!!!

{/* Footer with more clashing elements */} ) } [V0_FILE]typescriptreact:file="components/marquee.tsx" "use client" import { useEffect, useRef } from "react" export function Marquee({ text }: { text: string }) { const marqueeRef = useRef(null) useEffect(() => { const marquee = marqueeRef.current if (!marquee) return let position = 0 const speed = 2 const width = marquee.offsetWidth const animate = () => { position -= speed if (position <= -width) { position = window.innerWidth } if (marquee) { marquee.style.transform = `translateX(${position}px)` } requestAnimationFrame(animate) } const animationId = requestAnimationFrame(animate) return () => { cancelAnimationFrame(animationId) } }, []) return (

{text.repeat(5)}

) } [V0_FILE]typescriptreact:file="components/blinking-text.tsx" "use client" import { useState, useEffect } from "react" export function BlinkingText({ text, className = "" }: { text: string; className?: string }) { const [visible, setVisible] = useState(true) useEffect(() => { const interval = setInterval(() => { setVisible((prev) => !prev) }, 500) return () => clearInterval(interval) }, []) return ( {text} ) } [V0_FILE]typescriptreact:file="components/visitor-counter.tsx" "use client" import { useState, useEffect } from "react" export function VisitorCounter({ initialCount = 1000 }: { initialCount?: number }) { const [count, setCount] = useState(initialCount) useEffect(() => { // Randomly increment the counter occasionally to simulate visitors const interval = setInterval(() => { if (Math.random() > 0.7) { setCount((prev) => prev + 1) } }, 3000) return () => clearInterval(interval) }, []) return (

Visitors: {count}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @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}", ], safelist: [ "bg-red-500", "bg-blue-600", "bg-green-500", "bg-pink-500", "text-yellow-500", "text-white-500", "text-purple-500", "text-black-500", "font-bold", "font-normal", "text-xl", "text-lg", "text-2xl", "text-base", "bg-orange-200", "bg-blue-200", "bg-green-200", "bg-purple-200", "border-red-500", "border-yellow-500", "border-pink-500", "border-cyan-500", "text-red-600", "text-purple-600", "text-blue-600", "text-green-600", "font-serif", "font-sans", "font-mono", "font-cursive", "bg-pink-400", "bg-yellow-400", "bg-cyan-400", "bg-lime-400", "text-blue-600", "text-red-600", "text-purple-600", "text-black-600", "bg-blue-500", "bg-cyan-500", "bg-pink-500", ], theme: { extend: { fontFamily: { comic: ["Comic Sans MS", "cursive"], fantasy: ["Papyrus", "fantasy"], cursive: ["Brush Script MT", "cursive"], }, 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))", }, }, borderWidth: { 3: "3px", }, }, }, plugins: [], }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This