PORTFOLIO/blog.html at main · DevvObiero/PORTFOLIO · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BLog Page</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="/favicon.ico" />

</head>

<body>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="profile.html">Profile</a></li>
            <li><a href="./blog.html">Blog</a></li>
            <li><a href="./resume.html">Resume</a></li>
            <button id="toggle-theme">
                <i class="bx bx-sun" id="sun-icon"></i>
                <!-- Sun icon for light mode -->
                <i class="bx bxs-moon" id="moon-icon"></i>
                <!-- Moon icon for dark mode -->
            </button>

        </ul>
        <span></span>
    </nav>
    <style>
        body {
            font-family: 'Pangram', Arial, sans-serif;
            background: #fafbfc;
            margin: 0;
            padding: 0;
        }

        .blog-container {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 20px;
            margin-top: 100px;

        }

        .blog-title {
            text-align: center;
            font-size: 2.5rem;
            font-family: 'Pangram', Arial, sans-serif;

            margin-bottom: 40px;
            color: #222;
            letter-spacing: -1px;
        }

        .blogs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }

        .blog-card {
            /* background: #fff; */
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            padding: 28px 24px;
            transition: box-shadow 0.2s;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .blog-card:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }

        .blog-card h2 {
            margin: 0 0 8px 0;
            font-size: 1.3rem;
            color: #1a1a1a;
        }

        .blog-card .meta {
            font-size: 0.95rem;
            color: #888;
            margin-bottom: 10px;
        }

        .blog-card p {
            margin: 0;
            color: #444;
            line-height: 1.6;
        }

        @media (max-width: 700px) {
            .blogs {
                grid-template-columns: 1fr;
            }
        }
    </style>


    <div class="blog-container">
        <div class="blog-title">My Blog</div>
        <div class="blogs">

            <div class="blog-card">
                <h2>My Internship Hunt Journey</h2>
                <div class="meta">August 19, 2025 &middot; by OB</div>
                <p>
                    Searching for internships has been both challenging and rewarding. From improving my skills,
                    building projects,
                    and refining my applications, every step is teaching me something new...
                </p>
            </div>

            <div class="blog-card">
                <h2>How to Come Up with Good Projects That Add Value</h2>
                <div class="meta">May 20, 2024 &middot; by OB</div>
                <p>
                    Stop building yet another Netflix clone. Here’s how to come up with project ideas that solve real
                    problems, stand out in interviews, and truly grow your developer skills.
                </p>
            </div>
            <div class="blog-card">
                <h2>My Journey as a Self-Taught Developer</h2>
                <div class="meta">May 15, 2024 &middot; by OB</div>
                <p>
                    From free YouTube tutorials to GitHub contributions, this post shares how I taught myself to code,
                    built real projects, and started carving my own path into the tech world.
                </p>
            </div>
            <div class="blog-card">
                <h2>Coding Resources That Helped Me Streamline My Learning</h2>
                <div class="meta">May 10, 2024 &middot; by OB</div>
                <p>
                    Learning to code can be overwhelming. In this post, I share the exact tools, platforms, and content
                    that helped me stay focused, avoid burnout, and actually make progress.
                </p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll('.blog-card').forEach(function (card) {
                const comingSoon = document.createElement('div');
                comingSoon.textContent = 'Coming soon';
                comingSoon.style.color = '#e67e22';
                comingSoon.style.fontWeight = 'bold';
                comingSoon.style.marginTop = '8px';
                card.appendChild(comingSoon);
            });
        });
    </script>
    <script src="script.js"></script>

</body>

</html>