linktree/index.html at main · longieirl/linktree · 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#0a0a0a" />
  <meta name="description" content="Full-stack developer passionate about clean architecture, developer experience, and building scalable systems." />

  <!-- Open Graph -->
  <meta property="og:title" content="@longieirl — Links" />
  <meta property="og:description" content="Full-stack developer passionate about clean architecture, developer experience, and building scalable systems." />
  <meta property="og:image" content="https://longieirl.github.io/linktree/avatar.jpg" />
  <meta property="og:url" content="https://longieirl.github.io/linktree/" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@longieirl" />
  <meta name="twitter:title" content="@longieirl — Links" />
  <meta name="twitter:description" content="Full-stack developer passionate about clean architecture, developer experience, and building scalable systems." />
  <meta name="twitter:image" content="https://longieirl.github.io/linktree/avatar.jpg" />

  <title>@longieirl — Links</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Mono:wght@300;400&family=DM+Sans:wght@300;400&display=swap&font-display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <!-- GA is loaded only after analytics consent is granted — see cookies.js -->
</head>
<body>
  <div class="noise" aria-hidden="true"></div>

  <main class="container" id="main">
    <!-- Profile -->
    <section class="profile">
      <div class="avatar-wrap">
        <img class="avatar" src="avatar.jpg" alt="longieirl profile" width="96" height="96" decoding="async" />
        <div class="avatar-ring"></div>
      </div>
      <h1 class="name">@longieirl</h1>
      <p class="bio">One must work and dare if one really wants to live!!!</p>
    </section>

    <!-- Links -->
    <nav class="links" aria-label="Profile links">
      <a href="https://github.com/longieirl" class="link-btn" target="_blank" rel="noopener noreferrer">
        <span class="link-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/></svg>
        </span>
        <span class="link-label">GitHub</span>
        <span class="link-arrow">→</span>
      </a>

      <a href="https://www.linkedin.com/in/jlongieirl" class="link-btn" target="_blank" rel="noopener noreferrer">
        <span class="link-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
        </span>
        <span class="link-label">LinkedIn</span>
        <span class="link-arrow">→</span>
      </a>

      <a href="https://x.com/longieirl" class="link-btn" target="_blank" rel="noopener noreferrer">
        <span class="link-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </span>
        <span class="link-label">X / Twitter</span>
        <span class="link-arrow">→</span>
      </a>

      <a href="https://www.facebook.com/longieirl" class="link-btn" target="_blank" rel="noopener noreferrer">
        <span class="link-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.883v2.272h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg>
        </span>
        <span class="link-label">Facebook</span>
        <span class="link-arrow">→</span>
      </a>

      <a href="https://people.sap.com/jlong" class="link-btn" target="_blank" rel="noopener noreferrer">
        <span class="link-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm13 0a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/></svg>
        </span>
        <span class="link-label">SAP Developer</span>
        <span class="link-arrow">→</span>
      </a>

      <a href="https://github.com/longieirl/bankstatementprocessor" class="link-btn link-btn--desc" target="_blank" rel="noopener noreferrer">
        <span class="link-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6zm2-5h8v1.5H8V15zm0-3h8v1.5H8V12zm2.5-2.5h3V11h-3V9.5z"/></svg>
        </span>
        <span class="link-label">Bank Statement Processor</span>
        <span class="link-arrow">→</span>
      </a>

    </nav>

    <!-- Social Icons -->
    <div class="socials" aria-label="Social media links">
      <!-- GitHub -->
      <a href="https://github.com/longieirl" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
        </svg>
      </a>
      <!-- LinkedIn -->
      <a href="https://www.linkedin.com/in/jlongieirl" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
        </svg>
      </a>
      <!-- X / Twitter -->
      <a href="https://x.com/longieirl" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
        </svg>
      </a>
      <!-- Facebook -->
      <a href="https://www.facebook.com/longieirl" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.883v2.272h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
        </svg>
      </a>
      <!-- SAP -->
      <a href="https://people.sap.com/jlong" class="social-icon" target="_blank" rel="noopener noreferrer" aria-label="SAP Profile">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm13 0a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/>
        </svg>
      </a>
    </div>

    <!-- Footer -->
    <footer class="footer">
      <span>made with <span class="heart">♥</span></span>
      <nav class="footer-links" aria-label="Footer links">
        <button class="footer-link" id="cookie-prefs-btn" aria-label="Cookie Preferences">Cookie Preferences</button>
        <a class="footer-link" href="privacy.html">Privacy</a>
        <a class="footer-link" href="mailto:jlongieirl+privacy@gmail.com?subject=Report%20Profile">Report</a>
      </nav>
    </footer>
  </main>

  <!-- Cookie Banner -->
  <dialog class="cookie-banner" id="cookie-banner" aria-label="Cookie consent" aria-live="polite">
    <div class="cookie-banner-body">
      <p class="cookie-text">
        We'd like to use <strong>Google Analytics</strong> to understand how visitors use this site.
        This collects anonymised data (pages visited, time on site) and sends it to Google.
        No personal data is collected. <a class="cookie-policy-link" href="privacy.html">Cookie policy</a>.
      </p>
      <div class="cookie-actions">
        <button class="cookie-btn cookie-btn--ghost" id="cookie-manage">Manage Preferences</button>
        <button class="cookie-btn cookie-btn--secondary" id="cookie-decline">Reject</button>
        <button class="cookie-btn cookie-btn--primary" id="cookie-accept">Accept Analytics</button>
      </div>
    </div>
  </dialog>

  <!-- Cookie Preferences Modal -->
  <dialog class="cookie-modal-overlay" id="cookie-modal-overlay" aria-label="Cookie Preferences">
    <div class="cookie-modal">
      <h2 class="cookie-modal-title">Cookie Preferences</h2>
      <p class="cookie-modal-desc">Manage your cookie settings below.</p>
      <ul class="cookie-categories">
        <li class="cookie-category">
          <div class="cookie-category-info">
            <span class="cookie-category-name">Essential</span>
            <span class="cookie-category-desc">Required for the site to function. Cannot be disabled.</span>
          </div>
          <span class="cookie-toggle cookie-toggle--locked" aria-label="Always on">Always on</span>
        </li>
        <li class="cookie-category">
          <div class="cookie-category-info">
            <span class="cookie-category-name">Analytics (Google Analytics)</span>
            <span class="cookie-category-desc">Collects anonymised data on pages visited and time on site. Data is sent to Google. IP addresses are anonymised. Advertising features are disabled.</span>
          </div>
          <label class="cookie-toggle-wrap" aria-label="Toggle analytics cookies">
            <input type="checkbox" id="analytics-toggle" class="cookie-checkbox" />
            <span class="cookie-toggle-slider"></span>
          </label>
        </li>
      </ul>
      <div class="cookie-modal-actions">
        <button class="cookie-btn cookie-btn--secondary" id="cookie-modal-close">Cancel</button>
        <button class="cookie-btn cookie-btn--primary" id="cookie-modal-save">Save Preferences</button>
      </div>
    </div>
  </dialog>

  <script src="script.js"></script>
  <script src="cookies.js"></script>
</body>
</html>