Skip to content

Commit 543c435

Browse files
AdityasinghvatsAdityasinghvats
committed
Refactor HTML and CSS for improved styling; adjust font sizes and add new utility classes
1 parent ef523db commit 543c435

File tree

2 files changed

+157
-28
lines changed

2 files changed

+157
-28
lines changed

‎src/index.html

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -119,43 +119,43 @@ <h1 class="text-sky-200 pt-5 text-6xl">About me:</h1>
119119
<!-- <p class="text-sky-600 text-xl px-4 lg:px-14">Programming Languages:</p> -->
120120
<div class="flex flex-wrap gap-2 px-4 lg:px-14">
121121

122-
<span class="bg-sky-300 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">C++</span>
123-
<span class="bg-yellow-300 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Javascript</span>
124-
<span class="bg-sky-500 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Golang</span>
125-
<span class="bg-gray-500 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Python</span>
126-
<span class="bg-red-500 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Kotlin</span>
127-
<span class="bg-gray-400 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">MarkDown</span>
122+
<span class="bg-sky-300 px-2 py-1 text-base lg:text-xl rounded-lg">C++</span>
123+
<span class="bg-yellow-300 px-2 py-1 text-base lg:text-xl rounded-lg ">Javascript</span>
124+
<span class="bg-sky-500 px-2 py-1 text-base lg:text-xl rounded-lg">Golang</span>
125+
<span class="bg-gray-500 px-2 py-1 text-base lg:text-xl rounded-lg">Python</span>
126+
<span class="bg-red-500 px-2 py-1 text-base lg:text-xl rounded-lg">Kotlin</span>
127+
<span class="bg-gray-400 px-2 py-1 text-base lg:text-xl rounded-lg">MarkDown</span>
128128
</div>
129129
<!-- <p class="text-red-400 text-xl px-4 lg:px-14">Database</p> -->
130130
<div class="flex flex-wrap gap-2 px-4 lg:px-14">
131-
<span class="bg-green-800 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">MongoDB</span>
132-
<span class="bg-sky-300 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">PostgreSQL</span>
133-
<span class="bg-sky-800 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Docker</span>
134-
<span class="bg-sky-300 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Postman</span>
135-
<span class="bg-sky-900 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Ubuntu</span>
136-
<span class="bg-sky-300 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Bash/Powershell</span>
137-
<span class="bg-red-300 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Sqlite</span>
131+
<span class="bg-green-800 px-2 py-1 text-base lg:text-xl rounded-lg">MongoDB</span>
132+
<span class="bg-sky-300 px-2 py-1 text-base lg:text-xl rounded-lg">PostgreSQL</span>
133+
<span class="bg-sky-800 px-2 py-1 text-base lg:text-xl rounded-lg">Docker</span>
134+
<span class="bg-sky-300 px-2 py-1 text-base lg:text-xl rounded-lg">Postman</span>
135+
<span class="bg-sky-900 px-2 py-1 text-base lg:text-xl rounded-lg">Ubuntu</span>
136+
<span class="bg-sky-300 px-2 py-1 text-base lg:text-xl rounded-lg">Bash/Powershell</span>
137+
<span class="bg-red-300 px-2 py-1 text-base lg:text-xl rounded-lg">Sqlite</span>
138138

139139
</div>
140140
<!-- <p class="text-red-400 text-xl px-4 lg:px-14">Frameworks:</p> -->
141141
<div class="flex flex-wrap gap-2 px-4 lg:px-14">
142-
<span class="bg-sky-600 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">React</span>
143-
<span class="bg-sky-200 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Django</span>
144-
<span class="bg-gray-800 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">NextJs</span>
145-
<span class="bg-green-800 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">SpringBoot</span>
146-
<span class="bg-sky-400 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Raylib</span>
147-
<span class="bg-red-400 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">AWS</span>
148-
<span class="bg-gray-600 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Vercel</span>
149-
<span class="bg-sky-400 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Cloudinary</span>
150-
<span class="bg-red-300 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Git</span>
151-
<span class="bg-green-900 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">GitHub</span>
142+
<span class="bg-sky-600 px-2 py-1 text-base lg:text-xl rounded-lg">React</span>
143+
<span class="bg-sky-200 px-2 py-1 text-base lg:text-xl rounded-lg">Django</span>
144+
<span class="bg-gray-500 px-2 py-1 text-base lg:text-xl rounded-lg">NextJs</span>
145+
<span class="bg-green-800 px-2 py-1 text-base lg:text-xl rounded-lg">SpringBoot</span>
146+
<span class="bg-sky-400 px-2 py-1 text-base lg:text-xl rounded-lg">Raylib</span>
147+
<span class="bg-red-400 px-2 py-1 text-base lg:text-xl rounded-lg">AWS</span>
148+
<span class="bg-gray-600 px-2 py-1 text-base lg:text-xl rounded-lg">Vercel</span>
149+
<span class="bg-sky-400 px-2 py-1 text-base lg:text-xl rounded-lg">Cloudinary</span>
150+
<span class="bg-red-300 px-2 py-1 text-base lg:text-xl rounded-lg">Git</span>
151+
<span class="bg-green-900 px-2 py-1 text-base lg:text-xl rounded-lg">GitHub</span>
152152
</div>
153153
<div class="flex flex-wrap gap-2 px-4 lg:px-14">
154-
<span class="bg-sky-200 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Visual Studio</span>
155-
<span class="bg-gray-800 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">Android Studio</span>
156-
<span class="bg-sky-600 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">VS Code</span>
157-
<span class="bg-green-800 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">IntelliJ IDEA</span>
158-
<span class="bg-sky-400 px-2 py-1 text-lg lg:text-xl rounded-lg whitespace-nowrap">OpenGL</span>
154+
<span class="bg-sky-200 px-2 py-1 text-base lg:text-xl rounded-lg">Visual Studio</span>
155+
<span class="bg-gray-800 px-2 py-1 text-base lg:text-xl rounded-lg">Android Studio</span>
156+
<span class="bg-sky-600 px-2 py-1 text-base lg:text-xl rounded-lg">VS Code</span>
157+
<span class="bg-green-800 px-2 py-1 text-base lg:text-xl rounded-lg">IntelliJ IDEA</span>
158+
<span class="bg-sky-400 px-2 py-1 text-base lg:text-xl rounded-lg">OpenGL</span>
159159
</div>
160160
</div>
161161
</div>

‎src/output.css

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -518,6 +518,9 @@
518518
}
519519
}
520520
@layer utilities {
521+
.collapse {
522+
visibility: collapse;
523+
}
521524
.absolute {
522525
position: absolute;
523526
}
@@ -590,6 +593,21 @@
590593
.hidden {
591594
display: none;
592595
}
596+
.inline-block {
597+
display: inline-block;
598+
}
599+
.inline-flex {
600+
display: inline-flex;
601+
}
602+
.list-item {
603+
display: list-item;
604+
}
605+
.table {
606+
display: table;
607+
}
608+
.h-0 {
609+
height: calc(var(--spacing) * 0);
610+
}
593611
.h-0\.5 {
594612
height: calc(var(--spacing) * 0.5);
595613
}
@@ -653,9 +671,15 @@
653671
.w-full {
654672
width: 100%;
655673
}
674+
.border-collapse {
675+
border-collapse: collapse;
676+
}
656677
.transform {
657678
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
658679
}
680+
.resize {
681+
resize: both;
682+
}
659683
.flex-col {
660684
flex-direction: column;
661685
}
@@ -717,6 +741,10 @@
717741
.rounded-lg {
718742
border-radius: var(--radius-lg);
719743
}
744+
.border {
745+
border-style: var(--tw-border-style);
746+
border-width: 1px;
747+
}
720748
.border-t {
721749
border-top-style: var(--tw-border-style);
722750
border-top-width: 1px;
@@ -849,6 +877,10 @@
849877
font-size: var(--text-6xl);
850878
line-height: var(--tw-leading, var(--text-6xl--line-height));
851879
}
880+
.text-base {
881+
font-size: var(--text-base);
882+
line-height: var(--tw-leading, var(--text-base--line-height));
883+
}
852884
.text-lg {
853885
font-size: var(--text-lg);
854886
line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -873,6 +905,9 @@
873905
--tw-font-weight: var(--font-weight-thin);
874906
font-weight: var(--font-weight-thin);
875907
}
908+
.text-wrap {
909+
text-wrap: wrap;
910+
}
876911
.whitespace-nowrap {
877912
white-space: nowrap;
878913
}
@@ -914,6 +949,17 @@
914949
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
915950
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
916951
}
952+
.outline {
953+
outline-style: var(--tw-outline-style);
954+
outline-width: 1px;
955+
}
956+
.filter {
957+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
958+
}
959+
.backdrop-filter {
960+
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
961+
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
962+
}
917963
.transition {
918964
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
919965
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1011,6 +1057,12 @@
10111057
line-height: var(--tw-leading, var(--text-7xl--line-height));
10121058
}
10131059
}
1060+
.lg\:text-lg {
1061+
@media (width >= 64rem) {
1062+
font-size: var(--text-lg);
1063+
line-height: var(--tw-leading, var(--text-lg--line-height));
1064+
}
1065+
}
10141066
.lg\:text-xl {
10151067
@media (width >= 64rem) {
10161068
font-size: var(--text-xl);
@@ -1143,6 +1195,83 @@
11431195
inherits: false;
11441196
initial-value: 0 0 #0000;
11451197
}
1198+
@property --tw-outline-style {
1199+
syntax: "*";
1200+
inherits: false;
1201+
initial-value: solid;
1202+
}
1203+
@property --tw-blur {
1204+
syntax: "*";
1205+
inherits: false;
1206+
}
1207+
@property --tw-brightness {
1208+
syntax: "*";
1209+
inherits: false;
1210+
}
1211+
@property --tw-contrast {
1212+
syntax: "*";
1213+
inherits: false;
1214+
}
1215+
@property --tw-grayscale {
1216+
syntax: "*";
1217+
inherits: false;
1218+
}
1219+
@property --tw-hue-rotate {
1220+
syntax: "*";
1221+
inherits: false;
1222+
}
1223+
@property --tw-invert {
1224+
syntax: "*";
1225+
inherits: false;
1226+
}
1227+
@property --tw-opacity {
1228+
syntax: "*";
1229+
inherits: false;
1230+
}
1231+
@property --tw-saturate {
1232+
syntax: "*";
1233+
inherits: false;
1234+
}
1235+
@property --tw-sepia {
1236+
syntax: "*";
1237+
inherits: false;
1238+
}
1239+
@property --tw-backdrop-blur {
1240+
syntax: "*";
1241+
inherits: false;
1242+
}
1243+
@property --tw-backdrop-brightness {
1244+
syntax: "*";
1245+
inherits: false;
1246+
}
1247+
@property --tw-backdrop-contrast {
1248+
syntax: "*";
1249+
inherits: false;
1250+
}
1251+
@property --tw-backdrop-grayscale {
1252+
syntax: "*";
1253+
inherits: false;
1254+
}
1255+
@property --tw-backdrop-hue-rotate {
1256+
syntax: "*";
1257+
inherits: false;
1258+
}
1259+
@property --tw-backdrop-invert {
1260+
syntax: "*";
1261+
inherits: false;
1262+
}
1263+
@property --tw-backdrop-opacity {
1264+
syntax: "*";
1265+
inherits: false;
1266+
}
1267+
@property --tw-backdrop-saturate {
1268+
syntax: "*";
1269+
inherits: false;
1270+
}
1271+
@property --tw-backdrop-sepia {
1272+
syntax: "*";
1273+
inherits: false;
1274+
}
11461275
@property --tw-duration {
11471276
syntax: "*";
11481277
inherits: false;

0 commit comments

Comments
 (0)