-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
83 lines (83 loc) · 42.6 KB
/
index.html
File metadata and controls
83 lines (83 loc) · 42.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="E-commerce Developer & Shopify Expert | Building powerful online stores and business solutions"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><!-- Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet"><title>E-Commerce Developer & Shopify Expert | MarkSDev</title><link rel="stylesheet" href="/_astro/index.BBCy73qO.css"><script type="module">const r=document.getElementById("mobile-menu-btn"),t=document.getElementById("mobile-menu"),n=document.getElementById("bar1"),s=document.getElementById("bar2"),a=document.getElementById("bar3");let e=!1;r?.addEventListener("click",()=>{e=!e,t?.classList.toggle("hidden"),e?(n.style.transform="rotate(45deg) translate(4px, 4px)",s.style.opacity="0",a.style.transform="rotate(-45deg) translate(4px, -4px)"):(n.style.transform="",s.style.opacity="1",a.style.transform="")});t?.querySelectorAll("a").forEach(l=>{l.addEventListener("click",()=>{t.classList.add("hidden"),e=!1,n.style.transform="",s.style.opacity="1",a.style.transform=""})});
</script></head> <body class="bg-dark-900 text-text-primary font-body antialiased"> <!-- Subtle grid background --> <div class="fixed inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px] pointer-events-none"></div> <!-- Gradient orbs --> <div class="fixed top-0 left-1/4 w-[600px] h-[600px] bg-accent-primary/5 rounded-full blur-[120px] pointer-events-none"></div> <div class="fixed bottom-0 right-1/4 w-[500px] h-[500px] bg-accent-primary/3 rounded-full blur-[100px] pointer-events-none"></div> <div class="relative z-10"> <nav class="fixed top-0 left-0 right-0 z-50 bg-dark-900/80 backdrop-blur-xl border-b border-white/5"> <div class="max-w-6xl mx-auto px-6 py-4"> <div class="flex items-center justify-between"> <!-- Logo --> <a href="/" class="group flex items-center gap-2"> <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-accent-primary to-accent-secondary flex items-center justify-center font-display font-bold text-dark-900 text-lg group-hover:scale-105 transition-transform">
M
</div> <span class="font-display font-semibold text-xl text-text-primary">
Marks<span class="text-accent-primary">Dev</span> </span> </a> <!-- Desktop Navigation --> <div class="hidden md:flex items-center gap-8"> <a href="#projects" class="text-text-secondary hover:text-accent-primary transition-colors text-sm font-medium tracking-wide"> Projects </a><a href="#services" class="text-text-secondary hover:text-accent-primary transition-colors text-sm font-medium tracking-wide"> Services </a><a href="#about" class="text-text-secondary hover:text-accent-primary transition-colors text-sm font-medium tracking-wide"> About </a><a href="#contact" class="text-text-secondary hover:text-accent-primary transition-colors text-sm font-medium tracking-wide"> Contact </a> <a href="#contact" class="px-5 py-2.5 bg-accent-primary/10 border border-accent-primary/30 rounded-lg text-accent-primary text-sm font-medium hover:bg-accent-primary/20 hover:border-accent-primary/50 transition-all">
Let's Talk
</a> </div> <!-- Mobile Menu Button --> <button id="mobile-menu-btn" class="md:hidden w-10 h-10 flex flex-col items-center justify-center gap-1.5 text-text-primary" aria-label="Toggle menu"> <span class="w-5 h-0.5 bg-current transition-transform origin-center" id="bar1"></span> <span class="w-5 h-0.5 bg-current transition-opacity" id="bar2"></span> <span class="w-5 h-0.5 bg-current transition-transform origin-center" id="bar3"></span> </button> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="md:hidden hidden absolute top-full left-0 right-0 bg-dark-800/95 backdrop-blur-xl border-b border-white/5"> <div class="px-6 py-6 flex flex-col gap-4"> <a href="#projects" class="text-text-secondary hover:text-accent-primary transition-colors text-lg font-medium py-2"> Projects </a><a href="#services" class="text-text-secondary hover:text-accent-primary transition-colors text-lg font-medium py-2"> Services </a><a href="#about" class="text-text-secondary hover:text-accent-primary transition-colors text-lg font-medium py-2"> About </a><a href="#contact" class="text-text-secondary hover:text-accent-primary transition-colors text-lg font-medium py-2"> Contact </a> <a href="#contact" class="mt-2 px-5 py-3 bg-accent-primary text-dark-900 rounded-lg text-center font-semibold hover:bg-accent-secondary transition-colors">
Let's Talk
</a> </div> </div> </nav> <main> <section class="min-h-screen flex items-center justify-center pt-20 pb-16 px-6"> <div class="max-w-4xl mx-auto text-center"> <!-- Status badge --> <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-dark-700/50 border border-white/10 mb-8 opacity-0 animate-fade-up"> <span class="w-2 h-2 rounded-full bg-accent-primary animate-pulse"></span> <span class="text-text-secondary text-sm font-medium">Available for new projects</span> </div> <!-- Main heading --> <h1 class="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6 opacity-0 animate-fade-up stagger-1">
Building
<span class="text-transparent bg-clip-text bg-gradient-to-r from-accent-primary to-accent-secondary">E-Commerce</span> <br>Solutions That Scale
</h1> <!-- Subheading --> <p class="text-text-secondary text-lg md:text-xl max-w-2xl mx-auto mb-10 leading-relaxed opacity-0 animate-fade-up stagger-2">
Shopify developer & e-commerce specialist crafting high-converting stores,
custom integrations, and business automation systems.
</p> <!-- CTA buttons --> <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16 opacity-0 animate-fade-up stagger-3"> <a href="#projects" class="w-full sm:w-auto px-8 py-4 bg-accent-primary text-dark-900 rounded-xl font-semibold text-lg hover:bg-accent-secondary transition-all hover:scale-105 shadow-lg shadow-accent-primary/20">
View My Work
</a> <a href="#contact" class="w-full sm:w-auto px-8 py-4 bg-dark-700/50 border border-white/10 text-text-primary rounded-xl font-semibold text-lg hover:bg-dark-600/50 hover:border-white/20 transition-all">
Get In Touch
</a> </div> <!-- Tech stack --> <div class="opacity-0 animate-fade-up stagger-4"> <p class="text-text-muted text-sm uppercase tracking-widest mb-4">Tech Stack</p> <div class="flex flex-wrap items-center justify-center gap-6"> <span class="px-4 py-2 rounded-lg bg-dark-700/30 border border-white/5 text-text-secondary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> Shopify </span><span class="px-4 py-2 rounded-lg bg-dark-700/30 border border-white/5 text-text-secondary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> Liquid </span><span class="px-4 py-2 rounded-lg bg-dark-700/30 border border-white/5 text-text-secondary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> GoHighLevel </span><span class="px-4 py-2 rounded-lg bg-dark-700/30 border border-white/5 text-text-secondary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> CS-Cart </span><span class="px-4 py-2 rounded-lg bg-dark-700/30 border border-white/5 text-text-secondary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> JavaScript </span><span class="px-4 py-2 rounded-lg bg-dark-700/30 border border-white/5 text-text-secondary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> Tailwind </span> </div> </div> <!-- Scroll indicator --> <div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in stagger-5 hidden md:block"> <div class="w-6 h-10 rounded-full border-2 border-white/20 flex justify-center pt-2"> <div class="w-1 h-2 rounded-full bg-accent-primary animate-bounce"></div> </div> </div> </div> </section> <section id="projects" class="py-24 px-6"> <div class="max-w-6xl mx-auto"> <!-- Section header --> <div class="text-center mb-16"> <span class="inline-block px-4 py-1.5 rounded-full bg-accent-primary/10 border border-accent-primary/20 text-accent-primary text-sm font-medium mb-4">
Portfolio
</span> <h2 class="font-display text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
Featured Projects
</h2> <p class="text-text-secondary text-lg max-w-2xl mx-auto">
E-commerce solutions that drive real business results
</p> </div> <!-- Projects grid --> <div class="grid md:grid-cols-2 gap-6 lg:gap-8"> <article class="group relative bg-dark-800/50 rounded-2xl border border-white/5 overflow-hidden hover:border-accent-primary/30 transition-all duration-500"> <!-- Gradient background --> <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <!-- Content --> <div class="relative p-6 lg:p-8"> <!-- Header --> <div class="flex items-start justify-between mb-4"> <div> <span class="text-accent-primary text-sm font-medium">Shopify Development</span> <h3 class="font-display text-xl lg:text-2xl font-semibold mt-1 group-hover:text-accent-primary transition-colors"> Rizing Rivers Fishing Co. </h3> </div> <span class="px-3 py-1 rounded-full text-xs font-medium bg-accent-primary/20 text-accent-primary"> Live </span> </div> <!-- Description --> <p class="text-text-secondary mb-6 leading-relaxed"> Complete e-commerce solution with wholesale pricing, affiliate program (7% commission via UpPromote), Zoho inventory integration, and multi-tier customer pricing system. </p> <!-- Highlights --> <div class="flex flex-wrap gap-2 mb-6"> <span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Wholesale & Retail System </span><span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Affiliate Program </span><span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Inventory Sync </span> </div> <!-- Tech stack --> <div class="pt-4 border-t border-white/5"> <div class="flex flex-wrap gap-2"> <span class="text-text-muted text-xs font-mono">Shopify</span><span class="text-text-muted text-xs font-mono">Liquid</span><span class="text-text-muted text-xs font-mono">UpPromote</span><span class="text-text-muted text-xs font-mono">Zoho</span><span class="text-text-muted text-xs font-mono">Custom Integrations</span> </div> </div> <!-- Hover arrow --> <div class="absolute bottom-6 right-6 w-10 h-10 rounded-full bg-accent-primary/10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-x-2 group-hover:translate-x-0"> <svg class="w-5 h-5 text-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </div> </div> </article><article class="group relative bg-dark-800/50 rounded-2xl border border-white/5 overflow-hidden hover:border-accent-primary/30 transition-all duration-500"> <!-- Gradient background --> <div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <!-- Content --> <div class="relative p-6 lg:p-8"> <!-- Header --> <div class="flex items-start justify-between mb-4"> <div> <span class="text-accent-primary text-sm font-medium">Shopify + Automation</span> <h3 class="font-display text-xl lg:text-2xl font-semibold mt-1 group-hover:text-accent-primary transition-colors"> Hsaiiae LED Therapy </h3> </div> <span class="px-3 py-1 rounded-full text-xs font-medium bg-accent-primary/20 text-accent-primary"> Live </span> </div> <!-- Description --> <p class="text-text-secondary mb-6 leading-relaxed"> Premium LED light therapy mask e-commerce site with multi-step warranty registration popup, email automation system, and CRO-optimized landing pages. </p> <!-- Highlights --> <div class="flex flex-wrap gap-2 mb-6"> <span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Warranty System </span><span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Email Flows </span><span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> CRO Optimization </span> </div> <!-- Tech stack --> <div class="pt-4 border-t border-white/5"> <div class="flex flex-wrap gap-2"> <span class="text-text-muted text-xs font-mono">Shopify</span><span class="text-text-muted text-xs font-mono">Liquid</span><span class="text-text-muted text-xs font-mono">Email Automation</span><span class="text-text-muted text-xs font-mono">Custom Popups</span> </div> </div> <!-- Hover arrow --> <div class="absolute bottom-6 right-6 w-10 h-10 rounded-full bg-accent-primary/10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-x-2 group-hover:translate-x-0"> <svg class="w-5 h-5 text-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </div> </div> </article><article class="group relative bg-dark-800/50 rounded-2xl border border-white/5 overflow-hidden hover:border-accent-primary/30 transition-all duration-500"> <!-- Gradient background --> <div class="absolute inset-0 bg-gradient-to-br from-orange-500/20 to-amber-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <!-- Content --> <div class="relative p-6 lg:p-8"> <!-- Header --> <div class="flex items-start justify-between mb-4"> <div> <span class="text-accent-primary text-sm font-medium">GoHighLevel Build</span> <h3 class="font-display text-xl lg:text-2xl font-semibold mt-1 group-hover:text-accent-primary transition-colors"> E-Bike B2B Demo Store </h3> </div> <span class="px-3 py-1 rounded-full text-xs font-medium bg-amber-500/20 text-amber-400"> In Progress </span> </div> <!-- Description --> <p class="text-text-secondary mb-6 leading-relaxed"> Demo e-bike store website built on GoHighLevel for B2B consultant, showcasing marketing systems and automation capabilities for local e-bike shops. </p> <!-- Highlights --> <div class="flex flex-wrap gap-2 mb-6"> <span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> B2B Platform </span><span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Marketing Demo </span><span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Lead Generation </span> </div> <!-- Tech stack --> <div class="pt-4 border-t border-white/5"> <div class="flex flex-wrap gap-2"> <span class="text-text-muted text-xs font-mono">GoHighLevel</span><span class="text-text-muted text-xs font-mono">Landing Pages</span><span class="text-text-muted text-xs font-mono">Marketing Automation</span> </div> </div> <!-- Hover arrow --> <div class="absolute bottom-6 right-6 w-10 h-10 rounded-full bg-accent-primary/10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-x-2 group-hover:translate-x-0"> <svg class="w-5 h-5 text-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </div> </div> </article><article class="group relative bg-dark-800/50 rounded-2xl border border-white/5 overflow-hidden hover:border-accent-primary/30 transition-all duration-500"> <!-- Gradient background --> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <!-- Content --> <div class="relative p-6 lg:p-8"> <!-- Header --> <div class="flex items-start justify-between mb-4"> <div> <span class="text-accent-primary text-sm font-medium">CS-Cart Development</span> <h3 class="font-display text-xl lg:text-2xl font-semibold mt-1 group-hover:text-accent-primary transition-colors"> Multi-Vendor Marketplace </h3> </div> <span class="px-3 py-1 rounded-full text-xs font-medium bg-amber-500/20 text-amber-400"> In Development </span> </div> <!-- Description --> <p class="text-text-secondary mb-6 leading-relaxed"> Comprehensive multi-vendor marketplace built on CS-Cart platform, enabling multiple sellers with unified storefront and advanced vendor management. </p> <!-- Highlights --> <div class="flex flex-wrap gap-2 mb-6"> <span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Vendor Portal </span><span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Commission System </span><span class="px-3 py-1 rounded-lg bg-dark-700/50 border border-white/5 text-text-muted text-sm"> Scalable </span> </div> <!-- Tech stack --> <div class="pt-4 border-t border-white/5"> <div class="flex flex-wrap gap-2"> <span class="text-text-muted text-xs font-mono">CS-Cart</span><span class="text-text-muted text-xs font-mono">Multi-Vendor</span><span class="text-text-muted text-xs font-mono">Custom Development</span> </div> </div> <!-- Hover arrow --> <div class="absolute bottom-6 right-6 w-10 h-10 rounded-full bg-accent-primary/10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform translate-x-2 group-hover:translate-x-0"> <svg class="w-5 h-5 text-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </div> </div> </article> </div> <!-- More projects CTA --> <div class="text-center mt-12"> <p class="text-text-muted mb-4">More projects coming soon</p> <a href="#contact" class="inline-flex items-center gap-2 text-accent-primary hover:underline font-medium">
Have a project in mind? Let's talk
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </a> </div> </div> </section> <section id="services" class="py-24 px-6 bg-dark-800/30"> <div class="max-w-6xl mx-auto"> <!-- Section header --> <div class="text-center mb-16"> <span class="inline-block px-4 py-1.5 rounded-full bg-accent-primary/10 border border-accent-primary/20 text-accent-primary text-sm font-medium mb-4">
Services
</span> <h2 class="font-display text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
What I Can Build For You
</h2> <p class="text-text-secondary text-lg max-w-2xl mx-auto">
End-to-end e-commerce solutions from store setup to complex integrations
</p> </div> <!-- Services grid --> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="group p-6 lg:p-8 bg-dark-800/50 rounded-2xl border border-white/5 hover:border-accent-primary/20 transition-all duration-300 hover:-translate-y-1"> <!-- Icon --> <div class="w-14 h-14 rounded-xl bg-accent-primary/10 border border-accent-primary/20 flex items-center justify-center text-accent-primary mb-5 group-hover:scale-110 transition-transform"> <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg> </div> <!-- Content --> <h3 class="font-display text-xl font-semibold mb-3 group-hover:text-accent-primary transition-colors"> Shopify Development </h3> <p class="text-text-secondary mb-5 leading-relaxed"> Custom Shopify stores built for conversion. Theme customization, Liquid development, app integrations, and performance optimization. </p> <!-- Features --> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Custom Themes </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> App Integration </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Liquid Development </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Speed Optimization </span> </div> </div><div class="group p-6 lg:p-8 bg-dark-800/50 rounded-2xl border border-white/5 hover:border-accent-primary/20 transition-all duration-300 hover:-translate-y-1"> <!-- Icon --> <div class="w-14 h-14 rounded-xl bg-accent-primary/10 border border-accent-primary/20 flex items-center justify-center text-accent-primary mb-5 group-hover:scale-110 transition-transform"> <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg> </div> <!-- Content --> <h3 class="font-display text-xl font-semibold mb-3 group-hover:text-accent-primary transition-colors"> Wholesale & B2B Systems </h3> <p class="text-text-secondary mb-5 leading-relaxed"> Multi-tier pricing, wholesale portals, and B2B checkout flows. Custom solutions for businesses selling to both retail and wholesale customers. </p> <!-- Features --> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Tier Pricing </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Wholesale Apps </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> B2B Checkout </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Customer Groups </span> </div> </div><div class="group p-6 lg:p-8 bg-dark-800/50 rounded-2xl border border-white/5 hover:border-accent-primary/20 transition-all duration-300 hover:-translate-y-1"> <!-- Icon --> <div class="w-14 h-14 rounded-xl bg-accent-primary/10 border border-accent-primary/20 flex items-center justify-center text-accent-primary mb-5 group-hover:scale-110 transition-transform"> <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg> </div> <!-- Content --> <h3 class="font-display text-xl font-semibold mb-3 group-hover:text-accent-primary transition-colors"> Affiliate Programs </h3> <p class="text-text-secondary mb-5 leading-relaxed"> Set up and configure affiliate systems that actually work. Commission structures, tracking, payouts, and affiliate portals. </p> <!-- Features --> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> UpPromote Setup </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Commission Tiers </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Tracking & Analytics </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Affiliate Portals </span> </div> </div><div class="group p-6 lg:p-8 bg-dark-800/50 rounded-2xl border border-white/5 hover:border-accent-primary/20 transition-all duration-300 hover:-translate-y-1"> <!-- Icon --> <div class="w-14 h-14 rounded-xl bg-accent-primary/10 border border-accent-primary/20 flex items-center justify-center text-accent-primary mb-5 group-hover:scale-110 transition-transform"> <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
</svg> </div> <!-- Content --> <h3 class="font-display text-xl font-semibold mb-3 group-hover:text-accent-primary transition-colors"> Inventory Integration </h3> <p class="text-text-secondary mb-5 leading-relaxed"> Connect your store to inventory management systems like Zoho. Real-time sync, automated stock updates, and multi-channel management. </p> <!-- Features --> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Zoho Integration </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Real-time Sync </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Multi-channel </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Automated Updates </span> </div> </div><div class="group p-6 lg:p-8 bg-dark-800/50 rounded-2xl border border-white/5 hover:border-accent-primary/20 transition-all duration-300 hover:-translate-y-1"> <!-- Icon --> <div class="w-14 h-14 rounded-xl bg-accent-primary/10 border border-accent-primary/20 flex items-center justify-center text-accent-primary mb-5 group-hover:scale-110 transition-transform"> <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg> </div> <!-- Content --> <h3 class="font-display text-xl font-semibold mb-3 group-hover:text-accent-primary transition-colors"> GoHighLevel Builds </h3> <p class="text-text-secondary mb-5 leading-relaxed"> Marketing funnels, landing pages, and automation workflows on GoHighLevel. Perfect for agencies and consultants. </p> <!-- Features --> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Funnels & Pages </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Email Automation </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> CRM Setup </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Workflow Automation </span> </div> </div><div class="group p-6 lg:p-8 bg-dark-800/50 rounded-2xl border border-white/5 hover:border-accent-primary/20 transition-all duration-300 hover:-translate-y-1"> <!-- Icon --> <div class="w-14 h-14 rounded-xl bg-accent-primary/10 border border-accent-primary/20 flex items-center justify-center text-accent-primary mb-5 group-hover:scale-110 transition-transform"> <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg> </div> <!-- Content --> <h3 class="font-display text-xl font-semibold mb-3 group-hover:text-accent-primary transition-colors"> Marketplace Development </h3> <p class="text-text-secondary mb-5 leading-relaxed"> Multi-vendor marketplaces on CS-Cart and similar platforms. Vendor management, commission systems, and scalable architecture. </p> <!-- Features --> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> CS-Cart Setup </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Vendor Portals </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Commission Systems </span><span class="px-2.5 py-1 rounded-md bg-dark-700/50 text-text-muted text-xs font-medium"> Multi-vendor </span> </div> </div> </div> </div> </section> <section id="about" class="py-24 px-6"> <div class="max-w-6xl mx-auto"> <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center"> <!-- Left column - Content --> <div> <span class="inline-block px-4 py-1.5 rounded-full bg-accent-primary/10 border border-accent-primary/20 text-accent-primary text-sm font-medium mb-4">
About Me
</span> <h2 class="font-display text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
E-Commerce Developer
<span class="text-accent-primary">Based in the Philippines</span> </h2> <div class="space-y-4 text-text-secondary leading-relaxed mb-8"> <p>
I'm Mark, a Shopify developer and e-commerce specialist with a passion for building
online stores that actually convert. I work with clients globally to create comprehensive
web development solutions — from affiliate programs and wholesale systems to full
marketplace builds.
</p> <p>
My approach is straightforward: understand your business goals, then build the
technical solution that gets you there. Whether it's a custom Shopify theme,
complex inventory integrations, or a multi-vendor marketplace, I focus on
creating systems that are easy to manage and scale with your business.
</p> <p>
When I'm not coding, you might find me analyzing futures charts during the
London session or fine-tuning my PC build for maximum productivity.
</p> </div> <!-- Stats --> <div class="flex flex-wrap gap-8 mb-8"> <div> <div class="font-display text-3xl md:text-4xl font-bold text-accent-primary"> 5+ </div> <div class="text-text-muted text-sm">Years Experience</div> </div><div> <div class="font-display text-3xl md:text-4xl font-bold text-accent-primary"> 20+ </div> <div class="text-text-muted text-sm">Projects Delivered</div> </div><div> <div class="font-display text-3xl md:text-4xl font-bold text-accent-primary"> 100% </div> <div class="text-text-muted text-sm">Client Satisfaction</div> </div> </div> <!-- CTA --> <a href="#contact" class="inline-flex items-center gap-2 px-6 py-3 bg-accent-primary text-dark-900 rounded-xl font-semibold hover:bg-accent-secondary transition-all hover:scale-105">
Let's Work Together
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> </a> </div> <!-- Right column - Skills card --> <div class="relative"> <!-- Background decoration --> <div class="absolute -inset-4 bg-gradient-to-br from-accent-primary/10 to-transparent rounded-3xl blur-2xl"></div> <div class="relative bg-dark-800/80 backdrop-blur-sm rounded-2xl border border-white/10 p-8"> <h3 class="font-display text-xl font-semibold mb-6 flex items-center gap-3"> <span class="w-8 h-8 rounded-lg bg-accent-primary/20 flex items-center justify-center"> <svg class="w-4 h-4 text-accent-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> </span>
Technical Expertise
</h3> <div class="flex flex-wrap gap-3"> <span class="px-4 py-2 rounded-xl bg-dark-700/50 border border-white/5 text-text-primary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> Shopify & Liquid </span><span class="px-4 py-2 rounded-xl bg-dark-700/50 border border-white/5 text-text-primary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> GoHighLevel </span><span class="px-4 py-2 rounded-xl bg-dark-700/50 border border-white/5 text-text-primary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> CS-Cart Multi-Vendor </span><span class="px-4 py-2 rounded-xl bg-dark-700/50 border border-white/5 text-text-primary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> JavaScript & APIs </span><span class="px-4 py-2 rounded-xl bg-dark-700/50 border border-white/5 text-text-primary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> Email Automation </span><span class="px-4 py-2 rounded-xl bg-dark-700/50 border border-white/5 text-text-primary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> Inventory Systems </span><span class="px-4 py-2 rounded-xl bg-dark-700/50 border border-white/5 text-text-primary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> Affiliate Programs </span><span class="px-4 py-2 rounded-xl bg-dark-700/50 border border-white/5 text-text-primary text-sm font-medium hover:border-accent-primary/30 hover:text-accent-primary transition-all cursor-default"> CRO & UX </span> </div> <!-- Tools section --> <div class="mt-8 pt-8 border-t border-white/5"> <h4 class="text-text-muted text-sm uppercase tracking-wider mb-4">Tools & Platforms</h4> <div class="flex flex-wrap gap-4 text-text-secondary text-sm"> <span>VS Code</span> <span>•</span> <span>GitHub</span> <span>•</span> <span>Figma</span> <span>•</span> <span>Postman</span> <span>•</span> <span>Zoho</span> </div> </div> <!-- Availability indicator --> <div class="mt-8 p-4 rounded-xl bg-accent-primary/5 border border-accent-primary/20"> <div class="flex items-center gap-3"> <span class="w-3 h-3 rounded-full bg-accent-primary animate-pulse"></span> <span class="text-text-primary font-medium">Currently accepting new projects</span> </div> </div> </div> </div> </div> </div> </section> <section id="contact" class="py-24 px-6 bg-dark-800/30"> <div class="max-w-4xl mx-auto"> <!-- Section header --> <div class="text-center mb-12"> <span class="inline-block px-4 py-1.5 rounded-full bg-accent-primary/10 border border-accent-primary/20 text-accent-primary text-sm font-medium mb-4">
Get In Touch
</span> <h2 class="font-display text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
Let's Build Something
<span class="text-accent-primary">Great Together</span> </h2> <p class="text-text-secondary text-lg max-w-xl mx-auto">
Have a project in mind? I'd love to hear about it. Send me a message and let's discuss how I can help.
</p> </div> <!-- Contact card --> <div class="relative"> <div class="absolute -inset-4 bg-gradient-to-br from-accent-primary/5 to-transparent rounded-3xl blur-xl"></div> <div class="relative bg-dark-800/80 backdrop-blur-sm rounded-2xl border border-white/10 p-8 md:p-12"> <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" class="space-y-6"> <!-- Hidden fields for Netlify --> <input type="hidden" name="form-name" value="contact"> <p class="hidden"> <label>Don't fill this out: <input name="bot-field"></label> </p> <div class="grid md:grid-cols-2 gap-6"> <!-- Name --> <div> <label for="name" class="block text-text-primary font-medium mb-2">Name</label> <input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-xl bg-dark-700/50 border border-white/10 text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent-primary/50 focus:ring-1 focus:ring-accent-primary/50 transition-all" placeholder="Your name"> </div> <!-- Email --> <div> <label for="email" class="block text-text-primary font-medium mb-2">Email</label> <input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-xl bg-dark-700/50 border border-white/10 text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent-primary/50 focus:ring-1 focus:ring-accent-primary/50 transition-all" placeholder="your@email.com"> </div> </div> <!-- Project Type --> <div> <label for="project-type" class="block text-text-primary font-medium mb-2">Project Type</label> <select id="project-type" name="project-type" class="w-full px-4 py-3 rounded-xl bg-dark-700/50 border border-white/10 text-text-primary focus:outline-none focus:border-accent-primary/50 focus:ring-1 focus:ring-accent-primary/50 transition-all"> <option value="">Select a project type</option> <option value="shopify">Shopify Development</option> <option value="wholesale">Wholesale/B2B System</option> <option value="affiliate">Affiliate Program</option> <option value="gohighlevel">GoHighLevel Build</option> <option value="marketplace">Marketplace Development</option> <option value="integration">Custom Integration</option> <option value="other">Other</option> </select> </div> <!-- Budget --> <div> <label for="budget" class="block text-text-primary font-medium mb-2">Budget Range</label> <select id="budget" name="budget" class="w-full px-4 py-3 rounded-xl bg-dark-700/50 border border-white/10 text-text-primary focus:outline-none focus:border-accent-primary/50 focus:ring-1 focus:ring-accent-primary/50 transition-all"> <option value="">Select your budget</option> <option value="500-1000">$500 - $1,000</option> <option value="1000-2500">$1,000 - $2,500</option> <option value="2500-5000">$2,500 - $5,000</option> <option value="5000+">$5,000+</option> <option value="not-sure">Not sure yet</option> </select> </div> <!-- Message --> <div> <label for="message" class="block text-text-primary font-medium mb-2">Tell me about your project</label> <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 rounded-xl bg-dark-700/50 border border-white/10 text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent-primary/50 focus:ring-1 focus:ring-accent-primary/50 transition-all resize-none" placeholder="What are you looking to build? Any specific requirements or timeline?"></textarea> </div> <!-- Submit --> <button type="submit" class="w-full px-8 py-4 bg-accent-primary text-dark-900 rounded-xl font-semibold text-lg hover:bg-accent-secondary transition-all hover:scale-[1.02] shadow-lg shadow-accent-primary/20">
Send Message
</button> </form> <!-- Alternative contact --> <div class="mt-8 pt-8 border-t border-white/5 text-center"> <p class="text-text-muted mb-4">Or reach out directly</p> <div class="flex flex-wrap items-center justify-center gap-6"> <a href="mailto:hello@marksdev.com" class="flex items-center gap-2 text-text-secondary hover:text-accent-primary transition-colors"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg>
hello@marksdev.com
</a> <a href="https://github.com/marksdev" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 text-text-secondary hover:text-accent-primary transition-colors"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path> </svg>
GitHub
</a> </div> </div> </div> </div> </div> </section> </main> <footer class="py-8 px-6 border-t border-white/5"> <div class="max-w-6xl mx-auto"> <div class="flex flex-col md:flex-row items-center justify-between gap-4"> <!-- Logo --> <a href="/" class="flex items-center gap-2"> <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-accent-primary to-accent-secondary flex items-center justify-center font-display font-bold text-dark-900 text-sm">
M
</div> <span class="font-display font-semibold text-text-primary">
Marks<span class="text-accent-primary">Dev</span> </span> </a> <!-- Copyright --> <p class="text-text-muted text-sm">
© 2026 MarkSDev. All rights reserved.
</p> <!-- Social links --> <div class="flex items-center gap-4"> <a href="https://github.com/marksdev" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-dark-700/50 border border-white/5 flex items-center justify-center text-text-muted hover:text-accent-primary hover:border-accent-primary/30 transition-all" aria-label="GitHub"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path> </svg> </a> <a href="https://linkedin.com/in/marksdev" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-dark-700/50 border border-white/5 flex items-center justify-center text-text-muted hover:text-accent-primary hover:border-accent-primary/30 transition-all" aria-label="LinkedIn"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path> </svg> </a> <a href="mailto:hello@marksdev.com" class="w-10 h-10 rounded-lg bg-dark-700/50 border border-white/5 flex items-center justify-center text-text-muted hover:text-accent-primary hover:border-accent-primary/30 transition-all" aria-label="Email"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> </a> </div> </div> </div> </footer> </div> </body></html>