madkoo.github.io/index.html at master · madkoo/madkoo.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Madis Koosaar - Platform Engineer specializing in DevOps, Cloud Infrastructure, and Developer Experience">
    <title>Madis Koosaar | Platform Engineer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Page Navigation -->
    <aside class="page-indicators">
        <a href="#hero" class="indicator current-page" title="Introduction">
            <span class="indicator-label">Intro</span>
        </a>
        <a href="#about" class="indicator" title="About">
            <span class="indicator-label">About</span>
        </a>
        <a href="#stack" class="indicator" title="Tech Stack">
            <span class="indicator-label">Tech</span>
        </a>
        <a href="#credentials" class="indicator" title="Certifications">
            <span class="indicator-label">Certs</span>
        </a>
        <a href="#reach" class="indicator" title="Connect">
            <span class="indicator-label">Connect</span>
        </a>
    </aside>

    <main class="page-wrapper">
        <!-- Page 1: Hero Introduction -->
        <article id="hero" class="fullpage-section hero-page">
            <div class="section-inner">
                <h1 class="hero-greeting">👋 Hi, I'm Madis Koosaar</h1>
                <p class="hero-description">Platform Engineer building better DevEx through automation and IaC. Passionate about DevOps culture and technical leadership.</p>
                <div class="continue-indicator">
                    <span class="continue-text">Explore more</span>
                    <svg class="continue-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 5v14M19 12l-7 7-7-7"/>
                    </svg>
                </div>
            </div>
        </article>

        <!-- Page 2: About Information -->
        <!-- Page 2: About Information -->
        <article id="about" class="fullpage-section info-page">
            <div class="section-inner">
                <h2 class="page-headline">🚀 About Me</h2>
                <div class="info-block">
                    <p class="intro-paragraph">
                        I'm a Principal Consultant at <strong>Solidify/Eficode</strong>, working together with the <strong>GitHub Experts Service Team</strong>, specializing in:
                    </p>
                    <ul class="specialty-items">
                        <li class="specialty">🔧 Platform Engineering & Developer Experience (DevEx)</li>
                        <li class="specialty">☁️ Cloud Infrastructure & Automation (Azure, IaC)</li>
                        <li class="specialty">🔄 DevOps Culture & Practices</li>
                        <li class="specialty">🔐 Security & Compliance</li>
                        <li class="specialty">📈 Technical Leadership & Consulting</li>
                    </ul>
                </div>
            </div>
        </article>

        <!-- Page 3: Technology Stack -->
        <article id="stack" class="fullpage-section tech-page">
            <div class="section-inner">
                <h2 class="page-headline">💻 Tech Stack</h2>
                <div class="technology-cards">
                    <div class="tech-category">
                        <h3 class="category-name">💻 Code</h3>
                        <p class="category-items">.NET, .NET Core, C#</p>
                    </div>
                    <div class="tech-category">
                        <h3 class="category-name">📜 Scripting</h3>
                        <p class="category-items">TypeScript, JavaScript, PowerShell, Python</p>
                    </div>
                    <div class="tech-category">
                        <h3 class="category-name">🚀 DevOps</h3>
                        <p class="category-items">Azure, GitHub Actions, Docker, Terraform, Kubernetes</p>
                    </div>
                    <div class="tech-category">
                        <h3 class="category-name">💾 Databases</h3>
                        <p class="category-items">MSSQL, PostgreSQL, SQLite, NoSQL</p>
                    </div>
                </div>
                <div class="primary-focus">
                    <strong>🎯 Focus Areas:</strong> DevOps Transformation, Platform Engineering, IaC, CI/CD
                </div>
            </div>
        </article>

        <!-- Page 4: Certifications -->
        <article id="credentials" class="fullpage-section certs-page">
            <div class="section-inner">
                <h2 class="page-headline">🎓 Key Certifications</h2>
                <ul class="certification-badges">
                    <li class="badge-item">✅ GitHub Actions</li>
                    <li class="badge-item">✅ GitHub Administration</li>
                    <li class="badge-item">✅ GitHub Advanced Security</li>
                    <li class="badge-item">✅ GitHub Fundamentals</li>
                    <li class="badge-item">✅ Microsoft DevOps Engineer Expert</li>
                    <li class="badge-item">✅ Microsoft Cybersecurity Architect Expert</li>
                </ul>
            </div>
        </article>

        <!-- Page 5: Connect & Contact -->
        <article id="reach" class="fullpage-section contact-page">
            <div class="section-inner">
                <h2 class="page-headline">🔗 Connect</h2>
                <div class="connection-options">
                    <a href="https://github.com/madkoo" class="profile-link" target="_blank" rel="noopener noreferrer">
                        <svg class="link-symbol" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                        </svg>
                        <span class="link-name">GitHub</span>
                    </a>
                    <a href="https://www.linkedin.com/in/madiskoosaar/" class="profile-link" target="_blank" rel="noopener noreferrer">
                        <span class="link-symbol">💼</span>
                        <span class="link-name">LinkedIn</span>
                    </a>
                    <a href="https://blog.madkoo.net" class="profile-link" target="_blank" rel="noopener noreferrer">
                        <span class="link-symbol">📝</span>
                        <span class="link-name">Blog</span>
                    </a>
                </div>
                <p class="outreach-message">
                    Interested in collaborating or have questions? Feel free to reach out through
                    <a href="https://www.linkedin.com/in/madiskoosaar/" class="inline-link" target="_blank" rel="noopener noreferrer">LinkedIn</a>
                    or connect with me on
                    <a href="https://github.com/madkoo" class="inline-link" target="_blank" rel="noopener noreferrer">GitHub</a>.
                </p>
                <footer class="page-credits">
                    <p>&copy; 2026 Madis Koosaar. Built with ❤️ and simple HTML/CSS.</p>
                </footer>
            </div>
        </article>
    </main>

    <script>
        // Track which page is currently visible
        const pageElements = document.querySelectorAll('.fullpage-section');
        const navIndicators = document.querySelectorAll('.indicator');

        // Configuration for intersection tracking
        const trackingConfig = {
            root: null,
            rootMargin: '0px',
            threshold: 0.6
        };

        // Create tracker to monitor page visibility
        const pageTracker = new IntersectionObserver((observations) => {
            observations.forEach(obs => {
                if (obs.isIntersecting) {
                    const pageIdentifier = obs.target.id;
                    // Update navigation indicators
                    navIndicators.forEach(nav => {
                        const isCurrentPage = nav.getAttribute('href') === `#${pageIdentifier}`;
                        nav.classList.toggle('current-page', isCurrentPage);
                    });
                }
            });
        }, trackingConfig);

        // Start tracking all pages
        pageElements.forEach(page => pageTracker.observe(page));
    </script>
</body>
</html>