danleyb2.github.io/index.html at master · danleyb2/danleyb2.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
---
permalink: /
layout: default2
---

<style>
    .hero {
        text-align: center;
        padding: 4rem 1rem 2rem;
        max-width: 700px;
        margin: 0 auto;
    }
    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }
    .hero p {
        font-size: 1.2rem;
        color: #555;
        margin-bottom: 2rem;
    }
    .section-title {
        font-size: 1.5rem;
        margin: 3rem 0 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e8f0fe;
    }
    .project-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 1.5rem;
        margin: 0 auto;
    }
    .project-card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 1.25rem;
        transition: box-shadow 0.2s, transform 0.2s;
        background: #fff;
    }
    .project-card:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }
    .project-card h4 {
        margin: 0 0 0.5rem;
    }
    .project-card h4 a {
        color: #1a73e8;
        text-decoration: none;
    }
    .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.75rem;
    }
    .project-tag {
        background: #f1f3f4;
        color: #555;
        padding: 0.15rem 0.6rem;
        border-radius: 12px;
        font-size: 0.78rem;
    }
    .post-card {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #eee;
    }
    .post-card .date {
        color: #999;
        font-size: 0.85rem;
    }
</style>

<div class="hero">
    <h1>Brian Nyaundi</h1>
    <p>Full-Stack Developer & DevOps Engineer building reliable systems and developer tooling at <a href="https://platerecognizer.com/" target="_blank">PlateRecognizer</a>.</p>
    <a href="/about" class="btn">Learn More</a>
</div>

<div class="container" style="max-width: 900px; margin: 0 auto;">

    <h2 class="section-title">📝 Recent Articles</h2>
    {% for post in site.posts %}
     {% if post.is_highlighted %}
    <div class="post-card">
        <span class="date">{{ post.date | date: "%B %d, %Y" }}</span>
        <h4 style="margin: 0.25rem 0;"><a href="{{ post.url }}" style="color:#1a73e8; text-decoration:none;">{{ post.title }}</a></h4>
        <p>{{ post.excerpt | strip_html | truncatewords: 30 }}</p>
    </div>
     {% endif %}
    {% endfor %}
    <div class="text-center"><a href="/blog" class="btn">View All Articles</a></div>

    <h2 class="section-title">⭐ Featured Projects</h2>
    <div class="project-grid">
    {% for project in site.projects %}
        {% if project.is_highlighted == true and project.status == 'Active' %}
        <div class="project-card">
            <h4><a href="{{ project.url }}">{{ project.title }}</a></h4>
            <p style="font-size: 0.9rem; color: #666;">{{ project.description | truncatewords: 25 }}</p>
            {% if project.github %}
            <span class="project-tag"><a href="{{ project.github }}" target="_blank" style="color:#1a73e8;text-decoration:none;">GitHub ↗</a></span>
            {% endif %}
            <div class="project-tags">
                {% for tag in project.tags %}<span class="project-tag">{{ tag }}</span>{% endfor %}
            </div>
        </div>
        {% endif %}
    {% endfor %}
    </div>
    <div class="text-center" style="margin-top: 2rem;"><a href="/projects" class="btn">See All Projects</a></div>

</div>