1167 lines
46 KiB
HTML
1167 lines
46 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 - About the Forgemaster</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);
|
|
}
|
|
|
|
/* Section styling */
|
|
.section-title {
|
|
font-size: 2.25rem;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
padding-bottom: 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 3px;
|
|
background: var(--accent-fire);
|
|
bottom: 0;
|
|
left: 0;
|
|
box-shadow: var(--glow-effect);
|
|
}
|
|
|
|
/* Profile image */
|
|
.profile-image {
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 3px solid rgba(255, 100, 0, 0.3);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
position: relative;
|
|
}
|
|
|
|
.profile-image::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, rgba(255, 100, 0, 0.2), transparent);
|
|
z-index: 1;
|
|
}
|
|
|
|
.profile-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: contrast(1.1) brightness(0.9);
|
|
}
|
|
|
|
/* Card styling */
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
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.4);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.card-body {
|
|
color: var(--text-ash);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Introduction styling */
|
|
.intro-text {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
color: var(--text-ash);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.intro-text p {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.intro-text strong {
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.intro-text .accent {
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
/* Connect links */
|
|
.connect-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 20px;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
color: var(--text-light);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid var(--card-border);
|
|
margin-right: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.connect-link:hover {
|
|
background-color: rgba(255, 100, 0, 0.1);
|
|
transform: translateY(-3px);
|
|
border-color: var(--accent-fire);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.connect-icon {
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
/* Value cards */
|
|
.value-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 1.875rem;
|
|
border: 1px solid var(--card-border);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.value-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(255, 100, 0, 0.3);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.value-icon {
|
|
font-size: 2.5rem;
|
|
color: var(--accent-fire);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.value-title {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
display: inline-block;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.value-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 2px;
|
|
background: var(--accent-fire);
|
|
bottom: -5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.value-text {
|
|
color: var(--text-ash);
|
|
line-height: 1.6;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* Skills card */
|
|
.skill-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 1.875rem;
|
|
border: 1px solid var(--card-border);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.skill-card:hover {
|
|
transform: translateY(-10px);
|
|
border-color: rgba(255, 100, 0, 0.3);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.skill-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 5px;
|
|
top: 0;
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire));
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.skill-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 1.25rem;
|
|
padding-bottom: 0.625rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.skill-icon {
|
|
font-size: 2rem;
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
.skill-title {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 0;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.skill-check {
|
|
color: var(--accent-fire);
|
|
margin-right: 0.625rem;
|
|
}
|
|
|
|
/* Timeline */
|
|
.timeline {
|
|
position: relative;
|
|
padding: 0;
|
|
margin-top: 3rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.timeline:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, var(--accent-fire), var(--accent-dragon), rgba(255, 100, 0, 0.2));
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 3rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.timeline-item:nth-child(odd) .timeline-content {
|
|
margin-left: auto;
|
|
padding-left: 3rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.timeline-item:nth-child(even) .timeline-content {
|
|
margin-right: auto;
|
|
padding-right: 3rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.timeline-dot {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: var(--accent-fire);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
box-shadow: var(--glow-effect);
|
|
z-index: 2;
|
|
}
|
|
|
|
.timeline-date {
|
|
display: inline-block;
|
|
font-size: 0.9rem;
|
|
background-color: rgba(255, 100, 0, 0.1);
|
|
color: var(--accent-fire);
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.timeline-title {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 0.625rem;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.timeline-text {
|
|
color: var(--text-ash);
|
|
line-height: 1.6;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.timeline-content {
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--card-border);
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
width: 45%;
|
|
}
|
|
|
|
.timeline-content:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(255, 100, 0, 0.3);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Testimonials */
|
|
.testimonial {
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 1.875rem;
|
|
margin-bottom: 1.875rem;
|
|
border: 1px solid var(--card-border);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.testimonial:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(255, 100, 0, 0.3);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.testimonial-content {
|
|
padding-left: 1.25rem;
|
|
border-left: 3px solid var(--accent-fire);
|
|
font-style: italic;
|
|
color: var(--text-ash);
|
|
margin-bottom: 1.25rem;
|
|
line-height: 1.7;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.author-avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.author-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.author-name {
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.author-title {
|
|
color: var(--text-ash);
|
|
font-size: 0.9rem;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* Contact form */
|
|
.form-control {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--card-border);
|
|
color: var(--text-light);
|
|
padding: 0.75rem 0.9375rem;
|
|
}
|
|
|
|
.form-control:focus {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border-color: var(--accent-fire);
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.form-label {
|
|
color: var(--text-ash);
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-text {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.timeline:before {
|
|
left: 2rem;
|
|
}
|
|
|
|
.timeline-item:nth-child(odd) .timeline-content,
|
|
.timeline-item:nth-child(even) .timeline-content {
|
|
width: calc(100% - 3rem);
|
|
margin-left: 3rem;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.timeline-dot {
|
|
left: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.intro-text {
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.page-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.testimonial-author {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.author-info {
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</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 active" 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>
|
|
|
|
<!-- Page Header -->
|
|
<section class="page-header text-center">
|
|
<div class="container position-relative">
|
|
<h1 class="page-title">The Forgemaster</h1>
|
|
<p class="page-subtitle mt-4">Crafting digital solutions from the raw materials 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>
|
|
|
|
<!-- Introduction Section -->
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<h2 class="section-title">The Master Behind the Mask</h2>
|
|
<div class="profile-image">
|
|
<img src="/api/placeholder/400/400" alt="SecCodeSmith">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div class="intro-text">
|
|
<p>Greetings, seeker of digital arcana. I am <strong>SecCodeSmith</strong>, a master craftsman of code and conductor of silicon. For over a decade, I have been forging robust solutions across the realms of embedded systems, machine learning, and web development.</p>
|
|
|
|
<p>My journey began in the depths of <span class="accent">low-level programming</span>, where I learned to bend hardware to my will through carefully crafted instructions. From the arcane energies of microcontrollers to the vast landscapes of cloud architecture, I have honed my skills to create solutions that stand the test of time.</p>
|
|
|
|
<p>What distinguishes my work is the <strong>meticulous attention to security</strong> and performance. Like a blacksmith who understands that a sword's true value lies not just in its edge but in the integrity of its steel, I craft code that is not merely functional but resilient against the chaotic forces of the digital wilderness.</p>
|
|
|
|
<p>Beyond the technical realms, I am a devoted practitioner of open-source sorcery, contributing to projects that empower others to create and innovate. When not at the forge, I can be found exploring the ancient texts of computer science, delving into new programming languages, or mentoring apprentices on their own journey.</p>
|
|
|
|
<div class="mt-4">
|
|
<a href="#" class="connect-link">
|
|
<i class="fab fa-github connect-icon"></i>
|
|
<span>GitHub</span>
|
|
</a>
|
|
<a href="#" class="connect-link">
|
|
<i class="fab fa-linkedin connect-icon"></i>
|
|
<span>LinkedIn</span>
|
|
</a>
|
|
<a href="#" class="connect-link">
|
|
<i class="fab fa-twitter connect-icon"></i>
|
|
<span>Twitter</span>
|
|
</a>
|
|
<a href="#" class="connect-link">
|
|
<i class="fas fa-envelope connect-icon"></i>
|
|
<span>Email</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Core Values Section -->
|
|
<section class="py-5 bg-dark">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2 class="section-title">Forging Principles</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="value-card h-100">
|
|
<div class="value-icon">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<h3 class="value-title">Security by Design</h3>
|
|
<p class="value-text">Security is not an afterthought but the very foundation upon which robust systems are built. Every line of code is crafted with defensive principles in mind.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="value-card h-100">
|
|
<div class="value-icon">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
</div>
|
|
<h3 class="value-title">Performance Optimization</h3>
|
|
<p class="value-text">Like a finely-honed blade, code should be both effective and efficient. I meticulously optimize every component for maximum speed and minimal resource consumption.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="value-card h-100">
|
|
<div class="value-icon">
|
|
<i class="fas fa-gem"></i>
|
|
</div>
|
|
<h3 class="value-title">Elegant Simplicity</h3>
|
|
<p class="value-text">True mastery is revealed not in complexity but in elegant simplicity. I strive to create solutions that are accessible, maintainable, and beautifully crafted.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="value-card h-100">
|
|
<div class="value-icon">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</div>
|
|
<h3 class="value-title">Continuous Evolution</h3>
|
|
<p class="value-text">The digital landscape changes with the seasons. I embrace continuous learning and adaptation, integrating new techniques and technologies to forge ever-better solutions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Technical Expertise Section -->
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2 class="section-title">Arsenal of Expertise</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="skill-card h-100">
|
|
<div class="skill-header">
|
|
<div class="skill-icon">
|
|
<i class="fas fa-microchip"></i>
|
|
</div>
|
|
<h3 class="skill-title">Embedded Systems</h3>
|
|
</div>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>STM32 microcontroller programming (I2C, SPI, UART)</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>ESP32 wireless solutions</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Firmware development with C/C++</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Raspberry Pi and Pico-SDK integration</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>RTOS implementation</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="skill-card h-100">
|
|
<div class="skill-header">
|
|
<div class="skill-icon">
|
|
<i class="fas fa-brain"></i>
|
|
</div>
|
|
<h3 class="skill-title">AI & Data Analysis</h3>
|
|
</div>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Machine learning with PyTorch</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Data manipulation with Pandas</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Predictive modeling via Scikit-learn</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Computer vision with Scikit-image</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Edge AI deployment</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="skill-card h-100">
|
|
<div class="skill-header">
|
|
<div class="skill-icon">
|
|
<i class="fas fa-window-maximize"></i>
|
|
</div>
|
|
<h3 class="skill-title">Web Development</h3>
|
|
</div>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Backend development with ASP.NET</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Database management with Entity Framework</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Frontend frameworks: Blazor, React</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Responsive design with Bootstrap</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Python-based web solutions with Django</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="skill-card h-100">
|
|
<div class="skill-header">
|
|
<div class="skill-icon">
|
|
<i class="fas fa-server"></i>
|
|
</div>
|
|
<h3 class="skill-title">DevOps & Infrastructure</h3>
|
|
</div>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Containerization with Docker</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Multi-container orchestration via Docker-compose</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Linux server administration</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>CI/CD pipeline implementation</span>
|
|
</li>
|
|
<li class="mb-2">
|
|
<i class="fas fa-check skill-check"></i>
|
|
<span>Build system configuration with CMake</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Professional Journey Section -->
|
|
<section class="py-5 bg-dark">
|
|
<div class="container">
|
|
<div class="row mb-5">
|
|
<div class="col-12 text-center">
|
|
<h2 class="section-title">The Smith's Journey</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<ul class="timeline">
|
|
<!-- Timeline Item 1 -->
|
|
<li class="timeline-item clearfix">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-date">2021 - Present</div>
|
|
<h3 class="timeline-title">Lead Systems Engineer</h3>
|
|
<p class="timeline-text">Architecting secure IoT solutions for critical infrastructure, combining embedded firmware expertise with cloud integration. Leading a team of 8 engineers across hardware and software disciplines.</p>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Timeline Item 2 -->
|
|
<li class="timeline-item clearfix">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-date">2018 - 2021</div>
|
|
<h3 class="timeline-title">Senior Embedded Developer</h3>
|
|
<p class="timeline-text">Developed firmware for next-generation industrial control systems. Implemented machine learning capabilities on resource-constrained devices, reducing predictive maintenance false positives by 87%.</p>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Timeline Item 3 -->
|
|
<li class="timeline-item clearfix">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-date">2015 - 2018</div>
|
|
<h3 class="timeline-title">Full-Stack Developer</h3>
|
|
<p class="timeline-text">Created web applications and APIs for data visualization and analysis. Specialized in integrating hardware systems with web interfaces, enabling real-time monitoring of distributed sensor networks.</p>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Timeline Item 4 -->
|
|
<li class="timeline-item clearfix">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-date">2012 - 2015</div>
|
|
<h3 class="timeline-title">Firmware Engineer</h3>
|
|
<p class="timeline-text">Designed and implemented firmware for medical devices, focusing on reliability and safety-critical operations. Reduced power consumption by 35% while improving processing performance.</p>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Timeline Item 5 -->
|
|
<li class="timeline-item clearfix">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-date">2010 - 2012</div>
|
|
<h3 class="timeline-title">Junior Software Developer</h3>
|
|
<p class="timeline-text">Began the journey into the digital forge, working on embedded C programming for consumer electronics. Learned the fundamentals of hardware-software integration and real-time systems.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials Section -->
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2 class="section-title">Tales from the Guild</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-8 mx-auto">
|
|
<!-- Testimonial 1 -->
|
|
<div class="testimonial">
|
|
<div class="testimonial-content">
|
|
"Working with SecCodeSmith transformed our approach to IoT security. Their expertise in both embedded systems and network security allowed us to create a solution that our clients trust implicitly. The attention to detail and foresight regarding potential vulnerabilities saved us from what could have been catastrophic security incidents."
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3 testimonial-author">
|
|
<div class="author-avatar">
|
|
<img src="/api/placeholder/60/60" alt="Alexandra Foster">
|
|
</div>
|
|
<div class="author-info">
|
|
<h4 class="author-name">Alexandra Foster</h4>
|
|
<div class="author-title">CTO, ConnectedWorld Technologies</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial 2 -->
|
|
<div class="testimonial">
|
|
<div class="testimonial-content">
|
|
"The custom firmware developed by SecCodeSmith for our industrial controllers exceeded all expectations. Not only was the code incredibly efficient, but the documentation was meticulous—something rare in our industry. Three years later, we're still building upon that solid foundation with minimal issues."
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3 testimonial-author">
|
|
<div class="author-avatar">
|
|
<img src="/api/placeholder/60/60" alt="Marcus Chen">
|
|
</div>
|
|
<div class="author-info">
|
|
<h4 class="author-name">Marcus Chen</h4>
|
|
<div class="author-title">Lead Engineer, Precision Automation Inc.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial 3 -->
|
|
<div class="testimonial">
|
|
<div class="testimonial-content">
|
|
"I've collaborated with numerous developers over my 20-year career, but SecCodeSmith stands apart for their ability to bridge the gap between theoretical concepts and practical implementation. Their machine learning models for anomaly detection operate efficiently even on our limited hardware, which competitors claimed was impossible."
|
|
</div>
|
|
<div class="d-flex align-items-center gap-3 testimonial-author">
|
|
<div class="author-avatar">
|
|
<img src="/api/placeholder/60/60" alt="Sophia Rodriguez">
|
|
</div>
|
|
<div class="author-info">
|
|
<h4 class="author-name">Sophia Rodriguez</h4>
|
|
<div class="author-title">Research Director, Advanced Sensing Lab</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Form Section -->
|
|
<section class="py-5 bg-dark">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-12 text-center">
|
|
<h2 class="section-title">Summon the Smith</h2>
|
|
<p class="text-muted mb-4">Send a message to the forge and let's craft something extraordinary together</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6 mx-auto">
|
|
<div class="card">
|
|
<div class="card-body p-4">
|
|
<form>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="name" class="form-label">Your Name</label>
|
|
<input type="text" class="form-control" id="name" placeholder="Enter your name">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="email" class="form-label">Your Email</label>
|
|
<input type="email" class="form-control" id="email" placeholder="Enter your email">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="subject" class="form-label">Subject</label>
|
|
<input type="text" class="form-control" id="subject" placeholder="What's this regarding?">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Your Message</label>
|
|
<textarea class="form-control" id="message" rows="6" placeholder="Describe your project or inquiry..."></textarea>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane me-2"></i> Send Message
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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>
|
|
</body>
|
|
</html> |