496 lines
12 KiB
HTML
496 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Careers — Nexus Technologies | Senior Frontend Engineer</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: #f8fafc;
|
||
color: #1e293b;
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* Navigation */
|
||
.nav {
|
||
background: white;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
padding: 0 40px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.nav-inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 64px;
|
||
}
|
||
|
||
.nav-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
text-decoration: none;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.nav-brand .brand-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: 800;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.nav-brand span {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.3px;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32px;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links a {
|
||
text-decoration: none;
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: color 0.15s;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-links a:hover { color: #0f172a; }
|
||
|
||
.nav-links a.active {
|
||
color: #6366f1;
|
||
}
|
||
|
||
.nav-links a.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -21px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: #6366f1;
|
||
border-radius: 1px;
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
|
||
padding: 60px 40px;
|
||
color: white;
|
||
}
|
||
|
||
.hero-inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.hero-breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
color: rgba(255,255,255,0.6);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.hero-breadcrumb a {
|
||
color: rgba(255,255,255,0.6);
|
||
text-decoration: none;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.hero-breadcrumb a:hover { color: white; }
|
||
|
||
.hero h1 {
|
||
font-size: 36px;
|
||
font-weight: 800;
|
||
letter-spacing: -0.8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.hero-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hero-meta span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 14px;
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
|
||
.hero-meta svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Main content */
|
||
.page-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 40px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 420px;
|
||
gap: 40px;
|
||
}
|
||
|
||
.job-content h2 {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
margin-bottom: 16px;
|
||
letter-spacing: -0.3px;
|
||
}
|
||
|
||
.job-content h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #0f172a;
|
||
margin-top: 28px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.job-content p {
|
||
font-size: 15px;
|
||
color: #475569;
|
||
margin-bottom: 16px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.job-content ul {
|
||
margin-bottom: 16px;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.job-content li {
|
||
font-size: 15px;
|
||
color: #475569;
|
||
line-height: 1.7;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.job-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.job-tag {
|
||
padding: 6px 14px;
|
||
background: #eef2ff;
|
||
color: #4f46e5;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.job-benefits {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 14px;
|
||
background: white;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
color: #334155;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.benefit-item .benefit-icon {
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Sidebar */
|
||
.sidebar-content {
|
||
position: sticky;
|
||
top: 84px;
|
||
}
|
||
|
||
.sidebar-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
|
||
border: 1px solid #e2e8f0;
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.sidebar-card h3 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.sidebar-stat {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.sidebar-stat:last-child { border-bottom: none; }
|
||
.sidebar-stat .stat-label { color: #64748b; }
|
||
.sidebar-stat .stat-value { font-weight: 600; color: #0f172a; }
|
||
|
||
.widget-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.widget-section-label {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
color: #94a3b8;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
background: #0f172a;
|
||
color: rgba(255,255,255,0.6);
|
||
padding: 40px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.footer-inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.footer-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.footer-brand .brand-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
background: #6366f1;
|
||
border-radius: 7px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: 800;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer-brand span {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: rgba(255,255,255,0.9);
|
||
}
|
||
|
||
.footer p {
|
||
font-size: 13px;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.page-container {
|
||
grid-template-columns: 1fr;
|
||
padding: 24px 20px;
|
||
}
|
||
.hero { padding: 40px 20px; }
|
||
.hero h1 { font-size: 28px; }
|
||
.nav { padding: 0 20px; }
|
||
.nav-links { display: none; }
|
||
.job-benefits { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<a href="#" class="nav-brand">
|
||
<div class="brand-icon">N</div>
|
||
<span>Nexus Technologies</span>
|
||
</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">About</a></li>
|
||
<li><a href="#">Products</a></li>
|
||
<li><a href="#" class="active">Careers</a></li>
|
||
<li><a href="#">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<div class="hero">
|
||
<div class="hero-inner">
|
||
<div class="hero-breadcrumb">
|
||
<a href="#">Careers</a>
|
||
<span>›</span>
|
||
<a href="#">Engineering</a>
|
||
<span>›</span>
|
||
<span>Senior Frontend Engineer</span>
|
||
</div>
|
||
<h1>Senior Frontend Engineer</h1>
|
||
<div class="hero-meta">
|
||
<span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
San Francisco, CA (Hybrid)
|
||
</span>
|
||
<span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
||
Engineering
|
||
</span>
|
||
<span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
Full-time
|
||
</span>
|
||
<span>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||
$160k — $220k
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Content -->
|
||
<div class="page-container">
|
||
<div class="job-content">
|
||
<h2>About the Role</h2>
|
||
<p>We're looking for a Senior Frontend Engineer to join our growing platform team at Nexus Technologies. You'll be responsible for building and maintaining our customer-facing web applications, working closely with our design and product teams to deliver exceptional user experiences.</p>
|
||
<p>This is a high-impact role where you'll shape the frontend architecture of our next-generation SaaS platform serving over 2,000 enterprise clients worldwide.</p>
|
||
|
||
<h3>What You'll Do</h3>
|
||
<ul>
|
||
<li>Build and maintain complex React applications with TypeScript</li>
|
||
<li>Architect scalable frontend systems that handle millions of daily users</li>
|
||
<li>Collaborate with designers to implement pixel-perfect, accessible UIs</li>
|
||
<li>Mentor junior engineers and contribute to engineering culture</li>
|
||
<li>Drive frontend best practices including testing, code review, and documentation</li>
|
||
<li>Optimize web performance and Core Web Vitals metrics</li>
|
||
<li>Participate in on-call rotations with the platform team</li>
|
||
</ul>
|
||
|
||
<h3>Requirements</h3>
|
||
<ul>
|
||
<li>3+ years of professional frontend development experience</li>
|
||
<li>Expert-level React and TypeScript skills</li>
|
||
<li>Experience with modern build tools (Webpack, Vite, etc.)</li>
|
||
<li>Strong understanding of web accessibility standards (WCAG)</li>
|
||
<li>Experience with RESTful APIs and GraphQL</li>
|
||
<li>Solid understanding of CI/CD pipelines</li>
|
||
<li>Excellent communication skills</li>
|
||
</ul>
|
||
|
||
<h3>Nice to Have</h3>
|
||
<ul>
|
||
<li>Experience with Next.js or similar SSR frameworks</li>
|
||
<li>Background in design systems or component libraries</li>
|
||
<li>Knowledge of Node.js and backend development</li>
|
||
<li>Previous experience in SaaS or enterprise software</li>
|
||
<li>Open source contributions</li>
|
||
</ul>
|
||
|
||
<div class="job-tags">
|
||
<span class="job-tag">React</span>
|
||
<span class="job-tag">TypeScript</span>
|
||
<span class="job-tag">Node.js</span>
|
||
<span class="job-tag">GraphQL</span>
|
||
<span class="job-tag">AWS</span>
|
||
<span class="job-tag">CI/CD</span>
|
||
<span class="job-tag">Accessibility</span>
|
||
<span class="job-tag">Performance</span>
|
||
</div>
|
||
|
||
<h3>Benefits & Perks</h3>
|
||
<div class="job-benefits">
|
||
<div class="benefit-item"><span class="benefit-icon">🏥</span> Premium health, dental & vision</div>
|
||
<div class="benefit-item"><span class="benefit-icon">🏖️</span> Unlimited PTO</div>
|
||
<div class="benefit-item"><span class="benefit-icon">💰</span> 401(k) with 4% match</div>
|
||
<div class="benefit-item"><span class="benefit-icon">📚</span> $2,000 learning budget</div>
|
||
<div class="benefit-item"><span class="benefit-icon">🏠</span> Hybrid work model</div>
|
||
<div class="benefit-item"><span class="benefit-icon">📈</span> Equity compensation</div>
|
||
<div class="benefit-item"><span class="benefit-icon">🍼</span> 16 weeks parental leave</div>
|
||
<div class="benefit-item"><span class="benefit-icon">🏋️</span> Wellness stipend</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sidebar -->
|
||
<div class="sidebar-content">
|
||
<div class="widget-section">
|
||
<div class="widget-section-label">Step 1: Pre-Screen Your Resume</div>
|
||
<!-- ResumeGate Widget -->
|
||
<div id="resumegate-widget" data-job-id="sr-frontend-2024"></div>
|
||
</div>
|
||
|
||
<div class="sidebar-card">
|
||
<h3>Job Details</h3>
|
||
<div class="sidebar-stat"><span class="stat-label">Department</span><span class="stat-value">Engineering</span></div>
|
||
<div class="sidebar-stat"><span class="stat-label">Level</span><span class="stat-value">Senior (L5)</span></div>
|
||
<div class="sidebar-stat"><span class="stat-label">Reports to</span><span class="stat-value">VP of Engineering</span></div>
|
||
<div class="sidebar-stat"><span class="stat-label">Team Size</span><span class="stat-value">8 engineers</span></div>
|
||
<div class="sidebar-stat"><span class="stat-label">Posted</span><span class="stat-value">Jan 5, 2024</span></div>
|
||
<div class="sidebar-stat"><span class="stat-label">Applications</span><span class="stat-value">247</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="footer">
|
||
<div class="footer-inner">
|
||
<div class="footer-brand">
|
||
<div class="brand-icon">N</div>
|
||
<span>Nexus Technologies</span>
|
||
</div>
|
||
<p>© 2024 Nexus Technologies, Inc. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="widget.js"></script>
|
||
</body>
|
||
</html>
|