767 lines
28 KiB
HTML
767 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SecCodeSmith - Code Forged in Digital Fire</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- DevIcon -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-dark: #0a0a0a;
|
|
--secondary-dark: #1a1a1a;
|
|
--accent-fire: #ff6400;
|
|
--accent-ember: #ff4500;
|
|
--accent-dragon: #8B0000;
|
|
--text-light: #f5f5f5;
|
|
--text-ash: #aaaaaa;
|
|
--glow-effect: 0 0 10px var(--accent-fire), 0 0 20px rgba(255, 100, 0, 0.4);
|
|
--card-bg: #141414;
|
|
--card-border: #2a2a2a;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--primary-dark);
|
|
color: var(--text-light);
|
|
background-image: url('background.png');
|
|
background-repeat: round;
|
|
background-size: 300px 300px;
|
|
background-position: 0 0;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
font-family: 'Cinzel', serif;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle at 50% 50%, rgba(139, 0, 0, 0.08), rgba(10, 10, 10, 0.4));
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Bootstrap Overrides */
|
|
.navbar {
|
|
background-color: rgba(10, 10, 10, 0.95) !important;
|
|
border-bottom: 1px solid rgba(255, 100, 0, 0.3);
|
|
}
|
|
|
|
.navbar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.navbar-toggler {
|
|
border: 1px solid rgba(255, 100, 0, 0.5);
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 100, 0, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-light) !important;
|
|
position: relative;
|
|
padding: 0.5rem 1rem;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
color: var(--accent-fire) !important;
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 2px;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--accent-fire), transparent);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-link:hover::after, .nav-link.active::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Logo styling */
|
|
.logo-icon {
|
|
font-size: 2rem;
|
|
color: var(--accent-fire);
|
|
text-shadow: var(--glow-effect);
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-text {
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
background: linear-gradient(to right, var(--accent-fire), var(--text-light));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 76px; /* Account for navbar height */
|
|
}
|
|
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url('/api/placeholder/1200/800') center/cover no-repeat;
|
|
opacity: 0.15;
|
|
filter: brightness(0.5) contrast(1.2);
|
|
z-index: -1;
|
|
}
|
|
|
|
.title-main {
|
|
font-size: 4rem;
|
|
font-weight: 700;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.title-main::before {
|
|
content: "< ";
|
|
color: var(--accent-fire);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.title-main::after {
|
|
content: " />";
|
|
color: var(--accent-fire);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.6rem;
|
|
color: var(--text-ash);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Binary Background */
|
|
.binary-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
opacity: 0.07;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.binary-line {
|
|
position: absolute;
|
|
font-family: 'Fira Code', monospace;
|
|
color: var(--accent-fire);
|
|
font-size: 1rem;
|
|
animation: fall linear infinite;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
@keyframes fall {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
}
|
|
100% {
|
|
transform: translateY(100vh);
|
|
}
|
|
}
|
|
|
|
/* Button Styling */
|
|
.btn-primary {
|
|
background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
|
|
border: none;
|
|
padding: 0.75rem 2rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
|
|
background-color: var(--accent-fire);
|
|
background-image: none;
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: all 0.6s ease;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Skills Section */
|
|
.skills-section {
|
|
padding: 6rem 0;
|
|
background-color: var(--secondary-dark);
|
|
position: relative;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
font-size: 2.5rem;
|
|
margin-bottom: 3rem;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 3px;
|
|
background: var(--accent-fire);
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
box-shadow: var(--glow-effect);
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-10px);
|
|
border-color: rgba(255, 100, 0, 0.3);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 5px;
|
|
top: 0;
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire));
|
|
}
|
|
|
|
.card-header {
|
|
background-color: transparent;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.category-icon {
|
|
color: var(--accent-fire);
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skill-item {
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.skill-icon {
|
|
color: var(--accent-fire);
|
|
font-size: 1.5rem;
|
|
min-width: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.skill-icon i {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.skill-name {
|
|
color: var(--text-ash);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* Blinking cursor effect */
|
|
.blinking-cursor {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 24px;
|
|
background-color: var(--accent-fire);
|
|
margin-left: 5px;
|
|
animation: blink 1s step-end infinite;
|
|
box-shadow: var(--glow-effect);
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* Particles effect */
|
|
.particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background-color: var(--accent-fire);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
animation: rise linear forwards;
|
|
}
|
|
|
|
@keyframes rise {
|
|
0% {
|
|
transform: translateY(0) translateX(0);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 0.5;
|
|
}
|
|
90% {
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: translateY(-100px) translateX(var(--x));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background-color: var(--primary-dark);
|
|
padding: 3rem 0;
|
|
border-top: 1px solid rgba(255, 100, 0, 0.2);
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.social-icon {
|
|
font-size: 1.5rem;
|
|
color: var(--text-ash);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.social-icon:hover {
|
|
color: var(--accent-fire);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.copyright {
|
|
color: var(--text-ash);
|
|
font-size: 0.9rem;
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 992px) {
|
|
.title-main {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.title-main {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.binary-line {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.title-main {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
padding: 0.6rem 1.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header and Navigation -->
|
|
<nav class="navbar navbar-expand-lg fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">
|
|
<div class="logo-icon">
|
|
<img src="favicon1.png" alt="Logo" width="40" height="40">
|
|
</div>
|
|
<div class="logo-text">SecCodeSmith</div>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="index.html">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="blog.html">Blog</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="about.html">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="projects.html">Projects</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="contact.html">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero" id="home">
|
|
<div class="binary-bg" id="binary-bg"></div>
|
|
<div class="container text-center">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<h1 class="title-main">SecCodeSmith</h1>
|
|
<div class="blinking-cursor"></div>
|
|
<p class="subtitle mt-3">Forging Digital Solutions in the Fires of Innovation</p>
|
|
<a href="#projects" class="btn btn-primary mt-4">
|
|
<i class="fas fa-fire-alt me-2"></i> View My Forge
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="particles" id="particles"></div>
|
|
</section>
|
|
|
|
<!-- Skills Section -->
|
|
<section id="skills" class="skills-section">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-5">
|
|
<div class="col-lg-6 text-center">
|
|
<h2 class="section-title">Technical Arsenal</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<!-- Languages Card -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<i class="fas fa-code category-icon"></i>
|
|
<h3 class="category-title">Languages</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled">
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-cplusplus-plain colored"></i></span>
|
|
<span class="skill-name">C/C++</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-python-plain colored"></i></span>
|
|
<span class="skill-name">Python</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-csharp-plain colored"></i></span>
|
|
<span class="skill-name">.NET</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Embedded Systems Card -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<i class="fas fa-microchip category-icon"></i>
|
|
<h3 class="category-title">Embedded Systems</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled">
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="fas fa-microchip"></i></span>
|
|
<span class="skill-name">STM32 (I2C, SPI, UART)</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="fas fa-wifi"></i></span>
|
|
<span class="skill-name">ESP32</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="fas fa-memory"></i></span>
|
|
<span class="skill-name">Pico-SDK</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data & ML Card -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<i class="fas fa-brain category-icon"></i>
|
|
<h3 class="category-title">Data & ML</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled">
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-pandas-original colored"></i></span>
|
|
<span class="skill-name">Pandas</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="fas fa-cogs"></i></span>
|
|
<span class="skill-name">Scikit-learn</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="fas fa-image"></i></span>
|
|
<span class="skill-name">Scikit-image</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-pytorch-original colored"></i></span>
|
|
<span class="skill-name">PyTorch</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Web Development Card -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<i class="fas fa-window-maximize category-icon"></i>
|
|
<h3 class="category-title">Web Development</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled">
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-dot-net-plain colored"></i></span>
|
|
<span class="skill-name">ASP.NET</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="fas fa-database"></i></span>
|
|
<span class="skill-name">Entity Framework</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-dotnetcore-plain colored"></i></span>
|
|
<span class="skill-name">Blazor</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-react-original colored"></i></span>
|
|
<span class="skill-name">React</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-bootstrap-plain colored"></i></span>
|
|
<span class="skill-name">Bootstrap</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-django-plain colored"></i></span>
|
|
<span class="skill-name">Django</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DevOps Card -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<i class="fas fa-server category-icon"></i>
|
|
<h3 class="category-title">DevOps & Systems</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled">
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-docker-plain colored"></i></span>
|
|
<span class="skill-name">Docker</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="fas fa-layer-group"></i></span>
|
|
<span class="skill-name">Docker-compose</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-bash-plain colored"></i></span>
|
|
<span class="skill-name">Linux CLI</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-cmake-plain colored"></i></span>
|
|
<span class="skill-name">CMake</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-windows8-original colored"></i></span>
|
|
<span class="skill-name">Windows</span>
|
|
</li>
|
|
<li class="skill-item">
|
|
<span class="skill-icon"><i class="devicon-linux-plain colored"></i></span>
|
|
<span class="skill-name">Linux</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer Section -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="social-links">
|
|
<a href="#" class="social-icon"><i class="fab fa-github"></i></a>
|
|
<a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
|
|
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
|
|
<a href="#" class="social-icon"><i class="fab fa-discord"></i></a>
|
|
<a href="#" class="social-icon"><i class="fas fa-envelope"></i></a>
|
|
<a href="#" class="social-icon"><i class="fab fa-hackerrank"></i></a>
|
|
</div>
|
|
<p class="copyright">© 2025 SecCodeSmith. All rights forged in digital fire.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Create binary background
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const binaryBg = document.getElementById('binary-bg');
|
|
const chars = '01';
|
|
const linesCount = 20;
|
|
|
|
for (let i = 0; i < linesCount; i++) {
|
|
const line = document.createElement('div');
|
|
line.className = 'binary-line';
|
|
line.style.left = `${Math.random() * 100}%`;
|
|
line.style.animationDuration = `${Math.random() * 10 + 15}s`;
|
|
|
|
let binaryString = '';
|
|
for (let j = 0; j < 100; j++) {
|
|
binaryString += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
}
|
|
|
|
line.textContent = binaryString;
|
|
binaryBg.appendChild(line);
|
|
}
|
|
|
|
// Create particles effect (ember/spark effect)
|
|
const particlesContainer = document.getElementById('particles');
|
|
const particlesCount = 50;
|
|
|
|
function createParticle() {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
|
|
// Random position at the bottom of the hero section
|
|
const posX = Math.random() * window.innerWidth;
|
|
const posY = window.innerHeight - 100 + (Math.random() * 50);
|
|
|
|
particle.style.left = `${posX}px`;
|
|
particle.style.top = `${posY}px`;
|
|
|
|
// Random size
|
|
const size = Math.random() * 3 + 1;
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
|
|
// Random drift
|
|
const xDrift = (Math.random() - 0.5) * 100;
|
|
particle.style.setProperty('--x', `${xDrift}px`);
|
|
|
|
// Random animation duration
|
|
const duration = Math.random() * 3 + 2;
|
|
particle.style.animationDuration = `${duration}s`;
|
|
|
|
particlesContainer.appendChild(particle);
|
|
|
|
// Remove particle after animation completes
|
|
setTimeout(() => {
|
|
particle.remove();
|
|
createParticle();
|
|
}, duration * 1000);
|
|
}
|
|
|
|
// Initialize particles
|
|
for (let i = 0; i < particlesCount; i++) {
|
|
setTimeout(createParticle, i * 100);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |