Skip to content

Commit f138286

Browse files
Ansh101112Ansh101112
authored
dynamically state and fetching added (#509)
1 parent 5ae1300 commit f138286

File tree

3 files changed

+89
-197
lines changed

3 files changed

+89
-197
lines changed

‎data.json

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
[
2+
{
3+
"url": "./posts/linkedin/creating-professional-linkedin-account.html",
4+
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkx3NudeL9WB5diyA7peE-rrrZ1OuFXrzSChgyKhr6iQ&s",
5+
"date": "April 25, 2024",
6+
"title": "Unlock the Power of Networking: Crafting Your Professional LinkedIn Profile",
7+
"description": "Embark on a journey to create a compelling Professional LinkedIn account that opens doors to limitless opportunities. This step-by-step guide demystifies the process, empowering you to harness the full potential of LinkedIn's vast network, connecting millions worldwide."
8+
},
9+
{
10+
"url": "./posts/github/How-to-Apply-for-GitHub-Student-Developer-Pack.html",
11+
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNYDqYlvfORMgsjdtflgwHnjA-hHUwJPkFaLDn5zFwyQ&s",
12+
"date": "April 25, 2024",
13+
"title": "Unlock Exclusive Benefits: Applying for GitHub Student Pro Account",
14+
"description": "Discover the pathway to unlocking the full potential of your student journey by acquiring a GitHub Student Pro account. Dive into this comprehensive guide to understand the application process, eligibility criteria, and the plethora of benefits awaiting you. Elevate your coding experience and collaboration capabilities with GitHub's premium features tailored for students."
15+
},
16+
{
17+
"url": "./posts/technology/How-to-build-rest-api-using-node-and-mongo-db.html",
18+
"image": "https://shorturl.at/hxiFR",
19+
"date": "May 26, 2024",
20+
"title": "Building a RESTful API with Node.js and MongoDB: A Step-by-Step Guide",
21+
"description": "Learn how to create, test, and deploy your API, and discover best practices for handling routes, authentication, and error handling. By the end of this guide, you'll be ready to build and host your own RESTful API, empowering your applications with seamless data communication. 🚀🌐"
22+
},
23+
{
24+
"url": "./posts/power BI/powerBI.html",
25+
"image": "./posts/powerBI/powerBI.png",
26+
"date": "April 25, 2024",
27+
"title": "Power BI for Beginners: Your First Dashboard Step-by-Step",
28+
"description": "In this step-by-step guide, we will walk you through the basics of Power BI, from connecting to your data sources to designing interactive and visually appealing dashboards."
29+
},
30+
{
31+
"url": "./posts/azure/How-to-Create-an-Azure-Account.html",
32+
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTplePLm0DvcyhLXZHdWe4gMVzpl6LsyfLYpsLxCHcGPQ&s",
33+
"date": "April 25, 2024",
34+
"title": "Empower Your Learning: Creating Your Azure Student Account",
35+
"description": "Embark on your cloud journey with Azure by unlocking the Azure Student account, your gateway to a world of learning and innovation. Dive into this comprehensive guide to discover the step-by-step process to create your Azure Student account and access $200 in free Azure credits. Explore the vast array of Azure services and resources tailored to support your educational endeavors, empowering you to build, experiment, and innovate without constraints."
36+
},
37+
{
38+
"url": "./posts/github/How-to-Make-Pull-Requests-on-GitHub.html",
39+
"image": "https://miro.medium.com/v2/resize:fit:400/1*qp-tg5nRgXcdBAPOrMFrpg.jpeg",
40+
"date": "May 25, 2024",
41+
"title": "Expand your knowledge on Graphic User Interphase designing using Java AWT (Abstract Window Toolkit)",
42+
"description": "Discover the secrets to creating dynamic Java GUIs with our guide, \"Mastering Java AWT: A to Z.\" Whether you're a beginner eager to learn the fundamentals or an experienced developer looking to hone your skills with custom components and advanced layouts, this guide offers everything you need. Transform your Java programming abilities and elevate your applications to new heights today!"
43+
},
44+
{
45+
"url": "./posts/github/How-to-Make-Pull-Requests-on-GitHub.html",
46+
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRloyzP9KVKtrLX6gDh5koAKVUHZ3prgr3b0YRlK-ORcg&s",
47+
"date": "April 25, 2024",
48+
"title": "Collaborate and Contribute: Mastering Pull Requests in GitHub",
49+
"description": "Unlock the power of collaboration with GitHub by mastering the art of creating Pull Requests. This comprehensive guide walks you through the step-by-step process of initiating a Pull Request, from forking a repository to submitting your changes for review. Learn how to contribute to open-source projects and collaborate effectively with peers, empowering you to make meaningful contributions to the global developer community. Ready to elevate your GitHub workflow? Let's dive in!"
50+
},
51+
{
52+
"url": "./posts/github/How-to-setup-your-github-local-repository.html",
53+
"image": "https://user.oc-static.com/upload/2022/01/04/16412576933806_image30.png",
54+
"date": "May 19, 2024",
55+
"title": "Unlocking GitHub CLI: Setting Up Your Local Repository",
56+
"description": "Embark on your open source journey with GitHub by setting up your local repository. In this detailed guide, we'll walk you through the step-by-step process of creating a local GitHub repository. Learn how to initialize Git, add files, commit changes, and connect your local repo to your remote GitHub account. Whether you're a beginner or an experienced developer, this tutorial empowers you to manage your code efficiently and collaborate seamlessly."
57+
}
58+
]
59+

‎home.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -228,13 +228,7 @@ <h2 class="section-heading" data-aos="fade-up">INTERNSHIPS</h2>
228228
<p class="program-description" data-aos="fade-up">Join our Data Science Internship Program and gain
229229
practical experience in
230230
one of the most in-demand fields. Learn data analysis, machine learning, and statistical modeling.
231-
<<<<<<< HEAD
232-
Develop real-world projects and enhance your skills in data science. Get mentored by industry
233-
professionals and kickstart your career in the field of data science.</p>
234-
</div>
235-
=======
236231
Develop real-world projects and enhance your skills in data science. </p>
237-
>>>>>>> 11dd44abba6d427dbd14757272378d66af253d44
238232
<div class="program-buttons" data-aos="fade-up">
239233
<button class="program-apply-button" data-aos="fade-up">Coming Soon..!</button>
240234
</div>

‎index.html

Lines changed: 30 additions & 191 deletions
Original file line numberDiff line numberDiff line change
@@ -144,197 +144,8 @@ <h2 class="card-title">How to Create a GitHub Account</h2>
144144
</div>
145145
</div>
146146
<!-- Nested row for non-featured blog posts-->
147-
<div class="row">
148-
<div class="col-lg-6">
149-
<!-- Blog post-->
150-
<div class="card mb-4">
151-
<a href="./posts/linkedin/creating-professional-linkedin-account.html"><img class="card-img-top"
152-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkx3NudeL9WB5diyA7peE-rrrZ1OuFXrzSChgyKhr6iQ&s"
153-
alt="Professional LinkedIn account creation" /></a>
154-
<div class="card-body">
155-
<div class="small text-muted">April 25, 2024</div>
156-
<h2 class="card-title h4">
157-
Unlock the Power of Networking: Crafting Your Professional
158-
LinkedIn Profile
159-
</h2>
160-
<p class="card-text">
161-
Embark on a journey to create a compelling Professional
162-
LinkedIn account that opens doors to limitless
163-
opportunities. This step-by-step guide demystifies the
164-
process, empowering you to harness the full potential of
165-
LinkedIn's vast network, connecting millions worldwide.
166-
</p>
167-
<a class="btn btn-primary" href="./posts/linkedin/creating-professional-linkedin-account.html">Read
168-
more
169-
→</a>
170-
</div>
171-
</div>
172-
<!-- Blog post-->
173-
<div class="card mb-4">
174-
<a href="./posts/github/How-to-Apply-for-GitHub-Student-Developer-Pack.html"><img class="card-img-top"
175-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNYDqYlvfORMgsjdtflgwHnjA-hHUwJPkFaLDn5zFwyQ&s"
176-
alt="GitHub Student Pro Account" /></a>
177-
<div class="card-body">
178-
<div class="small text-muted">April 25, 2024</div>
179-
<h2 class="card-title h4">
180-
Unlock Exclusive Benefits: Applying for GitHub Student Pro
181-
Account
182-
</h2>
183-
<p class="card-text">
184-
Discover the pathway to unlocking the full potential of your
185-
student journey by acquiring a GitHub Student Pro account.
186-
Dive into this comprehensive guide to understand the
187-
application process, eligibility criteria, and the plethora
188-
of benefits awaiting you. Elevate your coding experience and
189-
collaboration capabilities with GitHub's premium features
190-
tailored for students.
191-
</p>
192-
<a class="btn btn-primary"
193-
href="./posts/github/How-to-Apply-for-GitHub-Student-Developer-Pack.html">Read more →</a>
194-
</div>
195-
</div>
196-
<!-- Blog post-->
197-
<div class="card mb-4">
198-
<a href="./posts/technology/How-to-build-rest-api-using-node-and-mongo-db.html"><img
199-
class="card-img-top" src="https://shorturl.at/hxiFR" alt="RestApi" /></a>
200-
<div class="card-body">
201-
<div class="small text-muted">May 26, 2024</div>
202-
<h2 class="card-title h4">
203-
Building a RESTful API with Node.js and MongoDB: A Step-by-Step Guide
204-
</h2>
205-
<p class="card-text">
206-
Learn how to create, test, and deploy your API, and discover best practices for handling routes,
207-
authentication, and error handling. By the end of this guide, you'll be ready to build and host your
208-
own RESTful API,
209-
empowering your applications with seamless data communication. 🚀🌐
210-
</p>
211-
<a class="btn btn-primary"
212-
href="./posts/technology/How-to-build-rest-api-using-node-and-mongo-db.html">Read more →</a>
213-
</div>
214-
</div>
215-
<!-- Blog post-->
216-
<div class="card mb-4">
217-
<a href="./posts/power BI/powerBI.html"><img class="card-img-top" src="./posts/powerBI/powerBI.png"
218-
alt="Professional LinkedIn account creation" /></a>
219-
<div class="card-body">
220-
<div class="small text-muted">April 25, 2024</div>
221-
<h2 class="card-title h4">
222-
Power BI for Beginners: Your First Dashboard Step-by-Step
223-
</h2>
224-
<p class="card-text">
225-
In this step-by-step guide, we will walk you through the basics of Power BI, from connecting to your
226-
data sources to designing interactive and visually appealing dashboards.
227-
</p>
228-
<a class="btn btn-primary" href="./posts/power BI/powerBI.html">Read more
229-
→</a>
230-
</div>
231-
</div>
232-
</div>
233-
<div class="col-lg-6">
234-
<!-- Blog post-->
235-
<div class="card mb-4">
236-
<a href="./posts/azure/How-to-Create-an-Azure-Account.html"><img class="card-img-top"
237-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTplePLm0DvcyhLXZHdWe4gMVzpl6LsyfLYpsLxCHcGPQ&s"
238-
alt="Azure Student Account" /></a>
239-
<div class="card-body">
240-
<div class="small text-muted">April 25, 2024</div>
241-
<h2 class="card-title h4">
242-
Empower Your Learning: Creating Your Azure Student Account
243-
</h2>
244-
<p class="card-text">
245-
Embark on your cloud journey with Azure by unlocking the
246-
Azure Student account, your gateway to a world of learning
247-
and innovation. Dive into this comprehensive guide to
248-
discover the step-by-step process to create your Azure
249-
Student account and access $200 in free Azure credits.
250-
Explore the vast array of Azure services and resources
251-
tailored to support your educational endeavors, empowering
252-
you to build, experiment, and innovate without constraints.
253-
</p>
254-
<a class="btn btn-primary" href="./posts/azure/How-to-Create-an-Azure-Account.html">Read more →</a>
255-
</div>
256-
</div>
257-
258-
<!-- Blog post Java Awt-->
259-
<div class="card mb-4">
260-
<a href="./posts/github/How-to-Make-Pull-Requests-on-GitHub.html"><img class="card-img-top"
261-
src="https://miro.medium.com/v2/resize:fit:400/1*qp-tg5nRgXcdBAPOrMFrpg.jpeg" alt="Java AWT" /></a>
262-
<div class="card-body">
263-
<div class="small text-muted">May 25, 2024</div>
264-
<h2 class="card-title h4">
265-
Expand your knowledge on Graphic User Interphase designing
266-
using Java AWT (Abstract Window Toolkit)
267-
</h2>
268-
<p class="card-text">
269-
Discover the secrets to creating dynamic Java GUIs with our guide,
270-
"Mastering Java AWT: A to Z."
271-
Whether you're a beginner eager to learn
272-
the fundamentals or an experienced developer
273-
looking to hone your skills with custom components and advanced layouts,
274-
this guide offers everything you need.
275-
Transform your Java programming abilities and elevate your applications to new heights today!
276-
</p>
277-
<a class="btn btn-primary" href="./posts/java/baiscs-of-java-awt.html">Read more
278-
→</a>
279-
</div>
280-
<!-- Blog post -->
281-
</div>
282-
283-
<div class="card mb-4">
284-
<a href="./posts/github/How-to-Make-Pull-Requests-on-GitHub.html"><img class="card-img-top"
285-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRloyzP9KVKtrLX6gDh5koAKVUHZ3prgr3b0YRlK-ORcg&s"
286-
alt="GitHub Pull Request" /></a>
287-
<div class="card-body">
288-
<div class="small text-muted">April 25, 2024</div>
289-
<h2 class="card-title h4">
290-
Collaborate and Contribute: Mastering Pull Requests in
291-
GitHub
292-
</h2>
293-
<p class="card-text">
294-
Unlock the power of collaboration with GitHub by mastering
295-
the art of creating Pull Requests. This comprehensive guide
296-
walks you through the step-by-step process of initiating a
297-
Pull Request, from forking a repository to submitting your
298-
changes for review. Learn how to contribute to open-source
299-
projects and collaborate effectively with peers, empowering
300-
you to make meaningful contributions to the global developer
301-
community. Ready to elevate your GitHub workflow? Let's dive
302-
in!
303-
</p>
304-
<a class="btn btn-primary" href="./posts/github/How-to-Make-Pull-Requests-on-GitHub.html">Read more
305-
→</a>
306-
</div>
307-
</div>
308-
309-
310-
<!-- Blog post-->
311-
<div class="card mb-4">
312-
<a href="./posts/github/How-to-setup-your-github-local-repository.html"><img class="card-img-top"
313-
src="https://user.oc-static.com/upload/2022/01/04/16412576933806_image30.png"
314-
alt="Local Github Repository Setup" /></a>
315-
<div class="card-body">
316-
<div class="small text-muted">May 19, 2024</div>
317-
<h2 class="card-title h4">
318-
Unlocking GitHub CLI: Setting Up Your Local Repository
319-
</h2>
320-
<p class="card-text">
321-
Embark on your open source journey with GitHub by setting up your local repository.
322-
In this detailed guide, we'll walk you through the step-by-step process of creating a local GitHub
323-
repository.
324-
Learn how to initialize Git, add files, commit changes, and connect your local repo to your remote
325-
GitHub account.
326-
Whether you're a beginner or an experienced developer, this tutorial empowers you to manage your
327-
code
328-
efficiently and collaborate seamlessly.
329-
</p>
330-
<a class="btn btn-primary" href="./posts/github/How-to-setup-your-github-local-repository.html">Read
331-
more →</a>
332-
</div>
333-
</div>
334-
</div>
335-
<div class="col-lg-6">
336-
337-
</div>
147+
<div class="row" id="blog-container">
148+
338149
</div>
339150
<!-- Pagination-->
340151
<nav aria-label="Pagination">
@@ -576,6 +387,34 @@ <h6>Quick Links</h6>
576387
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
577388
<script src="./ScrollToTop.js"></script>
578389
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
390+
<script>
391+
document.addEventListener('DOMContentLoaded', function () {
392+
fetch('data.json')
393+
.then(response => response.json())
394+
.then(data => {
395+
const blogContainer = document.getElementById('blog-container');
396+
data.forEach(post => {
397+
const blogCard = document.createElement('div');
398+
blogCard.className = 'col-lg-6 col-md-6 mb-4';
399+
blogCard.innerHTML = `
400+
<div class="card h-100">
401+
<a href="${post.url}">
402+
<img class="card-img-top" src="${post.image}" alt="${post.title}" />
403+
</a>
404+
<div class="card-body">
405+
<div class="small text-muted">${post.date}</div>
406+
<h2 class="card-title">${post.title}</h2>
407+
<p class="card-text">${post.description}</p>
408+
<a class="btn btn-primary" href="${post.url}">Read more →</a>
409+
</div>
410+
</div>
411+
`;
412+
blogContainer.appendChild(blogCard);
413+
});
414+
});
415+
});
416+
</script>
417+
579418

580419

581420
</body>

0 commit comments

Comments
 (0)