KEBIRU WISDOM YUNUSA - Professional Portfolio

\n \n\n",[18,66],"0063c152-3d9a-11f0-9a0f-76b3cceeab13",["D",1748639208920],[18,90],"pulls","branches",1,"forks","envVars",{"_192":26,"_194":26},"connections",{"_192":26,"_193":26},"count","unfilledCount","emptyCount",{"_35":335,"_13":334,"_64":327,"_45":-5,"_37":38,"_164":336,"_165":24,"_39":337,"_41":26,"_67":91,"_167":-5,"_68":30,"_168":-5,"_220":338,"_17":339},{"_35":325,"_13":326,"_64":104,"_45":327,"_37":38,"_164":328,"_165":24,"_39":329,"_41":217,"_67":330,"_167":331,"_68":30,"_168":-5,"_220":332,"_17":333},{"_35":163,"_13":18,"_64":92,"_45":-5,"_37":38,"_164":42,"_165":24,"_39":322,"_41":26,"_67":91,"_167":-5,"_68":30,"_168":-5,"_220":323,"_17":324},{"_35":181,"_13":90,"_64":89,"_45":92,"_37":38,"_164":84,"_165":24,"_39":319,"_41":26,"_67":91,"_167":-5,"_68":30,"_168":-5,"_220":320,"_17":321},{"_35":311,"_13":312,"_64":313,"_45":89,"_37":38,"_164":314,"_165":24,"_39":315,"_41":26,"_67":81,"_167":316,"_68":30,"_168":-5,"_220":317,"_17":318},{"_35":304,"_13":305,"_64":306,"_45":89,"_37":38,"_164":84,"_165":24,"_39":307,"_41":26,"_67":81,"_167":308,"_68":30,"_168":-5,"_220":309,"_17":310},{"_35":296,"_13":297,"_64":298,"_45":89,"_37":38,"_164":299,"_165":24,"_39":300,"_41":26,"_67":81,"_167":301,"_68":30,"_168":-5,"_220":302,"_17":303},{"_35":288,"_13":289,"_64":290,"_45":89,"_37":38,"_164":291,"_165":24,"_39":292,"_41":26,"_67":81,"_167":293,"_68":30,"_168":-5,"_220":294,"_17":295},{"_35":280,"_13":281,"_64":282,"_45":89,"_37":38,"_164":283,"_165":24,"_39":284,"_41":26,"_67":81,"_167":285,"_68":30,"_168":-5,"_220":286,"_17":287},{"_35":272,"_13":273,"_64":274,"_45":89,"_37":38,"_164":275,"_165":24,"_39":276,"_41":26,"_67":81,"_167":277,"_68":30,"_168":-5,"_220":278,"_17":279},{"_35":264,"_13":265,"_64":266,"_45":89,"_37":38,"_164":267,"_165":24,"_39":268,"_41":26,"_67":81,"_167":269,"_68":30,"_168":-5,"_220":270,"_17":271},{"_35":256,"_13":257,"_64":258,"_45":89,"_37":38,"_164":259,"_165":24,"_39":260,"_41":26,"_67":81,"_167":261,"_68":30,"_168":-5,"_220":262,"_17":263},{"_35":177,"_13":66,"_64":65,"_45":92,"_37":38,"_164":42,"_165":24,"_39":253,"_41":26,"_67":21,"_167":179,"_68":30,"_168":-5,"_220":254,"_17":255},{"_35":173,"_13":80,"_64":79,"_45":92,"_37":38,"_164":74,"_165":24,"_39":250,"_41":26,"_67":81,"_167":175,"_68":30,"_168":-5,"_220":251,"_17":252},{"_35":246,"_13":245,"_64":239,"_45":-5,"_37":38,"_164":240,"_165":24,"_39":247,"_41":26,"_67":91,"_167":-5,"_68":30,"_168":-5,"_220":248,"_17":249},{"_35":236,"_13":237,"_64":238,"_45":239,"_37":38,"_164":240,"_165":24,"_39":241,"_41":26,"_67":81,"_167":242,"_68":30,"_168":-5,"_220":243,"_17":244},{"_35":229,"_13":230,"_64":231,"_45":-5,"_37":38,"_164":128,"_165":24,"_39":232,"_41":186,"_67":21,"_167":233,"_68":30,"_168":-5,"_220":234,"_17":235},{"_35":223,"_13":224,"_64":225,"_45":-5,"_37":38,"_164":186,"_165":24,"_39":226,"_41":26,"_67":81,"_167":219,"_68":30,"_168":-5,"_220":227,"_17":228},{"_35":214,"_13":215,"_64":216,"_45":-5,"_37":38,"_164":217,"_165":24,"_39":218,"_41":26,"_67":81,"_167":219,"_68":30,"_168":-5,"_220":221,"_17":222},"105a31d2-3d99-11f0-97f9-76b3cceeab13","new-file-8938.tsx","105a3286-3d99-11f0-97f9-76b3cceeab13",2,["D",1748638806206],"","children",[],[215],"dca16112-3d98-11f0-ae61-76b3cceeab13","main.tsx","dca161b2-3d98-11f0-ae61-76b3cceeab13",["D",1748638719431],[],[224],"89c17f2a-3d9a-11f0-98de-76b3cceeab13","README.md","efa8ed56-3d99-11f0-b146-76b3cceeab13",["D",1748639439379],"# KEBIRU WISDOM YUNUSA - Professional Portfolio\n\nA modern, responsive portfolio website showcasing web development, web design, and graphic design services.\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React app\n│ │ ├── Header.tsx # Navigation header\n│ │ ├── Hero.tsx # Hero section\n│ │ ├── About.tsx # About section\n│ │ ├── Services.tsx # Services section\n│ │ ├── Portfolio.tsx # Portfolio gallery\n│ │ ├── Contact.tsx # Contact section\n│ │ └── Footer.tsx # Footer component\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## Features\n\n- Responsive design with modern UI/UX\n- Smooth scrolling navigation\n- Interactive portfolio gallery\n- Contact form\n- Professional service showcase\n- Mobile-optimized layout\n\n## Tech Stack\n\n- Frontend: React 18.2.0 with TypeScript\n- Backend: Hono framework\n- Styling: TailwindCSS with custom CSS animations\n- Icons: Lucide React\n- Fonts: Inter & Playfair Display (Google Fonts)\n- Images: AI-generated portfolio images\n\n## Live Demo\n\nThe portfolio is now live and accessible via the HTTP endpoint. The website features:\n\n- **Responsive Design**: Works perfectly on all devices\n- **Smooth Animations**: Floating elements, hover effects, and smooth scrolling\n- **Professional Portfolio**: 12 sample projects across web development, web design, and graphic design\n- **Interactive Contact Form**: Functional contact form with validation\n- **Modern UI/UX**: Glass morphism effects, gradients, and professional typography\n- **SEO Optimized**: Proper meta tags and semantic HTML structure\n\n## Portfolio Highlights\n\nThe portfolio showcases:\n- **Web Development Projects**: E-commerce platforms, dashboards, corporate websites\n- **Web Design Projects**: Restaurant websites, landing pages, mobile app UI designs \n- **Graphic Design Projects**: Brand identities, social media graphics, print designs, logo collections\n\nAll portfolio images are AI-generated and represent realistic project examples that demonstrate the range of services offered.",[],[230],"f2093b50-3d99-11f0-afba-76b3cceeab13","types.ts","f2093c22-3d99-11f0-afba-76b3cceeab13","aae5b7b9-4348-444d-a482-4949da7e5127",4,["D",1748639184837],"export interface PortfolioItem {\n id: string;\n title: string;\n category: 'web-development' | 'web-design' | 'graphic-design';\n description: string;\n imageUrl: string;\n technologies?: string[];\n projectUrl?: string;\n}\n\nexport interface Service {\n id: string;\n title: string;\n description: string;\n icon: string;\n features: string[];\n}\n\nexport interface ContactForm {\n name: string;\n email: string;\n subject: string;\n message: string;\n}",[],[245,237],"shared","f2094532-3d99-11f0-afba-76b3cceeab13",["D",1748639184837],[210],[245],["D",1748639204281],[],[18,80],["D",1748639200131],[],[18,66],"2ffaafd4-3d9a-11f0-a416-76b3cceeab13","Services.tsx","2ffab07e-3d9a-11f0-a416-76b3cceeab13",11,["D",1748639288763],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Code, Palette, Smartphone, Search, Zap, Shield } from \"https://esm.sh/lucide-react@0.263.1\";\n\nexport default function Services() {\n const services = [\n {\n icon:

,\n      title: \"Web Development\",\n      description: \"Custom websites and web applications built with modern technologies and best practices.\",\n      features: [\n        \"Responsive Design\",\n        \"Modern Frameworks\",\n        \"Performance Optimization\",\n        \"Cross-browser Compatibility\"\n      ]\n    },\n    {\n      icon: ,\n      title: \"Web Design\",\n      description: \"Beautiful, user-friendly designs that convert visitors into customers.\",\n      features: [\n        \"UI/UX Design\",\n        \"Wireframing & Prototyping\",\n        \"User Research\",\n        \"Design Systems\"\n      ]\n    },\n    {\n      icon: ,\n      title: \"Graphic Design\",\n      description: \"Eye-catching graphics and visual identities that make your brand stand out.\",\n      features: [\n        \"Logo Design\",\n        \"Brand Identity\",\n        \"Print Design\",\n        \"Digital Graphics\"\n      ]\n    },\n    {\n      icon: ,\n      title: \"SEO Optimization\",\n      description: \"Improve your website's visibility and ranking on search engines.\",\n      features: [\n        \"On-page SEO\",\n        \"Technical SEO\",\n        \"Content Optimization\",\n        \"Performance Audits\"\n      ]\n    },\n    {\n      icon: ,\n      title: \"Performance Optimization\",\n      description: \"Fast-loading websites that provide excellent user experience.\",\n      features: [\n        \"Speed Optimization\",\n        \"Code Minification\",\n        \"Image Optimization\",\n        \"Caching Strategies\"\n      ]\n    },\n    {\n      icon: ,\n      title: \"Maintenance & Support\",\n      description: \"Ongoing support and maintenance to keep your website running smoothly.\",\n      features: [\n        \"Regular Updates\",\n        \"Security Monitoring\",\n        \"Backup Solutions\",\n        \"Technical Support\"\n      ]\n    }\n  ];\n\n  return (\n    \n      \n        \n          {/* Section Header */}\n          \n            \n              My Services\n            
\n            \n              Comprehensive digital solutions to help your business thrive online\n            
\n          
\n\n          {/* Services Grid */}\n          \n            {services.map((service, index) => (\n              \n                \n                  {service.icon}\n                
\n                \n                \n                  {service.title}\n                
\n                \n                \n                  {service.description}\n                
\n                \n                \n                  {service.features.map((feature, featureIndex) => (\n                    \n                      
\n                      {feature}\n                    
\n                  ))}\n                
\n                \n                \n              
\n            ))}\n          
\n\n          {/* CTA Section */}\n          \n            \n              \n                Ready to Start Your Project?\n              
\n              \n                Let's discuss how I can help bring your vision to life\n              
\n              \n                \n                \n              
\n            
\n          
\n        
\n      
\n    
\n  );\n}",[],[18,90,257],"4971de38-3d9a-11f0-a25d-76b3cceeab13","Portfolio.tsx","4971df00-3d9a-11f0-a25d-76b3cceeab13",12,["D",1748639331488],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { ExternalLink, Github, Filter } from \"https://esm.sh/lucide-react@0.263.1\";\n\nexport default function Portfolio() {\n  const [activeFilter, setActiveFilter] = useState('all');\n\n  const portfolioItems = [\n    {\n      id: 1,\n      title: \"E-Commerce Platform\",\n      category: \"web-development\",\n      description: \"Modern e-commerce website with payment integration and admin dashboard\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/modern-ecommerce-website-with-clean-design-shopping-cart-product-grid\",\n      technologies: [\"React\", \"Node.js\", \"MongoDB\", \"Stripe\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 2,\n      title: \"Restaurant Website\",\n      category: \"web-design\",\n      description: \"Elegant restaurant website with online reservation system\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/elegant-restaurant-website-design-with-menu-and-reservation-form\",\n      technologies: [\"HTML\", \"CSS\", \"JavaScript\", \"PHP\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 3,\n      title: \"Brand Identity Design\",\n      category: \"graphic-design\",\n      description: \"Complete brand identity package including logo, business cards, and letterhead\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/professional-brand-identity-design-logo-business-cards-letterhead\",\n      technologies: [\"Adobe Illustrator\", \"Photoshop\", \"InDesign\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 4,\n      title: \"Portfolio Website\",\n      category: \"web-development\",\n      description: \"Personal portfolio website for a photographer with gallery and contact form\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/photographer-portfolio-website-with-image-gallery-dark-theme\",\n      technologies: [\"React\", \"TypeScript\", \"Tailwind CSS\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 5,\n      title: \"Mobile App UI Design\",\n      category: \"web-design\",\n      description: \"Modern mobile app interface design for a fitness tracking application\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/mobile-fitness-app-ui-design-with-dashboard-and-workout-screens\",\n      technologies: [\"Figma\", \"Adobe XD\", \"Principle\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 6,\n      title: \"Social Media Graphics\",\n      category: \"graphic-design\",\n      description: \"Social media post templates and graphics for marketing campaigns\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/social-media-graphics-templates-instagram-facebook-posts\",\n      technologies: [\"Photoshop\", \"Illustrator\", \"Canva\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 7,\n      title: \"Corporate Website\",\n      category: \"web-development\",\n      description: \"Professional corporate website with CMS and multi-language support\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/professional-corporate-website-with-clean-layout-and-cms\",\n      technologies: [\"WordPress\", \"PHP\", \"MySQL\", \"JavaScript\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 8,\n      title: \"Landing Page Design\",\n      category: \"web-design\",\n      description: \"High-converting landing page design for a SaaS product\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/saas-landing-page-design-with-hero-section-and-pricing-table\",\n      technologies: [\"HTML\", \"CSS\", \"JavaScript\", \"Bootstrap\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 9,\n      title: \"Print Design Collection\",\n      category: \"graphic-design\",\n      description: \"Collection of print designs including brochures, flyers, and posters\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/print-design-collection-brochures-flyers-posters-professional\",\n      technologies: [\"InDesign\", \"Illustrator\", \"Photoshop\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 10,\n      title: \"Dashboard Application\",\n      category: \"web-development\",\n      description: \"Analytics dashboard with real-time data visualization and reporting\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/analytics-dashboard-with-charts-graphs-and-data-visualization\",\n      technologies: [\"Vue.js\", \"D3.js\", \"Node.js\", \"PostgreSQL\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 11,\n      title: \"E-learning Platform UI\",\n      category: \"web-design\",\n      description: \"User interface design for an online learning platform with course management\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/elearning-platform-ui-design-with-course-dashboard-and-video-player\",\n      technologies: [\"Sketch\", \"Figma\", \"InVision\"],\n      projectUrl: \"#\"\n    },\n    {\n      id: 12,\n      title: \"Logo Design Portfolio\",\n      category: \"graphic-design\",\n      description: \"Collection of unique logo designs for various industries and businesses\",\n      imageUrl: \"https://maxm-imggenurl.web.val.run/logo-design-portfolio-collection-various-industries-creative\",\n      technologies: [\"Illustrator\", \"Photoshop\", \"CorelDRAW\"],\n      projectUrl: \"#\"\n    }\n  ];\n\n  const categories = [\n    { id: 'all', label: 'All Projects' },\n    { id: 'web-development', label: 'Web Development' },\n    { id: 'web-design', label: 'Web Design' },\n    { id: 'graphic-design', label: 'Graphic Design' }\n  ];\n\n  const filteredItems = activeFilter === 'all' \n    ? portfolioItems \n    : portfolioItems.filter(item => item.category === activeFilter);\n\n  return (\n    \n      \n        \n          {/* Section Header */}\n          \n            \n              My Portfolio\n            
\n            \n              A showcase of my recent work and creative projects\n            
\n          
\n\n          {/* Filter Buttons */}\n          \n            {categories.map((category) => (\n               setActiveFilter(category.id)}\n                className={`px-6 py-3 rounded-full font-semibold transition-all duration-300 hover-lift ${\n                  activeFilter === category.id\n                    ? 'bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg'\n                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n                }`}\n              >\n                {category.label}\n              \n            ))}\n          
\n\n          {/* Portfolio Grid */}\n          \n            {filteredItems.map((item) => (\n              \n                \n                  \n                  \n                    {item.title}
\n                    {item.description}
\n                    \n                      \n                        \n                      \n                      \n                        \n                      \n                    
\n                  
\n                
\n                \n                \n                  {item.title}
\n                  {item.description}
\n                  \n                  \n                    {item.technologies.map((tech, index) => (\n                      \n                        {tech}\n                      \n                    ))}\n                  
\n                
\n              
\n            ))}\n          
\n\n          {/* Load More Button */}\n          \n            \n          
\n\n          {/* Testimonial Section */}\n          \n            \n              💬
\n              \n                \"Kebiru delivered exceptional work that exceeded our expectations. \n                His attention to detail and creative approach made our project a huge success.\"\n              
\n              \n                Sarah Johnson - CEO, TechStart Inc.\n              
\n            
\n          
\n        
\n      
\n    
\n  );\n}",[],[18,90,265],"1526729c-3d9a-11f0-9279-76b3cceeab13","Hero.tsx","1526736e-3d9a-11f0-9279-76b3cceeab13",9,["D",1748639243751],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { ArrowDown, Github, Linkedin, Mail } from \"https://esm.sh/lucide-react@0.263.1\";\n\nexport default function Hero() {\n  const scrollToSection = (href: string) => {\n    const element = document.querySelector(href);\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth' });\n    }\n  };\n\n  return (\n    \n      {/* Background Elements */}\n      \n        
\n        
\n        
\n      
\n\n      \n        \n          {/* Profile Image */}\n          \n            \n              👨‍💻\n            
\n          
\n\n          {/* Main Content */}\n          \n            KEBIRU WISDOM\n            
\n            YUNUSA\n          
\n          \n          \n            Freelance Web Developer • \n             Web Designer • \n             Graphics Designer\n          
\n          \n          \n            Creating stunning digital experiences and visual solutions that help businesses \n            stand out in the digital world. Let's bring your vision to life!\n          
\n\n          {/* CTA Buttons */}\n          \n             scrollToSection(\"#portfolio\")}\n              className=\"bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:shadow-xl transition-all duration-300 hover-lift\"\n            >\n              View My Work\n            \n             scrollToSection(\"#contact\")}\n              className=\"border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition-all duration-300 hover-lift\"\n            >\n              Get In Touch\n            \n          
\n\n          {/* Social Links */}\n          \n            \n              \n            \n            \n              \n            \n            \n              \n            \n          
\n\n          {/* Scroll Indicator */}\n           scrollToSection(\"#about\")}\n            className=\"text-white/80 hover:text-white transition-colors duration-300 animate-bounce\"\n          >\n            \n          \n        
\n      
\n    
\n  );\n}",[],[18,90,273],"0a305ede-3d9a-11f0-941d-76b3cceeab13","Header.tsx","0a305fa6-3d9a-11f0-941d-76b3cceeab13",8,["D",1748639225360],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Menu, X } from \"https://esm.sh/lucide-react@0.263.1\";\n\nexport default function Header() {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const [isScrolled, setIsScrolled] = useState(false);\n\n  useEffect(() => {\n    const handleScroll = () => {\n      setIsScrolled(window.scrollY > 50);\n    };\n\n    window.addEventListener('scroll', handleScroll);\n    return () => window.removeEventListener('scroll', handleScroll);\n  }, []);\n\n  const navItems = [\n    { href: \"#home\", label: \"Home\" },\n    { href: \"#about\", label: \"About\" },\n    { href: \"#services\", label: \"Services\" },\n    { href: \"#portfolio\", label: \"Portfolio\" },\n    { href: \"#contact\", label: \"Contact\" }\n  ];\n\n  const scrollToSection = (href: string) => {\n    const element = document.querySelector(href);\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth' });\n    }\n    setIsMenuOpen(false);\n  };\n\n  return (\n    \n      \n        \n          {/* Logo */}\n          \n            KWY\n          
\n\n          {/* Desktop Navigation */}\n          \n            {navItems.map((item) => (\n               scrollToSection(item.href)}\n                className=\"text-gray-700 hover:text-purple-600 transition-colors duration-300 font-medium\"\n              >\n                {item.label}\n              \n            ))}\n             scrollToSection(\"#contact\")}\n              className=\"bg-gradient-to-r from-purple-600 to-blue-600 text-white px-6 py-2 rounded-full hover:shadow-lg transition-all duration-300 hover-lift\"\n            >\n              Hire Me\n            \n          
\n\n          {/* Mobile Menu Button */}\n           setIsMenuOpen(!isMenuOpen)}\n          >\n            {isMenuOpen ?  : }\n          \n        
\n\n        {/* Mobile Navigation */}\n        {isMenuOpen && (\n          \n            \n              {navItems.map((item) => (\n                 scrollToSection(item.href)}\n                  className=\"text-gray-700 hover:text-purple-600 transition-colors duration-300 font-medium text-left\"\n                >\n                  {item.label}\n                \n              ))}\n               scrollToSection(\"#contact\")}\n                className=\"bg-gradient-to-r from-purple-600 to-blue-600 text-white px-6 py-2 rounded-full hover:shadow-lg transition-all duration-300 w-fit\"\n              >\n                Hire Me\n              \n            
\n          
\n        )}\n      
\n    
\n  );\n}",[],[18,90,281],"6e7568bc-3d9a-11f0-a265-76b3cceeab13","Footer.tsx","6e756970-3d9a-11f0-a265-76b3cceeab13",14,["D",1748639393587],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Github, Linkedin, Mail, Twitter, Instagram, Heart } from \"https://esm.sh/lucide-react@0.263.1\";\n\nexport default function Footer() {\n  const currentYear = new Date().getFullYear();\n\n  const socialLinks = [\n    { icon: , href: \"#\", label: \"GitHub\" },\n    { icon: , href: \"#\", label: \"LinkedIn\" },\n    { icon: , href: \"#\", label: \"Twitter\" },\n    { icon: , href: \"#\", label: \"Instagram\" },\n    { icon: , href: \"mailto:kebiru.wisdom@email.com\", label: \"Email\" }\n  ];\n\n  const quickLinks = [\n    { label: \"Home\", href: \"#home\" },\n    { label: \"About\", href: \"#about\" },\n    { label: \"Services\", href: \"#services\" },\n    { label: \"Portfolio\", href: \"#portfolio\" },\n    { label: \"Contact\", href: \"#contact\" }\n  ];\n\n  const services = [\n    \"Web Development\",\n    \"Web Design\",\n    \"Graphic Design\",\n    \"UI/UX Design\",\n    \"Brand Identity\",\n    \"SEO Optimization\"\n  ];\n\n  const scrollToSection = (href: string) => {\n    const element = document.querySelector(href);\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth' });\n    }\n  };\n\n  return (\n    \n      {/* Main Footer Content */}\n      \n        \n          {/* Brand Section */}\n          \n            \n              \n                KEBIRU WISDOM YUNUSA\n              \n            
\n            \n              Passionate freelance web developer, web designer, and graphic designer \n              creating stunning digital experiences that help businesses thrive online.\n            
\n            \n              {socialLinks.map((link, index) => (\n                \n                  {link.icon}\n                \n              ))}\n            
\n          
\n\n          {/* Quick Links */}\n          \n            Quick Links
\n            \n              {quickLinks.map((link, index) => (\n                \n                   scrollToSection(link.href)}\n                    className=\"text-gray-300 hover:text-white transition-colors duration-300 hover:translate-x-1 transform transition-transform\"\n                  >\n                    {link.label}\n                  \n                
\n              ))}\n            
\n          
\n\n          {/* Services */}\n          \n            Services
\n            \n              {services.map((service, index) => (\n                \n                  {service}\n                
\n              ))}\n            
\n          
\n        
\n\n        {/* Newsletter Section */}\n        \n          \n            Stay Updated
\n            \n              Subscribe to get the latest updates on web design trends and my newest projects\n            
\n            \n              \n              \n            
\n          
\n        
\n      
\n\n      {/* Bottom Footer */}\n      \n        \n          \n            \n              © {currentYear} KEBIRU WISDOM YUNUSA. All rights reserved.\n            
\n            \n              Made with  in Nigeria\n            
\n          
\n        
\n      
\n\n      {/* Back to Top Button */}\n       scrollToSection(\"#home\")}\n        className=\"fixed bottom-8 right-8 bg-gradient-to-r from-purple-600 to-blue-600 text-white p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover-lift z-50\"\n        aria-label=\"Back to top\"\n      >\n        \n      \n    
\n  );\n}",[],[18,90,289],"5f630c26-3d9a-11f0-abe0-76b3cceeab13","Contact.tsx","5f630cda-3d9a-11f0-abe0-76b3cceeab13",13,["D",1748639368296],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Mail, Phone, MapPin, Send, Clock, CheckCircle } from \"https://esm.sh/lucide-react@0.263.1\";\n\nexport default function Contact() {\n  const [formData, setFormData] = useState({\n    name: '',\n    email: '',\n    subject: '',\n    message: ''\n  });\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [isSubmitted, setIsSubmitted] = useState(false);\n\n  const handleChange = (e: React.ChangeEvent) => {\n    setFormData({\n      ...formData,\n      [e.target.name]: e.target.value\n    });\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setIsSubmitting(true);\n    \n    // Simulate form submission\n    await new Promise(resolve => setTimeout(resolve, 2000));\n    \n    setIsSubmitting(false);\n    setIsSubmitted(true);\n    setFormData({ name: '', email: '', subject: '', message: '' });\n    \n    // Reset success message after 5 seconds\n    setTimeout(() => setIsSubmitted(false), 5000);\n  };\n\n  const contactInfo = [\n    {\n      icon: ,\n      title: \"Email\",\n      content: \"kebiru.wisdom@email.com\",\n      link: \"mailto:kebiru.wisdom@email.com\"\n    },\n    {\n      icon: ,\n      title: \"Phone\",\n      content: \"+234 (0) 123 456 7890\",\n      link: \"tel:+2341234567890\"\n    },\n    {\n      icon: ,\n      title: \"Location\",\n      content: \"Lagos, Nigeria\",\n      link: \"#\"\n    },\n    {\n      icon: ,\n      title: \"Response Time\",\n      content: \"Within 24 hours\",\n      link: \"#\"\n    }\n  ];\n\n  return (\n    \n      \n        \n          {/* Section Header */}\n          \n            \n              Get In Touch\n            
\n            \n              Ready to start your project? Let's discuss how I can help bring your vision to life\n            
\n          
\n\n          \n            {/* Contact Information */}\n            \n              \n                Let's Start a Conversation\n              
\n              \n                I'm always excited to work on new projects and collaborate with amazing people. \n                Whether you have a specific project in mind or just want to explore possibilities, \n                I'd love to hear from you.\n              
\n\n              {/* Contact Info Cards */}\n              \n                {contactInfo.map((info, index) => (\n                  \n                    \n                      {info.icon}\n                    
\n                    \n                      {info.title}
\n                      {info.content}
\n                    
\n                  \n                ))}\n              
\n\n              {/* Availability Status */}\n              \n                \n                  
\n                  Available for New Projects\n                
\n                \n                  I'm currently accepting new projects and would love to work with you. \n                  Let's create something amazing together!\n                
\n              
\n            
\n\n            {/* Contact Form */}\n            \n              \n                Send Me a Message\n              
\n\n              {isSubmitted && (\n                \n                  \n                  Thank you! Your message has been sent successfully.\n                
\n              )}\n\n              \n                \n                  \n                    \n                      Full Name *\n                    \n                    \n                  
\n                  \n                    \n                      Email Address *\n                    \n                    \n                  
\n                
\n\n                \n                  \n                    Subject *\n                  \n                  \n                
\n\n                \n                  \n                    Message *\n                  \n                  \n                
\n\n                \n                  {isSubmitting ? (\n                    <>\n                      
\n                      Sending...\n                    \n                  ) : (\n                    <>\n                      \n                      Send Message\n                    \n                  )}\n                \n              \n\n              \n                I'll get back to you within 24 hours. Looking forward to hearing from you!\n              
\n            
\n          
\n\n          {/* FAQ Section */}\n          \n            \n              Frequently Asked Questions\n            
\n            \n              \n                How long does a typical project take?
\n                Project timelines vary depending on complexity, but most websites take 2-6 weeks from start to finish.
\n              
\n              \n                Do you provide ongoing support?
\n                Yes! I offer maintenance packages and ongoing support to keep your website running smoothly.
\n              
\n              \n                What's your design process like?
\n                I start with understanding your needs, create wireframes, design mockups, and then develop the final product.
\n              
\n              \n                Do you work with international clients?
\n                Absolutely! I work with clients worldwide and am comfortable with different time zones and communication methods.
\n              
\n            
\n          
\n        
\n      
\n    
\n  );\n}",[],[18,90,297],"0063b338-3d9a-11f0-9a0f-76b3cceeab13","App.tsx","0063b3f6-3d9a-11f0-9a0f-76b3cceeab13",["D",1748639208920],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport Header from \"./Header.tsx\";\nimport Hero from \"./Hero.tsx\";\nimport About from \"./About.tsx\";\nimport Services from \"./Services.tsx\";\nimport Portfolio from \"./Portfolio.tsx\";\nimport Contact from \"./Contact.tsx\";\nimport Footer from \"./Footer.tsx\";\n\nexport default function App() {\n  return (\n    \n      \n      \n        \n        \n        \n        \n        \n      
\n      \n    
\n  );\n}",[],[18,90,305],"239b26d8-3d9a-11f0-bdd3-76b3cceeab13","About.tsx","239b27aa-3d9a-11f0-bdd3-76b3cceeab13",10,["D",1748639268004],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Award, Users, Coffee, Clock } from \"https://esm.sh/lucide-react@0.263.1\";\n\nexport default function About() {\n  const stats = [\n    { icon: , number: \"50+\", label: \"Projects Completed\" },\n    { icon: , number: \"30+\", label: \"Happy Clients\" },\n    { icon: , number: \"1000+\", label: \"Cups of Coffee\" },\n    { icon: , number: \"3+\", label: \"Years Experience\" }\n  ];\n\n  const skills = [\n    { name: \"HTML/CSS\", level: 95 },\n    { name: \"JavaScript\", level: 90 },\n    { name: \"React\", level: 88 },\n    { name: \"Node.js\", level: 85 },\n    { name: \"UI/UX Design\", level: 92 },\n    { name: \"Graphic Design\", level: 90 },\n    { name: \"Adobe Creative Suite\", level: 88 },\n    { name: \"Figma\", level: 85 }\n  ];\n\n  return (\n    \n      \n        \n          {/* Section Header */}\n          \n            \n              About Me\n            
\n            \n              Passionate about creating digital experiences that make a difference\n            
\n          
\n\n          \n            {/* Left Column - Image and Info */}\n            \n              \n                \n                  🎨\n                
\n                \n                  💡
\n                
\n              
\n            
\n\n            {/* Right Column - Content */}\n            \n              \n                Creative Professional with a Passion for Excellence\n              
\n              \n                I'm KEBIRU WISDOM YUNUSA, a dedicated freelance web developer, web designer, \n                and graphic designer with over 3 years of experience in creating stunning \n                digital solutions. My journey began with a simple curiosity about how \n                websites work, and it has evolved into a passion for crafting beautiful, \n                functional, and user-friendly digital experiences.\n              
\n              \n                I specialize in modern web technologies, responsive design, and creating \n                visual identities that help businesses stand out. Whether you need a \n                complete website overhaul, a brand new design, or eye-catching graphics, \n                I'm here to bring your vision to life.\n              
\n              \n                When I'm not coding or designing, you can find me exploring new design \n                trends, learning emerging technologies, or enjoying a good cup of coffee \n                while brainstorming creative solutions for my clients.\n              
\n\n              \n            
\n          
\n\n          {/* Stats Section */}\n          \n            {stats.map((stat, index) => (\n              \n                \n                  {stat.icon}\n                
\n                {stat.number}
\n                {stat.label}
\n              
\n            ))}\n          
\n\n          {/* Skills Section */}\n          \n            \n              My Skills\n            
\n            \n              {skills.map((skill, index) => (\n                \n                  \n                    {skill.name}\n                    {skill.level}%\n                  
\n                  \n                    
\n                  
\n                
\n              ))}\n            
\n          
\n        
\n      
\n    
\n  );\n}",[],[18,90,312],["D",1748639208920],[199,200,201,202,203,204,205,206],[18,90],["D",1748639200131],[198,207,208],[18],"7dd4fd68-3d9a-11f0-86a7-76b3cceeab13","index.ts","b00773fe-0c86-4d81-9f05-73741003dfdc",17,["D",1748639419373],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n  throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main route - serve the portfolio\napp.get(\"/\", async c => {\n  let html = await readFile(\"/frontend/index.html\", import.meta.url);\n  \n  // You can inject initial data here if needed\n  const initialData = {\n    name: \"KEBIRU WISDOM YUNUSA\",\n    title: \"Freelance Web Developer & Designer\",\n    location: \"Lagos, Nigeria\"\n  };\n  \n  const dataScript = ``;\n  \n  html = html.replace(\"\", `${dataScript}`);\n  return c.html(html);\n});\n\n// API endpoint for contact form (placeholder)\napp.post(\"/api/contact\", async c => {\n  const body = await c.req.json();\n  \n  // Here you would typically:\n  // 1. Validate the form data\n  // 2. Send an email notification\n  // 3. Store the message in a database\n  // 4. Return a success response\n  \n  console.log(\"Contact form submission:\", body);\n  \n  return c.json({ \n    success: true, \n    message: \"Thank you for your message! I'll get back to you soon.\" \n  });\n});\n\n// Health check endpoint\napp.get(\"/api/health\", c => {\n  return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\n// 404 handler\napp.notFound(c => {\n  return c.text(\"Page not found\", 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[334,326],"backend","756fee94-3d9a-11f0-9f40-76b3cceeab13",15,["D",1748639405291],[196],[334],["D",1748638719422],{"_11":12,"_141":71},{"_11":12,"_137":-5,"_70":71,"_31":69,"_138":139,"_140":30},{"_41":128,"_13":16,"_35":38,"_129":94,"_130":-5,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":14,"_136":12},"ctx",{"_54":-5,"_160":377,"_378":379,"_380":381,"_382":30,"_383":30,"_384":30,"_385":24,"_386":-5,"_387":-7,"_388":-7,"_389":26,"_390":30,"_391":30,"_392":-5,"_393":30,"_394":30,"_395":30,"_396":-5},"ENV",{"_348":349,"_350":351,"_352":16,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

\n My Services\n

\n {service.title}\n

\n Ready to Start Your Project?\n

\n My Portfolio\n

{item.title}

{item.title}

\n KEBIRU WISDOM\n \n YUNUSA\n

\n Get In Touch\n

\n Let's Start a Conversation\n

\n Send Me a Message\n

\n Frequently Asked Questions\n

How long does a typical project take?

Do you provide ongoing support?

What's your design process like?

Do you work with international clients?

\n About Me\n

\n Creative Professional with a Passion for Excellence\n

\n My Skills\n

\n KEBIRU WISDOM\n
\n YUNUSA\n

History · frontend