1112 lines
47 KiB
HTML
1112 lines
47 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 - The Digital Forge</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-size: 300px;
|
|
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;
|
|
}
|
|
|
|
/* Page Header */
|
|
.page-header {
|
|
padding-top: 7rem;
|
|
padding-bottom: 3rem;
|
|
background-color: var(--secondary-dark);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page-header::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-image: url('/api/placeholder/1200/400');
|
|
opacity: 0.15;
|
|
filter: brightness(0.3);
|
|
z-index: 0;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.page-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 3px;
|
|
background: var(--accent-fire);
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
box-shadow: var(--glow-effect);
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 1.2rem;
|
|
color: var(--text-ash);
|
|
}
|
|
|
|
/* Projects Filter */
|
|
.filter-container {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.filter-button {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--card-border);
|
|
color: var(--text-ash);
|
|
padding: 0.5rem 1rem;
|
|
margin: 0 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-button:hover, .filter-button.active {
|
|
background-color: rgba(255, 100, 0, 0.1);
|
|
border-color: rgba(255, 100, 0, 0.3);
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
.filter-button.active {
|
|
border-color: var(--accent-fire);
|
|
}
|
|
|
|
/* Project Cards */
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
margin-bottom: 1.5rem;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-10px);
|
|
border-color: rgba(255, 100, 0, 0.3);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.card-img-top {
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.card-text {
|
|
color: var(--text-ash);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.featured-card {
|
|
position: relative;
|
|
}
|
|
|
|
.featured-card .card-img-top {
|
|
height: 300px;
|
|
}
|
|
|
|
/* Category badges */
|
|
.category-badge {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background-color: rgba(139, 0, 0, 0.9);
|
|
color: var(--text-light);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.featured-badge {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
|
|
color: var(--text-light);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Tech stack */
|
|
.tech-title {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.625rem;
|
|
color: var(--text-ash);
|
|
font-family: 'Fira Code', monospace;
|
|
}
|
|
|
|
.tech-stack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.tech-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-family: 'Fira Code', monospace;
|
|
color: var(--text-ash);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tech-item:hover {
|
|
background-color: rgba(255, 100, 0, 0.1);
|
|
color: var(--accent-fire);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.tech-icon {
|
|
font-size: 1rem;
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
/* Project links */
|
|
.btn-outline-secondary {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border-color: var(--card-border);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background-color: rgba(255, 100, 0, 0.1);
|
|
border-color: var(--accent-fire);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.btn-icon {
|
|
margin-right: 0.5rem;
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
/* View All Button */
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Modal Styling */
|
|
.modal-content {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.modal-title {
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.btn-close {
|
|
filter: invert(1) grayscale(100%) brightness(200%);
|
|
}
|
|
|
|
.features-list {
|
|
padding-left: 1.5rem;
|
|
color: var(--text-ash);
|
|
}
|
|
|
|
.features-list li {
|
|
margin-bottom: 0.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.features-list li::before {
|
|
content: "•";
|
|
color: var(--accent-fire);
|
|
position: absolute;
|
|
left: -1rem;
|
|
top: 0;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.tech-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
padding: 8px 15px;
|
|
border-radius: 20px;
|
|
margin-right: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tech-chip:hover {
|
|
background-color: rgba(255, 100, 0, 0.1);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.tech-chip-icon {
|
|
color: var(--accent-fire);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.tech-chip-name {
|
|
color: var(--text-ash);
|
|
font-size: 0.9rem;
|
|
font-family: 'Fira Code', monospace;
|
|
}
|
|
|
|
.gallery-item {
|
|
height: 150px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.gallery-item:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.gallery-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Binary background effect */
|
|
.binary-line {
|
|
position: absolute;
|
|
font-family: 'Fira Code', monospace;
|
|
color: var(--accent-fire);
|
|
font-size: 0.8rem;
|
|
opacity: 0.15;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Ember particle effect */
|
|
.ember-particle {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background-color: var(--accent-fire);
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
box-shadow: 0 0 5px var(--accent-fire);
|
|
animation: float 3s linear infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0) rotate(0deg);
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
transform: translateY(-100px) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background-color: var(--primary-dark);
|
|
padding: 3rem 0;
|
|
border-top: 1px solid rgba(255, 100, 0, 0.2);
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.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;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 992px) {
|
|
.page-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.featured-card .row {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.tech-stack {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.page-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.project-links {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.project-links .btn {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
</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">
|
|
<i class="fas fa-hammer"></i>
|
|
<i class="fas fa-dragon" style="font-size: 1.2rem; position: absolute; top: 0; right: -12px; color: var(--accent-dragon);"></i>
|
|
</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" 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 active" href="projects.html">Projects</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="contact.html">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<section class="page-header text-center">
|
|
<div class="container position-relative">
|
|
<h1 class="page-title">The Digital Forge</h1>
|
|
<p class="page-subtitle mt-4">Artifacts crafted with code, hammered with precision, and tempered in the fires of innovation</p>
|
|
|
|
<!-- Binary background effect -->
|
|
<div class="binary-bg">
|
|
<div class="binary-line" style="top: 20%; left: 10%;">01001100 01101111 01110010 01100101 01101101</div>
|
|
<div class="binary-line" style="bottom: 30%; right: 15%;">01001001 01110000 01110011 01110101 01101101</div>
|
|
<div class="binary-line" style="top: 50%; left: 80%;">01000100 01101111 01101100 01101111 01110010</div>
|
|
<div class="binary-line" style="bottom: 10%; left: 40%;">01010011 01101001 01110100 00100000 01000001 01101101 01100101 01110100</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Container -->
|
|
<div class="container mt-5">
|
|
<!-- Projects Filter -->
|
|
<div class="filter-container text-center">
|
|
<button class="filter-button active" data-filter="all">All Artifacts</button>
|
|
<button class="filter-button" data-filter="embedded">Embedded Systems</button>
|
|
<button class="filter-button" data-filter="web">Web Development</button>
|
|
<button class="filter-button" data-filter="ml">Machine Learning</button>
|
|
<button class="filter-button" data-filter="iot">IoT</button>
|
|
</div>
|
|
|
|
<!-- Projects Grid -->
|
|
<div class="row">
|
|
<!-- Featured Project -->
|
|
<div class="col-12 mb-4">
|
|
<div class="card featured-card" data-category="iot,embedded">
|
|
<div class="row g-0">
|
|
<div class="col-md-6 position-relative">
|
|
<img src="/api/placeholder/600/400" class="img-fluid rounded-start h-100 w-100 object-fit-cover" alt="Project Image">
|
|
<div class="featured-badge">
|
|
<i class="fas fa-star"></i>
|
|
<span>Featured</span>
|
|
</div>
|
|
<div class="category-badge">IoT</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card-body d-flex flex-column h-100">
|
|
<h3 class="card-title">ShadowGuardian: Secure IoT Monitoring System</h3>
|
|
<p class="card-text">
|
|
A comprehensive security monitoring system built on STM32 microcontrollers with end-to-end encryption and low-power operation. Integrates with home automation systems and provides real-time alerts through a mobile application.
|
|
</p>
|
|
<div>
|
|
<h4 class="tech-title">// TECHNOLOGIES_USED</h4>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">
|
|
<i class="devicon-cplusplus-plain tech-icon"></i>
|
|
<span>C++</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-microchip tech-icon"></i>
|
|
<span>STM32</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-wifi tech-icon"></i>
|
|
<span>ESP32</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-shield-alt tech-icon"></i>
|
|
<span>Encryption</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="devicon-react-original tech-icon"></i>
|
|
<span>React Native</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto d-flex gap-2 flex-wrap project-links">
|
|
<button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#shadowguardianModal">
|
|
<i class="fas fa-info-circle btn-icon"></i>Project Details
|
|
</button>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fab fa-github btn-icon"></i>View Code
|
|
</a>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fas fa-external-link-alt btn-icon"></i>Live Demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 2 -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100" data-category="ml,iot">
|
|
<div class="position-relative">
|
|
<img src="/api/placeholder/400/200" class="card-img-top" alt="Project Image">
|
|
<div class="category-badge">Machine Learning</div>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h3 class="card-title">PyroSight: Thermal Anomaly Detection</h3>
|
|
<p class="card-text">
|
|
An intelligent system that uses computer vision and thermal imaging to detect anomalies in industrial equipment. Employs PyTorch for deep learning to predict potential failures before they occur.
|
|
</p>
|
|
<div>
|
|
<h4 class="tech-title">// TECHNOLOGIES_USED</h4>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">
|
|
<i class="devicon-python-plain tech-icon"></i>
|
|
<span>Python</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="devicon-pytorch-original tech-icon"></i>
|
|
<span>PyTorch</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-camera tech-icon"></i>
|
|
<span>OpenCV</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-microchip tech-icon"></i>
|
|
<span>Raspberry Pi</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto d-flex gap-2 flex-wrap project-links">
|
|
<button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#pyrosightModal">
|
|
<i class="fas fa-info-circle btn-icon"></i>Project Details
|
|
</button>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fab fa-github btn-icon"></i>View Code
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 3 -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100" data-category="web">
|
|
<div class="position-relative">
|
|
<img src="/api/placeholder/400/200" class="card-img-top" alt="Project Image">
|
|
<div class="category-badge">Web App</div>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h3 class="card-title">NexusFlow: DevOps Dashboard</h3>
|
|
<p class="card-text">
|
|
A real-time monitoring dashboard for DevOps teams that visualizes CI/CD pipelines, infrastructure metrics, and deployment statuses. Built with Blazor for seamless updates without page refreshes.
|
|
</p>
|
|
<div>
|
|
<h4 class="tech-title">// TECHNOLOGIES_USED</h4>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">
|
|
<i class="devicon-csharp-plain tech-icon"></i>
|
|
<span>C#</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="devicon-dotnetcore-plain tech-icon"></i>
|
|
<span>Blazor</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-database tech-icon"></i>
|
|
<span>Entity Framework</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="devicon-docker-plain tech-icon"></i>
|
|
<span>Docker</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto d-flex gap-2 flex-wrap project-links">
|
|
<button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#nexusflowModal">
|
|
<i class="fas fa-info-circle btn-icon"></i>Project Details
|
|
</button>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fab fa-github btn-icon"></i>View Code
|
|
</a>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fas fa-external-link-alt btn-icon"></i>Live Demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 4 -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100" data-category="embedded,iot">
|
|
<div class="position-relative">
|
|
<img src="/api/placeholder/400/200" class="card-img-top" alt="Project Image">
|
|
<div class="category-badge">Embedded</div>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h3 class="card-title">EtherWhisper: Secure Communication Node</h3>
|
|
<p class="card-text">
|
|
A low-power, long-range communication node for IoT networks with military-grade encryption and mesh capabilities. Perfect for remote sensing applications in harsh environments.
|
|
</p>
|
|
<div>
|
|
<h4 class="tech-title">// TECHNOLOGIES_USED</h4>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">
|
|
<i class="devicon-c-plain tech-icon"></i>
|
|
<span>C</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-memory tech-icon"></i>
|
|
<span>STM32</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-broadcast-tower tech-icon"></i>
|
|
<span>LoRa</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-shield-alt tech-icon"></i>
|
|
<span>AES-256</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto d-flex gap-2 flex-wrap project-links">
|
|
<button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#etherwhisperModal">
|
|
<i class="fas fa-info-circle btn-icon"></i>Project Details
|
|
</button>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fab fa-github btn-icon"></i>View Code
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 5 -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100" data-category="web">
|
|
<div class="position-relative">
|
|
<img src="/api/placeholder/400/200" class="card-img-top" alt="Project Image">
|
|
<div class="category-badge">Web App</div>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h3 class="card-title">DataForge: Advanced Analytics Platform</h3>
|
|
<p class="card-text">
|
|
A comprehensive data analytics platform with interactive visualization tools and automated reporting features. Integrates with various data sources and provides ML-powered insights.
|
|
</p>
|
|
<div>
|
|
<h4 class="tech-title">// TECHNOLOGIES_USED</h4>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">
|
|
<i class="devicon-python-plain tech-icon"></i>
|
|
<span>Python</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="devicon-django-plain tech-icon"></i>
|
|
<span>Django</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="devicon-react-original tech-icon"></i>
|
|
<span>React</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="devicon-pandas-original tech-icon"></i>
|
|
<span>Pandas</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto d-flex gap-2 flex-wrap project-links">
|
|
<button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#dataforgeModal">
|
|
<i class="fas fa-info-circle btn-icon"></i>Project Details
|
|
</button>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fab fa-github btn-icon"></i>View Code
|
|
</a>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fas fa-external-link-alt btn-icon"></i>Live Demo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 6 -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100" data-category="ml">
|
|
<div class="position-relative">
|
|
<img src="/api/placeholder/400/200" class="card-img-top" alt="Project Image">
|
|
<div class="category-badge">Machine Learning</div>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h3 class="card-title">VisionKeeper: Object Recognition System</h3>
|
|
<p class="card-text">
|
|
A real-time object recognition system optimized for edge devices. Capable of identifying and tracking objects with high accuracy even in challenging lighting conditions.
|
|
</p>
|
|
<div>
|
|
<h4 class="tech-title">// TECHNOLOGIES_USED</h4>
|
|
<div class="tech-stack">
|
|
<span class="tech-item">
|
|
<i class="devicon-python-plain tech-icon"></i>
|
|
<span>Python</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="devicon-pytorch-original tech-icon"></i>
|
|
<span>PyTorch</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-camera tech-icon"></i>
|
|
<span>OpenCV</span>
|
|
</span>
|
|
<span class="tech-item">
|
|
<i class="fas fa-microchip tech-icon"></i>
|
|
<span>NVIDIA Jetson</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto d-flex gap-2 flex-wrap project-links">
|
|
<button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#visionkeeperModal">
|
|
<i class="fas fa-info-circle btn-icon"></i>Project Details
|
|
</button>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fab fa-github btn-icon"></i>View Code
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View All Button -->
|
|
<div class="text-center mt-4">
|
|
<a href="https://github.com/SecCodeSmith" class="btn btn-primary">
|
|
<i class="fab fa-github me-2"></i>View All Projects on GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Details Modal for ShadowGuardian -->
|
|
<div class="modal fade" id="shadowguardianModal" tabindex="-1" aria-labelledby="shadowguardianModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="shadowguardianModalLabel">ShadowGuardian: Secure IoT Monitoring System</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-4">
|
|
<img src="/api/placeholder/1000/400" class="img-fluid rounded mb-3" alt="ShadowGuardian Project">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<p>ShadowGuardian is a comprehensive security monitoring system designed for both residential and commercial applications. Built on a foundation of STM32 microcontrollers, it provides reliable, secure monitoring with extremely low power consumption, allowing for battery operation of up to 2 years.</p>
|
|
<p>The system features end-to-end encryption for all communications, ensuring that sensitive security data remains private. Its modular architecture allows for easy expansion with additional sensors and integration with existing home automation systems.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Project Overview</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p><strong>Duration:</strong> 6 months</p>
|
|
<p><strong>Role:</strong> Lead Developer</p>
|
|
<p><strong>Status:</strong> Completed</p>
|
|
<p><strong>Client:</strong> ConnectedWorld Technologies</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="mt-4 mb-3">Key Features</h4>
|
|
<ul class="features-list">
|
|
<li>Military-grade AES-256 encryption for all data transmission</li>
|
|
<li>Ultra-low power consumption with intelligent sleep modes</li>
|
|
<li>Modular sensor architecture supporting motion, contact, glass-break, and environmental sensors</li>
|
|
<li>Local processing to reduce cloud dependency and improve response times</li>
|
|
<li>Mesh networking for extended coverage without Wi-Fi dependencies</li>
|
|
<li>Real-time notifications via mobile app (iOS and Android)</li>
|
|
<li>Integration with popular home automation platforms including HomeKit, Google Home, and Alexa</li>
|
|
<li>Tamper detection and notification system</li>
|
|
<li>Optional cellular backup connection for critical deployments</li>
|
|
</ul>
|
|
|
|
<h4 class="mt-4 mb-3">Technologies Used</h4>
|
|
<div class="mb-4">
|
|
<span class="tech-chip">
|
|
<i class="devicon-cplusplus-plain tech-chip-icon"></i>
|
|
<span class="tech-chip-name">C++</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="fas fa-microchip tech-chip-icon"></i>
|
|
<span class="tech-chip-name">STM32F4</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="fas fa-wifi tech-chip-icon"></i>
|
|
<span class="tech-chip-name">ESP32</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="fas fa-shield-alt tech-chip-icon"></i>
|
|
<span class="tech-chip-name">AES-256</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="devicon-react-original tech-chip-icon"></i>
|
|
<span class="tech-chip-name">React Native</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="fas fa-broadcast-tower tech-chip-icon"></i>
|
|
<span class="tech-chip-name">BLE 5.0</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="fas fa-network-wired tech-chip-icon"></i>
|
|
<span class="tech-chip-name">Zigbee</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="fas fa-server tech-chip-icon"></i>
|
|
<span class="tech-chip-name">Node.js</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="fas fa-database tech-chip-icon"></i>
|
|
<span class="tech-chip-name">PostgreSQL</span>
|
|
</span>
|
|
<span class="tech-chip">
|
|
<i class="devicon-docker-plain tech-chip-icon"></i>
|
|
<span class="tech-chip-name">Docker</span>
|
|
</span>
|
|
</div>
|
|
|
|
<h4 class="mt-4 mb-3">Gallery</h4>
|
|
<div class="row">
|
|
<div class="col-md-4 col-6">
|
|
<div class="gallery-item">
|
|
<img src="/api/placeholder/300/300" alt="ShadowGuardian Hub" class="gallery-image">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-6">
|
|
<div class="gallery-item">
|
|
<img src="/api/placeholder/300/300" alt="ShadowGuardian Sensor" class="gallery-image">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-6">
|
|
<div class="gallery-item">
|
|
<img src="/api/placeholder/300/300" alt="Mobile App Dashboard" class="gallery-image">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-6">
|
|
<div class="gallery-item">
|
|
<img src="/api/placeholder/300/300" alt="Door Sensor Installation" class="gallery-image">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-6">
|
|
<div class="gallery-item">
|
|
<img src="/api/placeholder/300/300" alt="System Architecture Diagram" class="gallery-image">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-6">
|
|
<div class="gallery-item">
|
|
<img src="/api/placeholder/300/300" alt="PCB Design" class="gallery-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fab fa-github btn-icon"></i>Source Code
|
|
</a>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fas fa-external-link-alt btn-icon"></i>Live Demo
|
|
</a>
|
|
<a href="#" class="btn btn-outline-secondary">
|
|
<i class="fas fa-book btn-icon"></i>Documentation
|
|
</a>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Section -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<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>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Project filtering
|
|
const filterButtons = document.querySelectorAll('.filter-button');
|
|
const projectCards = document.querySelectorAll('[data-category]');
|
|
|
|
// Add ember particle effects
|
|
function createEmbers() {
|
|
const projectImages = document.querySelectorAll('.card-img-top');
|
|
|
|
projectImages.forEach(image => {
|
|
for (let i = 0; i < 5; i++) {
|
|
const ember = document.createElement('div');
|
|
ember.className = 'ember-particle';
|
|
|
|
const x = Math.random() * 100;
|
|
const delay = Math.random() * 3;
|
|
|
|
ember.style.left = `${x}%`;
|
|
ember.style.bottom = '0';
|
|
ember.style.animationDelay = `${delay}s`;
|
|
ember.style.animationDuration = `${3 + Math.random() * 2}s`;
|
|
|
|
image.parentElement.appendChild(ember);
|
|
}
|
|
});
|
|
}
|
|
|
|
createEmbers();
|
|
|
|
// Filter functionality
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const filterValue = this.getAttribute('data-filter');
|
|
|
|
// Remove active class from all buttons
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
// Add active class to clicked button
|
|
this.classList.add('active');
|
|
|
|
// Filter projects
|
|
projectCards.forEach(card => {
|
|
const categories = card.getAttribute('data-category').split(',');
|
|
|
|
if (filterValue === 'all' || categories.includes(filterValue)) {
|
|
card.style.display = '';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |