-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog.html
More file actions
230 lines (224 loc) · 20.9 KB
/
blog.html
File metadata and controls
230 lines (224 loc) · 20.9 KB
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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
<!-- favicon -->
<link rel="icon"
type="image/png"
href="undraw_Male_avatar_g98d.png">
<!-- FONTS -->
<style>@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap');</style>
<!-- STYLES -->
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="styles/nav.css">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/blog.css">
<script src="index.js"></script>
</head>
<body>
<navbar class="nav-bar-container">
<div class="profile">
<a href="./">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 532 532" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="270.75986" cy="260.93427" r="86.34897" fill="#ffb6b6"/><polygon points="221.18982 360.05209 217.28876 320.6185 295.18982 306.05209 341.18982 418.05209 261.18982 510.05209 204.18982 398.05209 221.18982 360.05209" fill="#ffb6b6"/><path d="M216.0374,340.35736l17.03111,3.84802s-13.38821-42.45453-8.84396-46.50766c4.54427-4.05316,15.68007,2.33328,15.68007,2.33328l11.70201,13.1199,14.25394-14.51239s15.47495-19.2421,21.53397-24.6463-3.67319-25.46364-3.67319-25.46364c0,0,89.89185-24.23923,56.44299-67.83968,0,0-19.61093-34.18452-25.99734-23.04871-6.38641,11.1358-14.00162-6.55013-14.00162-6.55013l-23.25381,4.42198s-45.89429-27.06042-89.45331,30.82959c-43.55902,57.89003,28.57916,154.01572,28.57916,154.01572h-.00002Z" fill="#2f2e41"/><path d="M433.16003,472.95001c-47.19,38.26001-105.57001,59.04999-167.16003,59.04999-56.23999,0-109.81-17.33997-154.62-49.47998,.08002-.84003,.16003-1.66998,.23004-2.5,1.19-13,2.25-25.64001,2.94995-36.12,2.71002-40.69,97.64001-67.81,97.64001-67.81,0,0,.42999,.42999,1.29004,1.17999,5.23999,4.59998,26.50995,21.27997,63.81,25.94,33.25995,4.15997,44.20996-15.57001,47.51996-25.02002,1-2.88,1.30005-4.81,1.30005-4.81l97.63995,46.10999c6.37,9.10004,8.86005,28.70001,9.35004,50.73004,.01996,.90997,.03998,1.81,.04999,2.72998Z" fill="#5c69ff"/><path d="M454.09003,77.91003C403.85004,27.66998,337.05005,0,266,0S128.15002,27.66998,77.91003,77.91003C27.67004,128.15002,0,194.95001,0,266c0,64.85004,23.05005,126.16003,65.29004,174.57001,4.02997,4.63,8.23999,9.14001,12.62,13.52002,1.02997,1.02997,2.07001,2.06,3.12,3.06,2.79999,2.70996,5.65002,5.35999,8.54999,7.92999,1.76001,1.57001,3.54004,3.10999,5.34003,4.62,1.40997,1.19,2.82001,2.35999,4.25,3.51001,.02997,.02997,.04999,.04999,.07996,.07001,3.97003,3.19995,8.01001,6.27997,12.13,9.23999,44.81,32.14001,98.37999,49.47998,154.61998,49.47998,61.59003,0,119.97003-20.78998,167.16003-59.04999,3.84998-3.12,7.62-6.35999,11.32001-9.71002,3.26996-2.95996,6.46997-6.01001,9.60999-9.14996,.98999-.98999,1.97998-1.98999,2.95001-3,2.70001-2.78003,5.32001-5.61005,7.88-8.48004,43.37-48.71997,67.07996-110.83997,67.07996-176.60999,0-71.04999-27.66998-137.84998-77.90997-188.08997Zm10.17999,362.20997c-2.5,2.84003-5.06,5.64001-7.67999,8.37-4.08002,4.25-8.28998,8.37-12.64001,12.34003-1.64996,1.52002-3.32001,3-5.01001,4.46997-1.91998,1.67004-3.85999,3.31-5.82996,4.92004-15.53003,12.75-32.54004,23.75-50.73004,32.70996-7.19,3.54999-14.56,6.78003-22.09998,9.67004-29.28998,11.23999-61.08002,17.39996-94.28003,17.39996-32.03998,0-62.75995-5.73999-91.19-16.23999-11.66998-4.29999-22.94995-9.40997-33.77997-15.26001-1.59003-.85999-3.16998-1.72998-4.73999-2.62-8.26001-4.67999-16.25-9.78998-23.91998-15.31-.25-.17999-.51001-.37-.76001-.54999-5.46002-3.94-10.77002-8.09003-15.90002-12.45001-1.88-1.59003-3.73999-3.20001-5.57001-4.84998-2.97998-2.65002-5.89996-5.38-8.75-8.18005-5.39996-5.28998-10.56-10.79999-15.48999-16.52997C26.09003,391.77002,2,331.65002,2,266,2,120.42999,120.43005,2,266,2s264,118.42999,264,264c0,66.66003-24.82996,127.62-65.72998,174.12Z" fill="#3f3d56"/></svg>
</a>
</div>
<div class="nav-links">
<a href="./"><div class="nav-elements">HOME</div></a>
<a href="./projects.html"> <div class="nav-elements">PROJECTS</div></a>
<a> <div class="nav-elements current">BLOG</div></a>
<a href="./hire.html"> <div class="nav-elements">HIRE ME</div></a>
<div class="ham-menu">
<img onclick="ham()" src="essentials/menu-light.png" alt="menu">
</div>
</div>
<div class="ham-links" id="ham-menu-id">
<a href="./" onclick="ham()"><div class="ham-elements ">HOME</div></a>
<a href="./projects.html" onclick="ham()"> <div class="ham-elements">PROJECTS</div></a>
<a onclick="ham()"><div class="ham-elements current">BLOG</div></a>
<a href="./hire.html" onclick="ham()"> <div class="ham-elements">HIRE ME</div></a>
</div>
</navbar>
<div class="blog-wrapper">
<div class="blog-main-header">MY BLOG</div>
<div style="display: none;" class="blog">
<div class="blog-title" onclick="showblog(10)">
<div id="blogt10" class="blog-name">Using Pagefind to integrate page-wide search This is a long name. A really really long nameeee. Also a little description and and a subheading too for testing.</div>
<div class="blog-date">2,3k Views | July 23, 2025</div>
</div>
<div id="blog10" class="blog-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dolorum sint tenetur deleniti, explicabo ullam provident illum labore exercitationem. Quisquam quae vitae aperiam fugiat itaque minus aspernatur autem quasi hic. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum molestiae natus, veritatis explicabo qui asperiores nam obcaecati minus officiis ipsam beatae saepe vitae. Natus reiciendis repellat labore tenetur dolorum maiores! <br> <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error placeat explicabo soluta saepe odio cum dolores ullam molestias, et obcaecati aliquid ratione libero dolor doloribus ad magni quam amet ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, deserunt autem rerum dolor assumenda ipsum facere praesentium? Nostrum placeat suscipit magnam. Quam, voluptatum! Eum velit dolorem sapiente assumenda similique! Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur error consectetur eos dolor fugiat atque natus dolorum soluta autem quas dignissimos provident recusandae reiciendis quia, corrupti minima quod dolorem praesentium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia quo, minus exercitationem, cum dolores libero itaque velit ut suscipit aspernatur aliquam iste. Minus quos ipsum incidunt iste tempore voluptatem dolorum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, error quos. Consequatur, quasi fugiat provident ratione dolor voluptate explicabo repudiandae eligendi repellendus. Quisquam vero, consequatur est commodi id eveniet modi! <br><br> <h2>This is a title</h2> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis excepturi id odit veniam pariatur minima sint ad, deserunt nostrum harum? Natus excepturi vero molestiae accusantium nemo dolore debitis quae impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nemo ex mollitia dolores animi tenetur officia quasi obcaecati! Tenetur, voluptatum? Corporis blanditiis libero hic laboriosam autem? Expedita beatae fugit dolorum? <br>
<br> <br>
<code id="code10">
# Code snippet <br> <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rem quos nihil, rerum error deleniti. Iste dicta magnam optio? Possimus fugiat eius, sed ullam modi officia doloremque quis ipsam blanditiis? <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio unde consectetur voluptate tempore molestiae quam mollitia recusandae! Perspiciatis, dolorum sed! Sequi at magni, modi a maxime sed delectus neque nesciunt.
</code>
<br> <br>
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed nesciunt tempore fugit neque consequuntur laudantium consectetur voluptatibus aliquam, optio laboriosam sit magnam, fugiat at iure a expedita qui ducimus temporibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas soluta sunt magni sed quibusdam distinctio cupiditate laborum! Blanditiis suscipit repellendus cumque, nemo asperiores odio quaerat provident itaque, quibusdam accusamus officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aut fugiat veritatis. Quo esse cupiditate nisi possimus? Nam obcaecati, recusandae unde corporis et, adipisci quod a error, praesentium excepturi molestiae!
</div>
</div>
<div class="blog">
<div class="blog-title" onclick="showblog(1)">
<div id="blogt1" class="blog-name">Astro JS: The New Kid On The Block</div>
<div class="blog-date"><span id="view1"></span> Views | July 23, 2025</div>
</div>
<div id="blog1" class="blog-description">
<p>
As web developers, we strive to build the fastest and most efficient websites possible. This means finding the right tools and technologies to help achieve our performance goals.
</p>
<p>
A new tool that has come onto the scene relatively recently is Astro JS. Astro is a new static site generator that has emerged as a popular choice among performance-driven web developers. According to their website, “Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in between.” Due to their innovative front-end architecture approach, Astro allows creators to generate highly performant websites with minimal overhead.
</p>
<br>
<div class="imgcontainer">
<img class="blogimg" id="blogimg1" src="blog_essentials/astrojs.png" alt="">
</div>
<br>
<p>
In this article, we’ll take a deep dive into Astro. We’ll understand Astro’s origin, the primary use cases, unique features, and whether or not it is worth your time.
</p>
<br>
<h2>A History of Innovation</h2>
<p>
Astro was created in 2021 by Fred K. Schott, who was concerned about the increasing complexity and bloat of existing frontend frameworks. He believed simple static sites didn’t need all the bells and whistles and should load quickly and efficiently. So, he created a static site generator to meet these needs.
</p>
<p>
Performance and simplicity were essential to Fred when building Astro. He didn’t want to compete with popular frontend frameworks but rather collaborate with them. This led to the BYOF (Bring Your Own Framework) concept, which allows developers to reuse components from React, Svelte, Vue, and other frameworks while benefiting from a static site’s performance advantages.
</p>
<p>
Another key innovation is an architectural concept called islands. We’ll explore this in more detail later.
</p>
<p>
How is he going to maintain it going forward? It has been open sourced to the developer community. Their website states, “Astro is and always will be free.” So, as long as the community can continue to see the value in Astro, it will continue to evolve and become more valuable over time.
</p>
<br>
<h2>A Swiss Army Knife for Content-Driven Websites</h2>
Astro can be used for a wide range of content-driven websites, including:
<br>
<ul>
<li><b>Blogs:</b> create and maintain a blog with high-performance and SEO-friendly permalinks</li>
<li><b>Marketing:</b> promote your products or services with a beautiful and engaging marketing site</li>
<li><b>Agency websites:</b> an excellent choice for agencies looking to create and maintain multiple sites for their clients</li>
<li><b>Portfolios:</b> stunning portfolios to showcase your work in the best possible light.</li>
</ul>
<p>
If you notice the underlying theme here, it’s communicating content with the world. You need the bare minimum functionality for each use case, want it to look good on any device, and want pages to load quickly. Astro is perfect for this.
</p>
<p>Astro has many great themes to help you get up and running quickly.</p>
<br>
<div class="imgcontainer">
<img class="blogimg" id="blogimg1" src="blog_essentials/astrothemes.webp" alt="blog theme">
<a href="https://astro.build/themes/" target="_blank">https://astro.build/themes/</a>
</div>
<br>
<br>
<h2>What Makes It Special?</h2>
<h3>Island architecture: A performance breakthrough</h3>
<p>
I couldn’t create an Astro article without mentioning island architecture. The island architecture is the foundation of what makes Astro unique. What is it? It divides web pages into separate components, each of which can be rendered on the server or in the browser, depending on what is faster. This allows Astro to generate highly performant websites with minimal overhead.
</p>
<br>
<div class="imgcontainer">
<img class="blogimg" id="blogimg1" src="blog_essentials/astroisland.webp" alt="blog theme">
<a href="https://jasonformat.com/islands-architecture/" target="_blank">https://jasonformat.com/islands-architecture/</a>
</div>
<br>
<p>
A key benefit of this architecture is that components can be loaded in parallel. This means the browser can load multiple components simultaneously and hydrate them in isolation. The load time of a page will be improved significantly, especially for pages with a lot of JavaScript.
</p>
<p>
Astro gives developers more control over how their pages are rendered. For example, <a href="https://docs.astro.build/en/reference/directives-reference/#client-directives">client directives</a> allow an explicit order in which you render your components. Say you have a JavaScript-intensive carousel at the bottom of your page that is not entirely essential to the user experience. You can render this component only when the user scrolls to that component. Without that component being a part of the first load, the initial loading of the page will be significantly faster (improved Time-to-Interactive metric).
</p>
<p>
A few other perks of Astro’s island architecture are reduced bandwidth usage and improved Search Engine Optimization (SEO).
</p>
<ul>
<li><b>Reduced Bandwidth:</b> Astro pages are typically smaller than pages generated by other SSGs. Since Astro only ships the JavaScript needed for each island, page load times over slow or unstable connections will still be optimal.</li>
<li><b>Search Engine Optimization:</b> Since these web pages are so light, they allow each page to be crawled and indexed more quickly. This leads to better SEO performance.</li>
</ul>
<br>
<h2>Simplicity and familiarity</h2>
<p>
Astro was designed with ease of use in mind. Because the syntax is similar to existing frontend frameworks, you can get started quickly if you know HTML, CSS, and JS. Also, as mentioned before, if you want to use components you have already written in other frameworks, thanks to the component-based architecture and BYOF (Bring Your Own Framework), you can do that. This makes it easy to migrate existing websites to Astro or build hybrid websites that use many different components from different frameworks.
</p>
<p>
Overall, Astro is a very easy-to-use SSG well-suited for beginners and experienced developers.
</p>
<br>
<h2>Deep customizability</h2>
<p>
Astro is designed to be highly customizable. It can be used with any front-end framework, build tool, or hosting provider. This makes it easy to tailor Astro to your specific needs and preferences.
</p>
<br>
<div class="imgcontainer">
<img class="blogimg" id="blogimg1" src="blog_essentials/astrointegration.webp" alt="blog theme">
<a href="https://astro.build/integrations/" target="_blank">https://astro.build/integrations/</a>
</div>
<br>
<p>
Astro is designed to be highly customizable. It can be used with any front-end framework, build tool, or hosting provider. This makes it easy to tailor Astro to your specific needs and preferences.
</p>
<p>
Astro also has a rich ecosystem of third-party plugins and integrations. This means you can find plugins for anything you need, from adding authentication to your site to generating dynamic content.
</p>
<p>
Astro is a great choice if you’re looking for a highly customizable and extensible static site generator.
</p>
<br>
<h2>
Active and engaged community
</h2>
<p>
Astro has a vibrant and active community of contributors. This community is supported by the Astro Community Awards program, which rewards top contributors with financial compensation. In 2022, the <a href="https://astro.build/blog/community-awards-22/">Astro Community Awards program</a> paid almost $8500 to contributors.
</p>
<p>
The Astro community is also very active on <a href="https://discord.com/invite/grF4GTXXYm">Discord</a>. The Discord server is a great place to ask questions, get help, and collaborate with other Astro users.
</p>
<br>
<h2>The Conclusion</h2>
<p>
So the question remains: is Astro worth learning? If you’re a web developer who wants to build fast, performant, customizable static sites, then the answer is a resounding yes.
</p>
<p>
Astro is easy to learn and use, even if you’re unfamiliar with other static site generators. Its island architecture and BYOF (Bring Your Own Framework) pattern allow you to build websites that meet your needs.Astro also has a vibrant and active community of contributors, which means a wealth of support is available if you need it.
</p>
<p>
I hope you’ve enjoyed learning a bit about Astro and how you can use it to improve your static sites today! <br><br> Thank you.
</p>
<br>
<h2>Helpful Resources:</h2>
<ul>
<li><a href="https://astro.build">Main Astro website</a></li>
<li><a href="https://docs.astro.build/en/getting-started/">Getting started with Astro</a></li>
<li><a href="https://docs.astro.build/en/concepts/islands/">Islands Architecture</a></li>
<li><a href="https://docs.astro.build/en/install-and-setup/">Install Astro</a></li>
<li><a href="https://docs.astro.build/en/guides/integrations-guide/">Astro Integrations</a></li>
</ul>
</div>
</div>
</div>
<footer class="footer-container">
<div>Copyright © 2022 - All right reserved by prathmesh-ka-github on Github Pages.</div>
<div class="mail">connect.prathmesh905@gmail.com</div>
</footer>
<div class="loader-container" id="loader-container"
<div class="loader">
<div class="rotatingLoader"></div>
</div>
</div>
</body>
<script>
var loader = document.getElementById("loader-container");
window.addEventListener("load",function(){
setTimeout(function(){
loader.style.opacity = "0";
},200);
setTimeout(function(){
loader.style.display = "none";
},400);
})
</script>
<script src="./blog.js"></script>
</html>