15}
16// Simple hook for mobile menu toggle
17function useMobileMenu() {
18 const [isOpen, setIsOpen] = useState(false);
19 const toggleMenu = () => setIsOpen(!isOpen);
23
24// Simple hook for tracking current hash for active nav styling
25function useCurrentHash() {
26 const [currentHash, setCurrentHash] = useState(() =>
27 window.location.hash.slice(1)
40}
41
42export function App({ initialData }: AppProps) {
43 // initialData
44 const { demoData, loading, error } = initialData;
346 <h3>Documentation excerpt</h3>
347 <p>
348 Glance cobrowse provides a “hook” function to allow
349 customers to customize page and element masking during a
350 cobrowse session.
51- **Smooth Animations**: Floating elements, hover effects, and smooth scrolling
52- **Professional Portfolio**: 12 sample projects across web development, web design, and graphic design
53- **Interactive Contact Form**: Functional contact form with validation
54- **Modern UI/UX**: Glass morphism effects, gradients, and professional typography
55- **SEO Optimized**: Proper meta tags and semantic HTML structure
3import { Github, Linkedin, Mail, Twitter, Instagram, Heart } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Footer() {
6 const currentYear = new Date().getFullYear();
7
3import { Mail, Phone, MapPin, Send, Clock, CheckCircle } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Contact() {
6 const [formData, setFormData] = useState({
7 name: '',
3import { ExternalLink, Github, Filter } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Portfolio() {
6 const [activeFilter, setActiveFilter] = useState('all');
7
3import { Code, Palette, Smartphone, Search, Zap, Shield } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Services() {
6 const services = [
7 {
3import { Award, Users, Coffee, Clock } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function About() {
6 const stats = [
7 { icon: <Award size={32} />, number: "50+", label: "Projects Completed" },
59 digital solutions. My journey began with a simple curiosity about how
60 websites work, and it has evolved into a passion for crafting beautiful,
61 functional, and user-friendly digital experiences.
62 </p>
63 <p className="text-gray-600 mb-6 leading-relaxed">
3import { ArrowDown, Github, Linkedin, Mail } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Hero() {
6 const scrollToSection = (href: string) => {
7 const element = document.querySelector(href);
3import { Menu, X } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Header() {
6 const [isMenuOpen, setIsMenuOpen] = useState(false);
7 const [isScrolled, setIsScrolled] = useState(false);
9import Footer from "./Footer.tsx";
10
11export default function App() {
12 return (
13 <div className="min-h-screen">
