NextCommunity.github.io/src/index.njk at 8a1eb4af02cf082fb407b0df853ba9b1b5ab8877 · jbampton/NextCommunity.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
---
layout: false
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Developer Directory</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body class="min-h-screen scroll-smooth bg-[var(--bg-page)] text-[var(--text-main)] transition-colors duration-300">

  {% include "header.njk" %}

  <main class="max-w-7xl mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {# We use collections.developer (or whichever tag you use in your .md files) #}
      {% for person in collections.randomPeople %}
      <div class="user-card group bg-[var(--bg-card)] border border-[var(--border-color)] rounded-2xl overflow-hidden flex flex-col scroll-mt-32 transition-all hover:shadow-2xl hover:-translate-y-1">
        <div class="p-8">
          <div class="flex justify-between items-start gap-4">
            <div class="flex-1">
              <h2 class="text-2xl font-bold group-hover:text-accent transition-colors">{{ person.data.name }}</h2>
              <p class="text-accent font-semibold text-sm uppercase tracking-wider">{{ person.data.role }}</p>
            </div>
            <span class="shrink-0 text-[10px] bg-[var(--bg-footer)] text-[var(--text-muted)] px-2 py-1 rounded font-bold uppercase border border-[var(--border-color)]">
              {{ person.data.location }}
            </span>
          </div>

          <div class="mt-6 flex flex-wrap gap-2">
            {% set skills = person.data.languages.split(' ') %}
            <div class="skills-list">
              {% for skill in skills %}
                <span class="skill-item">
                  <span onmouseenter="createFloatingXP(event)" class="skill-tag cursor-crosshair">{{ skill }}</span>
                </span>
              {% endfor %}
            </div>
          </div>

          <p class="mt-4 text-[var(--text-muted)] text-sm italic line-clamp-3">"{{ person.data.bio | truncate(120) }}"</p>
        </div>

        <div class="mt-auto p-4 flex justify-between items-center px-6 bg-black/5 dark:bg-white/5 border-t border-[var(--border-color)]">
          <div class="flex items-center gap-4">
            {% if person.data.github %}
            <a href="https://github.com/{{ person.data.github }}" target="_blank" class="text-[var(--text-muted)] hover:text-accent transition-colors font-bold text-[10px] uppercase">GitHub</a>
            {% endif %}
            {% if person.data.linkedin %}
            <a href="{{ person.data.linkedin }}" target="_blank" class="text-[var(--text-muted)] hover:text-accent transition-colors font-bold text-[10px] uppercase">LinkedIn</a>
            {% endif %}
          </div>

          <a href="{{ person.url }}" class="font-bold text-accent flex items-center group/link text-sm">
            <span>Profile</span>
            <span class="inline-block ml-1 transition-transform group-hover/link:translate-x-1">→</span>
          </a>
        </div>
      </div>
      {% endfor %}
    </div>
  </main>

  {% include "footer.njk" %}

</body>
</html>