Skip to content

Commit d609eb8

Browse files
developer1622developer1622
authored
Update index.html
1 parent 25b3442 commit d609eb8

File tree

1 file changed

+111
-32
lines changed

1 file changed

+111
-32
lines changed

‎index.html‎

Lines changed: 111 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,12 +11,19 @@
1011
<style>
1112
/* CSS is embedded directly here for a single-file experience */
1213
:root {
13-
--bg-primary: #FDFDFA; /* Soft, warm off-white */
14-
--bg-secondary: #FFFFFF; /* Clean white for cards */
15-
--accent-blue: #004080; /* Deep, professional navy blue */
16-
--text-primary: #212121; /* Dark gray for primary text */
17-
--text-secondary: #585858; /* Medium gray for secondary text */
18-
--border-blue: rgba(0, 64, 128, 0.15); /* Subtle border */
14+
--bg-primary: #FDFDFA;
15+
/* Soft, warm off-white */
16+
--bg-secondary: #FFFFFF;
17+
/* Clean white for cards */
18+
--accent-blue: #004080;
19+
/* Deep, professional navy blue */
20+
--text-primary: #212121;
21+
/* Dark gray for primary text */
22+
--text-secondary: #585858;
23+
/* Medium gray for secondary text */
24+
--border-blue: rgba(0, 64, 128, 0.15);
25+
/* Subtle border */
26+
--shadow-color: rgba(0, 64, 128, 0.1);
1927
}
2028

2129
* {
@@ -34,7 +42,24 @@
3442
color: var(--text-primary);
3543
line-height: 1.6;
3644
overflow-x: hidden;
37-
transition: opacity 0.5s ease;
45+
/* Animated Gradient Background */
46+
background: linear-gradient(-45deg, #FDFDFA, #F7F7F3, #FDFDFA, #F5F5F0);
47+
background-size: 400% 400%;
48+
animation: gradientAnimation 30s ease infinite;
49+
}
50+
51+
@keyframes gradientAnimation {
52+
0% {
53+
background-position: 0% 50%;
54+
}
55+
56+
50% {
57+
background-position: 100% 50%;
58+
}
59+
60+
100% {
61+
background-position: 0% 50%;
62+
}
3863
}
3964

4065
.container {
@@ -49,11 +74,17 @@
4974
top: 0;
5075
left: 0;
5176
width: 100%;
52-
background-color: rgba(253, 253, 250, 0.8); /* Light, translucent background */
77+
background-color: rgba(253, 253, 250, 0.8);
78+
/* Light, translucent background */
5379
backdrop-filter: blur(10px);
5480
border-bottom: 1px solid var(--border-blue);
5581
z-index: 1000;
5682
padding: 1rem 2rem;
83+
transition: box-shadow 0.3s ease, background-color 0.3s ease;
84+
}
85+
86+
header.scrolled {
87+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
5788
}
5889

5990
nav {
@@ -80,14 +111,16 @@
80111
.nav-links {
81112
list-style: none;
82113
display: flex;
83-
gap: 1.5rem; /* Reduced gap */
114+
gap: 1.5rem;
115+
/* Reduced gap */
84116
}
85117

86118
.nav-links a {
87119
color: var(--text-secondary);
88120
text-decoration: none;
89121
font-weight: 400;
90-
font-size: 0.95rem; /* Reduced font size */
122+
font-size: 0.95rem;
123+
/* Reduced font size */
91124
position: relative;
92125
transition: color 0.3s ease;
93126
cursor: pointer;
@@ -117,8 +150,27 @@
117150
}
118151

119152
main {
120-
padding-top: 100px; /* Offset for fixed header */
121-
min-height: calc(100vh - 180px); /* Ensure footer is pushed down */
153+
padding-top: 100px;
154+
/* Offset for fixed header */
155+
min-height: calc(100vh - 180px);
156+
/* Ensure footer is pushed down */
157+
transition: opacity 0.3s ease, transform 0.3s ease;
158+
}
159+
160+
/* Hero Section for Homepage */
161+
.hero {
162+
text-align: center;
163+
padding: 4rem 2rem 2rem 2rem;
164+
}
165+
166+
.hero .page-title {
167+
font-size: 3.5rem;
168+
font-weight: 700;
169+
}
170+
171+
.hero .tagline {
172+
font-size: 1.2rem;
173+
margin-bottom: 1.5rem;
122174
}
123175

124176
/* Page Titles */
@@ -129,7 +181,7 @@
129181
color: var(--accent-blue);
130182
margin-bottom: 1rem;
131183
}
132-
184+
133185
.tagline {
134186
text-align: center;
135187
font-size: 1.1rem;
@@ -147,7 +199,7 @@
147199
max-width: 800px;
148200
margin: 0 auto 4rem auto;
149201
}
150-
202+
151203
.section-divider {
152204
border: 0;
153205
height: 1px;
@@ -175,7 +227,7 @@
175227

176228
.card:hover {
177229
transform: translateY(-10px);
178-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
230+
box-shadow: 0 15px 35px var(--shadow-color), 0 0 0 4px rgba(0, 64, 128, 0.05);
179231
}
180232

181233
.card.visible {
@@ -193,7 +245,7 @@
193245
.card-content {
194246
color: var(--text-secondary);
195247
}
196-
248+
197249
.portal-card {
198250
text-align: center;
199251
cursor: pointer;
@@ -237,7 +289,7 @@
237289
cursor: pointer;
238290
transition: transform 0.3s ease, box-shadow 0.3s ease;
239291
}
240-
292+
241293
.tech-tile:hover {
242294
transform: translateY(-5px);
243295
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
@@ -285,11 +337,11 @@
285337
border-radius: 8px;
286338
max-width: 600px;
287339
width: 90%;
288-
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
340+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
289341
transform: scale(0.95);
290342
transition: transform 0.3s ease;
291343
}
292-
344+
293345
.modal-overlay.visible .modal-content {
294346
transform: scale(1);
295347
}
@@ -327,10 +379,11 @@
327379
margin-bottom: 0.5rem;
328380
}
329381

330-
.modal-body p, .modal-body ul {
382+
.modal-body p,
383+
.modal-body ul {
331384
color: var(--text-secondary);
332385
}
333-
386+
334387
.modal-body ul {
335388
padding-left: 20px;
336389
}
@@ -339,11 +392,13 @@
339392
.timeline-item {
340393
margin-bottom: 2.5rem;
341394
}
395+
342396
.timeline-item h3 {
343397
color: var(--text-primary);
344398
font-weight: 400;
345399
margin-bottom: 0.5rem;
346400
}
401+
347402
.timeline-item h3 strong {
348403
font-weight: 700;
349404
color: var(--accent-blue);
@@ -354,19 +409,24 @@
354409
overflow-x: auto;
355410
margin-top: 2rem;
356411
}
412+
357413
.summary-table {
358414
width: 100%;
359415
border-collapse: collapse;
360416
text-align: left;
361417
}
362-
.summary-table th, .summary-table td {
418+
419+
.summary-table th,
420+
.summary-table td {
363421
padding: 1rem;
364422
border-bottom: 1px solid var(--border-blue);
365423
}
424+
366425
.summary-table th {
367426
color: var(--accent-blue);
368427
font-weight: 700;
369428
}
429+
370430
.summary-table tbody tr:nth-child(even) {
371431
background-color: rgba(0, 64, 128, 0.02);
372432
}
@@ -382,6 +442,7 @@
382442
}
383443
</style>
384444
</head>
445+
385446
<body>
386447

387448
<header>
@@ -403,7 +464,8 @@
403464
</main>
404465

405466
<footer id="footer">
406-
<p>&copy; 2025. A perspective on building with first principles.</p>
467+
<p>2025 Ramu Mangalarapu</p>
468+
<p><small>Disclaimer: Ideas and opinions expressed are my own and do not reflect my employer.</small></p>
407469
</footer>
408470

409471
<!-- Modal Structure (Hidden by default) -->
@@ -426,7 +488,7 @@ <h3>Examples</h3>
426488

427489
<script>
428490
document.addEventListener('DOMContentLoaded', () => {
429-
491+
430492
const mainContent = document.getElementById('main-content');
431493
const navLinks = document.querySelectorAll('nav a');
432494
const modal = document.getElementById('tech-modal');
@@ -435,15 +497,20 @@ <h3>Examples</h3>
435497
const modalSolves = document.getElementById('modal-solves');
436498
const modalExamples = document.getElementById('modal-examples');
437499
const modalCloseBtn = document.getElementById('modal-close-btn');
500+
const header = document.querySelector('header');
438501

439502
const pageContent = {
440503
home: `
504+
<div class="hero">
505+
<div class="container">
506+
<h1 class="page-title">Ramu Mangalarapu take on software architecture</h1>
507+
<p class="tagline">Somehow everything is related</p>
508+
<p class="page-subtitle">
509+
An approach to understanding any system, not by memorizing its complexities, but by distilling it to its timeless, fundamental truths. This is a framework for thinking, designed for architects who seek to build with clarity and conviction.
510+
</p>
511+
</div>
512+
</div>
441513
<div class="container">
442-
<h1 class="page-title">The Reductionist's Lens</h1>
443-
<p class="tagline">Ramu's way of thinking</p>
444-
<p class="page-subtitle">
445-
An approach to understanding any system, not by memorizing its complexities, but by distilling it to its timeless, fundamental truths. This is a framework for thinking, designed for architects who seek to build with clarity and conviction.
446-
</p>
447514
<div class="card-grid">
448515
<div class="card portal-card" data-page="layers"><h2 class="card-title">The Layers of Abstraction</h2><p class="card-content">Peel back the layers of a modern system, from your application code down to the physical hardware that executes it.</p></div>
449516
<div class="card portal-card" data-page="primitives"><h2 class="card-title">The Irreducible Primitives</h2><p class="card-content">Discover the 'atomic' components of any system—the absolute fundamental building blocks that everything else is built upon.</p></div>
@@ -565,7 +632,7 @@ <h1 class="page-title" style="font-size: 2.5rem; margin-top: 4rem;">Summary Tabl
565632
modalTitle.textContent = tileData.title;
566633
modalDescription.textContent = tileData.description;
567634
modalSolves.textContent = tileData.solves;
568-
635+
569636
modalExamples.innerHTML = ''; // Clear previous examples
570637
if (tileData.examples) {
571638
tileData.examples.split(', ').forEach(item => {
@@ -574,7 +641,7 @@ <h1 class="page-title" style="font-size: 2.5rem; margin-top: 4rem;">Summary Tabl
574641
modalExamples.appendChild(li);
575642
});
576643
}
577-
644+
578645
modal.classList.add('visible');
579646
}
580647

@@ -615,6 +682,7 @@ <h1 class="page-title" style="font-size: 2.5rem; margin-top: 4rem;">Summary Tabl
615682
function loadPage(page) {
616683
if (!pageContent[page]) return;
617684
mainContent.style.opacity = 0;
685+
mainContent.style.transform = 'translateY(20px)';
618686
setTimeout(() => {
619687
mainContent.innerHTML = pageContent[page];
620688
window.scrollTo(0, 0);
@@ -623,6 +691,7 @@ <h1 class="page-title" style="font-size: 2.5rem; margin-top: 4rem;">Summary Tabl
623691
});
624692
initializeEventListeners();
625693
mainContent.style.opacity = 1;
694+
mainContent.style.transform = 'translateY(0)';
626695
}, 300);
627696
}
628697

@@ -644,13 +713,23 @@ <h1 class="page-title" style="font-size: 2.5rem; margin-top: 4rem;">Summary Tabl
644713
closeModal();
645714
}
646715
});
647-
// Close modal with Escape key
716+
// Close modal with Escape key
648717
window.addEventListener('keydown', (e) => {
649718
if (e.key === 'Escape' && modal.classList.contains('visible')) {
650719
closeModal();
651720
}
652721
});
722+
723+
// Header shadow on scroll
724+
window.addEventListener('scroll', () => {
725+
if (window.scrollY > 10) {
726+
header.classList.add('scrolled');
727+
} else {
728+
header.classList.remove('scrolled');
729+
}
730+
});
653731
});
654732
</script>
655733
</body>
734+
656735
</html>

0 commit comments

Comments
 (0)