branhoff.github.io/blog.html at main · branhoff/branhoff.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
<!DOCTYPE html>
<html>

<head>
    <title>Blog - Brandon Hoffman</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
    <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Russo+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="themes/default.css">
    <link id="theme-style" rel="stylesheet" type="text/css" href="">
</head>

<body>
    <section class="s1">
        <div class="main-container">
            <div class="greeting-wrapper">
                <h1>Engineering Insights</h1>
                <p style="text-align: center; font-size: 18px; margin-top: 10px;">Thoughts on DevOps, Cloud Architecture, and Software Engineering</p>
            </div>

            <div class="intro-wrapper">
                <div class="nav-wrapper">
                    <div class="dots-wrapper">
                        <div id="dot1" class="browser-dot"></div>
                        <div id="dot2" class="browser-dot"></div>
                        <div id="dot3" class="browser-dot"></div>
                    </div>

                    <ul id="navigation">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html#contact">Contact</a></li>
                    </ul>
                </div>

                <div class="left-column">
                    <h5 style="text-align: center; line-height: 0;">Personalize Your Theme</h5>
                    <div id="theme-options-wrapper">
                        <div data-mode="light" data-text="Default" data-icon="images/Switch_icon.svg" id="light-mode" class="theme-dot"></div>
                        <div data-mode="nes" data-text="NES" data-icon="images/NES_icon.svg" id="nes-mode" class="theme-dot"></div>
                        <div data-mode="snes" data-text="SNES" data-icon="images/SNES_icon.svg" id="snes-mode" class="theme-dot"></div>
                        <div data-mode="n64" data-text="N64" data-icon="images/N64_icon.svg" id="n64-mode" class="theme-dot"></div>
                    </div>
                    <div id="theme-text"></div>
                    <img id="theme-icon" src="images/Switch_icon.svg">
                    <p id="settings-note">*Your theme settings will be remembered for your next visit.</p>
                </div>

                <div class="right-column">
                    <div id="preview-shadow">
                        <div id="preview">
                            <div id="corner-tl" class="corner"></div>
                            <div id="corner-tr" class="corner"></div>
                            <h3>Latest Posts</h3>
                            <p>Dive into my thoughts on modern software engineering, DevOps practices, and the evolving landscape of cloud technologies.</p>
                            <div id="corner-br" class="corner"></div>
                            <div id="corner-bl" class="corner"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="s2">
        <div class="main-container">
            <div class="blog-container">
                <div id="blog-posts-container">
                    <!-- Blog posts will be dynamically loaded here -->
                    <div class="loading">Loading posts...</div>
                </div>

                <div class="blog-sidebar">
                    <div class="sidebar-section">
                        <h4>About This Blog</h4>
                        <p>I share insights from my work in DevOps engineering, cloud architecture, and software development. These posts reflect my experiences building scalable systems and working with cutting-edge technologies.</p>
                    </div>

                    <div class="sidebar-section">
                        <h4>Topics</h4>
                        <div class="topic-tags" id="topic-tags">
                            <!-- Tags will be dynamically populated -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript" src="scripts/setThemeForGivenDotClick.js"></script>
    <script type="text/javascript" src="scripts/setHoverOnDotEffects.js"></script>
    <script type="text/javascript" src="scripts/loadBlogPosts.js"></script>
</body>

</html>