mirror of
https://github.com/tiennm99/is-a-dev.git
synced 2026-10-13 08:15:41 +00:00
1 parent
8454ac0c18
commit
78b16facc9
1 file changed
-543
-543
@@ -1,543 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Roshan Yadav | Software Engineering & AI Technology</title>
|
||||
<meta name="description" content="High-performance enterprise applications, web platforms, machine learning pipelines, and payment system engineering.">
|
||||
<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=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Header -->
|
||||
<header class="navbar" id="navbar">
|
||||
<div class="nav-container">
|
||||
<a href="#" class="brand">
|
||||
<span class="brand-prefix"></></span>
|
||||
<span class="brand-name">ROSHAN YADAV</span>
|
||||
<span class="brand-badge">ENGINEERING</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav-menu" id="nav-menu">
|
||||
<a href="#work" class="nav-item"><span class="item-num">01.</span> WORK</a>
|
||||
<a href="#capabilities" class="nav-item"><span class="item-num">02.</span> CAPABILITIES</a>
|
||||
<a href="#tech" class="nav-item"><span class="item-num">03.</span> TECH STACK</a>
|
||||
<a href="#contact" class="nav-item"><span class="item-num">04.</span> CONTACT</a>
|
||||
<a href="https://github.com/Roshan-py" target="_blank" rel="noopener" class="nav-item nav-github">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
|
||||
<span>GITHUB</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="nav-actions">
|
||||
<!-- Theme Switcher Button -->
|
||||
<button class="theme-toggle-btn" id="theme-toggle" aria-label="Switch between Day and Night mode" title="Toggle Day/Night Mode">
|
||||
<span class="theme-icon sun-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
||||
</span>
|
||||
<span class="theme-icon moon-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
||||
</span>
|
||||
<span class="theme-label" id="theme-label">NIGHT</span>
|
||||
</button>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button class="mobile-toggle" id="mobile-toggle" aria-label="Toggle Navigation Menu">
|
||||
<span class="toggle-bar"></span>
|
||||
<span class="toggle-bar"></span>
|
||||
<span class="toggle-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-container">
|
||||
<!-- Left Messaging Column -->
|
||||
<div class="hero-left">
|
||||
<div class="status-tag">
|
||||
<span class="tag-pulse"></span>
|
||||
<span class="tag-text">SYSTEMS ONLINE // FULLSTACK & AI ENGINEERING</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-headline">
|
||||
Architecting High-Throughput <span class="accent-text">Web Applications</span> & <span class="gradient-accent">Machine Learning</span> Pipelines.
|
||||
</h1>
|
||||
|
||||
<p class="hero-subhead">
|
||||
We build robust enterprise backends, dynamic web applications, payment integrations, and automated AI data pipelines using
|
||||
<strong>Python, FastAPI, Django, HTML5, CSS3, and JavaScript</strong>.
|
||||
</p>
|
||||
|
||||
<div class="hero-cta">
|
||||
<a href="#work" class="btn btn-primary">
|
||||
<span>EXPLORE WHAT WE'RE BUILDING</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||||
</a>
|
||||
<a href="https://github.com/Roshan-py" target="_blank" rel="noopener" class="btn btn-outline">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
|
||||
<span>GITHUB PROFILE</span>
|
||||
</a>
|
||||
<a href="#contact" class="btn btn-secondary">
|
||||
<span>CONTACT</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- System Telemetry Metrics -->
|
||||
<div class="hero-specs">
|
||||
<div class="spec-box">
|
||||
<span class="spec-val">4+</span>
|
||||
<span class="spec-lbl">Production Platforms</span>
|
||||
</div>
|
||||
<div class="spec-sep"></div>
|
||||
<div class="spec-box">
|
||||
<span class="spec-val">Python / JS</span>
|
||||
<span class="spec-lbl">Core Tech Stack</span>
|
||||
</div>
|
||||
<div class="spec-sep"></div>
|
||||
<div class="spec-box">
|
||||
<span class="spec-val">100%</span>
|
||||
<span class="spec-lbl">API Security Compliance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Engineered Architecture Console -->
|
||||
<div class="hero-right">
|
||||
<div class="console-card">
|
||||
<div class="console-header">
|
||||
<div class="console-dots">
|
||||
<span class="dot red"></span>
|
||||
<span class="dot yellow"></span>
|
||||
<span class="dot green"></span>
|
||||
</div>
|
||||
<div class="console-title">ENGINEERING CONSOLE v2.4</div>
|
||||
<div class="console-tabs">
|
||||
<button class="tab-btn active" data-tab="pipeline">PIPELINE</button>
|
||||
<button class="tab-btn" data-tab="inference">ML INFER</button>
|
||||
<button class="tab-btn" data-tab="stack">STACK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="console-body">
|
||||
<!-- Tab 1: Pipeline -->
|
||||
<div class="tab-content active" id="tab-pipeline">
|
||||
<div class="code-line"><span class="c-keyword">import</span> <span class="c-val">fastapi</span>, <span class="c-val">asyncio</span>, <span class="c-val">torch</span></div>
|
||||
<div class="code-line"><span class="c-comment"># Initializing ASGI Backend Architecture</span></div>
|
||||
<div class="code-line"><span class="c-func">app</span> = fastapi.<span class="c-func">FastAPI</span>(title=<span class="c-str">"Roshan.Engineering.API"</span>)</div>
|
||||
<div class="code-line"></div>
|
||||
<div class="code-line"><span class="c-decorator">@app.post</span>(<span class="c-str">"/v1/predict"</span>)</div>
|
||||
<div class="code-line"><span class="c-keyword">async def</span> <span class="c-func">run_telemetry_pipeline</span>(payload: dict):</div>
|
||||
<div class="code-line"> result = <span class="c-keyword">await</span> inference_engine.<span class="c-func">evaluate</span>(payload)</div>
|
||||
<div class="code-line"> <span class="c-keyword">return</span> {<span class="c-str">"status"</span>: <span class="c-str">"success"</span>, <span class="c-str">"latency"</span>: <span class="c-str">"14ms"</span>, <span class="c-str">"data"</span>: result}</div>
|
||||
|
||||
<div class="console-status-box">
|
||||
<div class="status-row">
|
||||
<span>BACKEND:</span> <span class="text-green">Python 3.11 / FastAPI ASGI</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span>PAYMENTS:</span> <span class="text-blue">Stripe Webhook Handshake [PCI Ready]</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span>DEPLOYMENT:</span> <span class="text-purple">Docker Container / Cloud Engine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Inference Simulator -->
|
||||
<div class="tab-content" id="tab-inference">
|
||||
<div class="infer-control">
|
||||
<label for="infer-text">Test Live Inference Payload:</label>
|
||||
<div class="infer-input-wrap">
|
||||
<input type="text" id="infer-text" value="Python FastAPI backend with payment gateway and machine learning models." placeholder="Type payload text...">
|
||||
<button id="btn-exec-infer" class="btn-console-exec">RUN</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="console-output">
|
||||
<span class="output-label">JSON RESPONSE:</span>
|
||||
<pre id="console-json">{
|
||||
"engine": "PyTorch Neural Predictor",
|
||||
"classification": "Enterprise Software & ML",
|
||||
"confidence": "98.8%",
|
||||
"latency": "11.4ms"
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Tech Stack -->
|
||||
<div class="tab-content" id="tab-stack">
|
||||
<div class="stack-list">
|
||||
<div class="stack-item">
|
||||
<span class="st-name">Python / FastAPI / Django</span>
|
||||
<span class="st-badge">Core Backend</span>
|
||||
</div>
|
||||
<div class="stack-item">
|
||||
<span class="st-name">HTML5 / CSS3 / ES6+ JavaScript</span>
|
||||
<span class="st-badge">Web Engineering</span>
|
||||
</div>
|
||||
<div class="stack-item">
|
||||
<span class="st-name">PyTorch / Scikit-Learn</span>
|
||||
<span class="st-badge">Machine Learning</span>
|
||||
</div>
|
||||
<div class="stack-item">
|
||||
<span class="st-name">Stripe & FinTech APIs</span>
|
||||
<span class="st-badge">Payment Gateway</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section: What We're Building (Production Work) -->
|
||||
<section id="work" class="section">
|
||||
<div class="section-container">
|
||||
<div class="section-header">
|
||||
<div class="section-tag">// PRODUCTION & CLIENT WORK</div>
|
||||
<h2 class="section-title">What We Are Building</h2>
|
||||
<p class="section-sub">Production platforms, technical portals, and specialized engineering applications built for performance.</p>
|
||||
</div>
|
||||
|
||||
<div class="work-grid">
|
||||
<!-- Project Card 1: 3S Hospitality -->
|
||||
<article class="work-card">
|
||||
<div class="card-header-tag">
|
||||
<span class="badge-cat">ENTERPRISE HOSPITALITY</span>
|
||||
<span class="badge-status live">● LIVE SITE</span>
|
||||
</div>
|
||||
<h3 class="card-title">3S Hospitality Management</h3>
|
||||
<p class="card-purpose">
|
||||
<strong>Problem Solved:</strong> Streamlines resort operations, multi-property management, and automated booking reservation workflows into a unified platform.
|
||||
</p>
|
||||
<div class="card-outcomes">
|
||||
<div class="outcome-tag">Multi-Tenant Management</div>
|
||||
<div class="outcome-tag">Automated Bookings</div>
|
||||
<div class="outcome-tag">Enterprise Portal</div>
|
||||
</div>
|
||||
<div class="card-tech-stack">
|
||||
<span>Web Platform</span><span>Python/Django</span><span>REST APIs</span><span>UX Architecture</span>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="https://3shospitalitymanagement.com/" target="_blank" rel="noopener" class="card-link">
|
||||
<span>VISIT 3SHOPITALITYMANAGEMENT.COM</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Project Card 2: Nexarch Infrastructure -->
|
||||
<article class="work-card">
|
||||
<div class="card-header-tag">
|
||||
<span class="badge-cat">INFRASTRUCTURE & AEC</span>
|
||||
<span class="badge-status live">● LIVE SITE</span>
|
||||
</div>
|
||||
<h3 class="card-title">Nexarch Infrastructure</h3>
|
||||
<p class="card-purpose">
|
||||
<strong>Problem Solved:</strong> Engineering portal presenting civil infrastructure developments, structural project portfolios, and technical assets.
|
||||
</p>
|
||||
<div class="card-outcomes">
|
||||
<div class="outcome-tag">Civil Engineering Portal</div>
|
||||
<div class="outcome-tag">Asset Visualization</div>
|
||||
<div class="outcome-tag">Enterprise Architecture</div>
|
||||
</div>
|
||||
<div class="card-tech-stack">
|
||||
<span>Engineering Software</span><span>Infrastructure Tech</span><span>High-Scale Web</span>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="https://nexarchinfrastructure.com/" target="_blank" rel="noopener" class="card-link">
|
||||
<span>VISIT NEXARCHINFRASTRUCTURE.COM</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Project Card 3: Design Iconica -->
|
||||
<article class="work-card">
|
||||
<div class="card-header-tag">
|
||||
<span class="badge-cat">CREATIVE ARCHITECTURE</span>
|
||||
<span class="badge-status live">● LIVE SITE</span>
|
||||
</div>
|
||||
<h3 class="card-title">Design Iconica</h3>
|
||||
<p class="card-purpose">
|
||||
<strong>Problem Solved:</strong> Architectural design studio platform combining high-resolution visual showcase engines with client project management portals.
|
||||
</p>
|
||||
<div class="card-outcomes">
|
||||
<div class="outcome-tag">Architectural Portfolio</div>
|
||||
<div class="outcome-tag">Interactive Design Engine</div>
|
||||
<div class="outcome-tag">Responsive UX</div>
|
||||
</div>
|
||||
<div class="card-tech-stack">
|
||||
<span>Web Applications</span><span>Design Suite</span><span>Interactive JS</span>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="https://designiconica.com/" target="_blank" rel="noopener" class="card-link">
|
||||
<span>VISIT DESIGNICONICA.COM</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Project Card 4: Machine Learning Inference System -->
|
||||
<article class="work-card highlight-border">
|
||||
<div class="card-header-tag">
|
||||
<span class="badge-cat">MACHINE LEARNING & AI</span>
|
||||
<span class="badge-status dev">● PRODUCTION ML</span>
|
||||
</div>
|
||||
<h3 class="card-title">Neural Analytics & ML Predictor</h3>
|
||||
<p class="card-purpose">
|
||||
<strong>Problem Solved:</strong> High-speed text classification, anomaly detection, and predictive scoring wrapped in an asynchronous Python FastAPI ASGI microservice.
|
||||
</p>
|
||||
<div class="card-outcomes">
|
||||
<div class="outcome-tag">Real-Time Inference</div>
|
||||
<div class="outcome-tag">PyTorch Pipeline</div>
|
||||
<div class="outcome-tag">Microservice API</div>
|
||||
</div>
|
||||
<div class="card-tech-stack">
|
||||
<span>Python 3.11</span><span>FastAPI</span><span>PyTorch</span><span>Scikit-Learn</span>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#hero" class="card-link nav-console-trigger">
|
||||
<span>TEST IN HERO CONSOLE</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section: What We Can Achieve (Capabilities) -->
|
||||
<section id="capabilities" class="section bg-subtle">
|
||||
<div class="section-container">
|
||||
<div class="section-header">
|
||||
<div class="section-tag">// OUTCOME-DRIVEN CAPABILITIES</div>
|
||||
<h2 class="section-title">What Can Be Achieved</h2>
|
||||
<p class="section-sub">Demonstrated engineering capabilities producing tangible technical outcomes for web platforms and enterprise backends.</p>
|
||||
</div>
|
||||
|
||||
<div class="cap-grid">
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">🐍</div>
|
||||
<h3 class="cap-name">Python & Backend Engineering</h3>
|
||||
<p class="cap-desc">
|
||||
High-concurrency backend microservices using <strong>FastAPI</strong> and <strong>Django</strong> for enterprise business logic, database ORMs, background workers, and scalable REST APIs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">🌐</div>
|
||||
<h3 class="cap-name">Web Application Architecture</h3>
|
||||
<p class="cap-desc">
|
||||
Full-stack web applications built with <strong>HTML5, CSS3, and JavaScript (ES6+)</strong> featuring responsive UIs, dynamic state management, and sub-second page performance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">🤖</div>
|
||||
<h3 class="cap-name">Machine Learning Integration</h3>
|
||||
<p class="cap-desc">
|
||||
Deployment of machine learning models using <strong>PyTorch</strong> and <strong>Scikit-Learn</strong>, turning raw data into predictive REST API endpoints and intelligent web applications.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">💳</div>
|
||||
<h3 class="cap-name">Payment Gateway Integrations</h3>
|
||||
<p class="cap-desc">
|
||||
Seamless integration of <strong>Stripe, Razorpay, and PayPal</strong> featuring encrypted payment flows, webhook verification, automated billing, and subscription management.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">⚙️</div>
|
||||
<h3 class="cap-name">Engineering & Technical Calculators</h3>
|
||||
<p class="cap-desc">
|
||||
Specialized engineering portals, technical calculators, CAD/infrastructure asset displays, and numerical data processing for domain-specific applications.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cap-card">
|
||||
<div class="cap-icon">📦</div>
|
||||
<h3 class="cap-name">DevOps & Infrastructure</h3>
|
||||
<p class="cap-desc">
|
||||
Containerized deployments with <strong>Docker, Linux environments, and Git version control</strong> ensuring reliable CI/CD pipelines and repeatable staging environments.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section: Technology Stack -->
|
||||
<section id="tech" class="section">
|
||||
<div class="section-container">
|
||||
<div class="section-header">
|
||||
<div class="section-tag">// VERIFIED COMPETENCIES</div>
|
||||
<h2 class="section-title">Technology Stack</h2>
|
||||
<p class="section-sub">Technologies actively used across production platforms and software projects.</p>
|
||||
</div>
|
||||
|
||||
<div class="tech-box-grid">
|
||||
<div class="tech-pill-box">
|
||||
<span class="tp-icon">🐍</span>
|
||||
<div class="tp-info">
|
||||
<span class="tp-title">Python</span>
|
||||
<span class="tp-sub">FastAPI, Django, AsyncIO</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-pill-box">
|
||||
<span class="tp-icon">⚡</span>
|
||||
<div class="tp-info">
|
||||
<span class="tp-title">FastAPI & Django</span>
|
||||
<span class="tp-sub">REST APIs & Microservices</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-pill-box">
|
||||
<span class="tp-icon">🌐</span>
|
||||
<div class="tp-info">
|
||||
<span class="tp-title">HTML5 & CSS3</span>
|
||||
<span class="tp-sub">Responsive HUD Systems</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-pill-box">
|
||||
<span class="tp-icon">📜</span>
|
||||
<div class="tp-info">
|
||||
<span class="tp-title">JavaScript (ES6+)</span>
|
||||
<span class="tp-sub">Single-Page App Logic</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-pill-box">
|
||||
<span class="tp-icon">🧠</span>
|
||||
<div class="tp-info">
|
||||
<span class="tp-title">PyTorch & Scikit</span>
|
||||
<span class="tp-sub">Machine Learning Models</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-pill-box">
|
||||
<span class="tp-icon">💳</span>
|
||||
<div class="tp-info">
|
||||
<span class="tp-title">Stripe & FinTech</span>
|
||||
<span class="tp-sub">Payment Webhooks & APIs</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-pill-box">
|
||||
<span class="tp-icon">🐳</span>
|
||||
<div class="tp-info">
|
||||
<span class="tp-title">Docker & Linux</span>
|
||||
<span class="tp-sub">Containerized Deployments</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-pill-box">
|
||||
<span class="tp-icon">🔀</span>
|
||||
<div class="tp-info">
|
||||
<span class="tp-title">Git & GitHub</span>
|
||||
<span class="tp-sub">Version Control & CI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section: Contact / Project Inquiry -->
|
||||
<section id="contact" class="section bg-subtle">
|
||||
<div class="section-container">
|
||||
<div class="contact-wrapper">
|
||||
<div class="contact-info">
|
||||
<div class="section-tag">// INITIATE ENGAGEMENT</div>
|
||||
<h2 class="contact-title">Let's Build Serious Software Together</h2>
|
||||
<p class="contact-sub">
|
||||
Have an enterprise application, web platform, payment integration, or machine learning project?
|
||||
Reach out to discuss technical architecture and implementation parameters.
|
||||
</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<div class="c-detail-item">
|
||||
<span class="c-lbl">DEVELOPER:</span>
|
||||
<span class="c-val">Roshan Yadav (Roshan-py)</span>
|
||||
</div>
|
||||
<div class="c-detail-item">
|
||||
<span class="c-lbl">EMAIL:</span>
|
||||
<a href="mailto:er.roshan.y@gmail.com" class="c-val link-underline">er.roshan.y@gmail.com</a>
|
||||
</div>
|
||||
<div class="c-detail-item">
|
||||
<span class="c-lbl">LOCATION:</span>
|
||||
<span class="c-val">India // Available Globally</span>
|
||||
</div>
|
||||
<div class="c-detail-item">
|
||||
<span class="c-lbl">GITHUB:</span>
|
||||
<a href="https://github.com/Roshan-py" target="_blank" rel="noopener" class="c-val link-underline">github.com/Roshan-py</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-card">
|
||||
<form id="contact-form" class="c-form" onsubmit="return false;">
|
||||
<div class="form-field">
|
||||
<label for="c-name">YOUR NAME / ORGANIZATION:</label>
|
||||
<input type="text" id="c-name" placeholder="e.g. Roshan Yadav" required>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="c-email">EMAIL ADDRESS:</label>
|
||||
<input type="email" id="c-email" placeholder="name@company.com" required>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="c-stream">PRIMARY CAPABILITY / STREAM:</label>
|
||||
<select id="c-stream">
|
||||
<option value="enterprise">Enterprise Application Development (Python/Django)</option>
|
||||
<option value="webapp">Web Application Architecture (HTML/CSS/JS)</option>
|
||||
<option value="ml">Machine Learning / AI Integration (FastAPI/PyTorch)</option>
|
||||
<option value="payments">Payment Gateway Integration (Stripe/FinTech)</option>
|
||||
<option value="engineering">Engineering Application & Tools</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="c-msg">PROJECT PARAMETERS / DETAILS:</label>
|
||||
<textarea id="c-msg" rows="4" placeholder="Describe the scope, objectives, or questions..." required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="btn-submit" class="btn btn-primary btn-full">
|
||||
<span>TRANSMIT INQUIRY</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||||
</button>
|
||||
</form>
|
||||
<div id="contact-response" class="contact-response"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-left">
|
||||
<span class="brand-prefix"></></span> <strong>ROSHAN YADAV</strong> // SOFTWARE ENGINEERING & AI
|
||||
<p class="footer-copy">© 2026 Roshan Yadav. Engineered for performance and clarity.</p>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<a href="https://github.com/Roshan-py" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
||||
<a href="#work" class="footer-link">Work</a>
|
||||
<a href="#capabilities" class="footer-link">Capabilities</a>
|
||||
<a href="#contact" class="footer-link">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user