This is my personal website
simplify project
fix import issues
+159
-120
+12
-117
main.tsx
+12
-117
main.tsx
···
1
1
/** @jsx h */
2
-
import { serve, html, h, dayjs, cyan } from "./deps.ts";
3
-
import { github } from "./src/github.tsx";
4
-
import { linkedin } from "./src/linkedin.tsx";
5
-
import { twitter } from "./src/twitter.tsx";
2
+
import { serve, html, h, cyan } from "./deps.ts";
3
+
import { styles } from "./src/styles.ts";
4
+
import { links } from "./src/links.ts";
5
+
import { footer } from "./src/footer.tsx";
6
+
import { bio } from "./src/bio.tsx";
7
+
import { header } from "./src/header.tsx";
6
8
7
-
const handler = (req: Request) =>
9
+
const handler = (_req: Request) =>
8
10
html({
9
11
title: "Tsiry Sandratraina",
10
-
links: [
11
-
{
12
-
rel: "preconnect",
13
-
href: "https://fonts.googleapis.com",
14
-
},
15
-
{
16
-
rel: "preconnect",
17
-
href: "https://fonts.gstatic.com",
18
-
},
19
-
{
20
-
rel: "stylesheet",
21
-
href: "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap",
22
-
},
23
-
],
24
-
styles: [
25
-
"html, body { margin: 0; height: 100%; }",
26
-
`body {
27
-
font-family: "Outfit", sans-serif;
28
-
background: #040435;
29
-
color: #fff;
30
-
display: flex;
31
-
flex-direction: column;
32
-
font-size: 19px;
33
-
}`,
34
-
`a {
35
-
color: #12ff7d;
36
-
text-decoration: none;
37
-
}`,
38
-
`
39
-
.social {
40
-
color: rgb(109, 109, 156);
41
-
}
42
-
43
-
.social:hover {
44
-
color: #ffffffec;
45
-
}
46
-
`,
47
-
`
48
-
.wrapper {
49
-
width: 704px; margin: 0 auto;
50
-
}
51
-
@media (max-width: 768px) {
52
-
.wrapper {
53
-
width: 100%;
54
-
padding: 0 20px;
55
-
}
56
-
}
57
-
`,
58
-
`
59
-
.blinking_cursor {
60
-
margin-left: 5px;
61
-
-webkit-animation: blinker 1s none infinite;
62
-
animation: blinker 1s none infinite;
63
-
font-size: 28px;
64
-
}@-webkit-keyframes blinker {
65
-
50% {
66
-
opacity: 0;
67
-
}
68
-
}@keyframes blinker {
69
-
50% {
70
-
opacity: 0;
71
-
}
72
-
}
73
-
`,
74
-
],
12
+
links,
13
+
styles,
75
14
body: (
76
15
<body>
77
16
<div class="wrapper">
78
-
<h2 style="font-weight: 500;margin-bottom: 0">Hello, I'm</h2>
79
-
<h1 style="font-size: 2rem; font-weight: 600; margin-top: 0">
80
-
Tsiry Sandratraina
81
-
<b class="blinking_cursor">_</b>
82
-
</h1>
83
-
84
-
<div style="line-height: 1.6">
85
-
I'm a developer and{" "}
86
-
<a href="https://github.com/tsirysndr" target="_blank">
87
-
open source enthusiast
88
-
</a>{" "}
89
-
with over{" "}
90
-
<b>{dayjs().diff(dayjs("2015"), "year")} years of experience</b> in{" "}
91
-
<b>software engineering</b> living in Antananarivo, Madagascar. I
92
-
like Rust, Deno, Bun, Gleam, TypeScript, ReScript and PureScript. I
93
-
build{" "}
94
-
<a href="https://github.com/fluentci-io/fluentci" target="_blank">
95
-
Fluent CI
96
-
</a>
97
-
,{" "}
98
-
<a href="https://github.com/pocketenv-io/pocketenv" target="_blank">
99
-
Pocketenv
100
-
</a>
101
-
,{" "}
102
-
<a href="https://github.com/tsirysndr/envhub" target="_blank">
103
-
Envhub
104
-
</a>
105
-
,{" "}
106
-
<a href="https://github.com/tsirysndr/tunein-cli" target="_blank">
107
-
TuneIn CLI
108
-
</a>{" "}
109
-
and few other open source projects. <br />
110
-
<br />
111
-
Wanna talk about something? Send me a message on{" "}
112
-
<a href="https://keybase.io/tsiry/chat">Keybase</a> or email me at{" "}
113
-
<a href="mailto:tsiry.sndr@fluentci.io">tsiry.sndr@fluentci.io</a>.
114
-
</div>
17
+
{header()}
18
+
{bio()}
115
19
<br />
116
20
<br />
117
-
<div style="display: flex; flex-direction: row; justify-content: space-between;">
118
-
<div style="color: rgb(109, 109, 156); font-size: 17px;">
119
-
© {dayjs().format("YYYY")} Tsiry Sandratraina.
120
-
</div>
121
-
<div style="display: flex; flex-direction: row; justify-content: space-around; width: 100px;">
122
-
{github()}
123
-
{twitter()}
124
-
{linkedin()}
125
-
</div>
126
-
</div>
21
+
{footer()}
127
22
</div>
128
23
</body>
129
24
),
+36
src/bio.tsx
+36
src/bio.tsx
···
1
+
/** @jsx h */
2
+
import { dayjs, h } from "../deps.ts";
3
+
4
+
export function bio() {
5
+
return (
6
+
<div style="line-height: 1.6">
7
+
I'm a developer and{" "}
8
+
<a href="https://github.com/tsirysndr" target="_blank">
9
+
open source enthusiast
10
+
</a>{" "}
11
+
with over <b>{dayjs().diff(dayjs("2015"), "year")} years of experience</b>{" "}
12
+
in <b>software engineering</b> living in Antananarivo, Madagascar. I like
13
+
Rust, Deno, Bun, Gleam, TypeScript, ReScript and PureScript. I build{" "}
14
+
<a href="https://github.com/fluentci-io/fluentci" target="_blank">
15
+
Fluent CI
16
+
</a>
17
+
,{" "}
18
+
<a href="https://github.com/pocketenv-io/pocketenv" target="_blank">
19
+
Pocketenv
20
+
</a>
21
+
,{" "}
22
+
<a href="https://github.com/tsirysndr/envhub" target="_blank">
23
+
Envhub
24
+
</a>
25
+
,{" "}
26
+
<a href="https://github.com/tsirysndr/tunein-cli" target="_blank">
27
+
TuneIn CLI
28
+
</a>{" "}
29
+
and few other open source projects. <br />
30
+
<br />
31
+
Wanna talk about something? Send me a message on{" "}
32
+
<a href="https://keybase.io/tsiry/chat">Keybase</a> or email me at{" "}
33
+
<a href="mailto:tsiry.sndr@fluentci.io">tsiry.sndr@fluentci.io</a>.
34
+
</div>
35
+
);
36
+
}
+14
src/header.tsx
+14
src/header.tsx
···
1
+
/** @jsx h */
2
+
import { h } from "../deps.ts";
3
+
4
+
export function header() {
5
+
return (
6
+
<div>
7
+
<h2 style="font-weight: 500;margin-bottom: 0">Hello, I'm</h2>
8
+
<h1 style="font-size: 2rem; font-weight: 600; margin-top: 0">
9
+
Tsiry Sandratraina
10
+
<b class="blinking_cursor">_</b>
11
+
</h1>
12
+
</div>
13
+
);
14
+
}
+14
src/links.ts
+14
src/links.ts
···
1
+
export const links = [
2
+
{
3
+
rel: "preconnect",
4
+
href: "https://fonts.googleapis.com",
5
+
},
6
+
{
7
+
rel: "preconnect",
8
+
href: "https://fonts.gstatic.com",
9
+
},
10
+
{
11
+
rel: "stylesheet",
12
+
href: "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap",
13
+
},
14
+
];
+51
src/styles.ts
+51
src/styles.ts
···
1
+
export const styles = [
2
+
"html, body { margin: 0; height: 100%; }",
3
+
`body {
4
+
font-family: "Outfit", sans-serif;
5
+
background: #040435;
6
+
color: #fff;
7
+
display: flex;
8
+
flex-direction: column;
9
+
font-size: 19px;
10
+
}`,
11
+
`a {
12
+
color: #12ff7d;
13
+
text-decoration: none;
14
+
}`,
15
+
`
16
+
.social {
17
+
color: rgb(109, 109, 156);
18
+
}
19
+
20
+
.social:hover {
21
+
color: #ffffffec;
22
+
}
23
+
`,
24
+
`
25
+
.wrapper {
26
+
width: 704px; margin: 0 auto;
27
+
}
28
+
@media (max-width: 768px) {
29
+
.wrapper {
30
+
width: 100%;
31
+
padding: 0 20px;
32
+
}
33
+
}
34
+
`,
35
+
`
36
+
.blinking_cursor {
37
+
margin-left: 5px;
38
+
-webkit-animation: blinker 1s none infinite;
39
+
animation: blinker 1s none infinite;
40
+
font-size: 28px;
41
+
}@-webkit-keyframes blinker {
42
+
50% {
43
+
opacity: 0;
44
+
}
45
+
}@keyframes blinker {
46
+
50% {
47
+
opacity: 0;
48
+
}
49
+
}
50
+
`,
51
+
];