website

#astro#js#html#css

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

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

2ad45c8 — pyrossh 2025-05-29T10:45:09+05:30 
remove tailwind css classes

Generated files not shown: bun.lock

Files changed (11) hide show
  1. astro.config.mjs +4 -1
  2. jsconfig.json +0 -14
  3. src/components/Footer.astro +19 -3
  4. src/pages/cv/index.astro +6 -6
  5. src/pages/index.astro +5 -4
  6. src/pages/index.module.css +41 -0
  7. src/pages/only-bible-app/+layout.svelte +0 -42
  8. src/pages/only-bible-app/index.astro +129 -18
  9. src/pages/only-bible-app/privacy-policy/index.astro +4 -2
  10. src/pages/only-bible-app/terms-and-conditions/index.astro +25 -2
  11. src/pages/posts/index.astro +65 -18
astro.config.mjs CHANGED
@@ -22,6 +22,9 @@ export default defineConfig({
22
22
  }]
23
23
  },
24
24
  vite: {
25
+ plugins:
26
+ [
25
- plugins: [tailwindcss()],
27
+ tailwindcss()
28
+ ],
26
29
  },
27
30
  });
jsconfig.json DELETED
@@ -1,14 +0,0 @@
1
- {
2
- "extends": "./.svelte-kit/tsconfig.json",
3
- "compilerOptions": {
4
- "allowJs": true,
5
- "checkJs": true,
6
- "esModuleInterop": true,
7
- "forceConsistentCasingInFileNames": true,
8
- "resolveJsonModule": true,
9
- "skipLibCheck": true,
10
- "sourceMap": true,
11
- "strict": true,
12
- "moduleResolution": "bundler"
13
- }
14
- }
src/components/Footer.astro CHANGED
@@ -7,9 +7,9 @@ const today = new Date();
7
7
  <footer>
8
8
  <Wrapper>
9
9
  <div class="container">
10
- <div class="flex-1"></div>
10
+ <div class="spacer"></div>
11
- <div class="flex items-center justify-center mx-2">
11
+ <div class="copyright-container">
12
- <span class="text-base text-gray-200 hover:no-underline mr-2">
12
+ <span>
13
13
  Copyright © {today.getFullYear()}
14
14
  <a class="link" href="https://git.sr.ht/~pyrossh/"> pyrossh </a>
15
15
  </span>
@@ -29,7 +29,23 @@ const today = new Date();
29
29
  padding: 16px 0px;
30
30
  }
31
31
 
32
+ .spacer {
33
+ flex: 1;
34
+ }
35
+
36
+ .copyright-container {
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ margin-left: 0.5rem;
41
+ margin-right: 0.5rem;
42
+ }
43
+
32
44
  .link {
45
+ font-size: 1rem;
46
+ line-height: 1.5rem;
47
+ color: var(--color-gray-200);
48
+ margin-right: 0.5rem;
33
49
  color: var(--color-white);
34
50
  font-weight: 500;
35
51
  text-underline-offset: 2px;
src/pages/cv/index.astro CHANGED
@@ -16,7 +16,7 @@ import Layout from "@/layouts/Base.astro";
16
16
  <ul>
17
17
  <li>
18
18
  <h6>John Lewis <span>(Mar '21 - Aug '24)</span></h6>
19
- <ul class="*:list-disc">
19
+ <ul>
20
20
  <li>
21
21
  Built a quiz memory game with leaderboard scoring to improve
22
22
  engagement during Christmas
@@ -46,7 +46,7 @@ import Layout from "@/layouts/Base.astro";
46
46
  </li>
47
47
  <li>
48
48
  <h6>iOWNA <span>(Mar '20 - Mar '21)</span></h6>
49
- <ul class="*:list-disc">
49
+ <ul>
50
50
  <li>
51
51
  Built a Content Editor for curators to create content on our
52
52
  platform
@@ -74,7 +74,7 @@ import Layout from "@/layouts/Base.astro";
74
74
  </li>
75
75
  <li>
76
76
  <h6>Zeta <span>(Nov '19 - Feb '20)</span></h6>
77
- <ul class="*:list-disc">
77
+ <ul>
78
78
  <li>
79
79
  Added multiple download formats (pdf,html,xlsx) for reports in
80
80
  the Reporting Center
@@ -103,7 +103,7 @@ import Layout from "@/layouts/Base.astro";
103
103
  </li>
104
104
  <li>
105
105
  <h6>Lifebox <span>(Oct '18 - Oct '19)</span></h6>
106
- <ul class="*:list-disc">
106
+ <ul>
107
107
  <li>
108
108
  Added search functionality to the hospital procedure codes
109
109
  </li>
@@ -140,7 +140,7 @@ import Layout from "@/layouts/Base.astro";
140
140
  freeing up a lot of effort, time and heart-burn, to help your business
141
141
  grow.
142
142
  </h5>
143
- <ul class="*:list-disc">
143
+ <ul>
144
144
  <li>
145
145
  Implemented new features and fixed bugs on the numberz android app
146
146
  </li>
@@ -194,7 +194,7 @@ import Layout from "@/layouts/Base.astro";
194
194
  Playlyfe is an online Gamification Platform which empowers anyone to
195
195
  design and implement a gamified system.
196
196
  </h5>
197
- <ul class="*:list-disc">
197
+ <ul>
198
198
  <li>
199
199
  Built the Playlyfe Hybrid Mobile app using Phonegap for Android and
200
200
  iOS
src/pages/index.astro CHANGED
@@ -9,12 +9,12 @@ import styles from "./index.module.css";
9
9
  title="pyrossh"
10
10
  description="Tech Lead from Bangalore who likes to create frameworks and programming languages."
11
11
  >
12
- <div class="mx-auto mb-10">
12
+ <div class={styles.pageContainer}>
13
13
  <div>
14
- <h1 class="text-3xl font-bold mb-4">Hello!</h1>
14
+ <h1 class={styles.title}>Hello!</h1>
15
15
  <p>
16
16
  <a
17
- class="underline"
17
+ class={styles.linkUnderline}
18
18
  href="https://www.linkedin.com/in/pyrossh"
19
19
  target="_blank"
20
20
  rel="noopener noreferrer"
@@ -26,11 +26,12 @@ import styles from "./index.module.css";
26
26
  I like to build frameworks and automate common tasks to make it easier to
27
27
  develop applications.
28
28
  </p>
29
+ <button data-variant="primary">Button 1</button>
29
30
  <p>
30
31
  I enjoy working on open-source projects, and during the last decade,
31
32
  I've created a number of projects that are widely used.
32
33
  </p>
33
- <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
34
+ <div class={styles.gridContainer}>
34
35
  <section class={styles.interests}>
35
36
  <h2>Interests</h2>
36
37
  <ul>
src/pages/index.module.css CHANGED
@@ -26,6 +26,47 @@ section {
26
26
  }
27
27
  }
28
28
 
29
+ .pageContainer {
30
+ margin-left: auto;
31
+ margin-right: auto;
32
+ margin-bottom: 2.5rem;
33
+ /* mb-10 */
34
+ }
35
+
36
+ .title {
37
+ font-size: 1.875rem;
38
+ /* text-3xl */
39
+ line-height: 2.25rem;
40
+ /* text-3xl */
41
+ font-weight: 700;
42
+ /* font-bold */
43
+ margin-bottom: 1rem;
44
+ /* mb-4 */
45
+ }
46
+
47
+ .linkUnderline {
48
+ text-decoration-line: underline;
49
+ }
50
+
51
+ .gridContainer {
52
+ display: grid;
53
+ grid-template-columns: repeat(1, minmax(0, 1fr));
54
+ /* grid-cols-1 */
55
+ gap: 1rem;
56
+ /* gap-4 */
57
+ }
58
+
59
+ @media (min-width: 640px) {
60
+
61
+ /* sm: */
62
+ .gridContainer {
63
+ grid-template-columns: repeat(2, minmax(0, 1fr));
64
+ /* sm:grid-cols-2 */
65
+ gap: 2rem;
66
+ /* sm:gap-8 */
67
+ }
68
+ }
69
+
29
70
  .repo {
30
71
  text-overflow: ellipsis;
31
72
  overflow: hidden;
src/pages/only-bible-app/+layout.svelte DELETED
@@ -1,42 +0,0 @@
1
- <script>
2
- import Copyright from '$lib/components/Copyright.svelte';
3
- /**
4
- * @typedef {Object} Props
5
- * @property {import('svelte').Snippet} [children]
6
- */
7
-
8
- /** @type {Props} */
9
- let { children } = $props();
10
- </script>
11
-
12
- <div class="h-full sm:w-6/12 mx-auto">
13
- <header class="flex flex-col mx-4 text-sm mt-4">
14
- <nav class="flex flex-1 justify-between" aria-label="Global">
15
- <div class="flex flex-1">
16
- <a
17
- class="flex flex-1 items-center text-xl font-semibold text-gray-200 no-underline focus:outline-none focus:ring-1 focus:ring-gray-600"
18
- href="/only-bible-app"
19
- aria-label="Brand"
20
- >
21
- <div class="flex flex-1">Only Bible App</div>
22
- </a>
23
- </div>
24
- <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0">
25
- <a
26
- class="text-gray-300 font-medium focus:outline-none focus:ring-1 no-underline hover:text-neutral-100 focus:ring-neutral-200"
27
- href="/only-bible-app/privacy-policy">Privacy Policy</a
28
- >
29
- <a
30
- class="text-gray-300 font-medium focus:outline-none focus:ring-1 no-underline hover:text-neutral-100 focus:ring-neutral-200"
31
- href="/only-bible-app/terms-and-conditions">Terms & Conditions</a
32
- >
33
- </div>
34
- </nav>
35
- </header>
36
- <main class="flex flex-col mx-4 mt-10 sm:mt-0">
37
- {@render children?.()}
38
- </main>
39
- <footer class="text-center py-5 mt-20">
40
- <Copyright />
41
- </footer>
42
- </div>
src/pages/only-bible-app/index.astro CHANGED
@@ -11,33 +11,27 @@ import AppImagePng from "@/assets/images/app_image.png";
11
11
  title="Only Bible App"
12
12
  description="The only bible app you will ever need"
13
13
  >
14
- <div class="flex flex-1 flex-col sm:flex-row pb-64">
15
- <div class="flex flex-col items-center sm:items-start">
14
+ <div class="page-container">
15
+ <div class="content-column">
16
- <div class="block mb-4">
16
+ <div class="hero-section">
17
- <h1
18
- class="flex flex-col items-center sm:items-start sm:m-0 text-3xl font-bold text-center sm:text-left lg:leading-tight"
19
- >
20
- <Image
21
- class="mr-2 rounded-xl"
17
+ <h1 class="main-title">
22
- src={AppIconPng}
23
- alt="Only Bible App"
18
+ <Image class="app-icon-title" src={AppIconPng} alt="Only Bible App" />
24
- />
25
19
  The only bible app you will ever need
26
20
  </h1>
27
- <div class="text-center sm:text-left flex flex-col text-lg sm:mt-5">
21
+ <div class="features-list">
28
22
  <span>No ads,</span>
29
23
  <span>No in-app purchases,</span>
30
24
  <span>No distractions.</span>
31
25
  <span>Works completely offline.</span>
32
26
  </div>
33
27
  </div>
34
- <div class="flex flex-1 flex-col items-center sm:items-start">
28
+ <div class="cta-section">
35
- <h3 class="m-0 my-4 font-bold text-xl">
29
+ <h3 class="cta-title">
36
30
  What are you waiting for? Get it now! Quickly.
37
31
  </h3>
38
- <div class="flex flex-col sm:flex-row">
32
+ <div class="store-links-container">
39
33
  <a
40
- class="mt-4 sm:mt-0 sm:mr-2"
34
+ class="playstore-link"
41
35
  href="https://play.google.com/store/apps/details?id=dev.pyrossh.onlyBible"
42
36
  rel="noopener noreferrer"
43
37
  target="_blank"
@@ -45,7 +39,7 @@ import AppImagePng from "@/assets/images/app_image.png";
45
39
  <PlayStoreIcon width={196} />
46
40
  </a>
47
41
  <a
48
- class="mt-8 sm:mt-0"
42
+ class="appstore-link"
49
43
  href="https://apps.apple.com/us/app/only-bible-app/id6467606465?itsct=apps_box_badge&itscg=30200"
50
44
  rel="noopener noreferrer"
51
45
  target="_blank"
@@ -55,7 +49,7 @@ import AppImagePng from "@/assets/images/app_image.png";
55
49
  </div>
56
50
  </div>
57
51
  </div>
58
- <!-- <div class="flex flex-1 justify-center sm:justify-end pb-36">
52
+ <!-- <div class="screenshots-section">
59
53
  <Image
60
54
  src="https://play-lh.googleusercontent.com/RHXOXHwSlGPvid-YnzMSGuCtkuBLeV6-PDE1Z8c9f4014oGfr64MSXHgFf1uID0w5mAQ=w1052-h592-rw"
61
55
  alt="app screenshot android"
@@ -71,3 +65,120 @@ import AppImagePng from "@/assets/images/app_image.png";
71
65
  </div> -->
72
66
  </div>
73
67
  </Layout>
68
+ <style>
69
+ .page-container {
70
+ display: flex;
71
+ flex: 1;
72
+ flex-direction: column;
73
+ padding-bottom: 16rem; /* pb-64 */
74
+ }
75
+
76
+ .content-column {
77
+ display: flex;
78
+ flex-direction: column;
79
+ align-items: center;
80
+ }
81
+
82
+ .hero-section {
83
+ display: block;
84
+ margin-bottom: 1rem; /* mb-4 */
85
+ }
86
+
87
+ .main-title {
88
+ display: flex;
89
+ flex-direction: column;
90
+ align-items: center;
91
+ font-size: 1.875rem; /* text-3xl */
92
+ line-height: 2.25rem; /* text-3xl */
93
+ font-weight: 700; /* font-bold */
94
+ text-align: center;
95
+ }
96
+
97
+ .app-icon-title {
98
+ margin-right: 0.5rem; /* mr-2 */
99
+ border-radius: 0.75rem; /* rounded-xl */
100
+ }
101
+
102
+ .features-list {
103
+ text-align: center;
104
+ display: flex;
105
+ flex-direction: column;
106
+ font-size: 1.125rem; /* text-lg */
107
+ line-height: 1.75rem; /* text-lg */
108
+ }
109
+
110
+ .cta-section {
111
+ display: flex;
112
+ flex: 1;
113
+ flex-direction: column;
114
+ align-items: center;
115
+ }
116
+
117
+ .cta-title {
118
+ margin: 0;
119
+ margin-top: 1rem; /* my-4 */
120
+ margin-bottom: 1rem; /* my-4 */
121
+ font-weight: 700; /* font-bold */
122
+ font-size: 1.25rem; /* text-xl */
123
+ line-height: 1.75rem; /* text-xl */
124
+ }
125
+
126
+ .store-links-container {
127
+ display: flex;
128
+ flex-direction: column;
129
+ }
130
+
131
+ .playstore-link {
132
+ margin-top: 1rem; /* mt-4 */
133
+ }
134
+
135
+ .appstore-link {
136
+ margin-top: 2rem; /* mt-8 */
137
+ }
138
+
139
+ /* Small screen adjustments (sm:) */
140
+ @media (min-width: 640px) {
141
+ .page-container {
142
+ flex-direction: row;
143
+ }
144
+ .content-column {
145
+ align-items: flex-start;
146
+ }
147
+ .main-title {
148
+ flex-direction: row; /* default for flex, but explicit here */
149
+ align-items: flex-start;
150
+ margin: 0; /* sm:m-0 */
151
+ text-align: left; /* sm:text-left */
152
+ }
153
+ .features-list {
154
+ text-align: left; /* sm:text-left */
155
+ margin-top: 1.25rem; /* sm:mt-5 */
156
+ }
157
+ .cta-section {
158
+ align-items: flex-start;
159
+ }
160
+ .store-links-container {
161
+ flex-direction: row;
162
+ }
163
+ .playstore-link {
164
+ margin-top: 0; /* sm:mt-0 */
165
+ margin-right: 0.5rem; /* sm:mr-2 */
166
+ }
167
+ .appstore-link {
168
+ margin-top: 0; /* sm:mt-0 */
169
+ }
170
+ /* .screenshots-section {
171
+ display: flex;
172
+ flex: 1;
173
+ justify-content: flex-end;
174
+ padding-bottom: 9rem;
175
+ } */
176
+ }
177
+
178
+ /* Large screen adjustments (lg:) */
179
+ @media (min-width: 1024px) {
180
+ .main-title {
181
+ line-height: 1; /* lg:leading-tight */
182
+ }
183
+ }
184
+ </style>
src/pages/only-bible-app/privacy-policy/index.astro CHANGED
@@ -6,7 +6,7 @@ import Layout from "@/layouts/Base.astro";
6
6
  title="Privacy Policy | Only Bible App"
7
7
  description="Privacy Policy | Only Bible App"
8
8
  >
9
- <h1 class="font-bold text-3xl">Privacy Policy</h1>
9
+ <h1>Privacy Policy</h1>
10
10
  <p>
11
11
  Only Bible App does not collect any information about you or your usage of
12
12
  the app. It does not send any information about you to anyone. It does not
@@ -27,7 +27,9 @@ import Layout from "@/layouts/Base.astro";
27
27
  </Layout>
28
28
  <style>
29
29
  h1 {
30
- font-size: 1.8rem;
30
+ font-size: 1.875rem; /* text-3xl */
31
+ line-height: 2.25rem; /* text-3xl */
32
+ font-weight: 700; /* font-bold */
31
33
  }
32
34
  b {
33
35
  font-weight: 600;
src/pages/only-bible-app/terms-and-conditions/index.astro CHANGED
@@ -6,8 +6,8 @@ import Layout from "@/layouts/Base.astro";
6
6
  title="Terms and Conditions | Only Bible App"
7
7
  description="Terms and Conditions | Only Bible App"
8
8
  >
9
- <div class="pb-10 mt-10">
9
+ <div class="terms-container">
10
- <h1 class="font-bold text-3xl">Terms and Conditions</h1>
10
+ <h1>Terms and Conditions</h1>
11
11
  <p>
12
12
  By downloading or using the app, these terms will automatically apply to
13
13
  you – you should make sure therefore that you read them carefully before
@@ -48,3 +48,26 @@ import Layout from "@/layouts/Base.astro";
48
48
  <strong>[email protected]</strong>
49
49
  </div>
50
50
  </Layout>
51
+ <style>
52
+ .terms-container {
53
+ padding-bottom: 2.5rem; /* pb-10 */
54
+ margin-top: 2.5rem; /* mt-10 */
55
+ }
56
+
57
+ h1 {
58
+ font-weight: 700; /* font-bold */
59
+ font-size: 1.875rem; /* text-3xl */
60
+ line-height: 2.25rem; /* text-3xl */
61
+ }
62
+
63
+ /* Basic styling for h4 and strong for consistency, can be adjusted or removed if global styles exist */
64
+ h4 {
65
+ font-weight: 600;
66
+ margin-top: 0.5rem;
67
+ font-size: 1.17em; /* Default h4 size */
68
+ }
69
+
70
+ strong {
71
+ font-weight: bold;
72
+ }
73
+ </style>
src/pages/posts/index.astro CHANGED
@@ -4,22 +4,24 @@ import FormattedDate from "../../components/FormattedDate.astro";
4
4
  import Layout from "@/layouts/Base.astro";
5
5
 
6
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 title="Posts" description="Posts">
12
- <h1 class="font-bold text-3xl">Posts</h1>
12
+ <h1 class="posts-title">Posts</h1>
13
13
  <div class="container">
14
- <ul class="flex flex-col">
14
+ <ul class="posts-list">
15
15
  {
16
16
  posts.map((post) => (
17
- <li class="item grid grid-cols-1 sm:grid-cols-2 gap-3 justify-start items-end mt-5 leading-6">
18
- <div class="flex flex-col">
17
+ <li class="post-list-item">
18
+ <div class="post-list-item__content">
19
19
  <a href={`/posts/${post.id}`}>{post.data.title}</a>
20
- <span class="hover:cursor-default">{post.data.description}</span>
20
+ <span class="post-list-item__description">
21
+ {post.data.description}
22
+ </span>
21
23
  </div>
22
- <span class="flex flex-1 justify-end sm:ml-4 text-md ">
24
+ <span class="post-list-item__date-wrapper">
23
25
  <FormattedDate date={post.data.pubDate} />
24
26
  </span>
25
27
  </li>
@@ -33,19 +35,64 @@ const posts = (await getCollection("content")).sort(
33
35
  display: flex;
34
36
  float: left;
35
37
  }
36
- .item {
37
- a {
38
- color: var(--color-post-link);
39
- text-decoration-line: underline;
40
- text-underline-offset: 4px;
41
- }
42
38
 
39
+ .posts-title {
40
+ font-weight: 700;
41
+ font-size: 1.875rem;
42
+ line-height: 2.25rem;
43
+ }
44
+
45
+ .posts-list {
43
- span {
46
+ display: flex;
47
+ flex-direction: column;
48
+ }
49
+
50
+ .post-list-item {
51
+ display: grid;
52
+ grid-template-columns: repeat(1, minmax(0, 1fr));
53
+ gap: 0.75rem;
54
+ justify-items: start;
55
+ align-items: end;
56
+ margin-top: 1.25rem;
57
+ line-height: 1.5rem;
58
+ }
59
+
60
+ .post-list-item a {
61
+ color: var(--color-post-link);
62
+ text-decoration-line: underline;
63
+ text-underline-offset: 4px;
64
+ }
65
+
66
+ .post-list-item__description {
44
- font-size: 13pt;
67
+ font-size: 13pt;
45
- }
68
+ }
69
+ .post-list-item__description:hover {
70
+ cursor: default;
71
+ }
72
+
73
+ .post-list-item time {
74
+ font-size: 12pt;
75
+ }
46
76
 
77
+ .post-list-item__content {
78
+ display: flex;
79
+ flex-direction: column;
80
+ }
81
+
82
+ .post-list-item__date-wrapper {
83
+ display: flex;
47
- time {
84
+ flex: 1;
85
+ justify-content: flex-end;
48
- font-size: 12pt;
86
+ font-size: 1rem;
87
+ line-height: 1.5rem;
88
+ }
89
+
90
+ @media (min-width: 640px) {
91
+ .post-list-item {
92
+ grid-template-columns: repeat(2, minmax(0, 1fr));
93
+ }
94
+ .post-list-item__date-wrapper {
95
+ margin-left: 1rem;
49
96
  }
50
97
  }
51
98
  </style>