NextCommunity.github.io/src/_includes/bio.njk at 6d9f3a1e6c8a7ce82c7c62742139030a5f7e84af · NextCommunity/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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ name }} | {{ role }}</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-5xl mx-auto px-4 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

      <div class="lg:col-span-1 space-y-6">
        <div class="user-card p-8 rounded-3xl sticky top-24">
          <div class="mb-6">
            <h1 class="text-3xl font-black leading-tight">{{ name }}</h1>
            <p class="text-accent font-bold mt-1">{{ role }}</p>
          </div>

          <div class="space-y-4 text-sm border-t border-[var(--border-color)] pt-6">
            {% if location or country %}
            <div class="flex items-center gap-3">
              <span class="text-lg">📍</span>
              <span class="text-[var(--text-muted)]">{{ location }}{% if location and country %}, {% endif %}{{ country }}</span>
            </div>
            {% endif %}

            {% if email %}
            <div class="flex items-center gap-3 group cursor-pointer" onclick="copyToClipboard('{{ email }}', this)">
              <span class="text-lg">✉️</span>
              <span class="text-[var(--text-muted)] group-hover:text-accent truncate">{{ email }}</span>
              <span class="hidden group-hover:inline text-[10px] bg-accent text-white px-2 py-0.5 rounded">Copy</span>
            </div>
            {% endif %}

            {% if website %}
            <div class="flex items-center gap-3">
              <span class="text-lg">🔗</span>
              <a href="{{ website }}" target="_blank" class="text-accent font-bold hover:underline truncate">{{ website | replace("https://", "") }}</a>
            </div>
            {% endif %}
          </div>

          <div class="mt-8 pt-8 border-t border-[var(--border-color)]">
            <h3 class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] mb-4">Connect</h3>
            <div class="grid grid-cols-2 gap-3">
              {% if github %}
              <a href="https://github.com/{{ github }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
                <span class="font-bold text-xs">GitHub</span>
              </a>
              {% endif %}
              {% if linkedin %}
              <a href="{{ linkedin }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
                <span class="font-bold text-xs text-[#0077b5]">LinkedIn</span>
              </a>
              {% endif %}
              {% if twitter %}
              <a href="{{ twitter }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
                <span class="font-bold text-xs">Twitter</span>
              </a>
              {% endif %}
              {% if instagram %}
              <a href="{{ instagram }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
                <span class="font-bold text-xs text-pink-500">Instagram</span>
              </a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>

      <div class="lg:col-span-2 space-y-8">
        {% if bio %}
        <div class="user-card p-8 sm:p-12 rounded-3xl">
          <h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
            <span class="w-8 h-[2px] bg-accent"></span> Professional Bio
          </h2>
          <div class="text-[var(--text-main)] text-lg leading-relaxed whitespace-pre-line">
            {{ bio }}
          </div>
        </div>
        {% endif %}

        {% if languages is defined and languages is not null %}
        <div class="user-card p-8 rounded-3xl">
          <h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
            <span class="w-8 h-[2px] bg-accent"></span> Technologies
          </h2>
          <div class="flex flex-wrap gap-3">
              {% set skills = languages.split(' ') %}
              {% include "skills-list.njk" %}
          </div>
        </div>
       {% endif %}

        <div class="user-card p-8 rounded-3xl">
          <h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
            <span class="w-8 h-[2px] bg-accent"></span> Mini-Game
          </h2>
          <p class="text-sm text-[var(--text-muted)] mb-4">Catch the skill tiles before they fall! Collect enough to win XP.</p>
          <button
            onclick="CodeBreaker.launch(window.PROFILE_SKILLS, window.PROFILE_NAME)"
            class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent text-white font-black uppercase tracking-wider text-sm hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-accent/30">
            ⌨️ Play Code Breaker
          </button>
        </div>
      </div>
    </div>
  </main>

  {% include "footer.njk" %}

  <script>
    // Specific helper for the bio page email copy
    function copyToClipboard(text, el) {
      navigator.clipboard.writeText(text);
      const span = el.querySelector('span:last-child');
      span.innerText = 'Copied!';
      setTimeout(() => span.innerText = 'Copy', 2000);
    }

    // Pass profile data to game modules
    window.PROFILE_NAME = "{{ name }}";
    window.PROFILE_SKILLS = "{{ languages | default('') }}".trim().split(/\s+/).filter(Boolean);
  </script>
</body>
</html>