[V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { colors: { 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))", }, primary: "#4B5945", secondary: "#66785F", tertiary: "#91AC8F", quaternary: "#B2C9AD", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "./globals.css" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Nathan Sterling - Web Developer & Designer", description: "Portfolio of Nathan Sterling, a professional web developer and designer specializing in modern, responsive web solutions.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/components/Skills.tsx" isMerged="true" const skills = [ { name: "HTML5", level: 90 }, { name: "CSS3", level: 85 }, { name: "JavaScript", level: 80 }, { name: "React", level: 75 }, { name: "Node.js", level: 70 }, { name: "Python", level: 65 }, { name: "UI/UX Design", level: 80 }, { name: "Adobe Creative Suite", level: 75 }, ] export default function Skills() { return (

My Skills

{skills.map((skill, index) => (

{skill.name} {skill.level}%

))}

) } [V0_FILE]typescriptreact:file="app/components/Testimonials.tsx" isMerged="true" const testimonials = [ { name: "Jane Doe", company: "Tech Innovators Inc.", testimonial: "Nathan's expertise in both design and development made our project a breeze. He delivered a stunning website that exceeded our expectations.", }, { name: "John Smith", company: "Creative Solutions LLC", testimonial: "Working with Nathan was a pleasure. His attention to detail and problem-solving skills are unmatched. I highly recommend his services.", }, { name: "Emily Johnson", company: "StartUp Ventures", testimonial: "Nathan's ability to translate our vision into a functional and beautiful website was impressive. He's a true professional in every sense.", }, ] export default function Testimonials() { return (

Client Testimonials

{testimonials.map((testimonial, index) => (

"{testimonial.testimonial}"

{testimonial.name}

{testimonial.company}

))}

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" isMerged="true" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Header from "./components/Header" import Hero from "./components/Hero" import Projects from "./components/Projects" import Skills from "./components/Skills" import About from "./components/About" import Testimonials from "./components/Testimonials" import Footer from "./components/Footer" export default function Home() { return ( <>