Skip to content

Commit 6fcbdbd

Browse files
ZakaHaceCosasZakaHaceCosas
committed
Another fix
1 parent 9d71240 commit 6fcbdbd

3 files changed

Lines changed: 319 additions & 2 deletions

File tree

‎docs/about/donate.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
---
2+
title: "Support FuckingNode"
3+
description: "Spare a dime for the JS tool that makes your life easier, not harder."
4+
hide:
5+
- navigation
6+
---
7+
18
# Support the development of FuckingNode
29

310
FuckingNode is a solo project, developed and maintained with a lot of effort by myself. I'm a student with no fixed income, and donations would be significantly helpful.
@@ -10,7 +17,7 @@ Plus, you'll be listed anywhere I can think of :]
1017

1118
---
1219

13-
## :fontawesome-brands-bitcoin: Bitcoin{ .btc }
20+
## :fontawesome-brands-bitcoin:{ .btc } Bitcoin
1421

1522
You can support the project directly via Bitcoin:
1623

‎mkdocs.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ extra:
9090
link: https://discord.gg/AA2jYAFNmq
9191
name: Chat us on Discord
9292
- icon: fontawesome/brands/bitcoin
93-
link: "/donate"
93+
link: "/about/donate"
9494
name: Donate to help maintaining this project
9595

9696
analytics:

‎web1.html‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
<!-- yes hardcoded HTML because who needs react you know -->
2+
<!DOCTYPE html>
3+
<html lang="es">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>FuckingNode</title>
8+
<style>
9+
:root {
10+
--bg-dark: #0d1117;
11+
--bg-darker: #090c10;
12+
--text-main: #e6edf3;
13+
--text-muted: #8b949e;
14+
--accent: #b36044;
15+
}
16+
17+
* {
18+
margin: 0;
19+
padding: 0;
20+
box-sizing: border-box;
21+
scroll-behavior: smooth;
22+
}
23+
body {
24+
font-family: "Segoe UI", "Inter", system-ui, sans-serif;
25+
background: var(--bg-dark);
26+
color: var(--text-main);
27+
line-height: 1.6;
28+
}
29+
a {
30+
text-decoration: none;
31+
color: inherit;
32+
}
33+
34+
header {
35+
position: fixed;
36+
top: 0;
37+
left: 0;
38+
width: 100%;
39+
display: flex;
40+
justify-content: space-between;
41+
align-items: center;
42+
padding: 16px 40px;
43+
background: rgba(9, 12, 16, 0.95);
44+
backdrop-filter: blur(8px);
45+
border-bottom: 1px solid #1f2328;
46+
z-index: 1000;
47+
}
48+
header h1 {
49+
font-size: 1.1rem;
50+
font-weight: 600;
51+
color: var(--accent);
52+
}
53+
nav a {
54+
margin-left: 24px;
55+
font-size: 0.95rem;
56+
color: var(--text-main);
57+
transition: color 0.3s;
58+
}
59+
nav a:hover {
60+
color: var(--accent);
61+
}
62+
63+
.hero {
64+
display: grid;
65+
grid-template-columns: 1fr 1fr;
66+
align-items: center;
67+
min-height: 100vh;
68+
padding: 0 40px;
69+
}
70+
.hero-text {
71+
max-width: 520px;
72+
}
73+
.hero-text h2 {
74+
font-size: 3rem;
75+
margin-bottom: 20px;
76+
font-weight: 700;
77+
}
78+
.hero-text p {
79+
font-size: 1.15rem;
80+
color: var(--text-muted);
81+
margin-bottom: 30px;
82+
}
83+
.btn, .btn2 {
84+
display: inline-block;
85+
padding: 14px 36px;
86+
border-radius: 8px;
87+
background: linear-gradient(90deg, #f87755, var(--accent));
88+
color: #fff;
89+
font-weight: 600;
90+
transition: transform 0.2s, box-shadow 0.3s;
91+
}
92+
.btn2 {
93+
background: var(--bg-dark);
94+
}
95+
.btn:hover {
96+
transform: translateY(-3px);
97+
box-shadow: 0 0 20px #f87755;
98+
}
99+
.btn2:hover {
100+
transform: translateY(-3px);
101+
box-shadow: 0 0 20px #ffffff30;
102+
}
103+
.btn {
104+
display: inline-block;
105+
padding: 12px 28px;
106+
border-radius: 6px;
107+
108+
color: #fff;
109+
font-weight: 600;
110+
}
111+
.hero-visual {
112+
text-align: center;
113+
}
114+
.hero-visual img {
115+
max-width: 90%;
116+
border-radius: 12px;
117+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
118+
}
119+
120+
section {
121+
padding: 100px 40px;
122+
max-width: 1200px;
123+
min-height: 50vh;
124+
margin: 0 auto;
125+
}
126+
section h3 {
127+
font-size: 2rem;
128+
margin-bottom: 20px;
129+
text-align: center;
130+
}
131+
section p.section-desc {
132+
text-align: center;
133+
margin-bottom: 60px;
134+
color: var(--text-muted);
135+
max-width: 800px;
136+
margin-left: auto;
137+
margin-right: auto;
138+
font-size: 1.25em;
139+
}
140+
141+
.features {
142+
background: var(--bg-darker);
143+
}
144+
.grid {
145+
display: grid;
146+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
147+
gap: 24px;
148+
}
149+
.card {
150+
background: #161b22;
151+
border: 1px solid #1f2328;
152+
border-radius: 8px;
153+
padding: 24px;
154+
155+
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
156+
}
157+
.card:hover {
158+
transform: translateY(-10px);
159+
border-color: var(--accent);
160+
box-shadow: 0 0 25px var(--accent);
161+
}
162+
.card h4 {
163+
margin-bottom: 10px;
164+
font-size: 1.2rem;
165+
color: var(--accent);
166+
}
167+
.card p {
168+
color: var(--text-muted);
169+
}
170+
171+
172+
footer {
173+
text-align: center;
174+
padding: 40px 20px;
175+
font-size: 0.9rem;
176+
color: var(--text-muted);
177+
border-top: 1px solid #1f2328;
178+
background: var(--bg-darker);
179+
}
180+
181+
video {
182+
position: absolute;
183+
top: 0;
184+
left: 0;
185+
width: 100%;
186+
height: 100%;
187+
object-fit: cover;
188+
z-index: -2;
189+
}
190+
.hero::after {
191+
content: "";
192+
position: absolute;
193+
inset: 0;
194+
background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), #0b0f17);
195+
z-index: -1;
196+
}
197+
.hero h2 {
198+
font-size: 3rem;
199+
line-height: 3.75rem;
200+
margin-bottom: 20px;
201+
background: linear-gradient(90deg, #f87755, var(--accent));
202+
background-clip: text;
203+
-webkit-background-clip: text;
204+
color: transparent;
205+
-webkit-text-fill-color: transparent;
206+
animation: slideIn 1.2s ease forwards;
207+
}
208+
@keyframes slideIn {
209+
from {
210+
transform: translateY(-50px);
211+
opacity: 0.1;
212+
}
213+
to {
214+
transform: translateY(0);
215+
opacity: 1;
216+
}
217+
}
218+
.hero p {
219+
max-width: 700px;
220+
margin: 0 auto 40px;
221+
font-size: 1.2rem;
222+
color: #c9d1d9;
223+
opacity: 0;
224+
animation: fadeUp 1.5s ease 0.8s forwards;
225+
}@keyframes fadeUp {
226+
from {
227+
transform: translateY(-20px);
228+
opacity: 0;
229+
}
230+
to {
231+
transform: translateY(0);
232+
opacity: 1;
233+
}
234+
}
235+
</style>
236+
</head>
237+
<body>
238+
<header>
239+
<h1>FuckingNode 5</h1>
240+
<nav>
241+
<a href="#wtf">WTF is this?</a>
242+
<a href="#features">What can it do?</a>
243+
</nav>
244+
</header>
245+
246+
<section class="hero">
247+
<video autoplay muted loop playsinline>
248+
<source src="./fkn4.mp4" type="video/mp4">
249+
</video>
250+
<div class="hero-text">
251+
<div style="overflow: hidden;">
252+
<h2>The f*cking chaos of maintaining JavaScript projects ends here</h2>
253+
</div>
254+
<p>
255+
FuckingNode is a one of a kind, state of the art CLI to automate headache giving tasks and make it easier to develop in N*deJS, Deno, or Bun.
256+
</p>
257+
<div class="buttons">
258+
<a href="manual/" class="btn">Get started!</a>
259+
<a href="#wtf" class="btn2">Learn more</a>
260+
<a href="https://youtube.com/watch?v=J675ZcYBrHM" class="btn2">Watch the video</a>
261+
</div>
262+
</div>
263+
<div class="hero-visual">
264+
<img src="./image.png" alt="FuckingNode doing some cleanup">
265+
</div>
266+
</section>
267+
268+
<section id="wtf">
269+
<h3>What the f*ck is FuckingNode?</h3>
270+
<p class="section-desc">
271+
You hate running <code>eslint</code> every time. You hate npm taking away your disk space. You have your SSD being full because of 20 libraries you're not even releasing anyway. You hate forgetting test suites before committing code. You hate messing up while migrating a NodeJS project to Bun. <b>You hate this f*cking chaos, and so do we.</b>
272+
</p>
273+
</section>
274+
275+
<section id="features" class="features">
276+
<h3>What can it <i>actually</i> do?</h3>
277+
<p class="section-desc">All these things <b>by just running one command</b>.</p>
278+
<div class="grid">
279+
<div class="card">
280+
<h4>Cleaning your projects</h4>
281+
<p>npm dedupe, pnpm prune, whatever you need. They all recursively run across all of your projects.</p>
282+
</div>
283+
<div class="card">
284+
<h4>Cleaning caches</h4>
285+
<p>npm is so slow it feels like it doesn't cache stuff, but it does - taking GBs. We know how to clean it up.</p>
286+
</div>
287+
<div class="card">
288+
<h4>Linting & prettifying</h4>
289+
<p>If enabled, every project gets passed through ESLint/Prettier (or the tools of your choice). Automatically.</p>
290+
</div>
291+
<div class="card">
292+
<h4>Cleaning outputs</h4>
293+
<p>Keep forgetting that <code>dist/</code> folder with stuff you already released taking up storage? Forget about it, we clean it for you.</p>
294+
</div>
295+
<div class="card">
296+
<h4>Updating dependencies</h4>
297+
<p>You usually forget this, don't we all? We do it for you, and even push the updated lockfile to Git if you want to.</p>
298+
</div>
299+
<div class="card">
300+
<h4>Removing node_modules (?)</h4>
301+
<p>This is obviously optional, but if your hard drive surprises you with literally no space left, you can surprise it with this "feature".</p>
302+
</div>
303+
</div>
304+
</section>
305+
306+
<footer>
307+
Copyright 2025 ZakaHaceCosas. All rights reserved.
308+
</footer>
309+
</body>
310+
</html>

0 commit comments

Comments
 (0)