Spaces:
Running
Running
Amlan-109
feat: Initial commit of LocalAI Amlan Edition with premium branding and personalization
750bbe6
| <html lang="en"> | |
| {{template "views/partials/head" .}} | |
| <body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] font-sans antialiased"> | |
| <div class="flex flex-col min-h-screen"> | |
| {{template "views/partials/navbar" .}} | |
| <!-- Main Content --> | |
| <div class="flex-1 container mx-auto px-4 py-12 max-w-5xl"> | |
| <!-- Hero Section --> | |
| <div class="text-center mb-16 relative z-10"> | |
| <div class="inline-block px-4 py-1 mb-6 rounded-full border border-[var(--color-accent)]/30 bg-[var(--color-accent)]/5 text-[var(--color-accent)] text-xs tracking-[0.2em] font-bold uppercase animate-fade-in-up"> | |
| The Mind Behind LocalAI | |
| </div> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 text-[var(--color-text-primary)]"> | |
| Everything starts with <span class="text-[var(--color-primary)]">Passion</span> | |
| </h1> | |
| <p class="text-[var(--color-text-secondary)] max-w-3xl mx-auto text-lg leading-relaxed mb-12"> | |
| Redefining AI through uncompromised excellence and curated experiences. | |
| </p> | |
| <div class="flex justify-center mb-12"> | |
| <div class="relative group"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-accent)] rounded-full blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div> | |
| <img src="static/assets/profile.jpeg" alt="Amlan Mallick" class="relative w-32 h-32 rounded-full border-4 border-[var(--color-bg-secondary)] object-cover shadow-xl transform group-hover:scale-105 transition duration-300"> | |
| </div> | |
| </div> | |
| <h2 class="text-4xl font-bold text-[var(--color-text-primary)] mb-2">Amlan Mallick</h2> | |
| <p class="text-[var(--color-text-secondary)] font-medium text-xl">Founder & Lead Architect</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-12"> | |
| <!-- Main Content Column --> | |
| <div class="lg:col-span-2 space-y-12"> | |
| <!-- Professional Summary --> | |
| <section class="bg-[var(--color-bg-secondary)] p-8 rounded-xl border border-[var(--color-border-subtle)] shadow-lg hover:border-[var(--color-primary)]/30 transition duration-300"> | |
| <h2 class="text-2xl font-bold mb-4 flex items-center text-[var(--color-text-primary)]"> | |
| <i class="fas fa-user-circle mr-3 text-[var(--color-primary)]"></i> Professional Summary | |
| </h2> | |
| <p class="text-[var(--color-text-secondary)] leading-relaxed"> | |
| A passionate Web Developer & Software Engineer with a strong focus on building fast, SEO-optimized, | |
| and visually engaging websites. Specializing in high-performance web applications, browser extensions, | |
| and automation tools. I combine engineering principles with a creative design mindset to deliver products | |
| that are technically robust and aesthetically pleasing. | |
| </p> | |
| </section> | |
| <!-- Core Expertise --> | |
| <section> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center text-[var(--color-text-primary)]"> | |
| <i class="fas fa-code mr-3 text-[var(--color-accent)]"></i> Core Expertise | |
| </h2> | |
| <div class="flex flex-wrap gap-3"> | |
| {{ range $skill := slice "HTML/CSS/JS" "React.jsx" "Java" "Kotlin" "Android Development" "Chrome Extensions" "UI/UX Design" "SEO Optimization" "Web Automation" "JSON/APIs" "Data Scraping" "ML-Assisted Workflows" }} | |
| <span class="px-4 py-2 bg-[var(--color-bg-tertiary)] text-[var(--color-text-primary)] rounded-lg text-sm font-medium border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-colors cursor-default"> | |
| {{ $skill }} | |
| </span> | |
| {{ end }} | |
| </div> | |
| </section> | |
| <!-- Experience --> | |
| <section> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center text-[var(--color-text-primary)]"> | |
| <i class="fas fa-briefcase mr-3 text-[var(--color-success)]"></i> Professional Journey | |
| </h2> | |
| <div class="space-y-6"> | |
| <div class="relative pl-8 border-l-2 border-[var(--color-border-default)]"> | |
| <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-[var(--color-primary)] border-4 border-[var(--color-bg-primary)]"></div> | |
| <h3 class="text-xl font-bold text-[var(--color-text-primary)]">Web Developer & Software Engineer</h3> | |
| <div class="text-[var(--color-text-secondary)] mb-1">NWU Digital Solutions <span class="mx-2">•</span> <span class="text-xs font-mono bg-[var(--color-bg-tertiary)] px-2 py-0.5 rounded">April 2024 – Present</span></div> | |
| <p class="text-[var(--color-text-muted)] mt-2">Creating responsive, clean, and user-friendly digital experiences with a focus on high-performance web applications.</p> | |
| </div> | |
| <div class="relative pl-8 border-l-2 border-[var(--color-border-default)]"> | |
| <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-[var(--color-bg-tertiary)] border-4 border-[var(--color-bg-primary)]"></div> | |
| <h3 class="text-xl font-bold text-[var(--color-text-primary)]">Full-Stack Web Developer</h3> | |
| <div class="text-[var(--color-text-secondary)] mb-1">NextGen Web Technologies <span class="mx-2">•</span> <span class="text-xs font-mono bg-[var(--color-bg-tertiary)] px-2 py-0.5 rounded">June 2024 – October 2025</span></div> | |
| <p class="text-[var(--color-text-muted)] mt-2">Developed performance-driven web solutions and ML-assisted data extraction workflows.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects --> | |
| <section> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center text-[var(--color-text-primary)]"> | |
| <i class="fas fa-globe mr-3 text-[var(--color-warning)]"></i> Featured Projects | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-[var(--color-bg-secondary)] p-6 rounded-xl border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)] transition group cursor-pointer"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-lg font-bold text-[var(--color-text-primary)] group-hover:text-[var(--color-primary)] transition">RAVEN</h3> | |
| <a href="https://amlan.framer.ai/" target="_blank" class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)]"><i class="fas fa-external-link-alt"></i></a> | |
| </div> | |
| <p class="text-sm text-[var(--color-text-muted)]">Sleek, modern portfolio website built on Framer, showcasing high-impact presentation of skills and projects.</p> | |
| </div> | |
| <div class="bg-[var(--color-bg-secondary)] p-6 rounded-xl border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)] transition group cursor-pointer"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-lg font-bold text-[var(--color-text-primary)] group-hover:text-[var(--color-primary)] transition">Bill Splitter Web App</h3> | |
| <a href="#" class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)]"><i class="fas fa-external-link-alt"></i></a> | |
| </div> | |
| <p class="text-sm text-[var(--color-text-muted)]">Lightweight tool for effortless bill splitting among multiple people, optimized for mobile and desktop.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio PDF Embed --> | |
| <section> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center text-[var(--color-text-primary)]"> | |
| <i class="fas fa-file-pdf mr-3 text-[var(--color-error)]"></i> Full Portfolio | |
| </h2> | |
| <div class="bg-[var(--color-bg-tertiary)] rounded-xl overflow-hidden border border-[var(--color-border-subtle)]" style="height: 600px;"> | |
| <iframe src="static/assets/portfolio.pdf" class="w-full h-full" frameborder="0"> | |
| <div class="flex flex-col items-center justify-center h-full p-8 text-center"> | |
| <p class="mb-4 text-[var(--color-text-secondary)]">Your browser doesn't support PDF viewing.</p> | |
| <a href="static/assets/portfolio.pdf" class="px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition">Download Portfolio PDF</a> | |
| </div> | |
| </iframe> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="space-y-8"> | |
| <!-- Contact Card --> | |
| <div class="bg-[var(--color-bg-secondary)] p-6 rounded-xl border border-[var(--color-border-strong)] shadow-lg sticky top-24"> | |
| <h2 class="text-xl font-bold mb-6 text-[var(--color-text-primary)]">Contact</h2> | |
| <div class="space-y-4"> | |
| <a href="mailto:knight.red205@gmail.com" class="flex items-center text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition group"> | |
| <div class="w-8 h-8 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mr-3 group-hover:bg-[var(--color-primary)] group-hover:text-white transition"> | |
| <i class="fas fa-envelope text-sm"></i> | |
| </div> | |
| <span class="text-sm">knight.red205@gmail.com</span> | |
| </a> | |
| <div class="flex items-center text-[var(--color-text-secondary)]"> | |
| <div class="w-8 h-8 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mr-3"> | |
| <i class="fas fa-map-marker-alt text-sm"></i> | |
| </div> | |
| <span class="text-sm">Dhaka, Khulna</span> | |
| </div> | |
| <a href="https://github.com/Amlan-109" target="_blank" class="flex items-center text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition group"> | |
| <div class="w-8 h-8 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mr-3 group-hover:bg-[var(--color-accent)] group-hover:text-white transition"> | |
| <i class="fab fa-github text-sm"></i> | |
| </div> | |
| <span class="text-sm">Amlan-109</span> | |
| </a> | |
| <a href="https://amlan.framer.ai/" target="_blank" class="flex items-center text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition group"> | |
| <div class="w-8 h-8 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mr-3 group-hover:bg-[var(--color-info)] group-hover:text-white transition"> | |
| <i class="fas fa-globe text-sm"></i> | |
| </div> | |
| <span class="text-sm">amlan.framer.ai</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Recognition --> | |
| <div> | |
| <h2 class="text-xl font-bold mb-4 flex items-center text-[var(--color-text-primary)]"> | |
| <i class="fas fa-trophy mr-3 text-[var(--color-warning)]"></i> Recognition | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="bg-[var(--color-bg-tertiary)] p-4 rounded-lg border border-[var(--color-border-subtle)] text-sm text-[var(--color-text-secondary)] hover:border-[var(--color-warning)] transition"> | |
| Best Website Design Award – Inter-University Tech Competition (July 2024) | |
| </div> | |
| <div class="bg-[var(--color-bg-tertiary)] p-4 rounded-lg border border-[var(--color-border-subtle)] text-sm text-[var(--color-text-secondary)] hover:border-[var(--color-warning)] transition"> | |
| Best Modern UI Web Application – Inter-University Innovation Contest (July 2024) | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Education --> | |
| <div> | |
| <h2 class="text-xl font-bold mb-4 flex items-center text-[var(--color-text-primary)]"> | |
| <i class="fas fa-graduation-cap mr-3 text-[var(--color-info)]"></i> Education | |
| </h2> | |
| <div class="bg-[var(--color-bg-tertiary)] p-5 rounded-lg border border-[var(--color-border-subtle)]"> | |
| <h3 class="font-bold text-[var(--color-text-primary)]">B.Sc. in CSE</h3> | |
| <div class="text-[var(--color-text-secondary)] text-sm mt-1">North Western University</div> | |
| <div class="text-[var(--color-primary)] font-bold text-sm mt-2">GPA: 9.38</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {{template "views/partials/footer" .}} | |
| </div> | |
| </body> | |
| </html> | |