Skip to content

Commit 1df35fa

Browse files
lordsmhlordsmh
committed
add final check
1 parent 82ff923 commit 1df35fa

File tree

1 file changed

+274
-0
lines changed

1 file changed

+274
-0
lines changed

‎index.html‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="scroll-smooth">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>S.M.H. Mousavi - Full-Stack Developer & Cybersecurity Specialist</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
11+
<script src="https://unpkg.com/lucide@latest"></script>
12+
<style>
13+
body {
14+
font-family: 'Inter', sans-serif;
15+
background-color: #0a0a0a;
16+
color: #e2e8f0;
17+
}
18+
.glass-effect {
19+
background: rgba(15, 23, 42, 0.6);
20+
backdrop-filter: blur(10px);
21+
border: 1px solid rgba(255, 255, 255, 0.1);
22+
}
23+
.gradient-text {
24+
background: linear-gradient(to right, #38bdf8, #818cf8);
25+
-webkit-background-clip: text;
26+
-webkit-text-fill-color: transparent;
27+
}
28+
.tag {
29+
background-color: #1e293b;
30+
color: #94a3b8;
31+
padding: 0.25rem 0.75rem;
32+
border-radius: 9999px;
33+
font-size: 0.75rem;
34+
font-weight: 500;
35+
display: inline-block;
36+
margin: 0.125rem;
37+
}
38+
.section-title-glow {
39+
text-shadow: 0 0 8px rgba(56, 189, 248, 0.4), 0 0 20px rgba(129, 140, 248, 0.3);
40+
}
41+
</style>
42+
</head>
43+
<body class="antialiased">
44+
45+
<!-- Background Glows -->
46+
<div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10">
47+
<div class="absolute top-[-20rem] left-[-20rem] w-[50rem] h-[50rem] bg-sky-500/10 rounded-full blur-3xl"></div>
48+
<div class="absolute bottom-[-20rem] right-[-20rem] w-[50rem] h-[50rem] bg-indigo-500/10 rounded-full blur-3xl"></div>
49+
</div>
50+
51+
<div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
52+
53+
<!-- Header / Hero Section -->
54+
<header class="text-center py-16 sm:py-24">
55+
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-slate-100">
56+
S.M.H. Mousavi
57+
</h1>
58+
<h2 class="mt-4 text-xl sm:text-2xl font-semibold gradient-text">
59+
Full-Stack Developer & Cybersecurity Specialist
60+
</h2>
61+
<p class="mt-6 max-w-2xl mx-auto text-lg text-slate-400">
62+
I speak code. I speak security. And I work globally from 🇨🇦 Canada.
63+
</p>
64+
<div class="mt-8">
65+
<a href="mailto:smhmosavi93@gmail.com" class="inline-block bg-sky-600 hover:bg-sky-700 text-white font-bold py-3 px-8 rounded-full transition-transform duration-300 transform hover:scale-105">
66+
Let's Work Together
67+
</a>
68+
</div>
69+
</header>
70+
71+
<main class="space-y-24">
72+
73+
<!-- About Me Section -->
74+
<section id="about">
75+
<div class="glass-effect rounded-2xl p-8">
76+
<h3 class="flex items-center text-2xl font-bold text-slate-200 mb-4 section-title-glow">
77+
<i data-lucide="user-round" class="w-6 h-6 mr-3 text-sky-400"></i>
78+
About Me
79+
</h3>
80+
<p class="text-slate-300 leading-relaxed">
81+
Hi, I’m S.M.H. Mousavi, a Full-Stack Developer & Cybersecurity Specialist with 8+ years of experience in web systems, automation, and penetration testing. I help companies build secure, scalable software — and break it when needed! Whether you need a solid backend, beautiful UI, or an ethical hacker to test your product, I’ve got you covered.
82+
</p>
83+
</div>
84+
</section>
85+
86+
<!-- What I Do Section -->
87+
<section id="services">
88+
<h3 class="text-center text-3xl font-bold text-slate-200 mb-12 section-title-glow">What I Do</h3>
89+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
90+
91+
<!-- Cybersecurity Card -->
92+
<div class="glass-effect rounded-2xl p-6 transform hover:-translate-y-2 transition-transform duration-300">
93+
<div class="flex items-center mb-4">
94+
<div class="p-2 bg-red-500/10 rounded-lg mr-4"><i data-lucide="shield-alert" class="w-6 h-6 text-red-400"></i></div>
95+
<h4 class="text-xl font-bold text-slate-100">Cybersecurity</h4>
96+
</div>
97+
<ul class="list-disc list-inside text-slate-400 space-y-2">
98+
<li>Penetration Testing (Web, Network, API, IoT, Firmware)</li>
99+
<li>Vulnerability Assessment & Hardening</li>
100+
<li>Bug Bounty Reporting & Security Automation</li>
101+
<li>Red Team / Blue Team Simulation</li>
102+
</ul>
103+
</div>
104+
105+
<!-- Full-Stack Development Card -->
106+
<div class="glass-effect rounded-2xl p-6 transform hover:-translate-y-2 transition-transform duration-300">
107+
<div class="flex items-center mb-4">
108+
<div class="p-2 bg-blue-500/10 rounded-lg mr-4"><i data-lucide="code-2" class="w-6 h-6 text-blue-400"></i></div>
109+
<h4 class="text-xl font-bold text-slate-100">Full-Stack Development</h4>
110+
</div>
111+
<ul class="list-disc list-inside text-slate-400 space-y-2">
112+
<li>Backend (Node.js, Python, PHP, Laravel)</li>
113+
<li>Frontend (React, Vue, Tailwind, HTML/CSS)</li>
114+
<li>API Design & Integration (REST, GraphQL)</li>
115+
</ul>
116+
</div>
117+
118+
<!-- DevOps & Automation Card -->
119+
<div class="glass-effect rounded-2xl p-6 transform hover:-translate-y-2 transition-transform duration-300">
120+
<div class="flex items-center mb-4">
121+
<div class="p-2 bg-green-500/10 rounded-lg mr-4"><i data-lucide="server-cog" class="w-6 h-6 text-green-400"></i></div>
122+
<h4 class="text-xl font-bold text-slate-100">DevOps & Automation</h4>
123+
</div>
124+
<ul class="list-disc list-inside text-slate-400 space-y-2">
125+
<li>Dockerized Environments & CI/CD pipelines</li>
126+
<li>Infrastructure as Code (IaC)</li>
127+
<li>Workflow automation (n8n, bash, Python bots)</li>
128+
</ul>
129+
</div>
130+
131+
<!-- Custom Tools Card -->
132+
<div class="glass-effect rounded-2xl p-6 transform hover:-translate-y-2 transition-transform duration-300">
133+
<div class="flex items-center mb-4">
134+
<div class="p-2 bg-purple-500/10 rounded-lg mr-4"><i data-lucide="wrench" class="w-6 h-6 text-purple-400"></i></div>
135+
<h4 class="text-xl font-bold text-slate-100">Custom Tools</h4>
136+
</div>
137+
<ul class="list-disc list-inside text-slate-400 space-y-2">
138+
<li>Account Checkers, Scrapers, Monitors</li>
139+
<li>Telegram/WhatsApp/Discord Bots</li>
140+
<li>Data Visualizations & Admin Dashboards</li>
141+
</ul>
142+
</div>
143+
</div>
144+
</section>
145+
146+
<!-- Skills Section -->
147+
<section id="skills">
148+
<h3 class="text-center text-3xl font-bold text-slate-200 mb-12 section-title-glow">Skills & Technologies</h3>
149+
<div class="glass-effect rounded-2xl p-8">
150+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
151+
<div>
152+
<h4 class="font-bold text-lg text-sky-400 mb-3">Programming Languages</h4>
153+
<div class="flex flex-wrap">
154+
<span class="tag">Python</span><span class="tag">JavaScript</span><span class="tag">C#</span><span class="tag">PHP</span><span class="tag">Bash</span><span class="tag">SQL</span>
155+
</div>
156+
</div>
157+
<div>
158+
<h4 class="font-bold text-lg text-sky-400 mb-3">Frameworks</h4>
159+
<div class="flex flex-wrap">
160+
<span class="tag">Laravel</span><span class="tag">Flask</span><span class="tag">Express</span><span class="tag">React</span><span class="tag">Vue</span>
161+
</div>
162+
</div>
163+
<div>
164+
<h4 class="font-bold text-lg text-sky-400 mb-3">DevOps</h4>
165+
<div class="flex flex-wrap">
166+
<span class="tag">Docker</span><span class="tag">NGINX</span><span class="tag">GitHub Actions</span><span class="tag">Cron</span>
167+
</div>
168+
</div>
169+
<div>
170+
<h4 class="font-bold text-lg text-sky-400 mb-3">Security</h4>
171+
<div class="flex flex-wrap">
172+
<span class="tag">Burp Suite</span><span class="tag">OWASP ZAP</span><span class="tag">Wireshark</span><span class="tag">IDA</span><span class="tag">Ghidra</span>
173+
</div>
174+
</div>
175+
<div>
176+
<h4 class="font-bold text-lg text-sky-400 mb-3">Cloud & Database</h4>
177+
<div class="flex flex-wrap">
178+
<span class="tag">DigitalOcean</span><span class="tag">Linode</span><span class="tag">Hetzner</span><span class="tag">S3-compatible</span>
179+
<span class="tag">MongoDB</span><span class="tag">Redis</span><span class="tag">MySQL</span><span class="tag">SQL Server</span>
180+
</div>
181+
</div>
182+
<div>
183+
<h4 class="font-bold text-lg text-sky-400 mb-3">Other</h4>
184+
<div class="flex flex-wrap">
185+
<span class="tag">WebSockets</span><span class="tag">APIs</span><span class="tag">Telegram Bot API</span>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</section>
191+
192+
<!-- Featured Projects Section -->
193+
<section id="projects">
194+
<h3 class="text-center text-3xl font-bold text-slate-200 mb-12 section-title-glow">Featured Projects</h3>
195+
<div class="space-y-8">
196+
<!-- Project 1 -->
197+
<div class="glass-effect rounded-2xl p-8 transition-all duration-300 hover:border-sky-400/50">
198+
<h4 class="font-bold text-xl text-slate-100">🔐 Firmware Penetration Suite (Private)</h4>
199+
<p class="text-slate-400 mt-2 mb-4">Reverse-engineered IP camera firmware, injected custom modules, and documented multiple zero-days for enterprise clients.</p>
200+
<div class="flex flex-wrap">
201+
<span class="tag">binwalk</span><span class="tag">Ghidra</span><span class="tag">JTAG</span><span class="tag">Python</span><span class="tag">C</span>
202+
</div>
203+
</div>
204+
<!-- Project 2 -->
205+
<div class="glass-effect rounded-2xl p-8 transition-all duration-300 hover:border-sky-400/50">
206+
<h4 class="font-bold text-xl text-slate-100">🧠 Crypto Signals Automation Bot</h4>
207+
<p class="text-slate-400 mt-2 mb-4">Built a Telegram bot that pulls real-time crypto data and sends automated signals based on technical analysis.</p>
208+
<div class="flex flex-wrap">
209+
<span class="tag">Python</span><span class="tag">CCXT</span><span class="tag">Telegram Bot API</span><span class="tag">MongoDB</span>
210+
</div>
211+
</div>
212+
<!-- Project 3 -->
213+
<div class="glass-effect rounded-2xl p-8 transition-all duration-300 hover:border-sky-400/50">
214+
<h4 class="font-bold text-xl text-slate-100">💬 WhatsApp Sales Agent (n8n-based)</h4>
215+
<p class="text-slate-400 mt-2 mb-4">A sales automation agent that handles product info, stock queries, and order registration — connected to Telegram & Google Sheets.</p>
216+
<div class="flex flex-wrap">
217+
<span class="tag">n8n</span><span class="tag">Webhooks</span><span class="tag">Google API</span><span class="tag">MongoDB</span>
218+
</div>
219+
</div>
220+
<!-- Project 4 -->
221+
<div class="glass-effect rounded-2xl p-8 transition-all duration-300 hover:border-sky-400/50">
222+
<h4 class="font-bold text-xl text-slate-100">📊 Custom Admin Dashboard</h4>
223+
<p class="text-slate-400 mt-2 mb-4">Developed a secure dashboard to track combo check results, proxies, user stats, and more. Built-in proxy manager and threaded architecture.</p>
224+
<div class="flex flex-wrap">
225+
<span class="tag">Node.js</span><span class="tag">Express</span><span class="tag">MongoDB</span><span class="tag">Tailwind CSS</span>
226+
</div>
227+
</div>
228+
</div>
229+
</section>
230+
231+
<!-- Client Feedback Section -->
232+
<section id="testimonials">
233+
<h3 class="text-center text-3xl font-bold text-slate-200 mb-12 section-title-glow">Client Feedback</h3>
234+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
235+
<div class="glass-effect rounded-2xl p-8">
236+
<div class="text-yellow-400 mb-2">⭐️⭐️⭐️⭐️⭐️</div>
237+
<blockquote class="text-slate-300 italic">“One of the sharpest minds I’ve worked with. Great communication, deep technical skills, and always delivers beyond expectations.”</blockquote>
238+
<p class="text-right mt-4 font-semibold text-slate-400">— Anna R., CTO at SecuNet</p>
239+
</div>
240+
<div class="glass-effect rounded-2xl p-8">
241+
<div class="text-yellow-400 mb-2">⭐️⭐️⭐️⭐️⭐️</div>
242+
<blockquote class="text-slate-300 italic">“SMH turned our chaotic system into a clean, automated infrastructure — and found vulnerabilities we didn’t even know existed.”</blockquote>
243+
<p class="text-right mt-4 font-semibold text-slate-400">— Thomas H., Startup Founder</p>
244+
</div>
245+
</div>
246+
</section>
247+
248+
<!-- Contact Section -->
249+
<section id="contact">
250+
<div class="text-center glass-effect rounded-2xl p-10">
251+
<h3 class="text-3xl font-bold text-slate-100 mb-4 section-title-glow">Let's Work Together</h3>
252+
<p class="text-slate-400 mb-2">📍 Based in Canada — available worldwide</p>
253+
<p class="text-slate-400 mb-2">💬 Fluent in English & Persian</p>
254+
<p class="text-slate-400 mb-6">💸 Payment via PayPal, Wise, or Canadian Bank</p>
255+
<a href="mailto:smhmosavi93@gmail.com" class="inline-flex items-center text-lg font-semibold gradient-text hover:brightness-125 transition">
256+
<i data-lucide="mail" class="w-5 h-5 mr-2"></i>
257+
smhmosavi93@gmail.com
258+
</a>
259+
</div>
260+
</section>
261+
</main>
262+
263+
<!-- Footer -->
264+
<footer class="text-center py-8 mt-16">
265+
<p class="text-slate-500">© 2024 S.M.H. Mousavi. All rights reserved.</p>
266+
</footer>
267+
268+
</div>
269+
270+
<script>
271+
lucide.createIcons();
272+
</script>
273+
</body>
274+
</html>

0 commit comments

Comments
 (0)