Skip to content

Commit 404ca38

Browse files
julianengeljulianengel
committed
Add recommended.by back to projects list
1 parent 784738a commit 404ca38

2 files changed

Lines changed: 201 additions & 2 deletions

File tree

‎src/pages/index.astro‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,22 +44,30 @@ const projects = [
4444
},
4545
{
4646
number: '05',
47+
name: 'recommended.by',
48+
description: 'Easily share the things you love as simple recommendation lists.',
49+
href: '/projects/recommended-by',
50+
externalHref: 'https://recommended.by/?ref=simplebytes',
51+
subProjects: []
52+
},
53+
{
54+
number: '06',
4755
name: 'Launchpage.xyz',
4856
description: 'Free & open source landing pages for newly registered domains.',
4957
href: '/projects/launchpage',
5058
externalHref: 'https://launchpage.xyz?ref=simplebytes',
5159
subProjects: []
5260
},
5361
{
54-
number: '06',
62+
number: '07',
5563
name: 'OG Image Tester',
5664
description: 'Test and preview Open Graph images for social media sharing.',
5765
href: '/projects/og-image-tester',
5866
externalHref: 'https://ogimagepreview.com?ref=simplebytes',
5967
subProjects: []
6068
},
6169
{
62-
number: '07',
70+
number: '08',
6371
name: 'DR Launcher',
6472
description: 'Curated database of 30+ directories to quickly boost your Domain Rating.',
6573
href: '/projects/drlauncher',

‎src/pages/projects/recommended-by.astro‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
---
2+
import BaseLayout from '../../layouts/BaseLayout.astro';
3+
4+
const features = [
5+
{ icon: '📋', title: 'Simple Lists', description: 'Create clean, shareable recommendation lists on any topic.' },
6+
{ icon: '🔗', title: 'Easy Sharing', description: 'Share your lists with a simple link anyone can access.' },
7+
{ icon: '💡', title: 'Any Topic', description: 'Books, tools, restaurants, podcasts - recommend anything you love.' },
8+
{ icon: '🎨', title: 'Clean Design', description: 'Beautiful, distraction-free presentation for your recommendations.' }
9+
];
10+
---
11+
12+
<BaseLayout
13+
title="recommended.by - Simple Bytes"
14+
description="Easily share the things you love as simple recommendation lists."
15+
>
16+
<a href="/" class="back-link">&larr; Back to all projects</a>
17+
18+
<section class="hero">
19+
<h1>recommended.by</h1>
20+
<p class="tagline">Easily share the things you love as simple recommendation lists. Create and share curated lists of your favorite things with anyone.</p>
21+
<div class="hero-links">
22+
<a href="https://recommended.by/?ref=simplebytes" target="_blank" rel="noopener" class="btn btn--primary">
23+
Visit recommended.by &rarr;
24+
</a>
25+
</div>
26+
</section>
27+
28+
<section class="how-it-works">
29+
<h2 class="section-title">How It Works</h2>
30+
<div class="steps-grid">
31+
<div class="step">
32+
<span class="step-number">1</span>
33+
<h3>Create a List</h3>
34+
<p>Pick a topic and add your recommendations</p>
35+
</div>
36+
<div class="step">
37+
<span class="step-number">2</span>
38+
<h3>Curate</h3>
39+
<p>Add descriptions and organize your picks</p>
40+
</div>
41+
<div class="step">
42+
<span class="step-number">3</span>
43+
<h3>Share</h3>
44+
<p>Send your list to friends or post it anywhere</p>
45+
</div>
46+
</div>
47+
</section>
48+
49+
<section class="features-section">
50+
<h2 class="section-title">Features</h2>
51+
<div class="features-grid">
52+
{features.map((feature) => (
53+
<div class="feature-item">
54+
<span class="feature-icon">{feature.icon}</span>
55+
<h3 class="feature-title">{feature.title}</h3>
56+
<p class="feature-description">{feature.description}</p>
57+
</div>
58+
))}
59+
</div>
60+
</section>
61+
</BaseLayout>
62+
63+
<style>
64+
.back-link {
65+
display: inline-flex;
66+
align-items: center;
67+
gap: 0.5rem;
68+
font-size: 0.875rem;
69+
color: var(--text-secondary);
70+
text-decoration: none;
71+
margin-bottom: 2rem;
72+
transition: color 0.2s;
73+
}
74+
75+
.back-link:hover {
76+
color: var(--text-primary);
77+
}
78+
79+
.hero {
80+
margin-bottom: 4rem;
81+
}
82+
83+
h1 {
84+
font-size: clamp(2.5rem, 6vw, 3.5rem);
85+
font-weight: 600;
86+
letter-spacing: -0.03em;
87+
margin-bottom: 1rem;
88+
}
89+
90+
.tagline {
91+
font-size: 1.25rem;
92+
color: var(--text-secondary);
93+
max-width: 600px;
94+
line-height: 1.6;
95+
margin-bottom: 1.5rem;
96+
}
97+
98+
.hero-links {
99+
display: flex;
100+
flex-wrap: wrap;
101+
gap: 0.75rem;
102+
}
103+
104+
/* How it works */
105+
.how-it-works {
106+
margin-bottom: 4rem;
107+
}
108+
109+
.steps-grid {
110+
display: grid;
111+
grid-template-columns: repeat(3, 1fr);
112+
gap: 1.5rem;
113+
}
114+
115+
.step {
116+
text-align: center;
117+
padding: 1.5rem;
118+
}
119+
120+
.step-number {
121+
display: inline-flex;
122+
align-items: center;
123+
justify-content: center;
124+
width: 2.5rem;
125+
height: 2.5rem;
126+
background: var(--accent);
127+
color: var(--bg-color);
128+
border-radius: 50%;
129+
font-weight: 600;
130+
margin-bottom: 1rem;
131+
}
132+
133+
.step h3 {
134+
font-size: 1.125rem;
135+
font-weight: 600;
136+
margin-bottom: 0.5rem;
137+
}
138+
139+
.step p {
140+
font-size: 0.875rem;
141+
color: var(--text-secondary);
142+
}
143+
144+
/* Features */
145+
.features-section {
146+
margin-bottom: 4rem;
147+
}
148+
149+
.features-grid {
150+
display: grid;
151+
grid-template-columns: repeat(2, 1fr);
152+
gap: 1.5rem;
153+
}
154+
155+
.feature-item {
156+
padding: 0.5rem 0;
157+
}
158+
159+
.feature-icon {
160+
font-size: 1.5rem;
161+
display: block;
162+
margin-bottom: 0.75rem;
163+
}
164+
165+
.feature-title {
166+
font-size: 1rem;
167+
font-weight: 600;
168+
margin-bottom: 0.375rem;
169+
}
170+
171+
.feature-description {
172+
font-size: 0.875rem;
173+
color: var(--text-secondary);
174+
line-height: 1.5;
175+
}
176+
177+
@media (max-width: 768px) {
178+
h1 {
179+
font-size: 2rem;
180+
}
181+
182+
.tagline {
183+
font-size: 1rem;
184+
}
185+
186+
.steps-grid,
187+
.features-grid {
188+
grid-template-columns: 1fr;
189+
}
190+
}
191+
</style>

0 commit comments

Comments
 (0)