seccodesmith/Template-of-portfolio-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add template

Browse Source
This commit is contained in:
SecCodeSmith
2025-05-12 09:37:25 +02:00
parent fd0bffe7e4
commit 60210e17aa
11 changed files with 7602 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
404.html
+355
View File
@@ -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>