-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
236 lines (204 loc) · 10.8 KB
/
index.html
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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<head>
<title>Hello World - findirfin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/favicon.png" type="image/png">
<link rel="stylesheet" type="text/css" href="styles.css">
<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=Noto+Sans+JP:wght@300&family=Roboto+Mono:wght@300&display=swap"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js/dist/ua-parser.min.js"></script>
<script src="script.js"></script>
<meta name="description" content="My personal website. Daily LOTR memes.">
<meta name="keywords" content="LOTR, Memes, Daily LOTR memes, Daily LOTR, Lord of the Rings memes, ">
<meta property="og:title" content="findirfin.dev. Stuff I make and write. Memes.">
<meta property="og:description" content="...">
<meta property="og:image" content="https://www.findirfin.dev/assets/favicon.png">
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "ly8bu4nldl");
</script>
</head>
</head>
<body>
<div class="helloworldcontainer">
<h1 class="helloworld" data-value="Hello World">Hello World</h1>
</div>
<div class="social-container">
<div class="social-grid">
<a href="https://github.com/findirfin" target="_blank" class="social-link">
<div class="social-icon-wrapper">
<svg class="social-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
</svg>
</div>
<span class="social-text">GitHub</span>
</a>
<a href="https://www.youtube.com/@findirfin" target="_blank" class="social-link">
<div class="social-icon-wrapper">
<svg class="social-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/>
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/>
</svg>
</div>
<span class="social-text">YouTube</span>
</a>
<a href="mailto:contact@findirfin.dev" target="_blank" class="social-link">
<div class="social-icon-wrapper">
<svg class="social-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
</div>
<span class="social-text">Email</span>
</a>
</div>
<div class="projects-container">
<div class="projects-grid">
<div class="project-card">
<div class="project-icon-wrapper">
<svg class="project-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 3h18v12H3V3z"/> <!-- browser window frame -->
<path d="M3 6h18"/> <!-- browser bar line -->
<circle cx="5.5" cy="4.5" r="0.5"/> <!-- browser dot 1 -->
<circle cx="7.5" cy="4.5" r="0.5"/> <!-- browser dot 2 -->
<circle cx="9.5" cy="4.5" r="0.5"/> <!-- browser dot 3 -->
<path d="M8 10l3 3m0 0l3-3m-3 3v4"/> <!-- image icon -->
<rect x="7" y="9" width="10" height="8" rx="1"/> <!-- image frame -->
</svg>
</div>
<div class="project-content">
<a href="https://findirfin.dev/editor4" class="project-title">Browser Image Editor</a>
<p class="project-description">Create and edit images directly in your browser. No server-side processing needed - everything runs locally for maximum privacy and speed.</p>
<div class="project-footer">
<div class="project-labels">
<span class="project-label label-wip">Work in Progress</span>
</div>
<div class="project-meta">
<svg class="meta-icon" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
Beta
</div>
</div>
</div>
</div>
<div class="project-card">
<div class="project-icon-wrapper">
<svg class="project-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 9c0-2.5 2-4 4-4s4 1.5 4 4"/> <!-- duck head -->
<path d="M7 10c-1.5 0-3 .5-3 2 0 2 3 3 6 3s6-1 6-3c0-1.5-1.5-2-3-2"/> <!-- duck body -->
<path d="M15 9.5l3-1.5 1 2-3 1.5"/> <!-- robotic antenna -->
<path d="M9 7.5v-1M13 7.5v-1"/> <!-- digital eyes -->
<path d="M11 9h2"/> <!-- digital beak -->
<path d="M7 14l-1 2m10-2l1 2"/> <!-- robot feet -->
</svg>
</div>
<div class="project-content">
<a href="https://github.com/findirfin/pico-ducky-resources" class="project-title">Pico Ducky Resources</a>
<p class="project-description">Comprehensive resources and guides to complete Network Chuck's Tutorial. Perfect for beginners diving into hardware hacking.</p>
<div class="project-footer">
<div class="project-labels">
<span class="project-label label-tutorial">Project Files</span>
</div>
<div class="project-meta">
<svg class="meta-icon" viewBox="0 0 16 16" fill="currentColor">
<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
</svg>
Star on GitHub
</div>
</div>
</div>
</div>
<div class="project-card">
<div class="project-icon-wrapper">
<svg class="project-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
</div>
<div class="project-content">
<a href="https://github.com/findirfin/findirfin.dev" class="project-title">Website Source Code</a>
<p class="project-description">The complete source code for this website. Feel free to explore, learn, and contribute to make it even better.</p>
<div class="project-footer">
<div class="project-labels">
<span class="project-label label-docs">Documentation</span>
</div>
<div class="project-meta">
<svg class="meta-icon" viewBox="0 0 16 16" fill="currentColor">
<path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"/>
</svg>
Open source
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="articles-container">
<header class="articles-header">
<h2 class="articles-title">Articles</h2>
</header>
<div class="filter-container">
<button class="filter-btn active" onclick="filterArticles('all')">All</button>
<button class="filter-btn" onclick="filterArticles('how')">How To</button>
<button class="filter-btn" onclick="filterArticles('opinion')">Opinion</button>
<button class="filter-btn" onclick="filterArticles('news')">News</button>
<button class="filter-btn" onclick="filterArticles('internal')">Internal</button>
<button class="filter-btn" onclick="filterArticles('external')">External</button>
</div>
<div class="articles-grid">
<a href="https://findirfin.dev/articles/three-apps-to-switch-to.html" class="article-card filterDiv how opinion internal show">
<div class="article-image-wrapper">
<img src="./articles/images/proton-apps.svg" alt="Proton Apps" class="article-image">
</div>
<div class="article-content">
<h3 class="article-title">3 Privacy Respecting Apps to switch to</h3>
<div class="article-labels">
<span class="article-label label-how">How To</span>
<span class="article-label label-opinion">Opinion</span>
<span class="article-label label-internal">Internal</span>
</div>
</div>
</a>
</div>
</div>
<script>
function filterArticles(category) {
const buttons = document.querySelectorAll('.filter-btn');
buttons.forEach(btn => {
btn.classList.remove('active');
if (btn.textContent.toLowerCase().includes(category.toLowerCase())) {
btn.classList.add('active');
}
});
const articles = document.querySelectorAll('.article-card');
articles.forEach(article => {
if (category === 'all') {
article.classList.add('show');
} else {
if (article.classList.contains(category)) {
article.classList.add('show');
} else {
article.classList.remove('show');
}
}
});
}
</script>
</body>
<footer>
<p>
<div class="secret">
<a href="https://www.findirfin.dev/s3cr37m3nu" class="secret-link">Secret Menu</a>
<br>
<a href="https://findirfin.dev/privacy">Privacy</a>
</div>
</p>
</footer>
</html>