2025-12-10 12:17:30 -05:00
|
|
|
<!DOCTYPE html>
|
2026-01-01 21:43:49 -05:00
|
|
|
<html lang="en" class="scroll-smooth">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2025-12-10 12:17:30 -05:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2026-01-01 21:43:49 -05:00
|
|
|
<title>ATOMASTE | Structural Optimization & FEA Engineering Services</title>
|
|
|
|
|
<meta name="description" content="Atomaste - Expert structural optimization and finite element analysis services. Multi-physics simulation, parametric optimization, and advanced engineering solutions.">
|
2026-01-02 16:21:01 -05:00
|
|
|
<meta name="keywords" content="structural optimization, FEA, finite element analysis, simulation, engineering services, topology optimization, multi-physics, CAE, design optimization, Montreal, Quebec, Canada">
|
|
|
|
|
<meta name="author" content="Atomaste">
|
|
|
|
|
<meta name="robots" content="index, follow">
|
|
|
|
|
<link rel="canonical" href="https://atomaste.com/">
|
|
|
|
|
|
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
|
|
|
<meta property="og:type" content="website">
|
|
|
|
|
<meta property="og:url" content="https://atomaste.com/">
|
|
|
|
|
<meta property="og:title" content="ATOMASTE | Structural Optimization & FEA Engineering Services">
|
|
|
|
|
<meta property="og:description" content="Expert structural optimization and finite element analysis services. Multi-physics simulation, parametric optimization, and advanced engineering solutions.">
|
|
|
|
|
<meta property="og:image" content="https://atomaste.com/Media/Atomaste_light_grey_Logo.svg">
|
|
|
|
|
<meta property="og:locale" content="en_CA">
|
|
|
|
|
<meta property="og:locale:alternate" content="fr_CA">
|
|
|
|
|
|
|
|
|
|
<!-- Twitter -->
|
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
|
|
<meta name="twitter:title" content="ATOMASTE | Structural Optimization & FEA Engineering Services">
|
|
|
|
|
<meta name="twitter:description" content="Expert structural optimization and finite element analysis services. Multi-physics simulation, parametric optimization, and advanced engineering solutions.">
|
|
|
|
|
<meta name="twitter:image" content="https://atomaste.com/Media/Atomaste_light_grey_Logo.svg">
|
|
|
|
|
|
|
|
|
|
<!-- Language alternates for SEO -->
|
|
|
|
|
<link rel="alternate" hreflang="en" href="https://atomaste.com/">
|
|
|
|
|
<link rel="alternate" hreflang="fr" href="https://atomaste.com/fr.html">
|
|
|
|
|
<link rel="alternate" hreflang="x-default" href="https://atomaste.com/">
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<link rel="icon" type="image/svg+xml" href="Media/Atomaste_logo_A.svg?v=2">
|
2026-01-02 16:21:01 -05:00
|
|
|
|
|
|
|
|
<!-- Structured Data for SEO -->
|
|
|
|
|
<script type="application/ld+json">
|
|
|
|
|
{
|
|
|
|
|
"@context": "https://schema.org",
|
|
|
|
|
"@type": "ProfessionalService",
|
|
|
|
|
"name": "Atomaste",
|
|
|
|
|
"description": "Expert structural optimization and finite element analysis services. Multi-physics simulation, parametric optimization, and advanced engineering solutions.",
|
|
|
|
|
"url": "https://atomaste.com",
|
|
|
|
|
"logo": "https://atomaste.com/Media/Atomaste_light_grey_Logo.svg",
|
|
|
|
|
"image": "https://atomaste.com/Media/Atomaste_light_grey_Logo.svg",
|
|
|
|
|
"areaServed": ["Canada", "United States", "North America"],
|
|
|
|
|
"serviceType": ["Structural Optimization", "Finite Element Analysis", "Multi-physics Simulation", "Topology Optimization", "Engineering Consulting"],
|
|
|
|
|
"knowsAbout": ["FEA", "CAE", "Structural Analysis", "Design Optimization", "Simulation"],
|
|
|
|
|
"address": {
|
|
|
|
|
"@type": "PostalAddress",
|
|
|
|
|
"addressLocality": "Montreal",
|
|
|
|
|
"addressRegion": "Quebec",
|
|
|
|
|
"addressCountry": "CA"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
2025-12-10 12:17:30 -05:00
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
2026-01-01 21:43:49 -05:00
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
2025-12-10 12:17:30 -05:00
|
|
|
<style>
|
2026-01-01 21:43:49 -05:00
|
|
|
:root {
|
|
|
|
|
--cyan-glow: rgba(0, 212, 230, 0.5);
|
|
|
|
|
--cyan-primary: #00d4e6;
|
|
|
|
|
--bg-dark: #050a12;
|
|
|
|
|
--bg-section: #080f1a;
|
|
|
|
|
}
|
|
|
|
|
html, body {
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
max-width: 100vw;
|
|
|
|
|
}
|
2025-12-10 12:17:30 -05:00
|
|
|
body {
|
2026-01-01 21:43:49 -05:00
|
|
|
background-color: var(--bg-dark);
|
|
|
|
|
font-family: 'Inter', sans-serif;
|
2025-12-10 12:17:30 -05:00
|
|
|
}
|
|
|
|
|
/* Custom Scrollbar */
|
2026-01-01 21:43:49 -05:00
|
|
|
::-webkit-scrollbar { width: 6px; }
|
|
|
|
|
::-webkit-scrollbar-track { background: var(--bg-dark); }
|
|
|
|
|
::-webkit-scrollbar-thumb { background: #1a2535; border-radius: 3px; }
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { background: #2a3545; }
|
|
|
|
|
|
|
|
|
|
/* Animated Grid Background */
|
|
|
|
|
.grid-bg {
|
|
|
|
|
background-image:
|
|
|
|
|
linear-gradient(rgba(0, 212, 230, 0.03) 1px, transparent 1px),
|
|
|
|
|
linear-gradient(90deg, rgba(0, 212, 230, 0.03) 1px, transparent 1px);
|
|
|
|
|
background-size: 50px 50px;
|
|
|
|
|
animation: gridMove 20s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
@keyframes gridMove {
|
|
|
|
|
0% { background-position: 0 0; }
|
|
|
|
|
100% { background-position: 50px 50px; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Particle Canvas */
|
|
|
|
|
#particles-canvas {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ambient Glows */
|
|
|
|
|
.glow-orb {
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
filter: blur(80px);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
animation: orbFloat 8s ease-in-out infinite;
|
|
|
|
|
}
|
|
|
|
|
@keyframes orbFloat {
|
|
|
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
|
|
|
33% { transform: translate(30px, -20px) scale(1.1); }
|
|
|
|
|
66% { transform: translate(-20px, 20px) scale(0.9); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Glass Morphism */
|
|
|
|
|
.glass {
|
|
|
|
|
background: rgba(10, 20, 35, 0.6);
|
|
|
|
|
backdrop-filter: blur(20px);
|
|
|
|
|
border: 1px solid rgba(0, 212, 230, 0.1);
|
|
|
|
|
}
|
|
|
|
|
.glass-strong {
|
|
|
|
|
background: rgba(5, 15, 30, 0.8);
|
|
|
|
|
backdrop-filter: blur(30px);
|
|
|
|
|
border: 1px solid rgba(0, 212, 230, 0.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Text Gradients */
|
|
|
|
|
.text-gradient {
|
|
|
|
|
background: linear-gradient(135deg, #ffffff 0%, #00d4e6 50%, #0891b2 100%);
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
background-clip: text;
|
|
|
|
|
}
|
|
|
|
|
.text-gradient-subtle {
|
|
|
|
|
background: linear-gradient(135deg, #ffffff 40%, #00d4e6 100%);
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
background-clip: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Animated Border */
|
|
|
|
|
.border-glow {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.border-glow::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: -2px;
|
|
|
|
|
border-radius: inherit;
|
|
|
|
|
background: linear-gradient(45deg, transparent, var(--cyan-primary), transparent);
|
|
|
|
|
background-size: 400% 400%;
|
|
|
|
|
animation: borderGlow 3s ease infinite;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transition: opacity 0.3s;
|
|
|
|
|
}
|
|
|
|
|
.border-glow:hover::before {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
@keyframes borderGlow {
|
|
|
|
|
0%, 100% { background-position: 0% 50%; }
|
|
|
|
|
50% { background-position: 100% 50%; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Floating Animation */
|
2025-12-10 12:17:30 -05:00
|
|
|
@keyframes float {
|
2026-01-01 21:43:49 -05:00
|
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
|
|
|
50% { transform: translateY(-15px) rotate(1deg); }
|
|
|
|
|
}
|
|
|
|
|
@keyframes floatReverse {
|
|
|
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
|
|
|
50% { transform: translateY(15px) rotate(-1deg); }
|
|
|
|
|
}
|
|
|
|
|
.float { animation: float 6s ease-in-out infinite; }
|
|
|
|
|
.float-delay { animation: float 7s ease-in-out infinite 1s; }
|
|
|
|
|
.float-reverse { animation: floatReverse 8s ease-in-out infinite 0.5s; }
|
|
|
|
|
|
|
|
|
|
/* Pulse Glow */
|
|
|
|
|
@keyframes pulseGlow {
|
|
|
|
|
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 230, 0.2), 0 0 40px rgba(0, 212, 230, 0.1); }
|
|
|
|
|
50% { box-shadow: 0 0 40px rgba(0, 212, 230, 0.4), 0 0 80px rgba(0, 212, 230, 0.2); }
|
|
|
|
|
}
|
|
|
|
|
.pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
|
|
|
|
|
|
|
|
|
|
/* Counter Animation */
|
|
|
|
|
@keyframes countUp {
|
|
|
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
|
|
|
to { opacity: 1; transform: translateY(0); }
|
2025-12-10 12:17:30 -05:00
|
|
|
}
|
2026-01-01 21:43:49 -05:00
|
|
|
.stat-number {
|
|
|
|
|
animation: countUp 0.5s ease-out forwards;
|
2025-12-10 12:17:30 -05:00
|
|
|
}
|
2026-01-01 21:43:49 -05:00
|
|
|
|
|
|
|
|
/* Scan Line Effect */
|
|
|
|
|
.scan-line {
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.scan-line::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 2px;
|
|
|
|
|
background: linear-gradient(90deg, transparent, var(--cyan-primary), transparent);
|
|
|
|
|
animation: scan 3s ease-in-out infinite;
|
|
|
|
|
}
|
|
|
|
|
@keyframes scan {
|
|
|
|
|
0% { left: -100%; }
|
|
|
|
|
50% { left: 100%; }
|
|
|
|
|
100% { left: 100%; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Card Hover Effects */
|
|
|
|
|
.card-3d {
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
transition: transform 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
.card-3d:hover {
|
|
|
|
|
transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(10px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Neural Network Visualization */
|
|
|
|
|
.neural-dot {
|
|
|
|
|
width: 6px;
|
|
|
|
|
height: 6px;
|
|
|
|
|
background: var(--cyan-primary);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: neuralPulse 2s ease-in-out infinite;
|
|
|
|
|
}
|
|
|
|
|
@keyframes neuralPulse {
|
|
|
|
|
0%, 100% { opacity: 0.3; transform: scale(1); }
|
|
|
|
|
50% { opacity: 1; transform: scale(1.5); }
|
2025-12-10 12:17:30 -05:00
|
|
|
}
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
/* Progress Bar Animation */
|
|
|
|
|
@keyframes progressFill {
|
|
|
|
|
from { width: 0; }
|
|
|
|
|
}
|
|
|
|
|
.progress-bar {
|
|
|
|
|
animation: progressFill 1.5s ease-out forwards;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Selection */
|
|
|
|
|
::selection {
|
|
|
|
|
background: rgba(0, 212, 230, 0.3);
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Responsive typography */
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.hero-title { font-size: 2.5rem; }
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="text-gray-400 antialiased relative overflow-x-hidden">
|
|
|
|
|
|
|
|
|
|
<!-- Particle Background Canvas -->
|
|
|
|
|
<canvas id="particles-canvas"></canvas>
|
|
|
|
|
|
|
|
|
|
<!-- Grid Background -->
|
|
|
|
|
<div class="fixed inset-0 grid-bg pointer-events-none z-0"></div>
|
|
|
|
|
|
|
|
|
|
<!-- Ambient Glow Orbs -->
|
|
|
|
|
<div class="glow-orb w-[600px] h-[600px] bg-cyan-500/5 -top-48 -left-48 fixed"></div>
|
|
|
|
|
<div class="glow-orb w-[500px] h-[500px] bg-blue-500/5 bottom-0 right-0 fixed" style="animation-delay: -3s;"></div>
|
|
|
|
|
<div class="glow-orb w-[400px] h-[400px] bg-cyan-500/3 top-1/2 left-1/3 fixed" style="animation-delay: -5s;"></div>
|
2025-12-10 12:17:30 -05:00
|
|
|
|
|
|
|
|
<!-- Navigation -->
|
2026-01-01 21:43:49 -05:00
|
|
|
<nav class="fixed top-0 left-0 w-full z-50 glass-strong overflow-x-hidden">
|
2025-12-10 12:17:30 -05:00
|
|
|
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
|
|
|
<div class="flex items-center gap-3">
|
2026-01-01 21:43:49 -05:00
|
|
|
<img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste Logo" class="h-10 md:h-12">
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
2026-01-01 21:43:49 -05:00
|
|
|
<a href="#about" class="hover:text-cyan-400 transition-colors relative group">
|
|
|
|
|
About
|
|
|
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-cyan-400 transition-all group-hover:w-full"></span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#services" class="hover:text-cyan-400 transition-colors relative group">
|
|
|
|
|
Services
|
|
|
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-cyan-400 transition-all group-hover:w-full"></span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#optimization" class="hover:text-cyan-400 transition-colors relative group">
|
|
|
|
|
Optimization
|
|
|
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-cyan-400 transition-all group-hover:w-full"></span>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#expertise" class="hover:text-cyan-400 transition-colors relative group">
|
|
|
|
|
Expertise
|
|
|
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-cyan-400 transition-all group-hover:w-full"></span>
|
|
|
|
|
</a>
|
|
|
|
|
<!-- Language Switcher -->
|
|
|
|
|
<a href="fr.html" class="flex items-center gap-1.5 text-gray-500 hover:text-cyan-400 transition-colors">
|
|
|
|
|
<i data-lucide="globe" class="w-4 h-4"></i>
|
|
|
|
|
FR
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<!-- Language Switcher (Mobile) -->
|
|
|
|
|
<a href="fr.html" class="md:hidden flex items-center gap-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-sm font-medium">
|
|
|
|
|
<i data-lucide="globe" class="w-4 h-4"></i>
|
|
|
|
|
FR
|
|
|
|
|
</a>
|
|
|
|
|
<!-- Mobile Menu Button -->
|
|
|
|
|
<button id="mobile-menu-btn" class="md:hidden flex items-center justify-center w-10 h-10 glass rounded-lg">
|
|
|
|
|
<i data-lucide="menu" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<a href="#contact" class="hidden sm:flex group items-center gap-2 text-xs font-semibold tracking-wide uppercase text-black bg-cyan-400 px-5 py-2.5 rounded-full hover:bg-cyan-300 hover:shadow-lg hover:shadow-cyan-500/25 transition-all duration-300">
|
|
|
|
|
Start a Project
|
|
|
|
|
<i data-lucide="arrow-right" class="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Mobile Menu -->
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden glass-strong border-t border-white/5 w-full">
|
|
|
|
|
<div class="px-6 py-4 flex flex-col gap-4">
|
|
|
|
|
<a href="#about" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">About</a>
|
|
|
|
|
<a href="#services" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Services</a>
|
|
|
|
|
<a href="#optimization" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Optimization</a>
|
|
|
|
|
<a href="#expertise" class="text-gray-400 hover:text-cyan-400 transition-colors py-2">Expertise</a>
|
|
|
|
|
<a href="#contact" class="text-center text-black bg-cyan-400 px-5 py-3 rounded-lg font-semibold mt-2">
|
|
|
|
|
Start a Project
|
|
|
|
|
</a>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<main class="relative z-10 pt-20">
|
2025-12-10 12:17:30 -05:00
|
|
|
|
|
|
|
|
<!-- Hero Section -->
|
2026-01-01 21:43:49 -05:00
|
|
|
<section class="min-h-screen flex flex-col justify-center px-6 max-w-7xl mx-auto relative py-20">
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
|
|
|
<!-- Left: Content -->
|
|
|
|
|
<div class="lg:col-span-7 flex flex-col gap-6 z-20">
|
|
|
|
|
<!-- Status Badge -->
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<div class="flex items-center gap-2 glass px-4 py-2 rounded-full">
|
|
|
|
|
<span class="relative flex h-2 w-2">
|
|
|
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
|
|
|
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-cyan-400"></span>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="font-mono text-xs text-cyan-400 tracking-wide">AVAILABLE FOR PROJECTS</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Main Headline -->
|
|
|
|
|
<h1 class="hero-title text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white tracking-tighter leading-[0.9]">
|
|
|
|
|
<span class="text-gradient">Validate.</span><br>
|
|
|
|
|
<span class="text-gray-600">Optimize.</span><br>
|
|
|
|
|
<span class="text-gradient-subtle">Deliver.</span>
|
2025-12-10 12:17:30 -05:00
|
|
|
</h1>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Subheadline -->
|
|
|
|
|
<p class="max-w-lg text-lg md:text-xl text-gray-400 leading-relaxed font-light">
|
|
|
|
|
Simulation-driven engineering services that help you
|
|
|
|
|
<span class="text-white">optimize your designs</span>,
|
|
|
|
|
<span class="text-white">reduce technical risks</span>, and
|
|
|
|
|
<span class="text-white">accelerate development cycles</span>.
|
2025-12-10 12:17:30 -05:00
|
|
|
</p>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- CTA Buttons -->
|
|
|
|
|
<div class="flex flex-wrap items-center gap-4 mt-4">
|
|
|
|
|
<a href="#services" class="group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-8 py-4 rounded-lg font-semibold hover:shadow-xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center gap-3">
|
|
|
|
|
<i data-lucide="activity" class="w-5 h-5"></i>
|
|
|
|
|
EXPLORE SERVICES
|
2025-12-10 12:17:30 -05:00
|
|
|
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
|
|
|
|
|
</a>
|
2026-01-01 21:43:49 -05:00
|
|
|
<a href="#contact" class="group glass text-white px-6 py-4 rounded-lg hover:bg-white/5 transition-all flex items-center gap-3">
|
|
|
|
|
<i data-lucide="mail" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
Get in Touch
|
2025-12-10 12:17:30 -05:00
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Value Props -->
|
|
|
|
|
<div class="flex flex-wrap gap-6 mt-8 pt-8 border-t border-white/5">
|
|
|
|
|
<div class="flex items-center gap-2 stat-number">
|
|
|
|
|
<i data-lucide="check-circle" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
<span class="text-white text-sm">Design Validation</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-2 stat-number" style="animation-delay: 0.1s;">
|
|
|
|
|
<i data-lucide="check-circle" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
<span class="text-white text-sm">Performance Optimization</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-2 stat-number" style="animation-delay: 0.2s;">
|
|
|
|
|
<i data-lucide="check-circle" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
<span class="text-white text-sm">Technical Reports</span>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Right: Visual -->
|
|
|
|
|
<div class="lg:col-span-5 relative h-[500px] lg:h-[700px] flex items-center justify-center">
|
|
|
|
|
<!-- Main Circle with Mesh Effect -->
|
|
|
|
|
<div class="absolute w-[320px] h-[320px] md:w-[420px] md:h-[420px] rounded-full pulse-glow">
|
|
|
|
|
<div class="absolute inset-0 rounded-full overflow-hidden border-2 border-cyan-500/30">
|
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-br from-cyan-900/40 via-transparent to-blue-900/40"></div>
|
|
|
|
|
<!-- FEA Mesh Pattern -->
|
|
|
|
|
<svg class="absolute inset-0 w-full h-full opacity-30" viewBox="0 0 100 100">
|
|
|
|
|
<defs>
|
|
|
|
|
<pattern id="mesh" width="10" height="10" patternUnits="userSpaceOnUse">
|
|
|
|
|
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,212,230,0.5)" stroke-width="0.5"/>
|
|
|
|
|
</pattern>
|
|
|
|
|
</defs>
|
|
|
|
|
<circle cx="50" cy="50" r="48" fill="url(#mesh)"/>
|
|
|
|
|
</svg>
|
|
|
|
|
<!-- Center Icon - Brain with orbit -->
|
|
|
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
|
|
|
<div class="glass w-24 h-24 rounded-2xl flex items-center justify-center">
|
|
|
|
|
<i data-lucide="brain" class="w-12 h-12 text-cyan-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Floating Elements -->
|
|
|
|
|
<div class="absolute top-0 right-0 glass p-5 rounded-xl float">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<div class="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
|
|
|
|
|
<i data-lucide="activity" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="text-white font-semibold">FEA</div>
|
|
|
|
|
<div class="text-xs text-cyan-400 font-mono">Analysis</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="absolute bottom-20 left-0 glass p-5 rounded-xl float-delay">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<div class="w-10 h-10 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg flex items-center justify-center">
|
|
|
|
|
<i data-lucide="settings" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="text-white font-semibold">CAD</div>
|
|
|
|
|
<div class="text-xs text-cyan-400 font-mono">Design</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="absolute top-1/3 -right-4 glass p-4 rounded-xl float-reverse">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<div class="w-8 h-8 bg-green-500/20 rounded-full flex items-center justify-center">
|
|
|
|
|
<i data-lucide="target" class="w-4 h-4 text-green-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="text-sm text-white font-medium">Optimization</div>
|
|
|
|
|
<div class="text-[10px] text-gray-500 font-mono">Multi-Objective</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
|
|
|
|
|
<!-- Orbiting Dots -->
|
|
|
|
|
<div class="absolute inset-0 animate-spin" style="animation-duration: 20s;">
|
|
|
|
|
<div class="absolute top-1/2 left-0 neural-dot" style="animation-delay: 0s;"></div>
|
|
|
|
|
<div class="absolute top-0 left-1/2 neural-dot" style="animation-delay: 0.5s;"></div>
|
|
|
|
|
<div class="absolute top-1/2 right-0 neural-dot" style="animation-delay: 1s;"></div>
|
|
|
|
|
<div class="absolute bottom-0 left-1/2 neural-dot" style="animation-delay: 1.5s;"></div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
|
|
|
|
|
<!-- Scroll Indicator -->
|
|
|
|
|
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-gray-600">
|
|
|
|
|
<span class="text-xs font-mono uppercase tracking-widest">Scroll</span>
|
|
|
|
|
<div class="w-px h-12 bg-gradient-to-b from-cyan-500/50 to-transparent"></div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- About Section -->
|
2026-01-01 21:43:49 -05:00
|
|
|
<section id="about" class="py-32 border-t border-white/5 relative">
|
2025-12-10 12:17:30 -05:00
|
|
|
<div class="max-w-7xl mx-auto px-6">
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
|
|
|
<!-- Image Side -->
|
2025-12-10 12:17:30 -05:00
|
|
|
<div class="relative">
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="aspect-square w-full max-w-lg mx-auto relative">
|
|
|
|
|
<!-- Decorative Frame -->
|
|
|
|
|
<div class="absolute -inset-4 border border-cyan-500/20 rounded-3xl"></div>
|
|
|
|
|
<div class="absolute -inset-8 border border-dashed border-cyan-500/10 rounded-3xl hidden md:block"></div>
|
|
|
|
|
|
|
|
|
|
<!-- Main Image -->
|
|
|
|
|
<div class="relative rounded-2xl overflow-hidden glass border border-cyan-500/20">
|
|
|
|
|
<img src="Media/Site_1_8.png" alt="Antoine - Atomaste" class="w-full h-full object-cover">
|
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Floating Badge -->
|
|
|
|
|
<div class="absolute -bottom-6 -right-6 glass p-4 rounded-xl">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<div class="w-12 h-12 bg-cyan-500 rounded-xl flex items-center justify-center">
|
|
|
|
|
<i data-lucide="award" class="w-6 h-6 text-black"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="text-white font-semibold">Founder</div>
|
|
|
|
|
<div class="text-xs text-gray-400">Atomaste</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Content Side -->
|
|
|
|
|
<div class="flex flex-col gap-8">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="flex items-center gap-3 mb-4">
|
|
|
|
|
<div class="w-12 h-px bg-cyan-500"></div>
|
|
|
|
|
<span class="text-cyan-400 font-mono text-sm uppercase tracking-widest">About</span>
|
|
|
|
|
</div>
|
|
|
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white tracking-tight leading-tight">
|
|
|
|
|
Engineering-driven <span class="text-gradient">optimization</span>
|
|
|
|
|
</h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6 text-gray-400 text-lg leading-relaxed">
|
2025-12-10 12:17:30 -05:00
|
|
|
<p>
|
2026-01-01 21:43:49 -05:00
|
|
|
Atomaste provides specialized mechanical engineering services focused on
|
|
|
|
|
<span class="text-white">structural optimization</span> and <span class="text-white">finite element analysis</span>.
|
2025-12-10 12:17:30 -05:00
|
|
|
</p>
|
|
|
|
|
<p>
|
2026-01-01 21:43:49 -05:00
|
|
|
By combining engineering rigor with advanced computational methods,
|
|
|
|
|
we deliver validated designs that meet your performance objectives while respecting your technical and operational constraints.
|
2025-12-10 12:17:30 -05:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Key Differentiators -->
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
|
|
|
<div class="glass p-4 rounded-xl card-3d">
|
|
|
|
|
<i data-lucide="activity" class="w-6 h-6 text-cyan-400 mb-3"></i>
|
|
|
|
|
<div class="text-white font-medium">Multi-Physics</div>
|
|
|
|
|
<div class="text-xs text-gray-500 mt-1">Coupled analysis</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="glass p-4 rounded-xl card-3d">
|
|
|
|
|
<i data-lucide="target" class="w-6 h-6 text-cyan-400 mb-3"></i>
|
|
|
|
|
<div class="text-white font-medium">Optimization</div>
|
|
|
|
|
<div class="text-xs text-gray-500 mt-1">Performance-driven</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="glass p-4 rounded-xl card-3d">
|
|
|
|
|
<i data-lucide="check-circle" class="w-6 h-6 text-cyan-400 mb-3"></i>
|
|
|
|
|
<div class="text-white font-medium">Validation</div>
|
|
|
|
|
<div class="text-xs text-gray-500 mt-1">Rigorous methods</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="glass p-4 rounded-xl card-3d">
|
|
|
|
|
<i data-lucide="file-text" class="w-6 h-6 text-cyan-400 mb-3"></i>
|
|
|
|
|
<div class="text-white font-medium">Documentation</div>
|
|
|
|
|
<div class="text-xs text-gray-500 mt-1">Complete reports</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Services Section -->
|
|
|
|
|
<section id="services" class="py-32 bg-gradient-to-b from-[#080f1a] to-[#050a12]">
|
2025-12-10 12:17:30 -05:00
|
|
|
<div class="max-w-7xl mx-auto px-6">
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Header -->
|
|
|
|
|
<div class="text-center mb-16">
|
|
|
|
|
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-6">
|
|
|
|
|
<i data-lucide="briefcase" class="w-4 h-4 text-cyan-400"></i>
|
|
|
|
|
<span class="text-cyan-400 font-mono text-sm">SERVICES</span>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white tracking-tight mb-6">
|
|
|
|
|
What We <span class="text-gradient">Solve</span>
|
|
|
|
|
</h2>
|
|
|
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
|
|
|
|
|
Whether you need to validate a design before manufacturing, optimize an existing product,
|
|
|
|
|
or troubleshoot performance issues, we provide the analysis and insights to make confident engineering decisions.
|
2025-12-10 12:17:30 -05:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Business Outcomes -->
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
|
|
|
|
|
<div class="glass p-5 rounded-xl text-center">
|
|
|
|
|
<div class="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
|
|
|
<i data-lucide="shield-check" class="w-6 h-6 text-cyan-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-white font-semibold text-sm">Reduce Risk</div>
|
|
|
|
|
<div class="text-xs text-gray-500 mt-1">Catch issues before production</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-5 rounded-xl text-center">
|
|
|
|
|
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
|
|
|
<i data-lucide="trending-down" class="w-6 h-6 text-green-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-white font-semibold text-sm">Cut Costs</div>
|
|
|
|
|
<div class="text-xs text-gray-500 mt-1">Fewer prototypes needed</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-5 rounded-xl text-center">
|
|
|
|
|
<div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
|
|
|
<i data-lucide="clock" class="w-6 h-6 text-purple-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-white font-semibold text-sm">Save Time</div>
|
|
|
|
|
<div class="text-xs text-gray-500 mt-1">Faster development cycles</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-5 rounded-xl text-center">
|
|
|
|
|
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
|
|
|
<i data-lucide="award" class="w-6 h-6 text-yellow-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-white font-semibold text-sm">Meet Specs</div>
|
|
|
|
|
<div class="text-xs text-gray-500 mt-1">Hit performance targets</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Primary Services -->
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
2025-12-10 12:17:30 -05:00
|
|
|
<!-- FEA Simulation -->
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="glass p-8 rounded-2xl border border-cyan-500/20 hover:border-cyan-500/40 transition-all card-3d group relative overflow-hidden">
|
|
|
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-cyan-500/5 rounded-full filter blur-3xl group-hover:bg-cyan-500/10 transition-all"></div>
|
|
|
|
|
<div class="relative z-10">
|
|
|
|
|
<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-cyan-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-cyan-500/25">
|
|
|
|
|
<i data-lucide="activity" class="w-8 h-8 text-black"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h4 class="text-2xl font-bold text-white mb-2">Design Validation</h4>
|
|
|
|
|
<p class="text-cyan-400 text-sm font-medium mb-4">FEA & Simulation</p>
|
|
|
|
|
<p class="text-gray-400 leading-relaxed mb-6">
|
|
|
|
|
Know how your design will perform before building it.
|
|
|
|
|
Identify weak points, verify safety margins, and validate against requirements.
|
|
|
|
|
</p>
|
|
|
|
|
<ul class="space-y-3">
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
<span class="text-gray-300">Stress & deformation analysis</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
<span class="text-gray-300">Vibration & modal studies</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
<span class="text-gray-300">Thermal behavior</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-cyan-400"></i>
|
|
|
|
|
<span class="text-gray-300">Fatigue life prediction</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Optimization -->
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="glass p-8 rounded-2xl border border-green-500/20 hover:border-green-500/40 transition-all card-3d group relative overflow-hidden">
|
|
|
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-green-500/5 rounded-full filter blur-3xl group-hover:bg-green-500/10 transition-all"></div>
|
|
|
|
|
<div class="relative z-10">
|
|
|
|
|
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-green-500/25">
|
|
|
|
|
<i data-lucide="target" class="w-8 h-8 text-black"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h4 class="text-2xl font-bold text-white mb-2">Performance Optimization</h4>
|
|
|
|
|
<p class="text-green-400 text-sm font-medium mb-4">Structural Optimization</p>
|
|
|
|
|
<p class="text-gray-400 leading-relaxed mb-6">
|
|
|
|
|
Get the best design, not just a working one.
|
|
|
|
|
Systematically improve weight, stiffness, cost, or any metric that matters to you.
|
|
|
|
|
</p>
|
|
|
|
|
<ul class="space-y-3">
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-green-400"></i>
|
|
|
|
|
<span class="text-gray-300">Weight reduction</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-green-400"></i>
|
|
|
|
|
<span class="text-gray-300">Shape & topology optimization</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-green-400"></i>
|
|
|
|
|
<span class="text-gray-300">Multi-objective trade-offs</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-green-400"></i>
|
|
|
|
|
<span class="text-gray-300">Design sensitivity analysis</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Precision Engineering -->
|
|
|
|
|
<div class="glass p-8 rounded-2xl border border-purple-500/20 hover:border-purple-500/40 transition-all card-3d group relative overflow-hidden">
|
|
|
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-full filter blur-3xl group-hover:bg-purple-500/10 transition-all"></div>
|
|
|
|
|
<div class="relative z-10">
|
|
|
|
|
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-400 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-purple-500/25">
|
|
|
|
|
<i data-lucide="focus" class="w-8 h-8 text-black"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h4 class="text-2xl font-bold text-white mb-2">High-Precision Systems</h4>
|
|
|
|
|
<p class="text-purple-400 text-sm font-medium mb-4">Opto-Mechanical & Aerospace</p>
|
|
|
|
|
<p class="text-gray-400 leading-relaxed mb-6">
|
|
|
|
|
For applications where nanometers matter.
|
|
|
|
|
Specialized analysis for optical systems, telescopes, and precision instruments.
|
|
|
|
|
</p>
|
|
|
|
|
<ul class="space-y-3">
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-purple-400"></i>
|
|
|
|
|
<span class="text-gray-300">Surface form error analysis</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-purple-400"></i>
|
|
|
|
|
<span class="text-gray-300">Thermal stability</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-purple-400"></i>
|
|
|
|
|
<span class="text-gray-300">Gravity & pointing effects</span>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="flex items-center gap-3 text-sm">
|
|
|
|
|
<i data-lucide="check" class="w-5 h-5 text-purple-400"></i>
|
|
|
|
|
<span class="text-gray-300">Support structure optimization</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Secondary Services -->
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
|
|
|
|
|
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="pen-tool" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
|
|
|
|
|
<h5 class="text-white font-semibold mb-2">CAD Design</h5>
|
|
|
|
|
<p class="text-xs text-gray-500">Siemens NX, SolidWorks</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="layers" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
|
|
|
|
|
<h5 class="text-white font-semibold mb-2">Design for AM</h5>
|
|
|
|
|
<p class="text-xs text-gray-500">Additive manufacturing</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="file-text" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
|
|
|
|
|
<h5 class="text-white font-semibold mb-2">Technical Reports</h5>
|
|
|
|
|
<p class="text-xs text-gray-500">Documentation & validation</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="users" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
|
|
|
|
|
<h5 class="text-white font-semibold mb-2">Consulting</h5>
|
|
|
|
|
<p class="text-xs text-gray-500">Technical guidance</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Analysis Capabilities -->
|
|
|
|
|
<div class="glass-strong p-8 rounded-2xl">
|
|
|
|
|
<div class="flex items-center gap-3 mb-6">
|
|
|
|
|
<div class="w-10 h-10 bg-cyan-500/20 rounded-xl flex items-center justify-center">
|
|
|
|
|
<i data-lucide="bar-chart-3" class="w-5 h-5 text-cyan-400"></i>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<h4 class="text-xl font-bold text-white">Analysis Capabilities</h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-3">
|
|
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="move" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">Linear Static</span>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="waves" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">Modal</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="activity" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">Vibration</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="thermometer" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">Thermal</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="refresh-cw" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">Fatigue</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group border border-purple-500/20">
|
|
|
|
|
<i data-lucide="focus" class="w-5 h-5 text-purple-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">Opto-Mech</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="zap" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">Non-linear</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="wind" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">CFD</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-3 rounded-lg text-center hover:bg-white/5 transition-all group">
|
|
|
|
|
<i data-lucide="rotate-3d" class="w-5 h-5 text-cyan-400 mx-auto mb-2 group-hover:scale-110 transition-transform"></i>
|
|
|
|
|
<span class="text-white text-xs font-medium">Dynamic</span>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Optimization Approach Section -->
|
|
|
|
|
<section id="optimization" class="py-32 border-t border-white/5 relative overflow-hidden">
|
|
|
|
|
<!-- Background Pattern -->
|
|
|
|
|
<div class="absolute inset-0 opacity-20">
|
|
|
|
|
<div class="absolute top-1/4 left-0 w-96 h-96 bg-cyan-500/10 rounded-full filter blur-[100px]"></div>
|
|
|
|
|
<div class="absolute bottom-1/4 right-0 w-96 h-96 bg-blue-500/10 rounded-full filter blur-[100px]"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
|
|
|
|
<!-- Header -->
|
|
|
|
|
<div class="text-center mb-20">
|
|
|
|
|
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-6">
|
|
|
|
|
<i data-lucide="settings" class="w-4 h-4 text-cyan-400"></i>
|
|
|
|
|
<span class="text-cyan-400 font-mono text-sm">OPTIMIZATION SERVICES</span>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tight mb-6">
|
|
|
|
|
Advanced <span class="text-gradient">Optimization</span>
|
|
|
|
|
</h2>
|
|
|
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
|
|
|
|
|
Combining classical optimization methods with machine learning to find optimal designs faster.
|
|
|
|
|
Applicable to any multi-physics engineering problem.
|
2025-12-10 12:17:30 -05:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Main Approach Showcase -->
|
|
|
|
|
<div class="glass-strong rounded-3xl p-8 md:p-12 mb-16 relative overflow-hidden">
|
|
|
|
|
<div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-cyan-500/5 to-transparent"></div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center relative z-10">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="flex items-center gap-2 mb-6">
|
|
|
|
|
<div class="w-3 h-3 rounded-full bg-green-400 animate-pulse"></div>
|
|
|
|
|
<span class="font-mono text-sm text-green-400">Intelligent Design Exploration</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h3 class="text-2xl md:text-3xl font-bold text-white mb-6">
|
|
|
|
|
From requirements and objectives to optimal design
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
<p class="text-gray-400 leading-relaxed mb-6">
|
|
|
|
|
My optimization workflow combines rigorous engineering analysis with efficient search algorithms.
|
|
|
|
|
Whether targeting thermal stability, minimizing surface deformation, improving dynamic response,
|
|
|
|
|
reducing manufacturing cost, or balancing multiple competing objectives simultaneously,
|
|
|
|
|
the approach adapts to your specific engineering requirements.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
|
<div class="flex items-start gap-4">
|
|
|
|
|
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
|
|
|
|
<span class="text-cyan-400 font-bold text-sm">1</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="text-white font-medium">Define objectives & constraints</div>
|
|
|
|
|
<div class="text-sm text-gray-500">Performance targets, manufacturing limits</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-start gap-4">
|
|
|
|
|
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
|
|
|
|
<span class="text-cyan-400 font-bold text-sm">2</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="text-white font-medium">Automated design exploration</div>
|
|
|
|
|
<div class="text-sm text-gray-500">Parametric studies, sensitivity analysis</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-start gap-4">
|
|
|
|
|
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
|
|
|
|
<span class="text-cyan-400 font-bold text-sm">3</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="text-white font-medium">Validated optimal solution</div>
|
|
|
|
|
<div class="text-sm text-gray-500">FEA verification, documentation</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Capabilities Grid -->
|
|
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
|
|
|
<div class="glass p-6 rounded-2xl text-center border-glow">
|
|
|
|
|
<i data-lucide="git-branch" class="w-8 h-8 text-cyan-400 mx-auto mb-3"></i>
|
|
|
|
|
<div class="text-white font-semibold mb-1">Multi-Objective</div>
|
|
|
|
|
<div class="text-xs text-gray-500">Pareto-optimal solutions</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-6 rounded-2xl text-center border-glow">
|
|
|
|
|
<i data-lucide="sliders" class="w-8 h-8 text-green-400 mx-auto mb-3"></i>
|
|
|
|
|
<div class="text-white font-semibold mb-1">Parametric</div>
|
|
|
|
|
<div class="text-xs text-gray-500">Dimension & shape</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="glass p-6 rounded-2xl text-center border-glow">
|
|
|
|
|
<i data-lucide="boxes" class="w-8 h-8 text-purple-400 mx-auto mb-3"></i>
|
|
|
|
|
<div class="text-white font-semibold mb-1">Topology</div>
|
|
|
|
|
<div class="text-xs text-gray-500">Material distribution</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="glass p-6 rounded-2xl text-center border-glow">
|
|
|
|
|
<i data-lucide="gauge" class="w-8 h-8 text-yellow-400 mx-auto mb-3"></i>
|
|
|
|
|
<div class="text-white font-semibold mb-1">Real-time</div>
|
|
|
|
|
<div class="text-xs text-gray-500">Progress monitoring</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Atomizer Section -->
|
|
|
|
|
<div class="glass-strong rounded-3xl p-8 md:p-12 border border-cyan-500/20 relative overflow-hidden">
|
|
|
|
|
<div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-cyan-500/5 to-transparent"></div>
|
2025-12-10 12:17:30 -05:00
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Header -->
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10 relative z-10">
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-cyan-400 rounded-2xl flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
|
|
|
|
<i data-lucide="box" class="w-8 h-8 text-black"></i>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div>
|
|
|
|
|
<h3 class="text-2xl md:text-3xl font-bold text-white">Atomizer</h3>
|
|
|
|
|
<p class="text-gray-400 mt-1">Optimization pipeline & protocol framework</p>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
|
<span class="px-3 py-1 rounded-full text-xs font-mono bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">Siemens NX</span>
|
|
|
|
|
<span class="px-3 py-1 rounded-full text-xs font-mono bg-green-500/10 text-green-400 border border-green-500/20">Multi-physics</span>
|
|
|
|
|
<span class="px-3 py-1 rounded-full text-xs font-mono bg-purple-500/10 text-purple-400 border border-purple-500/20">Extensible</span>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<p class="text-gray-400 leading-relaxed mb-10 max-w-3xl relative z-10">
|
|
|
|
|
Atomizer is the optimization pipeline that enables structured, repeatable design exploration.
|
|
|
|
|
It provides the protocols and infrastructure to connect FEA solvers, custom physics extractors,
|
|
|
|
|
and optimization algorithms, giving full control over objective functions, constraints, and post-processing workflows.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<!-- Atomizer Features Grid -->
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10">
|
|
|
|
|
<!-- NX CAD Integration -->
|
|
|
|
|
<div class="glass p-6 rounded-2xl card-3d group hover:border-cyan-500/30 transition-all">
|
|
|
|
|
<div class="w-12 h-12 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
|
|
|
<i data-lucide="link" class="w-6 h-6 text-cyan-400"></i>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<h4 class="text-lg font-bold text-white mb-2">NX CAD Integration</h4>
|
|
|
|
|
<p class="text-gray-400 text-sm leading-relaxed">
|
|
|
|
|
Direct parametric link between Siemens NX models and the optimization loop via NX Open API.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Optimization Algorithms -->
|
|
|
|
|
<div class="glass p-6 rounded-2xl card-3d group hover:border-green-500/30 transition-all">
|
|
|
|
|
<div class="w-12 h-12 bg-gradient-to-br from-green-500/20 to-cyan-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
|
|
|
<i data-lucide="settings" class="w-6 h-6 text-green-400"></i>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<h4 class="text-lg font-bold text-white mb-2">Classical Optimizers</h4>
|
|
|
|
|
<p class="text-gray-400 text-sm leading-relaxed">
|
|
|
|
|
TPE, CMA-ES, NSGA-II, MMA, and other proven algorithms, integrated through modular optimization backends.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Surrogate Modeling -->
|
|
|
|
|
<div class="glass p-6 rounded-2xl card-3d group hover:border-purple-500/30 transition-all">
|
|
|
|
|
<div class="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
|
|
|
<i data-lucide="trending-up" class="w-6 h-6 text-purple-400"></i>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<h4 class="text-lg font-bold text-white mb-2">Surrogate Modeling</h4>
|
|
|
|
|
<p class="text-gray-400 text-sm leading-relaxed">
|
|
|
|
|
Machine learning surrogates that approximate expensive FEA simulations for rapid design exploration.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Multi-Objective -->
|
|
|
|
|
<div class="glass p-6 rounded-2xl card-3d group hover:border-yellow-500/30 transition-all">
|
|
|
|
|
<div class="w-12 h-12 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
|
|
|
|
|
<i data-lucide="git-branch" class="w-6 h-6 text-yellow-400"></i>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<h4 class="text-lg font-bold text-white mb-2">Multi-Objective</h4>
|
|
|
|
|
<p class="text-gray-400 text-sm leading-relaxed">
|
|
|
|
|
Pareto-optimal solutions with custom objective functions and engineering constraints.
|
|
|
|
|
</p>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Technical Expertise -->
|
|
|
|
|
<section id="expertise" class="py-32 bg-gradient-to-b from-[#050a12] to-[#080f1a] relative overflow-hidden">
|
|
|
|
|
<!-- Background Effects -->
|
|
|
|
|
<div class="absolute inset-0 pointer-events-none">
|
|
|
|
|
<div class="absolute top-1/4 -left-32 w-96 h-96 bg-cyan-500/5 rounded-full filter blur-[120px]"></div>
|
|
|
|
|
<div class="absolute bottom-1/4 -right-32 w-96 h-96 bg-purple-500/5 rounded-full filter blur-[120px]"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
|
|
|
|
<!-- Header -->
|
|
|
|
|
<div class="text-center mb-20">
|
|
|
|
|
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-6">
|
|
|
|
|
<i data-lucide="layers" class="w-4 h-4 text-cyan-400"></i>
|
|
|
|
|
<span class="text-cyan-400 font-mono text-sm">TECHNICAL STACK</span>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight mb-6">
|
|
|
|
|
Tools & <span class="text-gradient">Technologies</span>
|
|
|
|
|
</h2>
|
|
|
|
|
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
|
|
|
|
|
Industry-leading software combined with custom automation for maximum efficiency and precision.
|
|
|
|
|
</p>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Primary Tools - Hero Cards -->
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
|
|
|
|
<!-- FEA & Simulation - Featured -->
|
|
|
|
|
<div class="glass-strong p-8 rounded-3xl border border-cyan-500/20 relative overflow-hidden group hover:border-cyan-500/40 transition-all duration-500">
|
|
|
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-cyan-500/10 to-transparent rounded-full filter blur-2xl group-hover:from-cyan-500/20 transition-all duration-500"></div>
|
|
|
|
|
<div class="relative z-10">
|
|
|
|
|
<div class="flex items-center justify-between mb-8">
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<div class="w-14 h-14 bg-gradient-to-br from-cyan-500 to-cyan-400 rounded-2xl flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
|
|
|
|
<i data-lucide="cpu" class="w-7 h-7 text-black"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="text-2xl font-bold text-white">FEA & Simulation</h4>
|
|
|
|
|
<p class="text-cyan-400 text-sm font-mono">Core Analysis Tools</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="hidden sm:flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-500/20">
|
|
|
|
|
<span class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></span>
|
|
|
|
|
<span class="text-xs text-cyan-400 font-mono">PRIMARY</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Primary Tools -->
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
|
|
|
|
|
<div class="glass p-4 rounded-xl hover:bg-white/5 transition-all group/item cursor-default">
|
|
|
|
|
<div class="flex items-center gap-3 mb-2">
|
|
|
|
|
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center">
|
|
|
|
|
<span class="text-cyan-400 font-bold text-xs">NX</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-white font-semibold">Siemens NX Nastran</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-xs text-gray-500 ml-11">Linear & nonlinear structural</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-4 rounded-xl hover:bg-white/5 transition-all group/item cursor-default">
|
|
|
|
|
<div class="flex items-center gap-3 mb-2">
|
|
|
|
|
<div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center">
|
|
|
|
|
<span class="text-cyan-400 font-bold text-xs">SW</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-white font-semibold">SolidWorks Simulation</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-xs text-gray-500 ml-11">Integrated CAD analysis</p>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Secondary Tools -->
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider mb-3 font-mono">Open-Source & Specialized</div>
|
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">OpenFOAM <span class="text-cyan-400/70 text-xs ml-1">CFD</span></span>
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">CalculiX</span>
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Code_Aster</span>
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">FEniCS</span>
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Gmsh <span class="text-cyan-400/70 text-xs ml-1">Meshing</span></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- CAD & Design - Featured -->
|
|
|
|
|
<div class="glass-strong p-8 rounded-3xl border border-green-500/20 relative overflow-hidden group hover:border-green-500/40 transition-all duration-500">
|
|
|
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-green-500/10 to-transparent rounded-full filter blur-2xl group-hover:from-green-500/20 transition-all duration-500"></div>
|
|
|
|
|
<div class="relative z-10">
|
|
|
|
|
<div class="flex items-center justify-between mb-8">
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<div class="w-14 h-14 bg-gradient-to-br from-green-500 to-green-400 rounded-2xl flex items-center justify-center shadow-lg shadow-green-500/25">
|
|
|
|
|
<i data-lucide="box" class="w-7 h-7 text-black"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="text-2xl font-bold text-white">CAD & Design</h4>
|
|
|
|
|
<p class="text-green-400 text-sm font-mono">Parametric Modeling</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="hidden sm:flex items-center gap-2 px-3 py-1 rounded-full bg-green-500/10 border border-green-500/20">
|
|
|
|
|
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
|
|
|
|
<span class="text-xs text-green-400 font-mono">PRIMARY</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Primary CAD Tools -->
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
|
|
|
|
|
<div class="glass p-4 rounded-xl hover:bg-white/5 transition-all group/item cursor-default">
|
|
|
|
|
<div class="flex items-center gap-3 mb-2">
|
|
|
|
|
<div class="w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center">
|
|
|
|
|
<span class="text-green-400 font-bold text-xs">NX</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-white font-semibold">Siemens NX</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-xs text-gray-500 ml-11">Advanced surfacing & assemblies</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-4 rounded-xl hover:bg-white/5 transition-all group/item cursor-default">
|
|
|
|
|
<div class="flex items-center gap-3 mb-2">
|
|
|
|
|
<div class="w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center">
|
|
|
|
|
<span class="text-green-400 font-bold text-xs">SW</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-white font-semibold">SolidWorks</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-xs text-gray-500 ml-11">Rapid prototyping & drawings</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- CAD Capabilities -->
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider mb-3 font-mono">Capabilities</div>
|
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Parametric Design</span>
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Surface Modeling</span>
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Assembly Design</span>
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Technical Drawings</span>
|
|
|
|
|
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-300 text-sm hover:bg-white/10 transition-all cursor-default border border-white/5">Design for AM</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Development & Scientific Computing -->
|
|
|
|
|
<div class="glass-strong p-8 md:p-10 rounded-3xl border border-purple-500/20 relative overflow-hidden group hover:border-purple-500/40 transition-all duration-500 mb-12">
|
|
|
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-64 bg-gradient-to-b from-purple-500/10 to-transparent rounded-full filter blur-3xl group-hover:from-purple-500/15 transition-all duration-500"></div>
|
|
|
|
|
|
|
|
|
|
<div class="relative z-10">
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-10">
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-400 rounded-2xl flex items-center justify-center shadow-lg shadow-purple-500/25">
|
|
|
|
|
<i data-lucide="code" class="w-7 h-7 text-black"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="text-2xl font-bold text-white">Development & Scientific Computing</h4>
|
|
|
|
|
<p class="text-purple-400 text-sm font-mono">Automation & Custom Solutions</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 w-fit">
|
|
|
|
|
<i data-lucide="terminal" class="w-3 h-3 text-purple-400"></i>
|
|
|
|
|
<span class="text-xs text-purple-400 font-mono">CUSTOM PIPELINES</span>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
|
|
|
|
|
<!-- Organized by Category -->
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
|
|
|
<!-- Core Language -->
|
|
|
|
|
<div class="space-y-3">
|
|
|
|
|
<div class="flex items-center gap-2 text-xs text-gray-500 uppercase tracking-wider font-mono">
|
|
|
|
|
<i data-lucide="code-2" class="w-3 h-3"></i>
|
|
|
|
|
Core
|
|
|
|
|
</div>
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<div class="flex items-center gap-3 p-3 glass rounded-xl hover:bg-white/5 transition-all cursor-default border border-white/5">
|
|
|
|
|
<div class="w-8 h-8 bg-yellow-500/20 rounded-lg flex items-center justify-center">
|
|
|
|
|
<span class="text-yellow-400 font-bold text-xs">Py</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-white font-medium">Python</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Scientific Stack -->
|
|
|
|
|
<div class="space-y-3">
|
|
|
|
|
<div class="flex items-center gap-2 text-xs text-gray-500 uppercase tracking-wider font-mono">
|
|
|
|
|
<i data-lucide="bar-chart-3" class="w-3 h-3"></i>
|
|
|
|
|
Scientific
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-blue-500/10 text-blue-300 text-sm font-medium border border-blue-500/20 hover:bg-blue-500/20 transition-all cursor-default">NumPy</span>
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-blue-500/10 text-blue-300 text-sm font-medium border border-blue-500/20 hover:bg-blue-500/20 transition-all cursor-default">SciPy</span>
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-blue-500/10 text-blue-300 text-sm font-medium border border-blue-500/20 hover:bg-blue-500/20 transition-all cursor-default">Pandas</span>
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-blue-500/10 text-blue-300 text-sm font-medium border border-blue-500/20 hover:bg-blue-500/20 transition-all cursor-default">pyNastran</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- ML & Optimization -->
|
|
|
|
|
<div class="space-y-3">
|
|
|
|
|
<div class="flex items-center gap-2 text-xs text-gray-500 uppercase tracking-wider font-mono">
|
|
|
|
|
<i data-lucide="brain" class="w-3 h-3"></i>
|
|
|
|
|
ML & Optimization
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-orange-500/10 text-orange-300 text-sm font-medium border border-orange-500/20 hover:bg-orange-500/20 transition-all cursor-default">PyTorch</span>
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-orange-500/10 text-orange-300 text-sm font-medium border border-orange-500/20 hover:bg-orange-500/20 transition-all cursor-default">Scikit-learn</span>
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-orange-500/10 text-orange-300 text-sm font-medium border border-orange-500/20 hover:bg-orange-500/20 transition-all cursor-default">Optuna</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Visualization & APIs -->
|
|
|
|
|
<div class="space-y-3">
|
|
|
|
|
<div class="flex items-center gap-2 text-xs text-gray-500 uppercase tracking-wider font-mono">
|
|
|
|
|
<i data-lucide="layout" class="w-3 h-3"></i>
|
|
|
|
|
Viz & APIs
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-pink-500/10 text-pink-300 text-sm font-medium border border-pink-500/20 hover:bg-pink-500/20 transition-all cursor-default">Matplotlib</span>
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-pink-500/10 text-pink-300 text-sm font-medium border border-pink-500/20 hover:bg-pink-500/20 transition-all cursor-default">Plotly</span>
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-pink-500/10 text-pink-300 text-sm font-medium border border-pink-500/20 hover:bg-pink-500/20 transition-all cursor-default">FastAPI</span>
|
|
|
|
|
<span class="px-3 py-2 rounded-lg bg-pink-500/10 text-pink-300 text-sm font-medium border border-pink-500/20 hover:bg-pink-500/20 transition-all cursor-default">NX Open</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- Integration Highlight -->
|
|
|
|
|
<div class="glass p-6 md:p-8 rounded-2xl border border-white/10 relative overflow-hidden">
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<div class="w-12 h-12 bg-gradient-to-br from-cyan-500/20 to-purple-500/20 rounded-xl flex items-center justify-center">
|
|
|
|
|
<i data-lucide="workflow" class="w-6 h-6 text-cyan-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h5 class="text-lg font-bold text-white">Fully Integrated Workflow</h5>
|
|
|
|
|
<p class="text-sm text-gray-400">CAD → FEA → Optimization → Results</p>
|
|
|
|
|
</div>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="hidden md:block h-12 w-px bg-white/10"></div>
|
|
|
|
|
<div class="flex flex-wrap items-center gap-3 text-sm text-gray-400">
|
|
|
|
|
<span class="flex items-center gap-2"><i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> Parametric automation</span>
|
|
|
|
|
<span class="flex items-center gap-2"><i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> Batch processing</span>
|
|
|
|
|
<span class="flex items-center gap-2"><i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> Custom post-processing</span>
|
|
|
|
|
<span class="flex items-center gap-2"><i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> Report generation</span>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<!-- CTA Section -->
|
|
|
|
|
<section id="contact" class="py-32 relative border-t border-white/5">
|
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-cyan-500/5 via-transparent to-transparent"></div>
|
|
|
|
|
|
|
|
|
|
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
|
|
|
|
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
|
|
|
|
<span class="relative flex h-2 w-2">
|
|
|
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
|
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="text-green-400 font-mono text-sm">AVAILABLE FOR PROJECTS</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
|
|
|
|
|
Let's <span class="text-gradient">optimize</span> together
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p class="text-xl text-gray-400 max-w-2xl mx-auto mb-12">
|
|
|
|
|
Ready to improve your designs through rigorous FEA and optimization?
|
|
|
|
|
Let's discuss your project requirements.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-16">
|
|
|
|
|
<a href="mailto:contact@atomaste.ca" class="group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-10 py-5 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center gap-3">
|
|
|
|
|
<i data-lucide="mail" class="w-5 h-5"></i>
|
|
|
|
|
contact@atomaste.ca
|
|
|
|
|
<i data-lucide="arrow-up-right" class="w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
|
|
|
|
|
</a>
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
|
2026-01-01 21:43:49 -05:00
|
|
|
<div class="flex items-center justify-center gap-8">
|
2026-01-02 16:21:01 -05:00
|
|
|
<a href="https://www.linkedin.com/company/atomaste/" target="_blank" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
|
2026-01-01 21:43:49 -05:00
|
|
|
<i data-lucide="linkedin" class="w-5 h-5"></i>
|
|
|
|
|
LinkedIn
|
|
|
|
|
</a>
|
|
|
|
|
<div class="w-px h-4 bg-white/10"></div>
|
|
|
|
|
<a href="https://atomaste.ca" class="text-gray-500 hover:text-white transition-colors flex items-center gap-2">
|
|
|
|
|
<i data-lucide="globe" class="w-5 h-5"></i>
|
|
|
|
|
atomaste.ca
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Footer -->
|
|
|
|
|
<footer class="py-12 border-t border-white/5">
|
|
|
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
2025-12-10 12:17:30 -05:00
|
|
|
<div class="flex items-center gap-4">
|
2026-01-01 21:43:49 -05:00
|
|
|
<img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste" class="h-8">
|
|
|
|
|
<span class="text-gray-600 font-mono text-sm">© 2025 Atomaste</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-gray-600 font-mono text-sm">
|
|
|
|
|
Rouyn-Noranda, Québec
|
2025-12-10 12:17:30 -05:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<script>
|
2026-01-01 21:43:49 -05:00
|
|
|
// Initialize Lucide Icons
|
2025-12-10 12:17:30 -05:00
|
|
|
lucide.createIcons();
|
2026-01-01 21:43:49 -05:00
|
|
|
|
|
|
|
|
// Particle System
|
|
|
|
|
const canvas = document.getElementById('particles-canvas');
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
let particles = [];
|
|
|
|
|
const particleCount = 50;
|
|
|
|
|
|
|
|
|
|
function resizeCanvas() {
|
|
|
|
|
canvas.width = window.innerWidth;
|
|
|
|
|
canvas.height = window.innerHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function createParticle() {
|
|
|
|
|
return {
|
|
|
|
|
x: Math.random() * canvas.width,
|
|
|
|
|
y: Math.random() * canvas.height,
|
|
|
|
|
vx: (Math.random() - 0.5) * 0.3,
|
|
|
|
|
vy: (Math.random() - 0.5) * 0.3,
|
|
|
|
|
size: Math.random() * 2 + 1,
|
|
|
|
|
opacity: Math.random() * 0.5 + 0.1
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function initParticles() {
|
|
|
|
|
particles = [];
|
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
|
|
|
particles.push(createParticle());
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drawParticles() {
|
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
|
|
|
|
|
particles.forEach((p, i) => {
|
|
|
|
|
// Update position
|
|
|
|
|
p.x += p.vx;
|
|
|
|
|
p.y += p.vy;
|
|
|
|
|
|
|
|
|
|
// Wrap around edges
|
|
|
|
|
if (p.x < 0) p.x = canvas.width;
|
|
|
|
|
if (p.x > canvas.width) p.x = 0;
|
|
|
|
|
if (p.y < 0) p.y = canvas.height;
|
|
|
|
|
if (p.y > canvas.height) p.y = 0;
|
|
|
|
|
|
|
|
|
|
// Draw particle
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
|
|
|
ctx.fillStyle = `rgba(0, 212, 230, ${p.opacity})`;
|
|
|
|
|
ctx.fill();
|
|
|
|
|
|
|
|
|
|
// Draw connections
|
|
|
|
|
particles.forEach((p2, j) => {
|
|
|
|
|
if (i !== j) {
|
|
|
|
|
const dx = p.x - p2.x;
|
|
|
|
|
const dy = p.y - p2.y;
|
|
|
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
|
|
|
|
|
|
if (dist < 150) {
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(p.x, p.y);
|
|
|
|
|
ctx.lineTo(p2.x, p2.y);
|
|
|
|
|
ctx.strokeStyle = `rgba(0, 212, 230, ${0.1 * (1 - dist / 150)})`;
|
|
|
|
|
ctx.lineWidth = 0.5;
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
requestAnimationFrame(drawParticles);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
resizeCanvas();
|
|
|
|
|
initParticles();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
resizeCanvas();
|
|
|
|
|
initParticles();
|
|
|
|
|
drawParticles();
|
|
|
|
|
|
|
|
|
|
// Mobile menu toggle
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
|
if (mobileMenuBtn && mobileMenu) {
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
|
|
|
mobileMenu.classList.toggle('hidden');
|
|
|
|
|
});
|
|
|
|
|
// Close menu when clicking a link
|
|
|
|
|
mobileMenu.querySelectorAll('a').forEach(link => {
|
|
|
|
|
link.addEventListener('click', () => {
|
|
|
|
|
mobileMenu.classList.add('hidden');
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Smooth scroll
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
|
|
|
anchor.addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
|
|
|
if (target) {
|
|
|
|
|
target.scrollIntoView({
|
|
|
|
|
behavior: 'smooth',
|
|
|
|
|
block: 'start'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Intersection Observer for animations
|
|
|
|
|
const observerOptions = {
|
|
|
|
|
threshold: 0.1,
|
|
|
|
|
rootMargin: '0px 0px -50px 0px'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
|
|
|
entries.forEach(entry => {
|
|
|
|
|
if (entry.isIntersecting) {
|
|
|
|
|
entry.target.classList.add('animate-in');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, observerOptions);
|
|
|
|
|
|
|
|
|
|
document.querySelectorAll('.glass, .glass-strong').forEach(el => {
|
|
|
|
|
observer.observe(el);
|
|
|
|
|
});
|
2025-12-10 12:17:30 -05:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
