1498 lines
60 KiB
HTML
1498 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Daniel Nagel - Bewerbungsportfolio | Industrie-Elektrotechnik Meister</title>
|
||
<meta name="description"
|
||
content="Bewerbungsportfolio von Daniel Nagel - Staatlich geprüfter Elektrotechnik Meister. SPS-Programmierung, Automatisierung, Linux Administration.">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
||
rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0a0a0f;
|
||
--bg-secondary: #12121a;
|
||
--bg-card: #1a1a25;
|
||
--bg-hover: #222230;
|
||
--accent: #00d4aa;
|
||
--accent-dim: #00d4aa20;
|
||
--accent-glow: #00d4aa40;
|
||
--text-primary: #f0f0f5;
|
||
--text-secondary: #a0a0b0;
|
||
--text-muted: #606070;
|
||
--border: #2a2a3a;
|
||
--sidebar-width: 300px;
|
||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--bg-primary);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--border);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--accent);
|
||
}
|
||
|
||
.app {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.sidebar {
|
||
width: var(--sidebar-width);
|
||
background: var(--bg-secondary);
|
||
border-right: 1px solid var(--border);
|
||
position: fixed;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 2rem;
|
||
z-index: 100;
|
||
transition: var(--transition);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar-profile {
|
||
text-align: center;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.profile-img-container {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.profile-img {
|
||
width: 140px;
|
||
height: 140px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 3px solid var(--accent);
|
||
box-shadow: 0 0 30px var(--accent-glow);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.profile-img-container::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -5px;
|
||
border-radius: 50%;
|
||
border: 2px solid transparent;
|
||
border-top-color: var(--accent);
|
||
border-right-color: var(--accent);
|
||
animation: spin 8s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.profile-img:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 0 50px var(--accent-glow);
|
||
}
|
||
|
||
.sidebar-name {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.25rem;
|
||
background: linear-gradient(135deg, var(--text-primary), var(--accent));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.sidebar-title {
|
||
font-size: 0.875rem;
|
||
color: var(--accent);
|
||
font-weight: 500;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.nav-section {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--text-muted);
|
||
margin-bottom: 1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-item {
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.nav-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem 1rem;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
border-radius: 0.5rem;
|
||
transition: var(--transition);
|
||
font-size: 0.9375rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
width: 100%;
|
||
text-align: left;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.nav-link:hover,
|
||
.nav-link.active {
|
||
background: var(--bg-hover);
|
||
color: var(--text-primary);
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.nav-link.active {
|
||
border-left: 3px solid var(--accent);
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.sidebar-bottom {
|
||
margin-top: auto;
|
||
padding-top: 2rem;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.75rem;
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
text-decoration: none;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.contact-item:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.social-links {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
margin-top: 1.5rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
.social-link {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 0.5rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.social-link:hover {
|
||
background: var(--accent-dim);
|
||
border-color: var(--accent);
|
||
color: var(--accent);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.main {
|
||
margin-left: var(--sidebar-width);
|
||
flex: 1;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.mobile-toggle {
|
||
display: none;
|
||
position: fixed;
|
||
top: 1rem;
|
||
left: 1rem;
|
||
z-index: 200;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-primary);
|
||
padding: 0.75rem;
|
||
border-radius: 0.5rem;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at 20% 50%, var(--accent-glow) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-grid {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
opacity: 0.3;
|
||
mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);
|
||
-webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 800px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1rem;
|
||
background: var(--accent-dim);
|
||
border: 1px solid var(--accent);
|
||
border-radius: 2rem;
|
||
color: var(--accent);
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
margin-bottom: 2rem;
|
||
animation: fadeInUp 0.6s ease-out;
|
||
}
|
||
|
||
.hero-badge .dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--accent);
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
margin-bottom: 1.5rem;
|
||
animation: fadeInUp 0.6s ease-out 0.1s both;
|
||
}
|
||
|
||
.hero h1 .highlight {
|
||
background: linear-gradient(135deg, var(--accent), #00f5d4);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: 1.25rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 2.5rem;
|
||
max-width: 600px;
|
||
line-height: 1.7;
|
||
animation: fadeInUp 0.6s ease-out 0.2s both;
|
||
}
|
||
|
||
.hero-buttons {
|
||
display: flex;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
animation: fadeInUp 0.6s ease-out 0.3s both;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.875rem 1.75rem;
|
||
border-radius: 0.75rem;
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: var(--transition);
|
||
cursor: pointer;
|
||
border: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--accent);
|
||
color: var(--bg-primary);
|
||
box-shadow: 0 4px 20px var(--accent-glow);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 30px var(--accent-glow);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--bg-card);
|
||
color: var(--text-primary);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--bg-hover);
|
||
border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.stats-bar {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 2rem;
|
||
padding: 3rem 4rem;
|
||
background: var(--bg-secondary);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
display: block;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
.section {
|
||
padding: 5rem 4rem;
|
||
max-width: 1200px;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.section-tag {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
background: var(--accent-dim);
|
||
color: var(--accent);
|
||
border-radius: 0.25rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section-desc {
|
||
color: var(--text-secondary);
|
||
font-size: 1.125rem;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.skills-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.skill-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 1rem;
|
||
padding: 2rem;
|
||
transition: var(--transition);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.skill-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--accent), transparent);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.skill-card:hover {
|
||
transform: translateY(-4px);
|
||
border-color: var(--accent);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.skill-card:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.skill-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: var(--accent-dim);
|
||
border-radius: 0.75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 1.25rem;
|
||
color: var(--accent);
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.skill-card h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.skill-card p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9375rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.skill-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.skill-tag {
|
||
padding: 0.25rem 0.75rem;
|
||
background: var(--bg-hover);
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.25rem;
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 2rem;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: var(--border);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-bottom: 3rem;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -2rem;
|
||
top: 0.5rem;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--bg-primary);
|
||
border: 2px solid var(--accent);
|
||
border-radius: 50%;
|
||
transform: translateX(-5px);
|
||
}
|
||
|
||
.timeline-item:hover::before {
|
||
background: var(--accent);
|
||
box-shadow: 0 0 20px var(--accent-glow);
|
||
}
|
||
|
||
.timeline-date {
|
||
font-size: 0.875rem;
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.timeline-title {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.timeline-company {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9375rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.timeline-desc {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9375rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.timeline-desc ul {
|
||
margin-top: 0.75rem;
|
||
padding-left: 1.25rem;
|
||
}
|
||
|
||
.timeline-desc li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.timeline-desc li::marker {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.cert-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.cert-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 1rem;
|
||
padding: 1.5rem;
|
||
transition: var(--transition);
|
||
display: flex;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.cert-card:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.cert-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
min-width: 48px;
|
||
background: var(--accent-dim);
|
||
border-radius: 0.75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--accent);
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.cert-content h3 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.cert-content p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.cert-year {
|
||
display: inline-block;
|
||
margin-top: 0.5rem;
|
||
padding: 0.25rem 0.5rem;
|
||
background: var(--bg-hover);
|
||
border-radius: 0.25rem;
|
||
font-size: 0.75rem;
|
||
color: var(--accent);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.hobby-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.hobby-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 1rem;
|
||
overflow: hidden;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.hobby-card:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.hobby-image {
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.hobby-content {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.hobby-content h3 {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.hobby-content p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9375rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.hobby-content ul {
|
||
padding-left: 1.25rem;
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.hobby-content li {
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.hobby-content li::marker {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.hobby-tag {
|
||
display: inline-block;
|
||
margin-top: 0.75rem;
|
||
padding: 0.375rem 0.875rem;
|
||
background: var(--accent-dim);
|
||
color: var(--accent);
|
||
border-radius: 2rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.page-content {
|
||
padding: 4rem;
|
||
max-width: 900px;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 3rem;
|
||
padding-bottom: 2rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.page-header h1 {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.page-header p {
|
||
color: var(--text-secondary);
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
.content-block {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.content-block h2 {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
margin-bottom: 1rem;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.content-block h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
margin: 1.5rem 0 0.75rem;
|
||
}
|
||
|
||
.content-block p {
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.content-block ul {
|
||
padding-left: 1.5rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.content-block li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.content-block li::marker {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.content-block strong {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.content-block a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid transparent;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.content-block a:hover {
|
||
border-bottom-color: var(--accent);
|
||
}
|
||
|
||
.content-image {
|
||
max-width: 100%;
|
||
border-radius: 0.75rem;
|
||
border: 1px solid var(--border);
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
.image-caption {
|
||
text-align: center;
|
||
color: var(--text-muted);
|
||
font-size: 0.875rem;
|
||
font-style: italic;
|
||
margin-top: -0.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.footer {
|
||
padding: 3rem 4rem;
|
||
border-top: 1px solid var(--border);
|
||
text-align: center;
|
||
color: var(--text-muted);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.footer a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.sidebar {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.sidebar.open {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.main {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.mobile-toggle {
|
||
display: block;
|
||
}
|
||
|
||
.stats-bar {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero {
|
||
padding: 6rem 1.5rem 3rem;
|
||
}
|
||
|
||
.section,
|
||
.page-content {
|
||
padding: 3rem 1.5rem;
|
||
}
|
||
|
||
.stats-bar {
|
||
padding: 2rem 1.5rem;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.footer {
|
||
padding: 2rem 1.5rem;
|
||
}
|
||
|
||
.hobby-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.fade-in {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||
}
|
||
|
||
.fade-in.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
@media print {
|
||
.sidebar {
|
||
position: relative;
|
||
width: 100%;
|
||
height: auto;
|
||
transform: none !important;
|
||
}
|
||
|
||
.main {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.mobile-toggle {
|
||
display: none !important;
|
||
}
|
||
|
||
.hero {
|
||
min-height: auto;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.hero-grid,
|
||
.hero-bg {
|
||
display: none;
|
||
}
|
||
|
||
body {
|
||
background: white;
|
||
color: black;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<button class="mobile-toggle" onclick="toggleSidebar()" aria-label="Menü öffnen">
|
||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||
<path d="M4 6h16M4 12h16M4 18h16" />
|
||
</svg>
|
||
</button>
|
||
<div class="app">
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar-profile">
|
||
<div class="profile-img-container">
|
||
<img src="ich.jpg" alt="Daniel Nagel" class="profile-img">
|
||
</div>
|
||
<div class="sidebar-name">Daniel Nagel</div>
|
||
<div class="sidebar-title">Elektrotechnik Meister</div>
|
||
</div>
|
||
<nav class="nav-section">
|
||
<div class="nav-title">Navigation</div>
|
||
<ul class="nav-list">
|
||
<li class="nav-item"><button class="nav-link active" onclick="showPage('home')">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||
stroke-width="2">
|
||
<path
|
||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||
</svg>Startseite
|
||
</button></li>
|
||
<li class="nav-item"><button class="nav-link" onclick="showPage('experience')">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||
stroke-width="2">
|
||
<path
|
||
d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>Berufserfahrung
|
||
</button></li>
|
||
<li class="nav-item"><button class="nav-link" onclick="showPage('education')">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||
stroke-width="2">
|
||
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||
<path
|
||
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||
<path d="M12 14v7" />
|
||
</svg>Ausbildungen
|
||
</button></li>
|
||
<li class="nav-item"><button class="nav-link" onclick="showPage('hobbies')">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||
stroke-width="2">
|
||
<path
|
||
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>Hobbys
|
||
</button></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="sidebar-bottom">
|
||
<div class="nav-title">Kontakt</div>
|
||
<a href="tel:+436647928976" class="contact-item">
|
||
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||
<path
|
||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||
</svg>+43 664 7928976
|
||
</a>
|
||
<div class="contact-item">
|
||
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>Lustenau - AT
|
||
</div>
|
||
<a href="mailto:office@danielnagel.at" class="contact-item">
|
||
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||
<path
|
||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>office@danielnagel.at
|
||
</a>
|
||
<div class="social-links">
|
||
<a href="https://code.danielnagel.at/daniel?tab=activity" target="_blank" class="social-link"
|
||
aria-label="Gitea">
|
||
<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 0C5.373 0 0 5.373 0 12c0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577 0-.286-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.083-.73.083-.73 1.205.085 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.998.108-.776.42-1.305.763-1.605-2.665-.305-5.467-1.334-5.467-5.93 0-1.31.468-2.382 1.235-3.22-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.3 1.23A11.51 11.51 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.838 1.233 1.91 1.233 3.22 0 4.61-2.807 5.625-5.48 5.92.43.372.815 1.103.815 2.222 0 1.606-.015 2.898-.015 3.293 0 .32.218.694.825.577C20.565 21.795 24 17.298 24 12c0-6.627-5.373-12-12-12z" />
|
||
</svg>
|
||
</a>
|
||
<a href="https://www.instagram.com/mr.teels_painting/" target="_blank" class="social-link"
|
||
aria-label="Instagram">
|
||
<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
|
||
</svg>
|
||
</a>
|
||
<a href="https://danielnagel.at/feeds/all.atom.xml" class="social-link" aria-label="RSS Feed">
|
||
<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.739-23.982-24-24v4.812z" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<main class="main">
|
||
<div id="page-home" class="page">
|
||
<section class="hero" id="home">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-grid"></div>
|
||
<div class="hero-content">
|
||
<div class="hero-badge"><span class="dot"></span>Auf Jobsuche</div>
|
||
<h1>Hallo, ich bin<br><span class="highlight">Daniel Nagel</span></h1>
|
||
<p class="hero-description">Ein <strong>Industrie-Elektrotechnik Meister</strong> mit großer
|
||
Leidenschaft für Technik, Automatisierung und kontinuierliches Lernen. Ich bringe umfassende
|
||
Expertise in SPS-Programmierung, Fehlererkennung und IT-Administration in Ihr Team.</p>
|
||
<div class="hero-buttons">
|
||
<button class="btn btn-primary" onclick="showPage('experience')">
|
||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||
stroke-width="2">
|
||
<path
|
||
d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>Berufserfahrung
|
||
</button>
|
||
<a href="mailto:office@danielnagel.at" class="btn btn-secondary">
|
||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||
stroke-width="2">
|
||
<path
|
||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>Kontakt aufnehmen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div class="stats-bar">
|
||
<div class="stat-item"><span class="stat-number" data-count="10">0</span>
|
||
<div class="stat-label">Jahre Erfahrung</div>
|
||
</div>
|
||
<div class="stat-item"><span class="stat-number" data-count="50">0</span>
|
||
<div class="stat-label">Projekte</div>
|
||
</div>
|
||
<div class="stat-item"><span class="stat-number" data-count="15">0</span>
|
||
<div class="stat-label">Auszubildende</div>
|
||
</div>
|
||
<div class="stat-item"><span class="stat-number" data-count="100">0</span>
|
||
<div class="stat-label">% Engagement</div>
|
||
</div>
|
||
</div>
|
||
<section class="section" id="skills">
|
||
<div class="section-header fade-in">
|
||
<div class="section-tag">Expertise</div>
|
||
<h2 class="section-title">Meine Schwerpunkte</h2>
|
||
<p class="section-desc">Technische Kompetenzen, die ich in Ihr Unternehmen bringe.</p>
|
||
</div>
|
||
<div class="skills-grid">
|
||
<div class="skill-card fade-in">
|
||
<div class="skill-icon">⚡</div>
|
||
<h3>SPS-Programmierung</h3>
|
||
<p>Experte in KOP und SCL auf Siemens Steuerungen. Entwicklung und Optimierung von
|
||
Automatisierungslösungen für industrielle Anlagen.</p>
|
||
<div class="skill-tags"><span class="skill-tag">TIA Portal</span><span
|
||
class="skill-tag">SIMATIC</span><span class="skill-tag">STEP 7</span></div>
|
||
</div>
|
||
<div class="skill-card fade-in">
|
||
<div class="skill-icon">🔧</div>
|
||
<h3>Fehlererkennung & Optimierung</h3>
|
||
<p>Schnelle Diagnose und Behebung von Störungen in automatisierten Anlagen.
|
||
Prozessoptimierung zur Steigerung der Effizienz.</p>
|
||
<div class="skill-tags"><span class="skill-tag">Troubleshooting</span><span
|
||
class="skill-tag">Lean</span><span class="skill-tag">Six Sigma</span></div>
|
||
</div>
|
||
<div class="skill-card fade-in">
|
||
<div class="skill-icon">🎓</div>
|
||
<h3>Ausbildung & Führung</h3>
|
||
<p>Ausbildung von Jugendlichen und Erwachsenen im elektrotechnischen Bereich. Vermittlung
|
||
praxisnaher Kenntnisse und Teamführung.</p>
|
||
<div class="skill-tags"><span class="skill-tag">Ausbilder</span><span
|
||
class="skill-tag">Mentoring</span><span class="skill-tag">Teamlead</span></div>
|
||
</div>
|
||
<div class="skill-card fade-in">
|
||
<div class="skill-icon">🖥️</div>
|
||
<h3>IT & Server Administration</h3>
|
||
<p>Verwaltung von IT-Hardware und Linux-Servern. Grundkenntnisse in Python, C# und Git für
|
||
Automatisierung und Scripting.</p>
|
||
<div class="skill-tags"><span class="skill-tag">Linux</span><span
|
||
class="skill-tag">Python</span><span class="skill-tag">Git</span><span
|
||
class="skill-tag">C#</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div id="page-experience" class="page" style="display:none">
|
||
<div class="page-content">
|
||
<div class="page-header fade-in">
|
||
<div class="section-tag">Werdegang</div>
|
||
<h1>Berufserfahrung</h1>
|
||
<p>Mein beruflicher Weg in der Elektrotechnik und Industrie.</p>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="timeline-item fade-in">
|
||
<div class="timeline-date">09/2022 - Heute</div>
|
||
<div class="timeline-title">Lehrlingsausbildner Elektrotechnik</div>
|
||
<div class="timeline-company">Julius Blum GmbH</div>
|
||
<div class="timeline-desc">
|
||
<p>Ausbildung von Lehrlingen in der Elektrotechnik mit Fokus auf praktische Fähigkeiten
|
||
und theoretisches Verständnis. Vermittlung von Fachwissen in SPS-Programmierung,
|
||
Fehlerdiagnose und Wartungsprozessen. Sowohl fachliche als auch persönliche
|
||
Entwicklung der Lehrlinge betreuen und voranbringen.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item fade-in">
|
||
<div class="timeline-date">06/2016 - 08/2022</div>
|
||
<div class="timeline-title">Instandhaltung, Lager-Logistik und Elektrik</div>
|
||
<div class="timeline-company">Julius Blum GmbH</div>
|
||
<div class="timeline-desc">
|
||
<p>Nach dem Zivildienst kehrte ich in die Abteilung zurück, in der ich schon zum Ende
|
||
der Lehre gearbeitet habe. Die Instandhaltung der Lagertechnik war ein sehr
|
||
abwechslungsreicher Arbeitsplatz.</p>
|
||
<ul>
|
||
<li>Elektrische, mechanische und Software-Fehlersuche in automatisierten Anlagen
|
||
</li>
|
||
<li>Wartung und Instandhaltung von Industriemaschinen</li>
|
||
<li>Suchen von technischen Fehlern und Optimierungen von Prozessen</li>
|
||
<li>Sicherheitstechnische Überprüfungen nach ÖNORM, Arbeitnehmerschutzgesetz und
|
||
Elektrotechnikverordnung</li>
|
||
<li>Grundlagen in der Mechanik und Mechatronik: Kugellager, Riemenantriebe,
|
||
Getriebe, etc.</li>
|
||
<li>Zusammenarbeit in hochmodernem Industrie 4.0 Umfeld</li>
|
||
<li>Arbeiten in Höhen mit Höhensicherung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item fade-in">
|
||
<div class="timeline-date">09/2015 - 05/2016</div>
|
||
<div class="timeline-title">Zivildienst</div>
|
||
<div class="timeline-company">Landes Feuerwehr Verband Vorarlberg</div>
|
||
<div class="timeline-desc">
|
||
<ul>
|
||
<li>Hilfe bei der Durchführung und Vorbereitung von Kursinhalten</li>
|
||
<li>Front Desk: Telefon und erste Ansprechperson für Besucher</li>
|
||
<li>Eigenständige Vorbereitung und Nachbereitung von Kursmaterialien</li>
|
||
<li>Handling vom gesamten Post- und Paketverkehr</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item fade-in">
|
||
<div class="timeline-date">09/2011 - 08/2015</div>
|
||
<div class="timeline-title">Lehre Elektrotechnik</div>
|
||
<div class="timeline-company">Julius Blum GmbH</div>
|
||
<div class="timeline-desc">
|
||
<p>Umfassende praktische und theoretische Ausbildung in der Elektrotechnik mit
|
||
Spezialisierung auf Automatisierungstechnik. Elektrotechnik mit H4 und H3 Modul.
|
||
Automatisierungs- und Prozessleittechnik und Hauptmodul Anlagen- und
|
||
Betriebstechnik.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item fade-in">
|
||
<div class="timeline-date">09/2008 - 08/2011</div>
|
||
<div class="timeline-title">Ausbildung Landwirtschaftlicher Facharbeiter</div>
|
||
<div class="timeline-company">BSBZ Hohenems</div>
|
||
<div class="timeline-desc">
|
||
<p>Ich stamme aus einer Familie, in der die Landwirtschaft Tradition hat. Von da habe
|
||
ich meine "Hands-on" Mentalität. Diese Ausbildung war mein 1. Facharbeiter und hat
|
||
mir eine gute technische Grundlage mitgegeben. Egal ob Holzbearbeitung,
|
||
Metallbearbeitung, Pflanzenzucht, Maschinenkunde, Marketing, Buchhaltung und vieles
|
||
mehr.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-block fade-in">
|
||
<h2>Sonstiges</h2>
|
||
<ul>
|
||
<li>Arbeitsweisen in der Landwirtschaft und in der Tierhaltung</li>
|
||
<li>Entwicklung von 3D-Videospielen in der Unity Engine</li>
|
||
<li>Bildbearbeitung mit Photoshop</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="page-education" class="page" style="display:none">
|
||
<div class="page-content">
|
||
<div class="page-header fade-in">
|
||
<div class="section-tag">Qualifikationen</div>
|
||
<h1>Ausbildungen & Zertifikate</h1>
|
||
<p>Meine formale Ausbildung und kontinuierliche Weiterbildung.</p>
|
||
</div>
|
||
<div class="content-block fade-in">
|
||
<h2>Fachliche Zertifikate</h2>
|
||
<div class="cert-grid">
|
||
<div class="cert-card">
|
||
<div class="cert-icon">🏆</div>
|
||
<div class="cert-content">
|
||
<h3>Lehrlingsausbildner- und Unternehmerprüfung</h3>
|
||
<p>WIFI Vorarlberg</p>
|
||
<span class="cert-year">2024</span>
|
||
</div>
|
||
</div>
|
||
<div class="cert-card">
|
||
<div class="cert-icon">⚡</div>
|
||
<div class="cert-content">
|
||
<h3>Befähigungsprüfung Elektrotechnik (Meister)</h3>
|
||
<p>Erfolgreich beim ersten Versuch bestanden</p>
|
||
<span class="cert-year">2021</span>
|
||
</div>
|
||
</div>
|
||
<div class="cert-card">
|
||
<div class="cert-icon">🔌</div>
|
||
<div class="cert-content">
|
||
<h3>Lehrabschlussprüfung Elektrotechnik (Geselle)</h3>
|
||
<p>Julius Blum GmbH</p>
|
||
<span class="cert-year">2015</span>
|
||
</div>
|
||
</div>
|
||
<div class="cert-card">
|
||
<div class="cert-icon">🌾</div>
|
||
<div class="cert-content">
|
||
<h3>Landwirtschaftlicher Facharbeiter</h3>
|
||
<p>BSBZ Hohenems</p>
|
||
<span class="cert-year">2011</span>
|
||
</div>
|
||
</div>
|
||
<div class="cert-card">
|
||
<div class="cert-icon">💻</div>
|
||
<div class="cert-content">
|
||
<h3>ECDL</h3>
|
||
<p>Europäischer Computerführerschein</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-block fade-in">
|
||
<h2>Weiterbildungen</h2>
|
||
<h3>Vorbereitung Befähigungsprüfung Elektrotechnik</h3>
|
||
<p><strong>WIFI Vorarlberg</strong></p>
|
||
<p>Intensive Vorbereitung zur Meisterprüfung mit Fokus auf theoretisches und praktisches
|
||
Fachwissen:</p>
|
||
<ul>
|
||
<li>Lineare Algebra</li>
|
||
<li>Elektrotechnische und arbeitsrechtliche Normen</li>
|
||
<li>Planung und Durchführung von Elektroinstallationen</li>
|
||
<li>Aufbau von Brandmelde- und Sicherheitsanlagen</li>
|
||
<li>Netzwerk- und Bustechnik</li>
|
||
<li>und vieles mehr</li>
|
||
</ul>
|
||
<h3>Diverse Feuerwehr-Kurse</h3>
|
||
<p><strong>Landes Feuerwehrschule Vorarlberg</strong></p>
|
||
<ul>
|
||
<li>Gefahrengut und Chemikalien</li>
|
||
<li>Jugend-Betreuung und Ausbildung</li>
|
||
<li>Erwachsenen-Ausbildung und Schulungsvorbereitung</li>
|
||
<li>Kommunikation und Personenführung</li>
|
||
<li>IT und Verwaltung</li>
|
||
<li>und weitere spezialisierte Kurse</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-block fade-in">
|
||
<h2>Autodidaktisch</h2>
|
||
<p>Wenn mich etwas interessiert, lerne ich es. Egal um was es sich handelt. So habe ich mir
|
||
diverse technische Skills und Programmiersprachen selber beigebracht:</p>
|
||
<ul>
|
||
<li>Linux Server Verwaltung mit Proxmox – Hardware als auch Software</li>
|
||
<li>Grundkenntnisse in C# und Python</li>
|
||
<li>Basiswissen in JavaScript, HTML und CSS</li>
|
||
<li>Hosten von Anwendungen (Diese Website läuft auf meinem Homeserver)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-block fade-in">
|
||
<h2>Führerscheine & Lizenzen</h2>
|
||
<ul>
|
||
<li>Führerschein Klasse B, C, F</li>
|
||
<li>Staplerbefähigungsnachweis</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="page-hobbies" class="page" style="display:none">
|
||
<div class="page-content">
|
||
<div class="page-header fade-in">
|
||
<div class="section-tag">Persönlich</div>
|
||
<h1>Hobbys & Interessen</h1>
|
||
<p>Meine Leidenschaften außerhalb der Arbeit.</p>
|
||
</div>
|
||
<div class="hobby-grid">
|
||
<div class="hobby-card fade-in">
|
||
<div class="hobby-content">
|
||
<h3>🏠 Homeserver</h3>
|
||
<p>Weil mich manchmal die Frage "Wie mache ich ..." oder "Wie funktioniert eigentlich
|
||
..." beschäftigt, betreibe ich einen Homeserver zum Experimentieren. Ich hoste auch
|
||
meine eigene Nextcloud für Freunde, Familie und mich.</p>
|
||
<ul>
|
||
<li>42 HE Rack (bei einer Betriebsauflösung ersteigert)</li>
|
||
<li>2 Switches (mit und ohne PoE)</li>
|
||
<li>2 Server + 1 kleiner "Admin" Node (beide mit Proxmox)</li>
|
||
<li>1 Datenspeicher-Server zur Datensicherung (Proxmox Backup Server)</li>
|
||
<li>1 USV</li>
|
||
</ul>
|
||
<p style="margin-top: 0.75rem;">Als Software läuft: Gitea, Nextcloud, n8n, Wikimedia,
|
||
Grist, Docker, die Warhammer Liga (Eigenentwicklung in Python und MariaDB), Grocy
|
||
und mehr.</p>
|
||
<span class="hobby-tag">Python</span>
|
||
<span class="hobby-tag">SQL</span>
|
||
<span class="hobby-tag">Webdev</span>
|
||
<span class="hobby-tag">Self-Hosting</span>
|
||
<span class="hobby-tag">Proxmox</span>
|
||
<span class="hobby-tag">Linux</span>
|
||
</div>
|
||
</div>
|
||
<div class="hobby-card fade-in">
|
||
<div class="hobby-content">
|
||
<h3>🎲 Pen & Paper Rollenspiele</h3>
|
||
<p>Schon seit mehreren Jahren organisiere ich als Spielleiter immer wieder Runden in
|
||
meinem eigens entwickelten System. Die Mathematik hinter dem System und die
|
||
Interaktion ineinander faszinieren mich. Kontinuierlich verbessert und erweitert ist
|
||
es zu einem tollen Projekt von mir geworden. Ich finde es faszinierend, wie nah sich
|
||
Gamedesign und Softwaredesign sind.</p>
|
||
<span class="hobby-tag">Gamedesign</span>
|
||
<span class="hobby-tag">Mathematik</span>
|
||
<span class="hobby-tag">Kreativität</span>
|
||
</div>
|
||
</div>
|
||
<div class="hobby-card fade-in">
|
||
<div class="hobby-content">
|
||
<h3>🚒 Freiwillige Feuerwehr Höchst</h3>
|
||
<p>Seit meinem 11. Lebensjahr bin ich Mitglied in der Freiwilligen Feuerwehr Höchst. Ca.
|
||
7 Jahre lang hatte ich eine zentrale Rolle als Gruppenkommandant in der Gestaltung
|
||
und Durchführung der Übungen und Schulungen. Im Jahre 2015 übernahm ich die
|
||
Verantwortung über die IT-Technik: Mehrere Rechner, Drucker, Barcodescanner und die
|
||
Handhabung unserer Microsoft Office 365 Cloud mit Azure und Intune.</p>
|
||
<span class="hobby-tag">Teamarbeit</span>
|
||
<span class="hobby-tag">IT-Administration</span>
|
||
<span class="hobby-tag">Führung</span>
|
||
</div>
|
||
</div>
|
||
<div class="hobby-card fade-in">
|
||
<img src="tournament-coffee.jpg" alt="Kaffee bei einem Turnier" class="hobby-image">
|
||
<div class="hobby-content">
|
||
<h3>🎨 Warhammer & Tabletop Games</h3>
|
||
<p>Neben den ganzen technischen Sachen und der Bildschirmarbeit habe ich noch ein
|
||
nerdiges Hobby, das keinen Bildschirm benötigt. Jede Woche treffe ich mich mit
|
||
Gleichgesinnten in unserem <a href="https://westside-diceghosts.at/"
|
||
target="_blank">Clubheim in Lustenau</a>. Zusätzlich erstelle ich noch viel
|
||
Content für den Blog auf unserer Website und verwalte und entwickle unser
|
||
Liga-System – eine Python-Anwendung mit Webinterface, das Elo- und Liga-Punkte von
|
||
jedem Spieler in einer SQL-Datenbank verwaltet.</p>
|
||
<p>2-3x im Jahr fahre ich mit meinen Freunden übers Wochenende auf ein Turnier. Eine
|
||
nette Möglichkeit, viele nette Leute in einer Messehalle zu treffen, die das gleiche
|
||
Interesse haben.</p>
|
||
<p>Wer gerne mehr davon sehen möchte: <a
|
||
href="https://www.instagram.com/mr.teels_painting/"
|
||
target="_blank">Instagram</a></p>
|
||
<span class="hobby-tag">Community</span>
|
||
</div>
|
||
</div>
|
||
<div class="hobby-card fade-in">
|
||
<img src="2am-programming.jpg" alt="Programmieren um 2 Uhr" class="hobby-image">
|
||
<div class="hobby-content">
|
||
<h3>🎮 Videospiel-Entwicklung</h3>
|
||
<p>Was nicht unerwähnt bleiben sollte, ist meine Erfahrung in der Unity Engine und C#.
|
||
Jahrelang bastelte ich mit meinen Freunden an Projekten und führte Tests durch. Im
|
||
Jahre 2019 legte ich das beiseite, um die Befähigungsprüfung Elektrotechnik zu
|
||
machen. Viele Stunden flossen in die Entwicklung und das Bauen von Spielmechaniken
|
||
und Welten.</p>
|
||
<p><em>Ich beim Programmieren um 2 Uhr früh an einem Samstag. Im Winter war es immer
|
||
sehr kalt in meinem Büro.</em></p>
|
||
<p>In unserem jugendlichen Elan versuchten wir immer wieder andere Dinge und wechselten
|
||
den Fokus. Dadurch hat es leider nichts bis zur Veröffentlichung geschafft.</p>
|
||
<span class="hobby-tag">Unity</span>
|
||
<span class="hobby-tag">C#</span>
|
||
<span class="hobby-tag">Gamedev</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="footer">
|
||
<p>© 2026 Daniel Nagel. Alle Rechte vorbehalten.</p>
|
||
<p style="margin-top: 0.5rem;">Erstellt mit Leidenschaft für Technik • <a
|
||
href="mailto:office@danielnagel.at">Kontakt</a></p>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
<script>
|
||
function toggleSidebar() {
|
||
document.getElementById('sidebar').classList.toggle('open');
|
||
}
|
||
function showPage(pageId) {
|
||
document.querySelectorAll('.page').forEach(page => page.style.display = 'none');
|
||
document.getElementById('page-' + pageId).style.display = 'block';
|
||
document.querySelectorAll('.nav-link').forEach(link => link.classList.remove('active'));
|
||
event.target.closest('.nav-link').classList.add('active');
|
||
document.getElementById('sidebar').classList.remove('open');
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
initAnimations();
|
||
}
|
||
const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' };
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
|
||
}, observerOptions);
|
||
function initAnimations() {
|
||
document.querySelectorAll('.fade-in').forEach(el => {
|
||
el.classList.remove('visible');
|
||
observer.observe(el);
|
||
});
|
||
}
|
||
initAnimations();
|
||
const statObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const target = parseInt(entry.target.getAttribute('data-count'));
|
||
animateCounter(entry.target, target);
|
||
statObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5 });
|
||
function animateCounter(element, target) {
|
||
let current = 0;
|
||
const increment = target / 50;
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if (current >= target) {
|
||
element.textContent = target + (target === 100 ? '%' : '+');
|
||
clearInterval(timer);
|
||
} else {
|
||
element.textContent = Math.floor(current) + (target === 100 ? '%' : '+');
|
||
}
|
||
}, 30);
|
||
}
|
||
document.querySelectorAll('.stat-number').forEach(el => statObserver.observe(el));
|
||
window.addEventListener('scroll', () => {
|
||
const scrolled = window.pageYOffset;
|
||
const grid = document.querySelector('.hero-grid');
|
||
if (grid) grid.style.transform = 'translateY(' + (scrolled * 0.5) + 'px)';
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |