Skip to content

Commit a6ff4e9

Browse files
sureshgsureshg
authored
Update index.html
1 parent 8577782 commit a6ff4e9

File tree

1 file changed

+219
-36
lines changed

1 file changed

+219
-36
lines changed

‎index.html‎

Lines changed: 219 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,225 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
3+
34
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
8-
<title>Suresh's Home Page</title>
9-
10-
<link rel="icon" href="favicon.ico" type="image/png" />
11-
12-
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi|Roboto:300" rel="stylesheet">
13-
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
14-
<link rel="stylesheet" href="css/reset.css">
15-
<link rel="stylesheet" href="css/styles.css">
16-
<link rel="stylesheet" href="css/themes/white-indigo.css">
17-
<!-- link rel="stylesheet" href="css/themes/indigo-white.css" -->
18-
<!-- <link rel="stylesheet" href="css/themes/green-white.css"> -->
19-
<!-- <link rel="stylesheet" href="css/themes/red-white.css"> -->
20-
<!-- <link rel="stylesheet" href="css/themes/grey-white.css"> -->
21-
<!-- <link rel="stylesheet" href="css/themes/white-blue.css"> -->
22-
<!-- <link rel="stylesheet" href="css/themes/white-grey.css"> -->
23-
<!-- <link rel="stylesheet" href="css/themes/white-red.css"> -->
24-
<!-- <link rel="stylesheet" href="css/themes/yellow-black.css"> -->
25-
<!-- https://github.com/flexdinesh/dev-landing-page -->
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Suresh's Home Page</title>
9+
<link rel="icon" href="favicon.ico" type="image/png" />
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
12+
<style>
13+
:root {
14+
--light-theme-bg: #f5f5f5;
15+
--light-theme-text: #333333;
16+
--light-theme-icon: #666666;
17+
--light-theme-icon-text: #333333;
18+
--light-theme-selection: #e0e0e0;
19+
--light-theme-profile-bg: #f0f0f0;
20+
--dark-theme-bg: #1e1e2e;
21+
--dark-theme-text: #e0e0e0;
22+
--dark-theme-icon: #42a5f5;
23+
--dark-theme-icon-text: #bbdefb;
24+
--dark-theme-selection: #3949ab;
25+
--dark-theme-profile-bg: #212a40;
26+
}
27+
28+
body {
29+
font-family: 'Roboto', sans-serif;
30+
background-color: var(--light-theme-bg);
31+
color: var(--light-theme-text);
32+
margin: 0;
33+
padding: 0;
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
min-height: 100vh;
38+
transition: background-color 0.3s ease, color 0.3s ease;
39+
}
40+
41+
.profile {
42+
background-color: var(--light-theme-profile-bg);
43+
border-radius: 8px;
44+
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
45+
padding: 30px;
46+
text-align: center;
47+
max-width: 600px;
48+
width: 100%;
49+
opacity: 0;
50+
transform: translateY(20px);
51+
animation: fadeInUp 0.5s ease forwards;
52+
}
53+
54+
@keyframes fadeInUp {
55+
from {
56+
opacity: 0;
57+
transform: translateY(20px);
58+
}
59+
to {
60+
opacity: 1;
61+
transform: translateY(0);
62+
}
63+
}
64+
65+
.profile-photo {
66+
width: 150px;
67+
height: 150px;
68+
border-radius: 50%;
69+
overflow: hidden;
70+
margin: 0 auto 20px;
71+
transition: transform 0.3s ease;
72+
}
73+
74+
.profile-photo img {
75+
width: 100%;
76+
height: 100%;
77+
object-fit: cover;
78+
}
79+
80+
.profile-photo:hover {
81+
transform: scale(1.1);
82+
}
83+
84+
h1 {
85+
margin: 0;
86+
font-size: 36px;
87+
font-weight: bold;
88+
color: var(--light-theme-text);
89+
}
90+
91+
p {
92+
margin: 20px 0;
93+
font-size: 18px;
94+
line-height: 1.6;
95+
color: var(--light-theme-text);
96+
}
97+
98+
.social-icons {
99+
display: flex;
100+
justify-content: center;
101+
margin-top: 20px;
102+
}
103+
104+
.social-icons a {
105+
display: inline-block;
106+
margin: 0 10px;
107+
font-size: 30px;
108+
color: var(--light-theme-icon);
109+
transition: transform 0.3s ease, color 0.3s ease;
110+
position: relative;
111+
}
112+
113+
.social-icons a:hover {
114+
transform: scale(1.2);
115+
color: var(--light-theme-icon-text);
116+
}
117+
118+
.social-icons a::after {
119+
content: attr(title);
120+
position: absolute;
121+
bottom: -25px;
122+
left: 50%;
123+
transform: translateX(-50%);
124+
background-color: rgba(0, 0, 0, 0.8);
125+
color: #fff;
126+
padding: 4px 8px;
127+
border-radius: 4px;
128+
font-size: 14px;
129+
white-space: nowrap;
130+
opacity: 0;
131+
visibility: hidden;
132+
transition: opacity 0.3s ease, visibility 0.3s ease;
133+
}
134+
135+
.social-icons a:hover::after {
136+
opacity: 1;
137+
visibility: visible;
138+
}
139+
140+
.theme-switcher {
141+
position: absolute;
142+
top: 20px;
143+
right: 20px;
144+
z-index: 999;
145+
cursor: pointer;
146+
color: var(--light-theme-text);
147+
}
148+
149+
.theme-switcher i {
150+
font-size: 24px;
151+
}
152+
153+
.dark-theme {
154+
background-color: var(--dark-theme-bg);
155+
color: var(--dark-theme-text);
156+
}
157+
158+
.dark-theme .profile {
159+
background-color: var(--dark-theme-profile-bg);
160+
}
161+
162+
.dark-theme h1,
163+
.dark-theme p {
164+
color: var(--dark-theme-text);
165+
}
166+
167+
.dark-theme .social-icons a {
168+
color: var(--dark-theme-icon);
169+
}
170+
171+
.dark-theme .social-icons a:hover {
172+
color: var(--dark-theme-icon-text);
173+
}
174+
175+
.dark-theme .theme-switcher i {
176+
color: var(--dark-theme-text);
177+
}
178+
179+
/* Text selection color */
180+
::selection {
181+
background-color: var(--light-theme-selection);
182+
color: var(--light-theme-text);
183+
}
184+
185+
.dark-theme ::selection {
186+
background-color: var(--dark-theme-selection);
187+
color: var(--dark-theme-text);
188+
}
189+
</style>
26190
</head>
191+
27192
<body>
28-
<main>
29-
<div class="intro">Hello, I'm Suresh!</div>
30-
<div class="tagline">Developer | OSS | Java21 | Kotlin Multiplatform (JVM & JS) | OpenJDK | GraalVM | Jetbrains Compose Multiplatform</div>
31-
<!-- Find your icons from here - https://fontawesome.com/icons?d=gallery&s=brands -->
32-
<div class="icons-social">
33-
<a target="_blank" href="https://github.suresh.dev"><i class="fab fa-github"></i></a>
34-
<a target="_blank" href="https://twitter.suresh.dev"><i class="fab fa-twitter"></i></a>
35-
<a target="_blank" href="https://reddit.suresh.dev"><i class="fab fa-reddit"></i></a>
36-
<a target="_blank" href="https://stackoverflow.com/story/sureshg"><i class="fab fa-stack-overflow"></i></a>
37-
<a target="_blank" href="https://in.suresh.dev"><i class="fab fa-linkedin"></i></a>
38-
<a target="_blank" href="https://keybase.io/suresh"><i class="fab fa-keybase"></i></a>
39-
</div>
40-
</main>
193+
<div class="theme-switcher" onclick="toggleTheme()" title="Toggle Theme">
194+
<i id="theme-icon" class="fas fa-moon"></i>
195+
</div>
196+
<div class="profile">
197+
<div class="profile-photo">
198+
<img src="profile-photo.jpg" alt="Profile Photo">
199+
</div>
200+
<h1>Suresh</h1>
201+
<p>
202+
Developer | OSS | Java21 | Kotlin Multiplatform (JVM, WASM, JS) | OpenJDK | GraalVM | Jetbrains Compose Web
203+
</p>
204+
<div class="social-icons">
205+
<a target="_blank" href="https://github.suresh.dev" rel="noopener noreferrer" title="Github" ><i class="fab fa-github"></i></a>
206+
<a target="_blank" href="https://twitter.suresh.dev" rel="noopener noreferrer" title="Twitter"><i class="fab fa-twitter"></i></a>
207+
<a target="_blank" href="https://reddit.suresh.dev" rel="noopener noreferrer" title="Reddit"><i class="fab fa-reddit"></i></a>
208+
<a target="_blank" href="https://stackoverflow.com/story/sureshg" rel="noopener noreferrer" title="Stack Overflow" ><i class="fab fa-stack-overflow"></i></a>
209+
<a target="_blank" href="https://in.suresh.dev" rel="noopener noreferrer" title="LinkedIn" ><i class="fab fa-linkedin"></i></a>
210+
<a target="_blank" href="https://keybase.io/suresh" rel="noopener noreferrer" title="Keybase" ><i class="fab fa-keybase"></i></a>
211+
</div>
212+
</div>
213+
<script>
214+
function toggleTheme() {
215+
const body = document.body;
216+
const themeIcon = document.getElementById('theme-icon');
217+
218+
themeIcon.classList.toggle('fa-sun');
219+
themeIcon.classList.toggle('fa-moon');
220+
body.classList.toggle('dark-theme');
221+
}
222+
</script>
41223
</body>
224+
42225
</html>

0 commit comments

Comments
 (0)