Spaces:
Running
Running
| <html class="light" lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport" /> | |
| <title>Mubashra Portfolio - Creative Developer & Writer</title> | |
| <meta name="description" | |
| content="Mubashra - Creative Developer & Writer specializing in building sophisticated digital experiences and sharing insights on the future of technology."> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" | |
| rel="stylesheet" /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Playfair+Display:wght@700&display=swap" | |
| rel="stylesheet" /> | |
| <script> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "primary": "#2D6A4F", | |
| "pastel-green-light": "#F0F7F4", | |
| "pastel-green-accent": "#D8E9E1", | |
| "background-light": "#f5f7f8", | |
| "background-dark": "#101922", | |
| }, | |
| fontFamily: { | |
| "display": ["Inter", "sans-serif"], | |
| "serif": ["Playfair Display", "serif"] | |
| }, | |
| borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| @keyframes float { | |
| 0% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 33% { | |
| transform: translate(30px, -50px) scale(1.1); | |
| } | |
| 66% { | |
| transform: translate(-20px, 20px) scale(0.9); | |
| } | |
| 100% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| } | |
| .animate-blob { | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| .animation-delay-2000 { | |
| animation-delay: 2s; | |
| } | |
| .animation-delay-4000 { | |
| animation-delay: 4s; | |
| } | |
| .line-clamp-2 { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body | |
| class="font-display bg-background-light dark:bg-background-dark text-[#111418] dark:text-white transition-colors duration-300"> | |
| <!-- Header --> | |
| <header | |
| class="sticky top-0 z-50 w-full border-b border-solid border-[#f0f2f5] dark:border-[#2a343f] bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-20 py-3"> | |
| <div class="max-w-[1200px] mx-auto flex items-center justify-between"> | |
| <div class="flex items-center gap-4 text-primary"> | |
| <div class="size-6"> | |
| <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z" | |
| fill="currentColor"></path> | |
| </svg> | |
| </div> | |
| <h2 class="text-[#111418] dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">Mubashra | |
| </h2> | |
| </div> | |
| <div class="flex flex-1 justify-end gap-8 items-center"> | |
| <nav class="hidden md:flex items-center gap-9"> | |
| <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors" | |
| href="index.html">Home</a> | |
| <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors" | |
| href="blogs.html">Blogs</a> | |
| <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors" | |
| href="portfolio.html">Portfolio</a> | |
| </nav> | |
| <a href="admin.html" | |
| class="flex min-w-[84px] cursor-pointer items-center justify-center rounded-lg h-10 px-5 bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-sm"> | |
| <span class="truncate">Login</span> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <!-- Hero Section --> | |
| <section | |
| class="relative h-[85vh] min-h-[650px] w-full flex items-center justify-center overflow-hidden bg-[#F7FAF9] dark:bg-[#0D1510]"> | |
| <div class="absolute inset-0 z-0"> | |
| <div | |
| class="absolute top-[-10%] left-[10%] w-[45%] h-[45%] rounded-full bg-[#D1E7DD] dark:bg-[#1A3328] blur-[100px] animate-blob"> | |
| </div> | |
| <div | |
| class="absolute bottom-[-5%] right-[5%] w-[50%] h-[50%] rounded-full bg-[#E2EFDE] dark:bg-[#142A1F] blur-[120px] animate-blob animation-delay-2000"> | |
| </div> | |
| <div | |
| class="absolute top-[20%] right-[15%] w-[30%] h-[30%] rounded-full bg-[#ECF3F0] dark:bg-[#0D1F16] blur-[80px] animate-blob animation-delay-4000"> | |
| </div> | |
| </div> | |
| <div class="relative z-10 max-w-[960px] px-6 text-center"> | |
| <div | |
| class="mb-8 inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-[0.15em]"> | |
| <span class="relative flex h-2 w-2"> | |
| <span | |
| class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span> | |
| </span> | |
| Available for projects | |
| </div> | |
| <h1 | |
| class="text-[#111418] dark:text-white text-6xl md:text-8xl font-serif mb-8 leading-[1.1] tracking-tight"> | |
| Hello, I am <span class="text-primary italic">Mubashra</span> | |
| </h1> | |
| <p | |
| class="text-[#4A5568] dark:text-gray-300 text-lg md:text-2xl font-normal mb-12 max-w-2xl mx-auto leading-relaxed"> | |
| Creative Developer & Writer specializing in building sophisticated digital experiences and sharing | |
| insights on the future of technology. | |
| </p> | |
| <div class="flex flex-col sm:flex-row items-center justify-center gap-5"> | |
| <a href="portfolio.html" | |
| class="w-full sm:w-auto flex items-center justify-center rounded-full h-16 px-10 bg-primary text-white text-base font-bold tracking-wide hover:shadow-xl hover:shadow-primary/20 transition-all transform hover:-translate-y-1"> | |
| Explore My Work | |
| </a> | |
| <a href="blogs.html" | |
| class="w-full sm:w-auto flex items-center justify-center rounded-full h-16 px-10 bg-white/40 dark:bg-white/5 border border-[#E2E8F0] dark:border-white/10 text-[#111418] dark:text-white text-base font-bold backdrop-blur-sm hover:bg-white/60 dark:hover:bg-white/10 transition-all"> | |
| Read My Blog | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 -translate-x-1/2 text-primary/40 flex flex-col items-center gap-2"> | |
| <span class="text-[10px] font-bold uppercase tracking-[0.3em]">Scroll</span> | |
| <span class="material-symbols-outlined text-xl animate-bounce">keyboard_double_arrow_down</span> | |
| </div> | |
| </section> | |
| <!-- Latest Blog Posts Section --> | |
| <section class="max-w-[1200px] mx-auto px-6 md:px-20 pt-20"> | |
| <div class="flex items-end justify-between border-b border-gray-200 dark:border-gray-800 pb-6"> | |
| <div> | |
| <h2 class="text-[#111418] dark:text-white text-3xl font-bold tracking-tight">Latest Insights & | |
| Stories</h2> | |
| <p class="text-gray-500 dark:text-gray-400 mt-2">Thoughts on design, code, and everything in | |
| between.</p> | |
| </div> | |
| <a class="text-primary font-bold text-sm flex items-center gap-1 hover:underline" href="blogs.html"> | |
| View All Posts <span class="material-symbols-outlined text-sm">arrow_forward</span> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="max-w-[1200px] mx-auto px-6 md:px-20 py-10"> | |
| <div id="blogGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Blog posts will be loaded here dynamically --> | |
| </div> | |
| <div id="noBlogsMessage" class="hidden text-center py-16"> | |
| <span class="material-symbols-outlined text-6xl text-gray-300 dark:text-gray-600 mb-4">article</span> | |
| <p class="text-gray-500 dark:text-gray-400 text-lg">No blog posts yet. Check back soon!</p> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="bg-white dark:bg-[#151f2b] py-24 px-6 md:px-20 mt-10"> | |
| <div | |
| class="max-w-[1200px] mx-auto bg-primary/5 dark:bg-primary/10 rounded-3xl p-10 md:p-20 border border-primary/10 flex flex-col items-center text-center"> | |
| <div class="size-16 rounded-2xl bg-primary/20 flex items-center justify-center text-primary mb-8"> | |
| <span class="material-symbols-outlined text-4xl">dashboard_customize</span> | |
| </div> | |
| <h2 | |
| class="text-[#111418] dark:text-white text-3xl md:text-5xl font-black mb-6 max-w-[720px] leading-tight"> | |
| Build your own vision | |
| </h2> | |
| <p class="text-[#111418] dark:text-gray-300 text-lg mb-10 max-w-[600px] opacity-80"> | |
| Ready to take control? Manage your content with our powerful drag-and-drop admin builder. Simple, | |
| fast, and completely customizable. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 w-full justify-center"> | |
| <a href="admin.html" | |
| class="flex min-w-[200px] cursor-pointer items-center justify-center rounded-xl h-14 px-8 bg-primary text-white text-base font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] transition-transform"> | |
| Open Admin Editor | |
| </a> | |
| <button | |
| class="flex min-w-[200px] cursor-pointer items-center justify-center rounded-xl h-14 px-8 border-2 border-primary/20 text-primary text-base font-bold hover:bg-primary/5 transition-colors"> | |
| Documentation | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-gray-100 dark:border-gray-800 py-12 px-6 md:px-20"> | |
| <div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6"> | |
| <div class="flex items-center gap-2"> | |
| <div class="size-5 text-primary"> | |
| <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> | |
| <path | |
| d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z" | |
| fill="currentColor"></path> | |
| </svg> | |
| </div> | |
| <span class="font-bold">Mubashra</span> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">© 2024 Mubashra Portfolio. Built with passion.</p> | |
| <div class="flex gap-6"> | |
| <a class="text-gray-400 hover:text-primary transition-colors" href="#"> | |
| <span class="material-symbols-outlined">alternate_email</span> | |
| </a> | |
| <a class="text-gray-400 hover:text-primary transition-colors" href="#"> | |
| <span class="material-symbols-outlined">person</span> | |
| </a> | |
| <a class="text-gray-400 hover:text-primary transition-colors" href="#"> | |
| <span class="material-symbols-outlined">share</span> | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Load and display blog posts | |
| function loadBlogs() { | |
| const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || []; | |
| const blogGrid = document.getElementById('blogGrid'); | |
| const noBlogsMessage = document.getElementById('noBlogsMessage'); | |
| if (blogs.length === 0) { | |
| blogGrid.classList.add('hidden'); | |
| noBlogsMessage.classList.remove('hidden'); | |
| return; | |
| } | |
| blogGrid.classList.remove('hidden'); | |
| noBlogsMessage.classList.add('hidden'); | |
| // Show only latest 3 blogs on homepage | |
| const latestBlogs = blogs.slice(0, 3); | |
| blogGrid.innerHTML = latestBlogs.map((blog, index) => { | |
| const date = new Date(blog.date); | |
| const formattedDate = date.toLocaleDateString('en-US', { | |
| month: 'short', | |
| day: 'numeric', | |
| year: 'numeric' | |
| }); | |
| // Extract first text content for preview | |
| const tempDiv = document.createElement('div'); | |
| tempDiv.innerHTML = blog.content; | |
| const textContent = tempDiv.textContent || tempDiv.innerText || ''; | |
| const preview = textContent.substring(0, 120) + (textContent.length > 120 ? '...' : ''); | |
| // Get first heading for title | |
| const headingEl = tempDiv.querySelector('h1, h2, h3'); | |
| const title = headingEl ? headingEl.textContent : blog.title; | |
| // Categories based on content | |
| const categories = ['Design', 'Development', 'Minimalism', 'Technology', 'Lifestyle']; | |
| const category = categories[index % categories.length]; | |
| // Image HTML - Only show if coverImage exists | |
| let imageHtml = ''; | |
| if (blog.coverImage) { | |
| imageHtml = ` | |
| <div class="relative w-full aspect-[16/10] overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800"> | |
| <div class="absolute inset-0 bg-center bg-cover transition-transform duration-500 group-hover:scale-110" | |
| style="background-image: url('${blog.coverImage}');"> | |
| </div> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 rounded-full bg-white/90 dark:bg-background-dark/90 text-primary text-xs font-bold shadow-sm">${category}</span> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| return ` | |
| <article class="group flex flex-col gap-4 cursor-pointer" onclick="viewBlog(${blog.id})"> | |
| ${imageHtml} | |
| <div class="flex flex-col gap-2"> | |
| <div class="flex items-center gap-3 text-[#60758a] dark:text-gray-400 text-xs font-medium"> | |
| <span>${formattedDate}</span> | |
| <span class="size-1 rounded-full bg-gray-300"></span> | |
| <span>5 min read</span> | |
| </div> | |
| <h3 class="text-[#111418] dark:text-white text-xl font-bold leading-snug group-hover:text-primary transition-colors"> | |
| ${title} | |
| </h3> | |
| <p class="text-[#60758a] dark:text-gray-400 text-sm leading-relaxed line-clamp-2"> | |
| ${preview} | |
| </p> | |
| </div> | |
| </article> | |
| `; | |
| }).join(''); | |
| } | |
| // Navigate to blog view page | |
| function viewBlog(blogId) { | |
| window.location.href = `blog.html?id=${blogId}`; | |
| } | |
| // Load blogs on page load | |
| document.addEventListener('DOMContentLoaded', loadBlogs); | |
| </script> | |
| </body> | |
| </html> |