Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>E-commerce Platform | PixelPortfolio Pro</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar active="projects"></custom-navbar> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="mb-12"> | |
| <a href="projects.html" class="text-primary hover:text-primary-600 inline-flex items-center mb-6"> | |
| <i data-feather="arrow-left" class="mr-2 w-4 h-4"></i> | |
| Back to Projects | |
| </a> | |
| <h1 class="text-4xl font-bold text-gray-900 mb-4">E-commerce Platform</h1> | |
| <p class="text-xl text-gray-600 mb-6">A full-featured online store with custom checkout flow</p> | |
| <div class="flex flex-wrap gap-2 mb-8"> | |
| <span class="bg-primary-100 text-primary px-3 py-1 rounded-full text-sm">Web Development</span> | |
| <span class="bg-primary-100 text-primary px-3 py-1 rounded-full text-sm">UI/UX Design</span> | |
| <span class="bg-primary-100 text-primary px-3 py-1 rounded-full text-sm">E-commerce</span> | |
| </div> | |
| </div> | |
| <div class="mb-16"> | |
| <img src="http://static.photos/technology/1200x630/1" alt="E-commerce Platform" class="w-full rounded-xl shadow-md"> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-12"> | |
| <div class="md:col-span-2"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Project Overview</h2> | |
| <div class="prose max-w-none text-gray-600 mb-8"> | |
| <p>This e-commerce platform was designed to provide a seamless shopping experience with a focus on performance and user experience. The project involved creating a custom solution that could handle thousands of products while maintaining fast load times.</p> | |
| <p>Key features include a dynamic product filtering system, personalized recommendations, and an optimized checkout flow that reduced cart abandonment by 30% compared to the client's previous platform.</p> | |
| <p>The design follows modern e-commerce trends while maintaining a unique brand identity. Special attention was given to mobile responsiveness, as over 60% of traffic comes from mobile devices.</p> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Technologies Used</h2> | |
| <div class="flex flex-wrap gap-4 mb-12"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <i data-feather="code" class="text-primary mr-3"></i> | |
| <span>React.js</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <i data-feather="database" class="text-primary mr-3"></i> | |
| <span>Node.js</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <i data-feather="shopping-cart" class="text-primary mr-3"></i> | |
| <span>Stripe API</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <i data-feather="cloud" class="text-primary mr-3"></i> | |
| <span>MongoDB</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <i data-feather="layout" class="text-primary mr-3"></i> | |
| <span>Tailwind CSS</span> | |
| </div> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Challenges & Solutions</h2> | |
| <div class="space-y-4 mb-12"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="font-bold text-lg mb-2">Performance Optimization</h3> | |
| <p class="text-gray-600">The product catalog contained over 10,000 items, causing slow page loads. Implemented lazy loading, image optimization, and server-side rendering to improve performance metrics by 65%.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="font-bold text-lg mb-2">Mobile Checkout</h3> | |
| <p class="text-gray-600">Developed a streamlined mobile checkout process with auto-fill capabilities and minimal form fields, increasing mobile conversion rates by 22%.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white p-6 rounded-xl shadow-md sticky top-6"> | |
| <h3 class="font-bold text-lg mb-4">Project Details</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Client</p> | |
| <p class="font-medium">FashionForward</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Timeline</p> | |
| <p class="font-medium">6 months</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Results</p> | |
| <ul class="list-disc list-inside text-gray-600"> | |
| <li>30% increase in conversion rate</li> | |
| <li>65% faster page loads</li> | |
| <li>22% higher mobile conversions</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Visit</p> | |
| <a href="#" class="text-primary hover:text-primary-600 font-medium">www.fashionforward.com</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |