~repos /website
git clone https://pyrossh.dev/repos/website.git
木 Personal website of pyrossh. Built with astrojs, shiki, vite.
ca244275
—
pyrossh 2 years ago
improve index
- components/Header.tsx +8 -20
- components/Slide.tsx +78 -0
- routes/_app.tsx +3 -3
- routes/index.tsx +160 -4
- static/images/desktop.png +0 -0
- static/images/email1.png +0 -0
- static/images/gdx-studio.png +0 -0
- static/images/gopibot.jpg +0 -0
- static/images/gopibot.png +0 -0
- static/images/gromer.png +0 -0
- static/images/logo.png +0 -0
- static/images/pine.png +0 -0
- static/images/rust-embed.png +0 -0
- static/images/terminal1.jpg +0 -0
- static/images/terminal1.png +0 -0
- tailwind.config.ts +3 -0
components/Header.tsx
CHANGED
|
@@ -3,36 +3,24 @@ import SocialLinks from "./SocialLinks.tsx";
|
|
|
3
3
|
export default function Header() {
|
|
4
4
|
return (
|
|
5
5
|
<header>
|
|
6
|
-
<nav class="
|
|
6
|
+
<nav class="spy-2 m:py-0 flex w-full flex-1 flex-row justify-center bg-black text-xl font-mono">
|
|
7
7
|
<div class="flex flex-row flex-1 items-center p-3.5 max-w-5xl">
|
|
8
8
|
<a
|
|
9
|
-
class="flex text-yellow pr-4 hover:no-underline text-xl ml-0 pl-0
|
|
9
|
+
class="flex text-yellow pr-4 hover:no-underline text-xl ml-0 pl-0"
|
|
10
10
|
href="/"
|
|
11
11
|
>
|
|
12
12
|
<span class="mr-1 font-logo font-bold">木</span> pyros.sh
|
|
13
13
|
</a>
|
|
14
|
-
<div class="flex flex-row flex-1 items-center">
|
|
14
|
+
<div class="flex flex-row flex-1 items-center text-white [&>a]:mx-1 [&>a]:px-2 [&>a:hover]:bg-gray-600">
|
|
15
|
-
<a
|
|
16
|
-
|
|
15
|
+
<a class="data-current:bg-gray-600" href="/dev" rel="prefetch">
|
|
17
|
-
href="/dev"
|
|
18
|
-
rel="prefetch"
|
|
19
|
-
>
|
|
20
16
|
dev
|
|
21
17
|
</a>
|
|
22
|
-
<div
|
|
18
|
+
<div>|</div>
|
|
23
|
-
<a
|
|
24
|
-
|
|
19
|
+
<a class="data-current:bg-gray-600" href="/ref" rel="prefetch">
|
|
25
|
-
href="/ref"
|
|
26
|
-
rel="prefetch"
|
|
27
|
-
>
|
|
28
20
|
ref
|
|
29
21
|
</a>
|
|
30
|
-
<div
|
|
22
|
+
<div>|</div>
|
|
31
|
-
<a
|
|
32
|
-
|
|
23
|
+
<a class="data-current:bg-gray-600" href="/blog" rel="prefetch">
|
|
33
|
-
href="/blog"
|
|
34
|
-
rel="prefetch"
|
|
35
|
-
>
|
|
36
24
|
blog
|
|
37
25
|
</a>
|
|
38
26
|
</div>
|
components/Slide.tsx
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { JsxAttribute } from "https://deno.land/x/ts_morph@20.0.0/ts_morph.js";
|
|
2
|
+
import { JSX } from "preact/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
// const { title, image, link } = Astro.props;
|
|
5
|
+
// ---
|
|
6
|
+
|
|
7
|
+
// <style>
|
|
8
|
+
// .container {
|
|
9
|
+
// margin-top: 2rem;
|
|
10
|
+
// overflow: hidden;
|
|
11
|
+
// border-radius: 0.25rem;
|
|
12
|
+
// background-color: var(--slider-bg);
|
|
13
|
+
// }
|
|
14
|
+
|
|
15
|
+
// .box {
|
|
16
|
+
// display: flex;
|
|
17
|
+
// flex-direction: column;
|
|
18
|
+
// width: 100%;
|
|
19
|
+
// padding: 1rem;
|
|
20
|
+
// }
|
|
21
|
+
|
|
22
|
+
// .text {
|
|
23
|
+
// width: 100%;
|
|
24
|
+
// flex: 1;
|
|
25
|
+
// margin-right: 2rem;
|
|
26
|
+
|
|
27
|
+
// & > a {
|
|
28
|
+
// color: black;
|
|
29
|
+
// text-decoration: underline;
|
|
30
|
+
// }
|
|
31
|
+
// }
|
|
32
|
+
|
|
33
|
+
// .repo-link {
|
|
34
|
+
// display: flex;
|
|
35
|
+
// align-items: center;
|
|
36
|
+
// margin-bottom: 1rem;
|
|
37
|
+
// font-size: 1.5rem;
|
|
38
|
+
// line-height: 2rem;
|
|
39
|
+
// font-weight: 600;
|
|
40
|
+
// /* text-decoration: none !important; */
|
|
41
|
+
|
|
42
|
+
// [astro-icon] {
|
|
43
|
+
// width: 32px;
|
|
44
|
+
// margin-right: 0.6rem;
|
|
45
|
+
// }
|
|
46
|
+
// }
|
|
47
|
+
// </style>
|
|
48
|
+
|
|
49
|
+
export interface Props {
|
|
50
|
+
title: string;
|
|
51
|
+
link: string;
|
|
52
|
+
imgSrc: string;
|
|
53
|
+
children: JSX.Element | JSX.Element[];
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export default function Slide({ title, imgSrc, link, children }: Props) {
|
|
57
|
+
return (
|
|
58
|
+
<article class="overflow-hidden rounded bg-slider-bg">
|
|
59
|
+
<div class="flex flex-col w-full p-4">
|
|
60
|
+
<div class="w-full flex-1 mr-8">
|
|
61
|
+
<a
|
|
62
|
+
href={link}
|
|
63
|
+
class="flex items-center text-2xl leading-8 font-semibold mb-4 text-black underline"
|
|
64
|
+
target="_blank"
|
|
65
|
+
rel="noopener noreferrer"
|
|
66
|
+
>
|
|
67
|
+
{/* <Icon name="mdi:github" /> */}
|
|
68
|
+
<p>{title}</p>
|
|
69
|
+
</a>
|
|
70
|
+
{children}
|
|
71
|
+
</div>
|
|
72
|
+
<div class="hidden flex-col flex-1 w-4/12 bg-white border items-center justify-center rounded-sm border-solid border-black">
|
|
73
|
+
<img src={imgSrc} alt={title} />
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</article>
|
|
77
|
+
);
|
|
78
|
+
}
|
routes/_app.tsx
CHANGED
|
@@ -17,17 +17,17 @@ import Header from "../components/Header.tsx";
|
|
|
17
17
|
|
|
18
18
|
export default function App({ Component }: AppProps) {
|
|
19
19
|
return (
|
|
20
|
-
<html lang="en">
|
|
20
|
+
<html lang="en" class="h-full w-full">
|
|
21
21
|
<head>
|
|
22
22
|
<meta charset="utf-8" />
|
|
23
23
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
24
24
|
<link rel="stylesheet" href="/styles.css" />
|
|
25
25
|
</head>
|
|
26
|
-
<body class="bg-black-lighter">
|
|
26
|
+
<body class="leading-8 flex flex-1 flex-col font-normal text-lg sm:leading-7 m-0 bg-black-lighter">
|
|
27
27
|
<Header />
|
|
28
28
|
<main class="w-full h-full block bg-white">
|
|
29
29
|
<div class="flex w-full flex-1 flex-row justify-center">
|
|
30
|
-
<div class="flex w-full flex-1 flex-row items-center max-w-5xl mt-4 mb-20 p-
|
|
30
|
+
<div class="flex w-full flex-1 flex-row items-center max-w-5xl mt-4 mb-20 p-4">
|
|
31
31
|
<Component />
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
routes/index.tsx
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { useSignal } from "@preact/signals";
|
|
2
|
-
import {
|
|
2
|
+
import { Handlers } from "$fresh/server.ts";
|
|
3
|
+
import Slide from "../components/Slide.tsx";
|
|
3
4
|
import Counter from "../islands/Counter.tsx";
|
|
5
|
+
import { asset, Head } from "$fresh/runtime.ts";
|
|
4
6
|
|
|
5
7
|
export const handler: Handlers = {
|
|
6
8
|
async GET(req, ctx) {
|
|
@@ -18,8 +20,161 @@ export const handler: Handlers = {
|
|
|
18
20
|
export default function Home() {
|
|
19
21
|
const count = useSignal(5);
|
|
20
22
|
return (
|
|
23
|
+
<div class="mx-auto">
|
|
24
|
+
<Head>
|
|
25
|
+
<title>pyros.sh</title>
|
|
26
|
+
<meta
|
|
27
|
+
name="description"
|
|
28
|
+
content="A fullstack developer from Bangalore who likes to create frameworks and programming languages."
|
|
29
|
+
/>
|
|
30
|
+
</Head>
|
|
31
|
+
<div>
|
|
32
|
+
<div>
|
|
33
|
+
<h1 class="text-3xl font-bold mb-4">Hello!</h1>
|
|
34
|
+
<p>
|
|
35
|
+
I'm{" "}
|
|
36
|
+
<strong>Peter John</strong>, a fullstack developer from Bengaluru,
|
|
37
|
+
India. I love writing code and I am lucky enough to do this as my
|
|
38
|
+
job.
|
|
39
|
+
</p>
|
|
40
|
+
<p>
|
|
41
|
+
I currently work for Equal Experts. I have a strong passion for
|
|
42
|
+
golang but I also work with react and nodejs. I've mostly worked
|
|
43
|
+
with startups and product based companies. I have gained a lot of
|
|
44
|
+
domain specific knowledge in healthcare and finance during these
|
|
45
|
+
startup years.
|
|
46
|
+
</p>
|
|
47
|
+
<p>
|
|
48
|
+
I like to work on open source and hobby projects. Over the course of
|
|
49
|
+
{" "}
|
|
50
|
+
{new Date().getFullYear() - 2014}{" "}
|
|
51
|
+
years I've accumulated a lot of useful projects used by many people
|
|
52
|
+
around the world.
|
|
53
|
+
</p>
|
|
54
|
+
</div>
|
|
55
|
+
<div>
|
|
56
|
+
<div class="flex items-center mt-4 mb-4">
|
|
57
|
+
{/* <Icon name="ant-design:project-outlined" /> */}
|
|
58
|
+
<h2 class="my-0 text-3xl font-bold">Projects</h2>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
|
|
61
|
+
<Slide
|
|
62
|
+
title="Rust-embed"
|
|
63
|
+
link="https://github.com/pyrossh/rust-embed"
|
|
64
|
+
imgSrc={asset("/images/rust-embed.png")}
|
|
65
|
+
>
|
|
66
|
+
<p>
|
|
67
|
+
A rust macro which loads files into the rust binary at compile
|
|
68
|
+
time during release and loads the file from the fs during dev
|
|
69
|
+
</p>
|
|
70
|
+
<p>
|
|
71
|
+
You can use this to embed your css, js and images into a single
|
|
72
|
+
executable which can be deployed to your servers. Also it makes
|
|
73
|
+
it easy to build a very small docker image for you to deploy
|
|
74
|
+
</p>
|
|
75
|
+
</Slide>
|
|
76
|
+
<Slide
|
|
77
|
+
title="Gromer"
|
|
78
|
+
link="https://github.com/pyrossh/gromer"
|
|
79
|
+
imgSrc={asset("/images/gromer.png")}
|
|
80
|
+
>
|
|
81
|
+
<p>
|
|
82
|
+
Gromer is a framework and cli to build web apps in golang. It
|
|
83
|
+
uses a declarative syntax using inline jsx like templates for
|
|
84
|
+
components and pages.
|
|
85
|
+
</p>
|
|
86
|
+
<p>
|
|
87
|
+
It also generates http handlers for your routes which follow a
|
|
88
|
+
particular folder structure. Similar to other frameworks like
|
|
89
|
+
nextjs, sveltekit. These handlers are also normal functions and
|
|
90
|
+
can be imported in other packages to call them directly
|
|
91
|
+
</p>
|
|
92
|
+
</Slide>
|
|
93
|
+
<Slide
|
|
94
|
+
title="Palm"
|
|
95
|
+
link="https://github.com/pyrossh/palm"
|
|
96
|
+
imgSrc={asset("/images/pine.png")}
|
|
97
|
+
>
|
|
98
|
+
<p>
|
|
99
|
+
A programming language with a syntax largely inspired by pyret
|
|
100
|
+
and hush but with the simplicity of go.
|
|
101
|
+
</p>
|
|
102
|
+
<p>
|
|
103
|
+
It has support for first class functions and has a clean syntax
|
|
104
|
+
and can call C library functions directly. Pine programs will
|
|
105
|
+
eventually be compiled to AMD64 and ARM64 and using QBE a small
|
|
106
|
+
and fast compiler backend
|
|
107
|
+
</p>
|
|
108
|
+
</Slide>
|
|
109
|
+
<Slide
|
|
110
|
+
title="Gdx Studio"
|
|
111
|
+
link="https://github.com/pyrossh/gdx-studio"
|
|
112
|
+
imgSrc={asset("/images/gdx-studio.png")}
|
|
113
|
+
>
|
|
114
|
+
<p>GdxStudio is used for creating awesome games using libGDX.</p>
|
|
115
|
+
<p>
|
|
116
|
+
It has all the features of libGDX built-in so you can
|
|
117
|
+
easily,start creating games with it. Automatic Asset Loading
|
|
118
|
+
including Atlas, TextureRegions, BitmapFonts, Music, Sound.
|
|
119
|
+
Tools like Font Editor, Particle Editor, Texture Packer,
|
|
120
|
+
SceneEditor, MapEditor, ActorEditor, ImagingTools are already
|
|
121
|
+
built into it
|
|
122
|
+
</p>
|
|
123
|
+
</Slide>
|
|
124
|
+
<section class="flex flex-col flex-1">
|
|
125
|
+
<div class="text-3xl font-bold">
|
|
126
|
+
{/* <Icon name="typcn:tree" /> */}
|
|
127
|
+
Interests
|
|
128
|
+
</div>
|
|
21
|
-
|
|
129
|
+
<div class="ml-1 mt-6 mb-4">
|
|
130
|
+
These are some of the stuff I work on
|
|
131
|
+
</div>
|
|
132
|
+
<ul class="grid gap-2 grid-cols-3 ml-4 [&>li]:list-disc [&>li]:px-0 [&>li]:py-1 [&>li:marker]:text-black">
|
|
133
|
+
<li>HTML</li>
|
|
134
|
+
<li>Javascript</li>
|
|
135
|
+
<li>CSS</li>
|
|
136
|
+
<li>SVG</li>
|
|
137
|
+
<li>Go</li>
|
|
138
|
+
<li>Rust</li>
|
|
139
|
+
<li>Node</li>
|
|
140
|
+
<li>Java</li>
|
|
141
|
+
<li>React</li>
|
|
142
|
+
<li>Postgres</li>
|
|
143
|
+
<li>k8s</li>
|
|
144
|
+
<li>Serverless</li>
|
|
145
|
+
</ul>
|
|
146
|
+
</section>
|
|
147
|
+
<section class="flex flex-col flex-1">
|
|
148
|
+
<div class="text-3xl font-bold">
|
|
149
|
+
{/* <Icon name="mdi:contact-outline" /> */}
|
|
150
|
+
Contact
|
|
151
|
+
</div>
|
|
152
|
+
<div class="ml-1 mt-6 mb-4">
|
|
153
|
+
You can contact me through any of these methods
|
|
154
|
+
</div>
|
|
155
|
+
<ul class="grid gap-1 grid-cols-1 ml-4 [&>li]:list-disc [&>li]:px-0 [&>li]:py-1 [&>a]:ml-4">
|
|
156
|
+
<li>
|
|
157
|
+
Email:
|
|
158
|
+
<a href="mailto:pyros2097@gmail.com">pyros2097@gmail.com</a>
|
|
159
|
+
</li>
|
|
160
|
+
<li>
|
|
161
|
+
Github:
|
|
162
|
+
<a href="https://github.com/pyrossh">pyrossh</a>
|
|
163
|
+
</li>
|
|
164
|
+
<li>
|
|
165
|
+
LinkedIn:
|
|
166
|
+
<a href="https://www.linkedin.com/in/peter-john-in">
|
|
167
|
+
{" "}
|
|
168
|
+
pyrossh
|
|
169
|
+
</a>
|
|
170
|
+
</li>
|
|
171
|
+
</ul>
|
|
172
|
+
</section>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
{
|
|
22
|
-
|
|
177
|
+
/* <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
|
|
23
178
|
<img
|
|
24
179
|
class="my-6"
|
|
25
180
|
src="/logo.svg"
|
|
@@ -33,7 +188,8 @@ export default function Home() {
|
|
|
33
188
|
<code class="mx-2">./routes/index.tsx</code> file, and refresh.
|
|
34
189
|
</p>
|
|
35
190
|
<Counter count={count} />
|
|
36
|
-
</div>
|
|
191
|
+
</div> */
|
|
192
|
+
}
|
|
37
193
|
</div>
|
|
38
194
|
);
|
|
39
195
|
}
|
static/images/desktop.png
ADDED
|
Binary file
|
static/images/email1.png
ADDED
|
Binary file
|
static/images/gdx-studio.png
ADDED
|
Binary file
|
static/images/gopibot.jpg
ADDED
|
Binary file
|
static/images/gopibot.png
ADDED
|
Binary file
|
static/images/gromer.png
ADDED
|
Binary file
|
static/images/logo.png
ADDED
|
Binary file
|
static/images/pine.png
ADDED
|
Binary file
|
static/images/rust-embed.png
ADDED
|
Binary file
|
static/images/terminal1.jpg
ADDED
|
Binary file
|
static/images/terminal1.png
ADDED
|
Binary file
|
tailwind.config.ts
CHANGED
|
@@ -9,6 +9,9 @@ export default {
|
|
|
9
9
|
mono: "monospace",
|
|
10
10
|
logo: "Kaiti SC",
|
|
11
11
|
},
|
|
12
|
+
data: {
|
|
13
|
+
current: "current",
|
|
14
|
+
},
|
|
12
15
|
extend: {
|
|
13
16
|
colors: {
|
|
14
17
|
yellow: "#f1fa8c",
|