website

#astro#js#html#css

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

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

8eb0f30 — pyrossh 2026-07-07T11:47:46+05:30 
fix: restore responsive layout in home worker using CSS classes
Files changed (1) hide show
  1. packages/workers/home/src/index.tsx +43 -73
packages/workers/home/src/index.tsx CHANGED
@@ -9,15 +9,15 @@ export default {
9
9
  description="Tech Lead from Bangalore who likes to create frameworks and programming languages."
10
10
  request={request}
11
11
  >
12
- <div style="margin-left:auto;margin-right:auto;margin-bottom:2.5rem">
12
+ <div class="pageContainer">
13
- <div>
13
+ <div class="page-section">
14
- <h1 style="font-size:1.875rem;font-weight:700;margin-bottom:1rem">Hello!</h1>
14
+ <h1 class="page-title">Hello!</h1>
15
- <p style="font-size:1.1rem">
15
+ <p class="description">
16
16
  <a
17
17
  href="https://www.linkedin.com/in/pyrossh"
18
18
  target="_blank"
19
19
  rel="noopener noreferrer"
20
- style="text-decoration:underline"
20
+ class="linkUnderline"
21
21
  >
22
22
  <strong>I'm</strong>
23
23
  </a>
@@ -25,14 +25,14 @@ export default {
25
25
  that focus on products in the healthcare and finance domains. I like to build
26
26
  frameworks and automate common tasks to make it easier to develop applications.
27
27
  </p>
28
- <p style="font-size:1.1rem">
28
+ <p class="description">
29
29
  I enjoy working on open-source projects, and during the last decade, I've created a
30
30
  number of projects that are widely used.
31
31
  </p>
32
- <div style="display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem">
32
+ <div class="gridContainer">
33
- <section style="display:flex;flex-direction:column;margin-top:1.5rem;margin-bottom:1rem">
33
+ <section class="interests">
34
+ <h2>Interests</h2>
34
- <h2 style="font-size:1.4rem;font-weight:600">Interests</h2>
35
+ <ul style="list-style:none;padding:0">
35
- <ul style="display:grid;gap:0.5rem;grid-template-columns:auto auto auto;text-align:center;margin-top:0.5rem;font-size:1.1rem;list-style:none;padding:0">
36
36
  {[
37
37
  "HTML",
38
38
  "CSS",
@@ -47,93 +47,63 @@ export default {
47
47
  "K8s",
48
48
  "Iceberg",
49
49
  ].map((i) => (
50
- <li style="background-color:var(--color-box-bg);padding:0.25rem">{i}</li>
50
+ <li>{i}</li>
51
51
  ))}
52
52
  </ul>
53
53
  </section>
54
- <section style="display:flex;flex-direction:column;margin-top:1.5rem;margin-bottom:1rem">
54
+ <section class="contact">
55
- <h2 style="font-size:1.4rem;font-weight:600">Contact</h2>
55
+ <h2>Contact</h2>
56
- <ul style="display:grid;gap:0.5rem;grid-template-columns:auto;margin-top:0.5rem;list-style:none;padding:0">
57
- <li style="display:flex;flex-direction:row;align-items:baseline;padding:0.25rem;background-color:var(--color-box-bg);font-size:1.1rem">
58
- <strong style="font-weight:500;margin-left:0.25rem;margin-right:0.5rem">
56
+ <ul style="list-style:none;padding:0">
59
- email:
57
+ <li>
60
- </strong>
58
+ <strong>email:</strong>
61
59
  <span>[email protected]</span>
62
60
  </li>
63
- <li style="display:flex;flex-direction:row;align-items:baseline;padding:0.25rem;background-color:var(--color-box-bg);font-size:1.1rem">
64
- <strong style="font-weight:500;margin-left:0.25rem;margin-right:0.5rem">
65
- crates:
61
+ <li>
66
- </strong>
62
+ <strong>crates:</strong>
67
- <a href="https://crates.io/users/pyrossh" style="color:var(--color-link)">
63
+ <a href="https://crates.io/users/pyrossh">https://crates.io/users/pyrossh</a>
68
- https://crates.io/users/pyrossh
69
- </a>
70
64
  </li>
71
- <li style="display:flex;flex-direction:row;align-items:baseline;padding:0.25rem;background-color:var(--color-box-bg);font-size:1.1rem">
72
- <strong style="font-weight:500;margin-left:0.25rem;margin-right:0.5rem">
73
- npm:
65
+ <li>
74
- </strong>
66
+ <strong>npm:</strong>
75
- <a href="https://www.npmjs.com/~pyrossh" style="color:var(--color-link)">
67
+ <a href="https://www.npmjs.com/~pyrossh">https://www.npmjs.com/~pyrossh</a>
76
- https://www.npmjs.com/~pyrossh
77
- </a>
78
68
  </li>
79
- <li style="display:flex;flex-direction:row;align-items:baseline;padding:0.25rem;background-color:var(--color-box-bg);font-size:1.1rem">
80
- <strong style="font-weight:500;margin-left:0.25rem;margin-right:0.5rem">
81
- linkedin:
69
+ <li>
82
- </strong>
70
+ <strong>linkedin:</strong>
83
- <a href="https://www.linkedin.com/in/pyrossh" style="color:var(--color-link)">
71
+ <a href="https://www.linkedin.com/in/pyrossh">
84
72
  https://www.linkedin.com/in/pyrossh
85
73
  </a>
86
74
  </li>
87
- <li style="display:flex;flex-direction:row;align-items:baseline;padding:0.25rem;background-color:var(--color-box-bg);font-size:1.1rem">
88
- <strong style="font-weight:500;margin-left:0.25rem;margin-right:0.5rem">
89
- google group:
90
- </strong>
75
+ <li>
91
- <a
76
+ <strong>google group:</strong>
92
- href="https://groups.google.com/g/rust-embed-devs"
77
+ <a href="https://groups.google.com/g/rust-embed-devs">rust-embed-devs</a>
93
- style="color:var(--color-link)"
94
- >
95
- rust-embed-devs
96
- </a>
97
78
  </li>
98
79
  </ul>
99
80
  </section>
100
81
  </div>
101
- <section style="display:flex;flex-direction:column;margin-top:1.5rem;margin-bottom:1rem">
82
+ <section class="tools">
83
+ <h2>Tools</h2>
102
- <h2 style="font-size:1.4rem;font-weight:600">Tools</h2>
84
+ <ul style="list-style:none;padding:0">
103
- <ul style="display:grid;gap:0.5rem;grid-template-columns:auto auto auto auto;text-align:center;margin-top:0.5rem;list-style:none;padding:0">
104
85
  {TOOLS.map((tool) => (
105
- <li style="display:flex;align-items:center;background-color:var(--color-box-bg);padding:0.25rem;font-size:1rem">
106
- <a
86
+ <li>
107
- href={tool.link}
108
- target="_blank"
109
- rel="noopener noreferrer"
87
+ <a href={tool.link} target="_blank" rel="noopener noreferrer">
110
- style="display:flex;flex:1;flex-direction:row;align-items:center;text-align:left;margin-left:0.25rem;margin-right:0.25rem"
111
- >
112
- <div style="flex:1">{tool.name}</div>
88
+ <div>{tool.name}</div>
113
- {tool.image && (
114
- <img src={tool.image} alt={tool.name} style="width:36px;height:36px" />
89
+ {tool.image && <img src={tool.image} alt={tool.name} />}
115
- )}
116
90
  </a>
117
91
  </li>
118
92
  ))}
119
93
  </ul>
120
94
  </section>
95
+ <section>
121
- <section style="display:flex;flex-direction:column;margin-top:1.5rem;margin-bottom:1rem">
96
+ <h2>Git</h2>
122
- <h2 style="font-size:1.4rem;font-weight:600">Git</h2>
97
+ <div class="repos-grid">
123
- <div style="display:grid;grid-template-columns:auto auto;gap:1rem;margin-top:0.5rem">
124
98
  {REPOS.map((repo) => (
125
- <div style="text-overflow:ellipsis;overflow:hidden;padding:0.5rem;background:var(--color-box-bg);color:var(--color-text);font-size:0.95rem">
99
+ <div class="repo-card">
126
- <h4 style="font-size:1.05rem;font-weight:500;line-height:1.2;border-bottom:1px solid #495057;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:0;padding:0">
100
+ <h4>
127
- <a href={`/repos/${repo.title}`} style="color:var(--color-link)">
101
+ <a href={`/repos/${repo.title}`}>{repo.title}</a>
128
- {repo.title}
129
- </a>
130
102
  </h4>
131
103
  <p>{repo.description}</p>
132
- <div style="margin-top:0.5rem;display:flex;flex-wrap:wrap;gap:0.25rem">
104
+ <div class="tags">
133
105
  {repo.tags.map((tag) => (
134
- <span style="color:var(--color-tag);padding:0.15rem 0.5rem 0.5rem 0rem;border-radius:0.25rem;font-size:0.95rem;font-weight:500">
135
- #{tag}
136
- </span>
106
+ <span class="tag">#{tag}</span>
137
107
  ))}
138
108
  </div>
139
109
  </div>