-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
209 lines (178 loc) · 9.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!--
*********************************************************************************************
* File: index.html
* Author: Madhurima Rawat
* Date: January 26, 2025
* Description: This is the homepage of Madhurima Rawat's personal blog website, "Madhurima Mindscape".
* The page showcases an interactive carousel for displaying visual content, and sections
* that guide visitors to explore various blog topics including personal reflections, tech
* insights, project diaries, and creative photography.
* It serves as a portal for showcasing personal projects, insights, and creative work.
* Version: 1.0
* GitHub Repository: https://github.com/madhurimarawat/Madhurima-Mindscape
* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section.
* Comments:
- The homepage features a dynamic carousel to display images, offering a visually appealing start.
- Several sections (Introduction, Personal Insights, Tech Insights, Project Diaries, and Creative Clicks)
are provided with easy navigation links, leading to individual blog pages.
- The page is styled using Bootstrap 4.6.1 to ensure a responsive layout across various devices.
- Font Awesome icons are used to visually represent the different sections and links.
* Dependencies:
- Font Awesome 5.15.4: Provides icons used throughout the page for visual enhancements.
- Bootstrap 4.6.1: Ensures a responsive, mobile-friendly design.
- Custom CSS (index.css): Defines the unique style of the blog website.
- JavaScript (index.js): Manages interactivity, including the carousel behavior and dynamic features.
*********************************************************************************************
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta tags for SEO -->
<meta name="description"
content="Welcome to Madhurima Mindscape, a personal blog by Madhurima Rawat. Explore personal reflections, tech insights, project diaries, and creative photography.">
<meta name="keywords"
content="Madhurima Rawat, blog, personal blog, tech insights, photography, creative content, project diaries, personal reflections">
<meta name="author" content="Madhurima Rawat">
<meta name="robots" content="index, follow">
<meta name="version" content="1.0" />
<!--
Specifies the publication date and time in ISO 8601 format.
The structure includes:
- Date in YYYY-MM-DD format:
YYYY = 4-digit year (e.g., 2024)
MM = 2-digit month (e.g., 12 for December)
DD = 2-digit day (e.g., 18)
- A literal 'T' separator between date and time.
- Time in HH:MM:SS format:
HH = 2-digit hour in 24-hour format (e.g., 15 for 3 PM in UTC)
MM = 2-digit minutes (e.g., 20)
SS = 2-digit seconds (e.g., 13)
- 'Z' at the end indicates the time is in Coordinated Universal Time (UTC).
Example: "2024-12-18T15:20:13Z" represents December 18, 2024, at 3:20:13 PM UTC.
-->
<!-- Specifies the publication date and time in ISO 8601 format -->
<meta name="date" content="2024-12-18T15:20:13Z" />
<!-- Last Updated -->
<meta name="last-modified" content="2024-12-23T13:04:28Z">
<!-- Open Graph Meta Tags for social sharing -->
<meta property="og:title" content="Madhurima Mindscape - Explore Personal and Tech Insights" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://madhurimarawat.github.io/Madhurima-Mindscape/" />
<meta property="og:description"
content="Dive into Madhurima Mindscape - a space for personal reflections, tech insights, project stories, and creative photography." />
<meta property="og:image"
content="https://raw.githubusercontent.com/madhurimarawat/Madhurima-Mindscape/main/website_snapshots/website_1.png" />
<meta property="og:image:alt" content="Madhurima Mindscape Blog Snapshot" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Madhurima Mindscape - Explore Personal and Tech Insights" />
<meta name="twitter:description"
content="Dive into Madhurima Mindscape - a space for personal reflections, tech insights, project stories, and creative photography." />
<meta name="twitter:image"
content="https://raw.githubusercontent.com/madhurimarawat/Madhurima-Mindscape/main/website_snapshots/website_1.png" />
<title>Madhurima Mindscape</title>
<!-- For PNG and SVG logos -->
<link rel="icon" href="images/Logo.png" type="image/png">
<!-- Bootstrap CSS CDN-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="css/index.css">
<!-- Link to Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<script defer src="js/index.js"></script>
</head>
<body>
<!-- Place the div with a specific id to insert the navbar -->
<div id="header-container"></div>
<!--------------------- Slider Section Starts From Here----------------->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/Illustration_1.png" height="400px" class="d-block w-100" alt="Slider Image 1">
</div>
<div class="carousel-item">
<img src="images/Illustration_2.webp" height="400px" class="d-block w-100" alt="Slider Image 2">
</div>
<div class="carousel-item">
<img src="images/Illustration_3.png" height="400px" class="d-block w-100" alt="Slider Image 2">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
<div class="main-content">
<main class="path">
<div class="path-container">
<!-- First Section -->
<div class="path-section">
<h2>Introduction</h2>
<a href="introduction.html" class="path-item">
<i class="fas fa-info-circle"></i> Explore the Blog
</a>
<a href="about-me.html" class="path-item">
<i class="fas fa-user"></i> About Me
</a>
</div>
<!-- Second Section -->
<div class="path-section">
<h2>Personal Insights</h2>
<a href="2024-reflections.html" class="path-item">
<i class="fas fa-calendar"></i> 2024 Reflections
</a>
<a href="practical-wisdom.html" class="path-item">
<i class="fas fa-hands-helping"></i> Practical Wisdom
</a>
</div>
<!-- Third Section -->
<div class="path-section">
<h2>Tech Insights</h2>
<a href="data-stories.html" class="path-item">
<i class="fas fa-database"></i> Data Stories
</a>
</div>
<!-- Fourth Section -->
<div class="path-section">
<h2>Project Diaries</h2>
<a href="library-management.html" class="path-item">
<i class="fas fa-book"></i> Library Management
</a>
</div>
<!-- Fifth Section -->
<div class="path-section">
<h2>Creative Clicks</h2>
<a href="floral-photography.html" class="path-item">
<i class="fas fa-seedling"></i> Floral Photography
</a>
</div>
<!-- Sixth Section Poems -->
<div class="path-section">
<h2>Poem Perspectives</h2>
<a href="the-solitary-reaper.html" class="path-item">
<i class="fas fa-music"></i> The Solitary Reaper
</a>
</div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<br>
</body>
<footer class="footer-section">
<p>© 2024 Madhurima Mindscape. All rights reserved.</p>
</footer>
</html>