Add template #1
@@ -0,0 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SecCodeSmith - Forge Error</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">
|
||||
<!-- 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);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--primary-dark);
|
||||
color: var(--text-light);
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%230a0a0a"/><path d="M0 20L20 0L40 20L60 0L80 20L100 0V20L80 40L100 60L80 80L100 100H80L60 80L40 100H20L0 80V60L20 40L0 20Z" fill="%231a1a1a" fill-opacity="0.3"/></svg>');
|
||||
background-size: 300px;
|
||||
font-family: 'Cinzel', serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 8rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(to right, var(--accent-fire), var(--text-light));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: var(--glow-effect);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-ash);
|
||||
margin-bottom: 2rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.broken-sword {
|
||||
font-size: 5rem;
|
||||
color: var(--accent-fire);
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.broken-sword::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background: var(--accent-fire);
|
||||
transform: rotate(-45deg);
|
||||
top: 60%;
|
||||
left: 45%;
|
||||
box-shadow: var(--glow-effect);
|
||||
}
|
||||
|
||||
.home-button {
|
||||
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;
|
||||
color: var(--text-light);
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.home-button::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: 0.6s;
|
||||
}
|
||||
|
||||
.home-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.ember-particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ember {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: var(--accent-fire);
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
animation: float 10s linear infinite;
|
||||
box-shadow: 0 0 5px var(--accent-fire);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(100vh) translateX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-20vh) translateX(var(--x));
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.binary-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
opacity: 0.07;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.binary-line {
|
||||
position: absolute;
|
||||
font-family: 'Fira Code', monospace;
|
||||
color: var(--accent-fire);
|
||||
font-size: 1rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.error-code-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.error-code-container::before,
|
||||
.error-code-container::after {
|
||||
content: "<";
|
||||
position: absolute;
|
||||
color: var(--accent-fire);
|
||||
opacity: 0.6;
|
||||
font-size: 6rem;
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.error-code-container::before {
|
||||
left: -4rem;
|
||||
}
|
||||
|
||||
.error-code-container::after {
|
||||
content: "/>";
|
||||
right: -6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.error-code {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.broken-sword {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.error-code-container::before,
|
||||
.error-code-container::after {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.error-code-container::before {
|
||||
left: -3rem;
|
||||
}
|
||||
|
||||
.error-code-container::after {
|
||||
right: -4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.error-code {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.broken-sword {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.error-code-container::before,
|
||||
.error-code-container::after {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.error-code-container::before {
|
||||
left: -2rem;
|
||||
}
|
||||
|
||||
.error-code-container::after {
|
||||
right: -3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="binary-bg">
|
||||
<div class="binary-line" style="top: 20%; left: 10%;">01000101 01110010 01110010 01101111 01110010</div>
|
||||
<div class="binary-line" style="bottom: 30%; right: 15%;">01001110 01101111 01110100 01000110 01101111 01110101 01101110 01100100</div>
|
||||
<div class="binary-line" style="top: 50%; left: 80%;">01000110 01100001 01101001 01101100 01100101 01100100</div>
|
||||
<div class="binary-line" style="bottom: 10%; left: 40%;">01000011 01101111 01100100 01100101 01000100 01100001 01101101 01100001 01100111 01100101 01100100</div>
|
||||
</div>
|
||||
|
||||
<div class="ember-particles" id="ember-particles"></div>
|
||||
|
||||
<div class="container text-center error-container">
|
||||
<div class="broken-sword">
|
||||
<i class="fas fa-khanda"></i>
|
||||
</div>
|
||||
|
||||
<div class="error-code-container">
|
||||
<h1 class="error-code">404</h1>
|
||||
</div>
|
||||
|
||||
<h2 class="error-title">The Artifact Was Not Found</h2>
|
||||
|
||||
<p class="error-text">The digital creation you seek has either been consumed by the void, moved to a different realm, or was never forged in the first place. Check your path and try again, or return to the main forge.</p>
|
||||
|
||||
<a href="index.html" class="home-button">
|
||||
<i class="fas fa-home"></i> Return to the Forge
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const emberContainer = document.getElementById('ember-particles');
|
||||
const emberCount = 50;
|
||||
|
||||
for (let i = 0; i < emberCount; i++) {
|
||||
createEmber();
|
||||
}
|
||||
|
||||
function createEmber() {
|
||||
const ember = document.createElement('div');
|
||||
ember.className = 'ember';
|
||||
|
||||
// Random position
|
||||
const startPosX = Math.random() * window.innerWidth;
|
||||
|
||||
// Random x-axis drift
|
||||
const xDrift = (Math.random() - 0.5) * 200;
|
||||
ember.style.setProperty('--x', `${xDrift}px`);
|
||||
|
||||
ember.style.left = `${startPosX}px`;
|
||||
ember.style.bottom = '0';
|
||||
|
||||
// Random size
|
||||
const size = Math.random() * 3 + 1;
|
||||
ember.style.width = `${size}px`;
|
||||
ember.style.height = `${size}px`;
|
||||
|
||||
// Random animation duration
|
||||
const duration = Math.random() * 7 + 3;
|
||||
ember.style.animationDuration = `${duration}s`;
|
||||
|
||||
// Random animation delay
|
||||
const delay = Math.random() * 5;
|
||||
ember.style.animationDelay = `${delay}s`;
|
||||
|
||||
emberContainer.appendChild(ember);
|
||||
|
||||
// Remove and recreate ember after animation
|
||||
setTimeout(() => {
|
||||
ember.remove();
|
||||
createEmber();
|
||||
}, (duration + delay) * 1000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+1167
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
+1637
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,914 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SecCodeSmith - The Arcane Chronicles</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);
|
||||
}
|
||||
|
||||
/* Card styling */
|
||||
.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;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
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;
|
||||
}
|
||||
|
||||
.featured-img {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title a {
|
||||
color: var(--text-light);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.card-title a:hover {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--text-ash);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.featured-card .card-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Meta items */
|
||||
.meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-right: 1rem;
|
||||
color: var(--text-ash);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
/* Read more link */
|
||||
.read-more {
|
||||
display: inline-block;
|
||||
color: var(--accent-fire);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.read-more::after {
|
||||
content: "→";
|
||||
margin-left: 5px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.read-more:hover::after {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.post-tag {
|
||||
display: inline-block;
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
color: var(--accent-fire);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.post-tag:hover {
|
||||
background-color: rgba(255, 100, 0, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar-widget {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 0.625rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--accent-fire);
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.search-form .form-control {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--card-border);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.search-form .form-control:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
|
||||
border-color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.search-form .btn {
|
||||
background-color: var(--accent-fire);
|
||||
border-color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.search-form .btn:hover {
|
||||
background-color: var(--accent-dragon);
|
||||
border-color: var(--accent-dragon);
|
||||
}
|
||||
|
||||
/* Lists in sidebar */
|
||||
.list-group-item {
|
||||
background-color: transparent;
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-ash);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-group-item:hover {
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
}
|
||||
|
||||
.list-group-item a {
|
||||
color: var(--text-ash);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-group-item a:hover {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.category-count {
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
color: var(--accent-fire);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Recent posts in sidebar */
|
||||
.recent-post-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.recent-post-item:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.recent-post-thumb {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.recent-post-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.recent-post-title {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.recent-post-title a {
|
||||
color: var(--text-ash);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.recent-post-title a:hover {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.recent-post-date {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.page-item .page-link {
|
||||
background-color: var(--card-bg);
|
||||
border-color: var(--card-border);
|
||||
color: var(--text-ash);
|
||||
}
|
||||
|
||||
.page-item .page-link:hover {
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
color: var(--accent-fire);
|
||||
border-color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
background-color: var(--accent-fire);
|
||||
border-color: var(--accent-fire);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.page-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.meta-items {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
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 active" 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>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="page-header text-center">
|
||||
<div class="container position-relative">
|
||||
<h1 class="page-title">The Arcane Chronicles</h1>
|
||||
<p class="page-subtitle mt-4">Insights, discoveries, and technical runes from the digital forge</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>
|
||||
|
||||
<!-- Blog Content -->
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<!-- Main Content -->
|
||||
<div class="col-lg-8">
|
||||
<!-- Featured Post -->
|
||||
<div class="card featured-card mb-5">
|
||||
<div class="position-relative">
|
||||
<img src="/api/placeholder/800/400" class="card-img-top featured-img" alt="Featured Post">
|
||||
<div class="featured-badge">
|
||||
<i class="fas fa-star"></i>
|
||||
<span>Featured</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<a href="blog-post.html">Summoning Digital Entities: Advanced STM32 Techniques for IoT Communication</a>
|
||||
</h2>
|
||||
<div class="d-flex meta-items mb-3">
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar-alt meta-icon"></i>
|
||||
<span>May 5, 2025</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-user meta-icon"></i>
|
||||
<span>SecCodeSmith</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-comments meta-icon"></i>
|
||||
<span>12 Comments</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Delve into the arcane arts of STM32 microcontroller programming as we explore advanced techniques for establishing robust communication between IoT devices. This comprehensive guide reveals how to optimize I2C, SPI, and UART protocols for maximum efficiency in your embedded systems projects. Discover the hidden potential of low-level hardware manipulation to create powerful connections between your digital familiars.
|
||||
</p>
|
||||
<a href="blog-post.html" class="read-more">Continue Reading</a>
|
||||
<div class="mt-3">
|
||||
<span class="post-tag">STM32</span>
|
||||
<span class="post-tag">Embedded</span>
|
||||
<span class="post-tag">IoT</span>
|
||||
<span class="post-tag">Communication Protocols</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Regular Posts -->
|
||||
<div class="row">
|
||||
<!-- Post 1 -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="position-relative">
|
||||
<img src="/api/placeholder/400/200" class="card-img-top" alt="Post Image">
|
||||
<div class="category-badge">Machine Learning</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="blog-post.html">Forging Neural Networks with PyTorch: A Blacksmith's Approach</a>
|
||||
</h3>
|
||||
<div class="meta-item mb-2">
|
||||
<i class="fas fa-calendar-alt meta-icon"></i>
|
||||
<span>April 28, 2025</span>
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Learn how to craft powerful neural networks using PyTorch, approaching the process with the precision and artistry of a master blacksmith. This tutorial combines theory with practical implementation.
|
||||
</p>
|
||||
<a href="blog-post.html" class="read-more">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 2 -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="position-relative">
|
||||
<img src="/api/placeholder/400/200" class="card-img-top" alt="Post Image">
|
||||
<div class="category-badge">C++</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="blog-post.html">The Dark Arts of Memory Management in C++</a>
|
||||
</h3>
|
||||
<div class="meta-item mb-2">
|
||||
<i class="fas fa-calendar-alt meta-icon"></i>
|
||||
<span>April 22, 2025</span>
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Explore the shadowy realm of manual memory management in C++. From smart pointers to custom allocators, master techniques that will prevent memory leaks and boost performance.
|
||||
</p>
|
||||
<a href="blog-post.html" class="read-more">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 3 -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="position-relative">
|
||||
<img src="/api/placeholder/400/200" class="card-img-top" alt="Post Image">
|
||||
<div class="category-badge">DevOps</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="blog-post.html">Docker Containment Spells: Isolating Digital Entities</a>
|
||||
</h3>
|
||||
<div class="meta-item mb-2">
|
||||
<i class="fas fa-calendar-alt meta-icon"></i>
|
||||
<span>April 15, 2025</span>
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Master the containment of digital entities with Docker. This guide covers advanced containerization techniques for creating isolated, reproducible environments for your applications.
|
||||
</p>
|
||||
<a href="blog-post.html" class="read-more">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 4 -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="position-relative">
|
||||
<img src="/api/placeholder/400/200" class="card-img-top" alt="Post Image">
|
||||
<div class="category-badge">Web Dev</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="blog-post.html">Blazor Incantations: Building Reactive Web UIs with .NET</a>
|
||||
</h3>
|
||||
<div class="meta-item mb-2">
|
||||
<i class="fas fa-calendar-alt meta-icon"></i>
|
||||
<span>April 8, 2025</span>
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Harness the power of Blazor to create dynamic, responsive web interfaces using C# and .NET. Learn component-based architecture and state management for modern web applications.
|
||||
</p>
|
||||
<a href="blog-post.html" class="read-more">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 5 -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="position-relative">
|
||||
<img src="/api/placeholder/400/200" class="card-img-top" alt="Post Image">
|
||||
<div class="category-badge">IoT</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="blog-post.html">ESP32 Ethereal Connections: Building a Wireless Sensor Network</a>
|
||||
</h3>
|
||||
<div class="meta-item mb-2">
|
||||
<i class="fas fa-calendar-alt meta-icon"></i>
|
||||
<span>March 30, 2025</span>
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Create a mesh of interconnected ESP32 devices that communicate wirelessly. This tutorial covers WiFi, Bluetooth, and custom RF protocols for building resilient IoT systems.
|
||||
</p>
|
||||
<a href="blog-post.html" class="read-more">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post 6 -->
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="position-relative">
|
||||
<img src="/api/placeholder/400/200" class="card-img-top" alt="Post Image">
|
||||
<div class="category-badge">Data Analysis</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
<a href="blog-post.html">Pandas Alchemy: Transforming Raw Data into Arcane Knowledge</a>
|
||||
</h3>
|
||||
<div class="meta-item mb-2">
|
||||
<i class="fas fa-calendar-alt meta-icon"></i>
|
||||
<span>March 22, 2025</span>
|
||||
</div>
|
||||
<p class="card-text">
|
||||
Master the art of data manipulation with Pandas. From cleaning messy datasets to advanced aggregation techniques, learn to extract meaningful insights from chaotic information.
|
||||
</p>
|
||||
<a href="blog-post.html" class="read-more">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav class="mt-5" aria-label="Blog pagination">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<i class="fas fa-angle-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<i class="fas fa-angle-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4 sidebar">
|
||||
<!-- Search Widget -->
|
||||
<div class="sidebar-widget">
|
||||
<h3 class="widget-title">Search</h3>
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search articles...">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Categories Widget -->
|
||||
<div class="sidebar-widget">
|
||||
<h3 class="widget-title">Categories</h3>
|
||||
<div class="list-group">
|
||||
<div class="list-group-item">
|
||||
<a href="#">
|
||||
<span>Embedded Systems</span>
|
||||
<span class="category-count">8</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<a href="#">
|
||||
<span>Machine Learning</span>
|
||||
<span class="category-count">5</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<a href="#">
|
||||
<span>Web Development</span>
|
||||
<span class="category-count">7</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<a href="#">
|
||||
<span>IoT Projects</span>
|
||||
<span class="category-count">4</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<a href="#">
|
||||
<span>Data Analysis</span>
|
||||
<span class="category-count">6</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<a href="#">
|
||||
<span>DevOps</span>
|
||||
<span class="category-count">3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Posts Widget -->
|
||||
<div class="sidebar-widget">
|
||||
<h3 class="widget-title">Recent Posts</h3>
|
||||
<div class="recent-posts">
|
||||
<div class="recent-post-item">
|
||||
<img src="/api/placeholder/100/100" class="recent-post-thumb" alt="Recent Post">
|
||||
<div class="recent-post-info">
|
||||
<h4 class="recent-post-title">
|
||||
<a href="blog-post.html">Summoning Digital Entities: Advanced STM32 Techniques</a>
|
||||
</h4>
|
||||
<span class="recent-post-date">May 5, 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post-item">
|
||||
<img src="/api/placeholder/100/100" class="recent-post-thumb" alt="Recent Post">
|
||||
<div class="recent-post-info">
|
||||
<h4 class="recent-post-title">
|
||||
<a href="blog-post.html">Forging Neural Networks with PyTorch</a>
|
||||
</h4>
|
||||
<span class="recent-post-date">April 28, 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-post-item">
|
||||
<img src="/api/placeholder/100/100" class="recent-post-thumb" alt="Recent Post">
|
||||
<div class="recent-post-info">
|
||||
<h4 class="recent-post-title">
|
||||
<a href="blog-post.html">The Dark Arts of Memory Management in C++</a>
|
||||
</h4>
|
||||
<span class="recent-post-date">April 22, 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags Widget -->
|
||||
<div class="sidebar-widget">
|
||||
<h3 class="widget-title">Popular Tags</h3>
|
||||
<div>
|
||||
<span class="post-tag">Python</span>
|
||||
<span class="post-tag">STM32</span>
|
||||
<span class="post-tag">C++</span>
|
||||
<span class="post-tag">Machine Learning</span>
|
||||
<span class="post-tag">ESP32</span>
|
||||
<span class="post-tag">Docker</span>
|
||||
<span class="post-tag">.NET</span>
|
||||
<span class="post-tag">IoT</span>
|
||||
<span class="post-tag">Embedded</span>
|
||||
<span class="post-tag">Blazor</span>
|
||||
<span class="post-tag">Data Analysis</span>
|
||||
</div>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
+1023
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
+767
@@ -0,0 +1,767 @@
|
||||
<!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>
|
||||
+1112
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,627 @@
|
||||
: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;
|
||||
--code-bg: #1e1e1e;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Fira+Code:wght@400;600&display=swap');
|
||||
|
||||
body {
|
||||
background-color: var(--primary-dark);
|
||||
color: var(--text-light);
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%230a0a0a"/><path d="M0 20L20 0L40 20L60 0L80 20L100 0V20L80 40L100 60L80 80L100 100H80L60 80L40 100H20L0 80V60L20 40L0 20Z" fill="%231a1a1a" fill-opacity="0.3"/></svg>');
|
||||
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;
|
||||
}
|
||||
|
||||
/* Navbar Styles */
|
||||
.navbar {
|
||||
border-bottom: 1px solid rgba(255, 100, 0, 0.3);
|
||||
background-color: rgba(10, 10, 10, 0.95);
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.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-dragon {
|
||||
font-size: 1.2rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -12px;
|
||||
color: var(--accent-dragon);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-light);
|
||||
font-size: 1.1rem;
|
||||
position: relative;
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
padding-top: 7rem;
|
||||
padding-bottom: 3rem;
|
||||
text-align: center;
|
||||
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-header-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.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-accent-top {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-accent-top::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;
|
||||
}
|
||||
|
||||
.card-accent-left {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-accent-left::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 70%;
|
||||
top: 15%;
|
||||
left: 0;
|
||||
background: linear-gradient(to bottom, var(--accent-dragon), var(--accent-fire));
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--text-light);
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--text-ash);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
|
||||
border: none;
|
||||
color: var(--text-light);
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(139, 0, 0, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(139, 0, 0, 0.5);
|
||||
background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
|
||||
border: 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: 0.6s;
|
||||
}
|
||||
|
||||
.btn-primary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 1px solid var(--accent-fire);
|
||||
color: var(--accent-fire);
|
||||
background-color: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
color: var(--accent-fire);
|
||||
border-color: var(--accent-fire);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
.form-control, .form-select {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--card-border);
|
||||
color: var(--text-light);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select: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;
|
||||
}
|
||||
|
||||
/* Tech Icons */
|
||||
.tech-icon {
|
||||
color: var(--accent-fire);
|
||||
font-size: 1.2rem;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.tech-item:hover {
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
color: var(--accent-fire);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Code Elements */
|
||||
pre, code {
|
||||
font-family: 'Fira Code', monospace;
|
||||
background-color: var(--code-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--accent-fire);
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Binary Line 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 1.5rem;
|
||||
border-top: 1px solid rgba(255, 100, 0, 0.2);
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-ash);
|
||||
margin: 0 0.5rem;
|
||||
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: 1.5rem;
|
||||
}
|
||||
|
||||
/* Animation for embers */
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100px) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Home Page Specific */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
|
||||
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;
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
|
||||
/* Projects Page Specific */
|
||||
.project-category {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background-color: rgba(139, 0, 0, 0.9);
|
||||
color: var(--text-light);
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.featured-badge {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
|
||||
color: var(--text-light);
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Blog Page Specific */
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-ash);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
color: var(--accent-fire);
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
color: var(--accent-fire);
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.post-tag:hover {
|
||||
background-color: rgba(255, 100, 0, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* About Page Specific */
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.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-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--accent-fire);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
box-shadow: var(--glow-effect);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.timeline::before {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
padding-left: 60px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) .timeline-content::before,
|
||||
.timeline-item:nth-child(even) .timeline-content::before {
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) .timeline-dot,
|
||||
.timeline-item:nth-child(even) .timeline-dot {
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact Page Specific */
|
||||
.contact-info-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 100, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent-fire);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.map-frame {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: none;
|
||||
background-color: var(--card-bg);
|
||||
filter: grayscale(90%) invert(92%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
/* Response Utilities */
|
||||
@media (max-width: 768px) {
|
||||
.title-main {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.title-main {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user