kryzziii.github.io/certifications.html at main · Kryzziii/kryzziii.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#F5F5F7">
    <title>Certifications | Chris Jemming</title>
    <link rel="icon" type="image/png" href="assets/favicon.png">

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <script src="js/components.js" defer></script>
    <script src="js/main.js" defer></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.body.classList.add('preload');
            setTimeout(() => { document.body.classList.remove('preload'); }, 200);
        });
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) { document.documentElement.setAttribute('data-theme', savedTheme); }
    </script>
</head>
<body class="preload">

<div class="background-orbs">
    <div class="orb orb-1"></div>
    <div class="orb orb-2"></div>
</div>

<app-navbar></app-navbar>

<main class="container">
    <h1 class="section-title fade-in">Certifications & Achievements</h1>

    <h3 class="fade-in" style="margin-bottom: 20px; color: var(--text-secondary);">Awards & Honors</h3>
    <div class="bento-grid" style="margin-bottom: 60px;">

        <div class="glass-card award-card span-2 fade-in" style="padding: 32px;">
            <div style="display: flex; gap: 20px; align-items: flex-start;">
                <div style="flex-shrink: 0;">
                    <i class="fa-solid fa-trophy award-icon"></i>
                </div>
                <div>
                    <h3 style="margin-bottom: 5px; color: var(--text-main);">DAAD-Prize</h3>
                    <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 10px;">Awarded by: <strong>Karlsruhe University of Applied Sciences</strong> • 2025</p>
                    <p>A Prize for outstanding achievements by international students at German universities</p>
                </div>
            </div>
        </div>

    </div>

    <h3 class="fade-in" style="margin-bottom: 20px; color: var(--text-secondary);">Courses & Licenses</h3>
    <div class="cert-grid">

        <div class="glass-card cert-card fade-in">
            <div style="height: 200px; background: linear-gradient(135deg, #111827 0%, #450a0a 50%, #991b1b 100%); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); font-size: 4.5rem; text-shadow: 0 8px 20px rgba(0,0,0,0.5);">
                <i class="fa-solid fa-user-secret"></i>
            </div>
            <div class="cert-content">
                <div class="cert-title">Ethical Hacking</div>
                <div class="cert-issuer">HKA</div>
                <p style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px;">
                    Ethical Hacking and Penetration Testing at University Level.
                </p>
                <a href="cert-ethical-hacking.html" class="btn-action">
                    Details <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>
        </div>

        <div class="glass-card cert-card fade-in">
            <div style="height: 200px; background: linear-gradient(135deg, #000428 0%, #004e92 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem;">
                <i class="fa-solid fa-user-shield"></i>
            </div>
            <div class="cert-content">
                <div class="cert-title">CSI Linux</div>
                <div class="cert-issuer">Linux Academy</div>
                <p style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px;">
                    Hands-on certification for conducting effective cyber investigations and forensic analysis with CSI Linux.
                </p>
                <a href="cert-csi-linux.html" class="btn-action">
                    Details <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>
        </div>


        <div class="glass-card cert-card fade-in">
            <div class="cert-img" style="background: linear-gradient(135deg, #E91E63 0%, #D93025 100%);">
                <i class="fa-solid fa-list-check" style="font-size: 3rem;"></i>
            </div>
            <div class="cert-content">
                <div class="cert-title">Agile Project Management</div>
                <div class="cert-issuer">USMx and UMD</div>
                <p style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px;">
                    Comprehensive course on agile methods, Scrum frameworks, and effective project management.
                </p>
                <a href="cert-agile.html" class="btn-action">
                    Details <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>
        </div>

        <div class="glass-card cert-card fade-in">
            <div class="cert-img" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <i class="fa-brands fa-html5" style="font-size: 3rem;"></i>
            </div>
            <div class="cert-content">
                <div class="cert-title">HTML5 & CSS3</div>
                <div class="cert-issuer">Jannis Seeman</div>
                <p style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px;">
                    Intensive course for advanced layouts, Flexbox, Grid, and responsive design.
                </p>
                <a href="cert-html-css.html" class="btn-action">
                    Details <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</main>

<app-footer></app-footer>
</body>
</html>