CyberSec/MyCertifications.html at main · AMathew0/CyberSec · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Certification Portfolio</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/framer-motion/dist/framer-motion.umd.js"></script>
</head>
<body class="bg-gray-50 text-gray-900">
  <section class="max-w-7xl mx-auto p-6 md:p-10">
    <header class="text-center mb-10">
      <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight">Certification Track & Roadmap</h1>
      <p class="mt-3 text-gray-600 md:text-lg max-w-2xl mx-auto">A complete showcase of my certifications, roadmap and learning journey.</p>
    </header>

    <!-- Roadmap Image -->
    <div class="rounded-3xl overflow-hidden shadow-xl border bg-white mb-12">
      <img src="/roadmap/certification-roadmap.png" alt="Certification Roadmap" class="w-full h-auto" />
    </div>

    <!-- Timeline Section -->
    <div class="bg-white border rounded-2xl p-6 shadow-sm mb-12">
      <h2 class="text-2xl font-bold mb-6">Certification Timeline</h2>

      <ol class="relative border-l border-gray-300 ml-4 space-y-8">
        <li class="ml-6">
          <span class="absolute -left-3 flex items-center justify-center w-6 h-6 bg-indigo-600 text-white text-xs font-bold rounded-full">1</span>
          <div>
            <h3 class="text-lg font-semibold">Microsoft 365 Fundamentals (MS-900)</h3>
            <p class="text-gray-500 text-sm">Microsoft Cloud & Security • Foundation</p>
            <p class="text-gray-600 text-sm mt-1">Date: 2023-06-10</p>
          </div>
        </li>

        <li class="ml-6">
          <span class="absolute -left-3 flex items-center justify-center w-6 h-6 bg-indigo-600 text-white text-xs font-bold rounded-full">2</span>
          <div>
            <h3 class="text-lg font-semibold">Azure Fundamentals (AZ-900)</h3>
            <p class="text-gray-500 text-sm">Cloud Architecture & DevOps • Foundation</p>
            <p class="text-gray-600 text-sm mt-1">Date: 2023-11-04</p>
          </div>
        </li>

        <li class="ml-6">
          <span class="absolute -left-3 flex items-center justify-center w-6 h-6 bg-indigo-600 text-white text-xs font-bold rounded-full">3</span>
          <div>
            <h3 class="text-lg font-semibold">CompTIA Security+ (SY0-601)</h3>
            <p class="text-gray-500 text-sm">Cybersecurity & Ethical Hacking • Intermediate</p>
            <p class="text-gray-600 text-sm mt-1">Date: 2024-02-18</p>
          </div>
        </li>
      </ol>
    </div>

    <!-- Skill Pillars -->
    <div class="bg-white border rounded-2xl p-6 shadow-sm mb-12">
      <h2 class="text-2xl font-bold mb-6">Skill Pillars</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <h3 class="text-lg font-semibold mb-2">Cloud</h3>
          <p class="text-gray-600 text-sm">Azure Fundamentals • AWS Practitioner • Terraform</p>
        </div>
        <div>
          <h3 class="text-lg font-semibold mb-2">Security</h3>
          <p class="text-gray-600 text-sm">Security+ • TryHackMe • SOC Analyst Track</p>
        </div>
        <div>
          <h3 class="text-lg font-semibold mb-2">DevOps</h3>
          <p class="text-gray-600 text-sm">CI/CD • Docker • Ansible</p>
        </div>
        <div>
          <h3 class="text-lg font-semibold mb-2">Infrastructure</h3>
          <p class="text-gray-600 text-sm">Zabbix • Linux Admin • Virtualization</p>
        </div>
      </div>
    </div>

    <!-- Footer CTA -->
    <footer class="text-center mt-10">
      <p class="text-sm text-gray-600">To explore full certifications, badges, and downloadable proof files:</p>
      <a href="#" class="mt-4 inline-block bg-indigo-600 text-white px-6 py-3 rounded-2xl shadow hover:shadow-lg transition">View Full Certification Portfolio</a>
    </footer>
  </section>
</body>
</html>