~repos /website

#astro#js#html#css

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.


f168a0c2 pyrossh

7 months ago
fix code link
src/components/HeaderLink.astro CHANGED
@@ -1,14 +1,23 @@
1
1
  ---
2
- import type { HTMLAttributes } from 'astro/types';
2
+ import type { HTMLAttributes } from "astro/types";
3
3
 
4
- type Props = HTMLAttributes<'a'>;
4
+ type Props = HTMLAttributes<"a">;
5
5
 
6
6
  const { href, class: className, ...props } = Astro.props;
7
- const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
7
+ const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, "");
8
8
  const subpath = pathname.match(/[^\/]+/g);
9
- const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
9
+ const isActive = href === pathname || href === "/" + (subpath?.[0] || "");
10
+ const isExternal = href.startsWith("http");
11
+ const target = isExternal ? "_blank" : "_parent";
12
+ const rel = isExternal ? "noopener noreferrer" : "";
10
13
  ---
11
14
 
15
+ <a
16
+ href={href}
12
- <a href={href} class:list={[className, { active: isActive }]} {...props}>
17
+ class:list={[className, { active: isActive }]}
18
+ rel={rel}
19
+ target={target}
20
+ {...props}
21
+ >
13
- <slot />
22
+ <slot />
14
23
  </a>
src/pages/index.astro CHANGED
@@ -1,266 +1,308 @@
1
1
  ---
2
- import { Image } from 'astro:assets';
2
+ import { Image } from "astro:assets";
3
- import Layout from '@/layouts/Base.astro';
3
+ import Layout from "@/layouts/Base.astro";
4
- import Slide from '@/components/Slide.astro';
4
+ import Slide from "@/components/Slide.astro";
5
- import onlyBiblePng from '@/assets/images/app_icon.png';
5
+ import onlyBiblePng from "@/assets/images/app_icon.png";
6
- import rustPng from '@/assets/logos/rust.png';
6
+ import rustPng from "@/assets/logos/rust.png";
7
- import pyrosshPng from '@/assets/logos/pyrossh.png';
7
+ import pyrosshPng from "@/assets/logos/pyrossh.png";
8
- import stats from '@/assets/logos/stats.png';
8
+ import stats from "@/assets/logos/stats.png";
9
- import code from '@/assets/logos/code.png';
9
+ import code from "@/assets/logos/code.png";
10
- import helix from '@/assets/logos/helix.png';
10
+ import helix from "@/assets/logos/helix.png";
11
- import nu from '@/assets/logos/nu.png';
11
+ import nu from "@/assets/logos/nu.png";
12
- import iterm from '@/assets/logos/iterm.png';
12
+ import iterm from "@/assets/logos/iterm.png";
13
- import zellij from '@/assets/logos/zellij.png';
13
+ import zellij from "@/assets/logos/zellij.png";
14
- import inkscape from '@/assets/logos/inkscape.png';
14
+ import inkscape from "@/assets/logos/inkscape.png";
15
15
  ---
16
16
 
17
17
  <style>
18
- h2 {
18
+ h2 {
19
- font-size: 1.5rem;
19
+ font-size: 1.5rem;
20
- font-weight: 600;
20
+ font-weight: 600;
21
- }
21
+ }
22
22
 
23
- section {
23
+ section {
24
- display: flex;
24
+ display: flex;
25
- flex-direction: column;
25
+ flex-direction: column;
26
- margin-top: 1.5rem;
26
+ margin-top: 1.5rem;
27
- margin-bottom: 1rem;
27
+ margin-bottom: 1rem;
28
- }
28
+ }
29
29
 
30
- .soft-link {
30
+ .soft-link {
31
- display: flex;
31
+ display: flex;
32
- flex-direction: row;
32
+ flex-direction: row;
33
- align-items: center;
33
+ align-items: center;
34
- text-align: left;
34
+ text-align: left;
35
35
 
36
- & > div {
36
+ & > div {
37
- flex: 1;
37
+ flex: 1;
38
- }
38
+ }
39
- }
39
+ }
40
40
 
41
- .p-0\.5 {
41
+ .p-0\.5 {
42
- /* padding: 0.125rem; */
42
+ /* padding: 0.125rem; */
43
- }
43
+ }
44
44
 
45
- .rounded-md {
45
+ .rounded-md {
46
- border-radius: 0.375rem;
46
+ border-radius: 0.375rem;
47
- }
47
+ }
48
48
  </style>
49
49
 
50
50
  <Layout
51
- title="pyrossh"
51
+ title="pyrossh"
52
- description="Tech Lead from Bangalore who likes to create frameworks and programming languages."
52
+ description="Tech Lead from Bangalore who likes to create frameworks and programming languages."
53
53
  >
54
- <div class="mx-auto mb-10">
55
- <div>
56
- <h1 class="text-3xl font-bold mb-4">Hello!</h1>
57
- <p>
58
- <a
59
- class="underline"
60
- href="https://www.linkedin.com/in/pyrossh"
61
- target="_blank"
62
- rel="noopener noreferrer"
63
- >
64
- <strong>I’m</strong>
65
- </a>
66
- a tech lead based out of Bangalore, India and have worked for startups and enterprises that focus
67
- on products in the healthcare and finance domains. I like to build frameworks and automate common
68
- tasks to make it easier to develop applications.
69
- </p>
70
- <p>
71
- I enjoy working on open-source projects, and during the last decade, I've created a number
72
- of projects that are widely used.
73
- </p>
74
- <div>
75
- <section>
76
- <div class="flex items-center mb-4">
77
- <h2>Projects</h2>
78
- </div>
79
- <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
80
- <Slide title="rust-embed" link="https://git.sr.ht/~pyrossh/rust-embed">
81
- <Image slot="icon" class="mr-2 w-9 rounded-xl" src={rustPng} alt="rust embed" />
82
- <p>
83
- A rust proc-macro which loads files into the rust binary at compile time during
84
- release and loads the file from the fs during dev
85
- </p>
86
- </Slide>
87
- <Slide title="pyrossh.dev" link="https://git.sr.ht/~pyrossh/website">
88
- <Image
89
- slot="icon"
90
- class="mr-2 w-9 rounded-xl"
91
- src={pyrosshPng}
92
- alt="pyrossh website"
93
- />
94
- <p>
95
- 木 Personal website of pyrossh. Built with
96
- <span class="*:underline">
97
- <a href="https://astro.build/" target="_blank" rel="noopener noreferrer"
98
- >astrojs</a
99
- >,
100
- <a href="https://shiki.matsu.io/" target="_blank" rel="noopener noreferrer"
101
- >shiki</a
102
- >,
103
- <a href="https://vitejs.dev/" target="_blank" rel="noopener noreferrer">vite</a>.
104
- </span>
105
- </p>
106
- </Slide>
107
- <Slide title="pacman" link="https://git.sr.ht/~pyrossh/plum">
108
- <span slot="icon" class="text-4xl mr-2">👾</span>
109
- <p>
110
- A statically typed, imperative programming language with ADT's inspired by rust,
111
- haskell.
112
- </p>
113
- </Slide>
114
- <Slide title="Only Bible App" link="/only-bible-app" isExternal={false}>
115
- <Image
116
- slot="icon"
117
- class="mr-2 w-9 rounded-xl"
118
- src={onlyBiblePng}
119
- alt="Only Bible App"
120
- />
121
- <p>
122
- The only bible app you will ever need. No ads, No in-app purchases, No distractions.
123
- Works completely offline.
124
- </p>
125
- </Slide>
126
- </div>
54
+ <div class="mx-auto mb-10">
55
+ <div>
56
+ <h1 class="text-3xl font-bold mb-4">Hello!</h1>
57
+ <p>
58
+ <a
59
+ class="underline"
60
+ href="https://www.linkedin.com/in/pyrossh"
61
+ target="_blank"
62
+ rel="noopener noreferrer"
63
+ >
64
+ <strong>I’m</strong>
65
+ </a>
66
+ a tech lead based out of Bangalore, India and have worked for startups and
67
+ enterprises that focus on products in the healthcare and finance domains.
68
+ I like to build frameworks and automate common tasks to make it easier to
69
+ develop applications.
70
+ </p>
71
+ <p>
72
+ I enjoy working on open-source projects, and during the last decade,
73
+ I've created a number of projects that are widely used.
74
+ </p>
75
+ <div>
76
+ <section>
77
+ <div class="flex items-center mb-4">
78
+ <h2>Projects</h2>
79
+ </div>
80
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
81
+ <Slide
82
+ title="rust-embed"
83
+ link="https://git.sr.ht/~pyrossh/rust-embed"
84
+ >
85
+ <Image
86
+ slot="icon"
87
+ class="mr-2 w-9 rounded-xl"
88
+ src={rustPng}
89
+ alt="rust embed"
90
+ />
91
+ <p>
92
+ A rust proc-macro which loads files into the rust binary at
93
+ compile time during release and loads the file from the fs
94
+ during dev
95
+ </p>
96
+ </Slide>
97
+ <Slide
98
+ title="pyrossh.dev"
99
+ link="https://git.sr.ht/~pyrossh/website"
100
+ >
101
+ <Image
102
+ slot="icon"
103
+ class="mr-2 w-9 rounded-xl"
104
+ src={pyrosshPng}
105
+ alt="pyrossh website"
106
+ />
107
+ <p>
108
+ Personal website of pyrossh. Built with
109
+ <span class="*:underline">
110
+ <a
111
+ href="https://astro.build/"
112
+ target="_blank"
113
+ rel="noopener noreferrer">astrojs</a
114
+ >,
115
+ <a
116
+ href="https://shiki.matsu.io/"
117
+ target="_blank"
118
+ rel="noopener noreferrer">shiki</a
119
+ >,
120
+ <a
121
+ href="https://vitejs.dev/"
122
+ target="_blank"
123
+ rel="noopener noreferrer">vite</a
124
+ >.
125
+ </span>
126
+ </p>
127
+ </Slide>
128
+ <Slide title="pacman" link="https://git.sr.ht/~pyrossh/plum">
129
+ <span slot="icon" class="text-4xl mr-2">👾</span>
130
+ <p>
131
+ A statically typed, imperative programming language with ADT's
132
+ inspired by rust, haskell.
133
+ </p>
134
+ </Slide>
135
+ <Slide
136
+ title="Only Bible App"
137
+ link="/only-bible-app"
138
+ isExternal={false}
139
+ >
140
+ <Image
141
+ slot="icon"
142
+ class="mr-2 w-9 rounded-xl"
143
+ src={onlyBiblePng}
144
+ alt="Only Bible App"
145
+ />
146
+ <p>
147
+ The only bible app you will ever need. No ads, No in-app
148
+ purchases, No distractions. Works completely offline.
149
+ </p>
150
+ </Slide>
151
+ </div>
127
152
 
128
- <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
129
- <section>
130
- <div class="flex items-center">
131
- <h2>Interests</h2>
132
- </div>
133
- <ul class="grid gap-2 grid-cols-3 text-center mt-4 *:bg-slate-100 *:p-1">
134
- <li>HTML</li>
135
- <li>CSS</li>
136
- <li>Javascript</li>
137
- <li>SQL</li>
138
- <li>Go</li>
139
- <li>Zig</li>
140
- <li>Kotlin</li>
141
- <li>React</li>
142
- <li>Expo</li>
143
- <li>Bun</li>
144
- <li>MicroZig</li>
145
- <li>Kaluma</li>
146
- <li>K8s</li>
147
- <li>Knative</li>
148
- <li>Iceberg</li>
149
- </ul>
150
- </section>
151
- <section>
152
- <div class="flex items-center">
153
- <h2>Contact</h2>
154
- </div>
155
- <ul
156
- class="grid gap-2 grid-cols-1 text-left mt-4 *:bg-slate-100 *:p-2 *:flex *:flex-col *:items-baseline *:sm:flex-row"
157
- >
158
- <li>
159
- <strong class="mr-2">Email:</strong>
160
- <span>pyros2097@gmail.com</span>
161
- </li>
162
- <li>
163
- <strong class="mr-2">Sourcehut:</strong>
164
- <a class="text-blue-900" href="https://git.sr.ht/~pyrossh/">
165
- https://git.sr.ht/~pyrossh/
166
- </a>
167
- </li>
168
- <li>
169
- <strong class="mr-2">LinkedIn:</strong>
170
- <a class="text-blue-900" href="https://www.linkedin.com/in/peter-john-in">
171
- https://www.linkedin.com/in/pyrossh
172
- </a>
173
- </li>
174
- </ul>
175
- </section>
176
- </div>
177
- <section>
178
- <div class="flex items-center">
179
- <h2>Tools</h2>
180
- </div>
181
- <ul class="grid gap-2 grid-cols-3 md:grid-cols-7 text-center mt-4 *:bg-slate-100 *:p-1">
182
- <li>
183
- <a
184
- class="soft-link"
185
- href="https://github.com/exelban/stats"
186
- target="_blank"
187
- rel="noopener noreferrer"
188
- >
189
- <div>Stats</div>
190
- <Image src={stats} alt="Stats" width="32" />
191
- </a>
192
- </li>
193
- <li>
194
- <a
195
- class="soft-link"
196
- href="https://github.com/microsoft/vscode"
197
- target="_blank"
198
- rel="noopener noreferrer"
199
- >
200
- <div>VS Code</div>
201
- <Image src={code} alt="VS Code" width="32" />
202
- </a>
203
- </li>
204
- <li>
205
- <a
206
- class="soft-link"
207
- href="https://github.com/helix-editor/helix"
208
- target="_blank"
209
- rel="noopener noreferrer"
210
- >
211
- <div>Helix</div>
212
- <Image src={helix} alt="Helix" width="32" />
213
- </a>
214
- </li>
215
- <li>
216
- <a
217
- class="soft-link"
218
- href="https://github.com/nushell/nushell"
219
- target="_blank"
220
- rel="noopener noreferrer"
221
- >
222
- <div>Nushell</div>
223
- <Image class="p-0.5 rounded-md" src={nu} alt="nu-shell" width="32" />
224
- </a>
225
- </li>
226
- <li>
227
- <a
228
- class="soft-link"
229
- href="https://github.com/gnachman/iTerm2"
230
- target="_blank"
231
- rel="noopener noreferrer"
232
- >
233
- <div>iTerm2</div>
234
- <Image src={iterm} alt="iterm2" width="32" />
235
- </a>
236
- </li>
237
- <li>
238
- <a
239
- class="soft-link"
240
- href="https://zellij.dev/"
241
- target="_blank"
242
- rel="noopener noreferrer"
243
- >
244
- <div>Zellij</div>
245
- <Image class="w-7 p-0.5" src={zellij} alt="zellij" width="32" />
246
- </a>
247
- </li>
153
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
154
+ <section>
155
+ <div class="flex items-center">
156
+ <h2>Interests</h2>
157
+ </div>
158
+ <ul
159
+ class="grid gap-2 grid-cols-3 text-center mt-4 *:bg-slate-100 *:p-1"
160
+ >
161
+ <li>HTML</li>
162
+ <li>CSS</li>
163
+ <li>Javascript</li>
164
+ <li>SQL</li>
165
+ <li>Go</li>
166
+ <li>Zig</li>
167
+ <li>Kotlin</li>
168
+ <li>React</li>
169
+ <li>Expo</li>
170
+ <li>Bun</li>
171
+ <li>MicroZig</li>
172
+ <li>Kaluma</li>
173
+ <li>K8s</li>
174
+ <li>Knative</li>
175
+ <li>Iceberg</li>
176
+ </ul>
177
+ </section>
178
+ <section>
179
+ <div class="flex items-center">
180
+ <h2>Contact</h2>
181
+ </div>
182
+ <ul
183
+ class="grid gap-2 grid-cols-1 text-left mt-4 *:bg-slate-100 *:p-2 *:flex *:flex-col *:items-baseline *:sm:flex-row"
184
+ >
185
+ <li>
186
+ <strong class="mr-2">Email:</strong>
187
+ <span>pyros2097@gmail.com</span>
188
+ </li>
189
+ <li>
190
+ <strong class="mr-2">Sourcehut:</strong>
191
+ <a class="text-blue-900" href="https://git.sr.ht/~pyrossh/">
192
+ https://git.sr.ht/~pyrossh/
193
+ </a>
194
+ </li>
195
+ <li>
196
+ <strong class="mr-2">LinkedIn:</strong>
197
+ <a
198
+ class="text-blue-900"
199
+ href="https://www.linkedin.com/in/peter-john-in"
200
+ >
201
+ https://www.linkedin.com/in/pyrossh
202
+ </a>
203
+ </li>
204
+ </ul>
205
+ </section>
206
+ </div>
207
+ <section>
208
+ <div class="flex items-center">
209
+ <h2>Tools</h2>
210
+ </div>
211
+ <ul
212
+ class="grid gap-2 grid-cols-3 md:grid-cols-7 text-center mt-4 *:bg-slate-100 *:p-1"
213
+ >
214
+ <li>
215
+ <a
216
+ class="soft-link"
217
+ href="https://github.com/exelban/stats"
218
+ target="_blank"
219
+ rel="noopener noreferrer"
220
+ >
221
+ <div>Stats</div>
222
+ <Image src={stats} alt="Stats" width="32" />
223
+ </a>
224
+ </li>
225
+ <li>
226
+ <a
227
+ class="soft-link"
228
+ href="https://github.com/microsoft/vscode"
229
+ target="_blank"
230
+ rel="noopener noreferrer"
231
+ >
232
+ <div>VS Code</div>
233
+ <Image src={code} alt="VS Code" width="32" />
234
+ </a>
235
+ </li>
236
+ <li>
237
+ <a
238
+ class="soft-link"
239
+ href="https://github.com/helix-editor/helix"
240
+ target="_blank"
241
+ rel="noopener noreferrer"
242
+ >
243
+ <div>Helix</div>
244
+ <Image src={helix} alt="Helix" width="32" />
245
+ </a>
246
+ </li>
247
+ <li>
248
+ <a
249
+ class="soft-link"
250
+ href="https://github.com/nushell/nushell"
251
+ target="_blank"
252
+ rel="noopener noreferrer"
253
+ >
254
+ <div>Nushell</div>
255
+ <Image
256
+ class="p-0.5 rounded-md"
257
+ src={nu}
258
+ alt="nu-shell"
259
+ width="32"
260
+ />
261
+ </a>
262
+ </li>
263
+ <li>
264
+ <a
265
+ class="soft-link"
266
+ href="https://github.com/gnachman/iTerm2"
267
+ target="_blank"
268
+ rel="noopener noreferrer"
269
+ >
270
+ <div>iTerm2</div>
271
+ <Image src={iterm} alt="iterm2" width="32" />
272
+ </a>
273
+ </li>
274
+ <li>
275
+ <a
276
+ class="soft-link"
277
+ href="https://zellij.dev/"
278
+ target="_blank"
279
+ rel="noopener noreferrer"
280
+ >
281
+ <div>Zellij</div>
282
+ <Image
283
+ class="w-7 p-0.5"
284
+ src={zellij}
285
+ alt="zellij"
286
+ width="32"
287
+ />
288
+ </a>
289
+ </li>
248
290
 
249
- <li>
291
+ <li>
250
- <a
292
+ <a
251
- class="soft-link"
293
+ class="soft-link"
252
- href="https://inkscape.org/"
294
+ href="https://inkscape.org/"
253
- target="_blank"
295
+ target="_blank"
254
- rel="noopener noreferrer"
296
+ rel="noopener noreferrer"
255
- >
297
+ >
256
- <div>Inkscape</div>
298
+ <div>Inkscape</div>
257
- <Image src={inkscape} alt="inkscape" width="32" />
299
+ <Image src={inkscape} alt="inkscape" width="32" />
258
- </a>
300
+ </a>
259
- </li>
301
+ </li>
260
- </ul>
302
+ </ul>
261
- </section>
303
+ </section>
262
- </section>
304
+ </section>
263
- </div>
305
+ </div>
264
- </div>
306
+ </div>
265
- </div>
307
+ </div>
266
308
  </Layout>
src/pages/posts/index.astro CHANGED
@@ -1,38 +1,45 @@
1
1
  ---
2
- import { getCollection } from 'astro:content';
2
+ import { getCollection } from "astro:content";
3
- import FormattedDate from '../../components/FormattedDate.astro';
3
+ import FormattedDate from "../../components/FormattedDate.astro";
4
- import Layout from '@/layouts/Base.astro';
4
+ import Layout from "@/layouts/Base.astro";
5
5
 
6
- const posts = (await getCollection('content')).sort(
6
+ const posts = (await getCollection("content")).sort(
7
- (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
7
+ (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
8
8
  );
9
9
  ---
10
10
 
11
11
  <Layout>
12
- <h1 class="font-bold text-3xl">Posts</h1>
12
+ <h1 class="font-bold text-3xl">Posts</h1>
13
- <div class="container">
13
+ <div class="container">
14
- <ul class="flex flex-col">
14
+ <ul class="flex flex-col">
15
- {
15
+ {
16
- posts.map((post) => (
16
+ posts.map((post) => (
17
- <li class="grid grid-cols-1 sm:grid-cols-2 gap-3 justify-start items-end mt-5 leading-6">
17
+ <li class="grid grid-cols-1 sm:grid-cols-2 gap-3 justify-start items-end mt-5 leading-6">
18
- <div class="flex flex-col">
18
+ <div class="flex flex-col">
19
+ <a
19
- <a class="text-black underline underline-offset-4" href={`/posts/${post.id}`}>
20
+ class="text-black underline underline-offset-4"
21
+ href={`/posts/${post.id}`}
22
+ >
20
- {post.data.title}
23
+ {post.data.title}
21
- </a>
24
+ </a>
22
- <span class="hover:cursor-default">{post.data.description}</span>
25
+ <span class="hover:cursor-default">{post.data.description}</span>
23
- </div>
26
+ </div>
24
- <span class="flex flex-1 justify-end sm:ml-4 text-md text-gray-900">
27
+ <span class="flex flex-1 justify-end sm:ml-4 text-md text-gray-900">
25
- <FormattedDate date={post.data.pubDate} />
28
+ <FormattedDate date={post.data.pubDate} />
26
- </span>
29
+ </span>
27
- </li>
30
+ </li>
28
- ))
31
+ ))
29
- }
32
+ }
30
- </ul>
33
+ </ul>
31
- </div>
34
+ </div>
35
+ <hr />
32
36
  </Layout>
33
37
  <style>
34
- .container {
38
+ .container {
35
- display: flex;
39
+ display: flex;
36
- float: left;
40
+ float: left;
37
- }
41
+ }
42
+ hr {
43
+ padding-bottom: 75%;
44
+ }
38
45
  </style>