Skip to content

Commit 6914ad4

Browse files
RohanAltAccountRohanAltAccount
committed
oh yea
1 parent e204116 commit 6914ad4

2 files changed

Lines changed: 114 additions & 54 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6-
<title>Rohan Modi</title>
6+
<title>About Rohan Modi</title>
77
<link rel="stylesheet" href="styles.css">
88
</head>
99

@@ -35,9 +35,9 @@ <h1>Rohan Modi</h1>
3535
</section>
3636

3737
</main>
38-
38+
<background class="background"></background>
3939
<footer>
40-
<small>©2025 Rohan. Built with my hands, keyboard, and a little bit of creativity.</small>
40+
<small>©2025 Rohan.</small>
4141
</footer>
4242
</body>
4343
</html>

‎styles.css‎

Lines changed: 111 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,64 +4,119 @@
44
padding: 0;
55
}
66
body {
7-
background: #FFFFFF;
8-
color: #000000;
9-
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
7+
background: #fafafa;
8+
color: #111;
9+
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1010
min-height: 100vh;
1111
display: flex;
12-
flex-direction: column;
13-
align-items: center;
12+
justify-content: center;
13+
padding: 64px 16px;
14+
}
15+
body::before {
16+
content: "";
17+
position: fixed;
18+
inset: 0;
19+
pointer-events: none;
20+
background-image: url("https://grainy-gradients.vercel.app/noise.svg");
21+
opacity: 0.04;
22+
z-index: 999;
1423
}
1524
main.container {
16-
max-width: 480px;
17-
margin: 48px auto 0 auto;
18-
padding: 32px 20px 24px 20px;
19-
border-radius: 18px;
20-
background: #FFFFFF;
25+
max-width: 680px;
26+
width: 100%;
27+
padding: 0;
28+
margin: 0 auto;
29+
background: transparent;
2130
display: flex;
2231
flex-direction: column;
2332
align-items: center;
33+
position: fixed;
2434
}
2535
.profile {
2636
display: flex;
2737
flex-direction: column;
2838
align-items: center;
2939
text-align: center;
30-
margin-bottom: 32px;
40+
margin-bottom: 50px;
3141
}
42+
3243
.avatar {
3344
width: 104px;
3445
height: 104px;
35-
border-radius: 50%;
36-
border: none;
37-
margin-bottom: 16px;
46+
border-radius: 15px;
47+
margin-bottom: 30px;
3848
object-fit: cover;
39-
background: #FFFFFF;
49+
background: none;
50+
transition: transform 0.2s ease, box-shadow 0.2s ease;
51+
52+
}
53+
.avatar {
54+
width: 104px;
55+
height: 104px;
56+
border-radius: 16px;
57+
margin-bottom: 24px;
58+
transition: transform 0.2s ease, box-shadow 0.2s ease;
59+
}
60+
.avatar img {
61+
width: 100%;
62+
height: 100%;
63+
border-radius: inherit;
64+
object-fit: cover;
65+
}
66+
.avatar:hover {
67+
transform: translateY(-2px);
68+
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
69+
}
70+
.background {
71+
position: fixed;
72+
inset: 0;
73+
z-index: -1;
74+
overflow: hidden;
75+
background: #fafafa;
76+
}
77+
.background::before {
78+
content: "";
79+
position: absolute;
80+
width: 600px;
81+
height: 600px;
82+
background: radial-gradient(circle, rgba(0, 217, 255, 0.18), transparent 60%);
83+
top: -200px;
84+
left: -200px;
85+
filter: blur(40px);
4086
}
41-
.avatar:hover{
42-
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
43-
transform: translateY(-2px) rotate(3deg);
87+
88+
.background::after {
89+
content: "";
90+
position: absolute;
91+
width: 700px;
92+
height: 700px;
93+
background: radial-gradient(circle, rgba(255, 155, 155, 0.16), transparent 60%);
94+
bottom: -250px;
95+
right: -250px;
96+
filter: blur(50px);
4497
}
4598
h1 {
46-
font-size: 2.3rem;
47-
font-weight: 700;
48-
letter-spacing: 1px;
49-
margin-bottom: 6px;
99+
font-size: 8rem;
100+
font-weight: 650;
101+
letter-spacing: -0.02em;
102+
margin-bottom: 4px;
50103
}
51104
.subtitleiguess {
52-
color: #4a4a4a;
53-
font-size: 1.1rem;
54-
margin-bottom: 10px;
105+
color: #666;
106+
font-size: 1.2rem;
107+
margin-bottom: 25px;
55108
}
109+
56110
.desc {
57-
color: #4a4a4a;
58-
font-size: 1rem;
111+
color: #777;
112+
font-size: 1.1rem;
59113
text-align: center;
60-
margin-bottom: 0;
61114
line-height: 1.6;
115+
max-width: 50ch;
116+
margin-bottom: 12px;
62117
}
63118
.link {
64-
color: #6a6a6a;
119+
color: #666;
65120
text-decoration: none;
66121
font-weight: 500;
67122
transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
@@ -70,45 +125,50 @@ h1 {
70125
}
71126
.link:hover {
72127
color: #000000;
73-
transform: translateY(-2px);
128+
transform: translateY(-1.5px);
74129
text-decoration: none;
130+
cursor: pointer;
75131
}
132+
76133
.cta-button {
77-
margin: 16px 0;
78-
padding: 12px 20px;
134+
color: #6a6a6a;
135+
background: none;
79136
border: none;
80-
border-radius: 12px;
81-
background: #ffffff;
82-
color: #6a6a6a;
83-
font-weight: 600;
84-
font-size: 1rem;
137+
padding: 0;
138+
139+
font: inherit;
140+
font-weight: inherit;
141+
142+
text-decoration: none;
85143
cursor: pointer;
86-
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
87-
display: inline-flex;
88-
align-items: center;
89-
justify-content: center;
144+
transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
145+
border-radius: 12px;
146+
padding: 10px 16px;
147+
display: inline;
90148
}
91149
.cta-button:hover {
92-
box-shadow: 0 14px 28px rgba(0,0,0,0.16);
150+
text-shadow: 0 14px 28px rgba(0,0,0,0.16);
93151
transform: translateY(-2px);
94152
color: #000000;
153+
cursor: none;
95154
}
96155
.card {
97156
display: flex;
98-
align-items: left;
157+
align-items: center;
158+
justify-content: space-between;
99159
background: transparent;
100160
border-radius: 12px;
101-
padding: 14px 18px;
102-
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
161+
padding: 16px 18px;
162+
transition: transform 0.2s ease, background 0.2s ease;
103163
text-decoration: none;
104164
color: inherit;
105165
cursor: pointer;
106166
border: none;
107167
}
168+
108169
.card:hover {
109-
transform: translateY(-4px);
110-
box-shadow: 0 10px 22px rgba(0,0,0,0.08);
111-
background: rgba(0,0,0,0.03);
170+
transform: translateY(-2px);
171+
background: #f3f3f3;
112172
}
113173
.links {
114174
width: 100%;
@@ -120,14 +180,14 @@ footer {
120180
width: 100%;
121181
text-align: center;
122182
margin: 32px 0 18px 0;
123-
color: #7a7a7a;
183+
color: #ffffff;
124184
font-size: 0.97rem;
125185
}
126186

127187
@media (max-width: 580px) {
128188
main.container {
129-
margin-top: 18px;
130-
padding: 16px 2vw 18px 2vw;
189+
margin-top: 19px;
190+
padding: 19px 2vw 18px 2vw;
131191
}
132192
.hoverbox span {
133193
font-size: 1.6rem;

0 commit comments

Comments
 (0)