Skip to content

Commit e3cee52

Browse files
softwareengineerprogrammersoftwareengineerprogrammer
committed
nicer index.html
1 parent ead9474 commit e3cee52

File tree

1 file changed

+134
-4
lines changed

1 file changed

+134
-4
lines changed

‎index.html

Lines changed: 134 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,134 @@
1-
There's nothing here. You might be looking for
2-
<a href="https://github.com/softwareengineerprogrammer">github.com/softwareengineerprogrammer</a>
3-
or <a href="https://softwareengineerprogrammer.github.io/GEOPHIRES">softwareengineerprogrammer.github.io/GEOPHIRES</a>
4-
instead.
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Software Engineer Programmer</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
10+
<style>
11+
:root {
12+
--background-color: #1a1a1a;
13+
--text-color: #e0e0e0;
14+
--accent-color: #00aaff;
15+
--card-background: #2c2c2c;
16+
--card-border: #444444;
17+
--card-hover-border: var(--accent-color);
18+
}
19+
20+
/* --- General Body & Layout --- */
21+
html, body {
22+
height: 100%;
23+
margin: 0;
24+
padding: 0;
25+
}
26+
27+
body {
28+
background-color: var(--background-color);
29+
color: var(--text-color);
30+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
text-align: center;
35+
padding: 2rem;
36+
box-sizing: border-box;
37+
}
38+
39+
/* --- Main Content Container --- */
40+
.container {
41+
max-width: 800px;
42+
width: 100%;
43+
}
44+
45+
/* --- Typography --- */
46+
h1 {
47+
font-size: 2.5rem;
48+
font-weight: 700;
49+
margin-bottom: 0.5rem;
50+
color: #ffffff;
51+
}
52+
53+
.tagline {
54+
font-size: 1.2rem;
55+
font-weight: 400;
56+
color: #a0a0a0;
57+
margin-bottom: 3rem;
58+
}
59+
60+
/* --- Link Cards Layout --- */
61+
.links-container {
62+
display: flex;
63+
justify-content: center;
64+
gap: 2rem;
65+
flex-wrap: wrap; /* Allows cards to stack on smaller screens */
66+
}
67+
68+
/* --- Individual Link Card Styling --- */
69+
.card {
70+
background-color: var(--card-background);
71+
border: 1px solid var(--card-border);
72+
border-radius: 12px;
73+
padding: 1.5rem 2rem;
74+
text-decoration: none;
75+
color: var(--text-color);
76+
width: 300px;
77+
max-width: 100%;
78+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
79+
transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
80+
}
81+
82+
.card:hover {
83+
transform: translateY(-5px);
84+
border-color: var(--card-hover-border);
85+
}
86+
87+
.card h2 {
88+
font-size: 1.25rem;
89+
font-weight: 500;
90+
margin-top: 0;
91+
margin-bottom: 0.5rem;
92+
color: var(--accent-color);
93+
}
94+
95+
.card p {
96+
font-size: 1rem;
97+
line-height: 1.5;
98+
margin: 0;
99+
color: #b0b0b0;
100+
}
101+
102+
/* --- Responsive Design Adjustments --- */
103+
@media (max-width: 768px) {
104+
h1 {
105+
font-size: 2rem;
106+
}
107+
.tagline {
108+
font-size: 1rem;
109+
}
110+
}
111+
</style>
112+
</head>
113+
<body>
114+
115+
<main class="container">
116+
<header>
117+
<h1>softwareengineerprogrammer</h1>
118+
<p class="tagline">This page is intentionally left blank. Mostly.</p>
119+
</header>
120+
121+
<section class="links-container">
122+
<a href="https://github.com/softwareengineerprogrammer" class="card" target="_blank" rel="noopener noreferrer">
123+
<h2>GitHub Profile</h2>
124+
<p>Explore my repositories, contributions, and open-source projects.</p>
125+
</a>
126+
<a href="https://softwareengineerprogrammer.github.io/GEOPHIRES" class="card" target="_blank" rel="noopener noreferrer">
127+
<h2>GEOPHIRES Documentation</h2>
128+
<p>Go to GEOPHIRES documentation.</p>
129+
</a>
130+
</section>
131+
</main>
132+
133+
</body>
134+
</html>

0 commit comments

Comments
 (0)