\n {/* Section Header */}\n

\n About Me\n

\n Passionate about creating digital experiences that make a difference\n

\n\n

\n {/* Left Column - Image and Info */}\n

\n 🎨\n

💡

\n\n {/* Right Column - Content */}\n

\n Creative Professional with a Passion for Excellence\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 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 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 {/* Stats Section */}\n

\n {stats.map((stat, index) => (\n

\n {stat.icon}\n

{stat.number}

{stat.label}

\n ))}\n

\n\n {/* Skills Section */}\n

\n My Skills\n

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

\n {skill.name}\n {skill.level}%\n

\n ))}\n

\n );\n}",[],[174,181,188],{"_103":197,"_95":198,"_144":199,"_146":182,"_147":133,"_148":183,"_150":151,"_105":200,"_100":31,"_153":192,"_155":201,"_156":27,"_157":-5,"_158":202,"_98":203},"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}",[],[174,181,198],{"_103":205,"_95":206,"_144":207,"_146":182,"_147":133,"_148":208,"_150":151,"_105":209,"_100":31,"_153":192,"_155":210,"_156":27,"_157":-5,"_158":211,"_98":212},"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 {/* Section Header */}\n

\n Get In Touch\n

\n Ready to start your project? Let's discuss how I can help bring your vision to life\n

\n\n

\n {/* Contact Information */}\n

\n Let's Start a Conversation\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

{info.title}

{info.content}

\n \n ))}\n

\n\n {/* Availability Status */}\n

\n Available for New Projects\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 {/* Contact Form */}\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 Full Name *\n \n \n

\n \n Email Address *\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 {/* FAQ Section */}\n

\n Frequently Asked Questions\n

How long does a typical project take?

Project timelines vary depending on complexity, but most websites take 2-6 weeks from start to finish.

Do you provide ongoing support?

Yes! I offer maintenance packages and ongoing support to keep your website running smoothly.

What's your design process like?

I start with understanding your needs, create wireframes, design mockups, and then develop the final product.

Do you work with international clients?

Absolutely! I work with clients worldwide and am comfortable with different time zones and communication methods.

\n );\n}",[],[174,181,206],{"_103":214,"_95":215,"_144":216,"_146":182,"_147":133,"_148":217,"_150":151,"_105":218,"_100":31,"_153":192,"_155":219,"_156":27,"_157":-5,"_158":220,"_98":221},"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 );\n}",[],[174,181,215],{"_103":223,"_95":224,"_144":225,"_146":182,"_147":133,"_148":226,"_150":151,"_105":227,"_100":31,"_153":192,"_155":228,"_156":27,"_157":-5,"_158":229,"_98":230},"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 {/* 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 {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}",[],[174,181,224],{"_103":232,"_95":233,"_144":234,"_146":182,"_147":133,"_148":235,"_150":151,"_105":236,"_100":31,"_153":192,"_155":237,"_156":27,"_157":-5,"_158":238,"_98":239},"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 {/* Profile Image */}\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}",[],[174,181,233],{"_103":241,"_95":242,"_144":243,"_146":182,"_147":133,"_148":244,"_150":151,"_105":245,"_100":31,"_153":192,"_155":246,"_156":27,"_157":-5,"_158":247,"_98":248},"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 {/* Section Header */}\n

\n My Portfolio\n

\n A showcase of my recent work and creative projects\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 ${item.title}\n$ \n

{item.title}

{item.description}

\n \n \n \n \n \n \n

\n \n

{item.title}

{item.description}

\n \n

\n {item.technologies.map((tech, index) => (\n \n {tech}\n \n ))}\n

\n ))}\n

\n\n {/* Load More Button */}\n

\n \n

\n\n {/* Testimonial Section */}\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 Sarah Johnson - CEO, TechStart Inc.\n

\n );\n}",[],[174,181,242],{"_103":250,"_95":251,"_144":252,"_146":182,"_147":133,"_148":253,"_150":151,"_105":254,"_100":31,"_153":192,"_155":255,"_156":27,"_157":-5,"_158":256,"_98":257},"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}",[],[174,181,251],[174,181],{"_103":260,"_95":261,"_144":262,"_146":175,"_147":133,"_148":176,"_150":151,"_105":263,"_100":31,"_153":264,"_155":265,"_156":27,"_157":-5,"_158":266,"_98":267},"fb26e61a-3d99-11f0-a39e-76b3cceeab13","index.html","fb26e6f6-3d99-11f0-a39e-76b3cceeab13",["D",1748639200131],"file","\n\n\n    \n    \n    KEBIRU WISDOM YUNUSA - Professional Portfolio\n    \n    \n    \n    \n    💼\">\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n\n\n    
\n    \n\n",[],[174,261],{"_103":269,"_95":270,"_144":271,"_146":175,"_147":133,"_148":272,"_150":151,"_105":273,"_100":31,"_153":192,"_155":274,"_156":27,"_157":-5,"_158":275,"_98":276},"fd9f7b28-3d99-11f0-bd26-76b3cceeab13","index.tsx","fd9f7bf0-3d99-11f0-bd26-76b3cceeab13",6,["D",1748639204281],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[174,270],[174],{"_103":279,"_95":280,"_144":281,"_146":-5,"_147":133,"_148":282,"_150":151,"_105":283,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":284,"_98":293},"f2094532-3d99-11f0-afba-76b3cceeab13","shared","aae5b7b9-4348-444d-a482-4949da7e5127",4,["D",1748639184837],[285],{"_103":286,"_95":287,"_144":288,"_146":281,"_147":133,"_148":282,"_150":151,"_105":289,"_100":31,"_153":192,"_155":290,"_156":27,"_157":-5,"_158":291,"_98":292},"f2093b50-3d99-11f0-afba-76b3cceeab13","types.ts","f2093c22-3d99-11f0-afba-76b3cceeab13",["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}",[],[280,287],[280],{"_103":295,"_95":296,"_144":297,"_146":-5,"_147":133,"_148":132,"_150":151,"_105":298,"_100":299,"_153":264,"_155":300,"_156":27,"_157":-5,"_158":301,"_98":302},"89c17f2a-3d9a-11f0-98de-76b3cceeab13","README.md","efa8ed56-3d99-11f0-b146-76b3cceeab13",["D",1748639439379],1,"# 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.",[],[296],{"_103":304,"_95":305,"_144":306,"_146":-5,"_147":133,"_148":299,"_150":151,"_105":307,"_100":31,"_153":192,"_155":68,"_156":27,"_157":-5,"_158":308,"_98":309},"dca16112-3d98-11f0-ae61-76b3cceeab13","main.tsx","dca161b2-3d98-11f0-ae61-76b3cceeab13",["D",1748638719431],[],[305],{"_103":311,"_95":312,"_144":313,"_146":-5,"_147":133,"_148":166,"_150":151,"_105":314,"_100":31,"_153":192,"_155":68,"_156":27,"_157":-5,"_158":315,"_98":316},"105a31d2-3d99-11f0-97f9-76b3cceeab13","new-file-8938.tsx","105a3286-3d99-11f0-97f9-76b3cceeab13",["D",1748638806206],[],[312],"files",[141,160,172,179,186,196,204,213,222,231,240,249,259,268,278,285,294,303,310],"counts",{"_321":31,"_322":299,"_323":31,"_324":31},"pulls","branches","forks","envVars","contents",[],{"_103":214,"_95":215,"_144":216,"_146":182,"_147":133,"_148":217,"_150":151,"_105":328,"_100":31,"_153":192,"_155":219,"_156":27,"_157":-5,"_98":329},["D",1748639393587],[174,181,215],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":41,"_100":-7,"_98":99,"_101":335,"_139":339,"_317":397,"_264":398,"_325":400,"_330":-5,"_401":27,"_402":-5},{"_103":104,"_95":96,"_105":336,"_107":-5,"_108":27,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":-5,"_115":27,"_116":-5,"_117":31,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":27,"_21":337,"_130":338},["D",1748638719422],{"_93":94,"_128":129},{"_100":132,"_95":41,"_103":133,"_134":104,"_135":-5,"_136":-5,"_137":-5,"_138":-5},[340,346,382,388,391,394],{"_103":142,"_95":143,"_144":145,"_146":-5,"_147":133,"_148":149,"_150":151,"_105":152,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":341,"_98":345},[342],{"_103":161,"_95":162,"_144":163,"_146":145,"_147":133,"_148":164,"_150":151,"_105":165,"_100":166,"_153":167,"_155":168,"_156":27,"_157":-5,"_158":343,"_98":344},[],[143,162],[143],{"_103":173,"_95":174,"_144":175,"_146":-5,"_147":133,"_148":176,"_150":151,"_105":177,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":347,"_98":381},[348,375,378],{"_103":180,"_95":181,"_144":182,"_146":175,"_147":133,"_148":183,"_150":151,"_105":184,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":349,"_98":374},[350,353,356,359,362,365,368,371],{"_103":187,"_95":188,"_144":189,"_146":182,"_147":133,"_148":190,"_150":151,"_105":191,"_100":31,"_153":192,"_155":193,"_156":27,"_157":-5,"_158":351,"_98":352},[],[174,181,188],{"_103":197,"_95":198,"_144":199,"_146":182,"_147":133,"_148":183,"_150":151,"_105":200,"_100":31,"_153":192,"_155":201,"_156":27,"_157":-5,"_158":354,"_98":355},[],[174,181,198],{"_103":205,"_95":206,"_144":207,"_146":182,"_147":133,"_148":208,"_150":151,"_105":209,"_100":31,"_153":192,"_155":210,"_156":27,"_157":-5,"_158":357,"_98":358},[],[174,181,206],{"_103":214,"_95":215,"_144":216,"_146":182,"_147":133,"_148":217,"_150":151,"_105":218,"_100":31,"_153":192,"_155":219,"_156":27,"_157":-5,"_158":360,"_98":361},[],[174,181,215],{"_103":223,"_95":224,"_144":225,"_146":182,"_147":133,"_148":226,"_150":151,"_105":227,"_100":31,"_153":192,"_155":228,"_156":27,"_157":-5,"_158":363,"_98":364},[],[174,181,224],{"_103":232,"_95":233,"_144":234,"_146":182,"_147":133,"_148":235,"_150":151,"_105":236,"_100":31,"_153":192,"_155":237,"_156":27,"_157":-5,"_158":366,"_98":367},[],[174,181,233],{"_103":241,"_95":242,"_144":243,"_146":182,"_147":133,"_148":244,"_150":151,"_105":245,"_100":31,"_153":192,"_155":246,"_156":27,"_157":-5,"_158":369,"_98":370},[],[174,181,242],{"_103":250,"_95":251,"_144":252,"_146":182,"_147":133,"_148":253,"_150":151,"_105":254,"_100":31,"_153":192,"_155":255,"_156":27,"_157":-5,"_158":372,"_98":373},[],[174,181,251],[174,181],{"_103":260,"_95":261,"_144":262,"_146":175,"_147":133,"_148":176,"_150":151,"_105":263,"_100":31,"_153":264,"_155":265,"_156":27,"_157":-5,"_158":376,"_98":377},[],[174,261],{"_103":269,"_95":270,"_144":271,"_146":175,"_147":133,"_148":272,"_150":151,"_105":273,"_100":31,"_153":192,"_155":274,"_156":27,"_157":-5,"_158":379,"_98":380},[],[174,270],[174],{"_103":279,"_95":280,"_144":281,"_146":-5,"_147":133,"_148":282,"_150":151,"_105":283,"_100":31,"_153":154,"_155":-5,"_156":27,"_157":-5,"_158":383,"_98":387},[384],{"_103":286,"_95":287,"_144":288,"_146":281,"_147":133,"_148":282,"_150":151,"_105":289,"_100":31,"_153":192,"_155":290,"_156":27,"_157":-5,"_158":385,"_98":386},[],[280,287],[280],{"_103":295,"_95":296,"_144":297,"_146":-5,"_147":133,"_148":132,"_150":151,"_105":298,"_100":299,"_153":264,"_155":300,"_156":27,"_157":-5,"_158":389,"_98":390},[],[296],{"_103":304,"_95":305,"_144":306,"_146":-5,"_147":133,"_148":299,"_150":151,"_105":307,"_100":31,"_153":192,"_155":68,"_156":27,"_157":-5,"_158":392,"_98":393},[],[305],{"_103":311,"_95":312,"_144":313,"_146":-5,"_147":133,"_148":166,"_150":151,"_105":314,"_100":31,"_153":192,"_155":68,"_156":27,"_157":-5,"_158":395,"_98":396},[],[312],[340,342,346,348,350,353,356,359,362,365,368,371,375,378,382,384,388,391,394],{"_103":214,"_95":215,"_144":216,"_146":182,"_147":133,"_148":217,"_150":151,"_105":328,"_100":31,"_153":192,"_155":219,"_156":27,"_157":-5,"_98":399},[174,181,215],[],"showCompareCallout","pull","routes/_app","actionData","errors"]

\n About Me\n

\n Creative Professional with a Passion for Excellence\n

\n My Skills\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 KEBIRU WISDOM\n \n YUNUSA\n

\n My Portfolio\n

{item.title}

{item.title}

\n My Services\n

\n {service.title}\n

\n Ready to Start Your Project?\n

\n KEBIRU WISDOM\n
\n YUNUSA\n