Skip to content

Commit 966ab94

Browse files
kingabzprokingabzpro
committed
feat: restructure author section and add expertise and popular topics data
1 parent 801c680 commit 966ab94

5 files changed

Lines changed: 209 additions & 152 deletions

File tree

‎_data/expertise.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
- title: "MLOps"
2+
icon: "fas fa-cogs text-secondary"
3+
desc: "Comprehensive guides on Machine Learning Operations, deployment, and scaling ML systems."
4+
url: "/pages/machine-learning-operations"
5+
- title: "Large Language Models"
6+
icon: "fas fa-brain text-secondary"
7+
desc: "Deep dives into LLMs, transformers, and state-of-the-art NLP applications."
8+
url: "/pages/large-language-models"
9+
- title: "Machine Learning"
10+
icon: "fas fa-robot text-secondary"
11+
desc: "In-depth tutorials on ML algorithms, deep learning, and practical implementations."
12+
url: "/pages/machine-learning"

‎_data/popular_topics.yml‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
- label: "Artificial Intelligence"
2+
icon: "fas fa-microchip"
3+
url: "/pages/artificial-intelligence"
4+
- label: "Data Science"
5+
icon: "fas fa-chart-bar"
6+
url: "/pages/data-science"
7+
- label: "Natural Language Processing"
8+
icon: "fas fa-language"
9+
url: "/pages/natural-language-processing"
10+
- label: "Computer Vision"
11+
icon: "fas fa-eye"
12+
url: "/pages/computer-vision"
13+
- label: "Data Engineering"
14+
icon: "fas fa-server"
15+
url: "/pages/data-engineering"
16+
- label: "Programming"
17+
icon: "fas fa-code"
18+
url: "/pages/programming"
19+
- label: "SQL"
20+
icon: "fas fa-database"
21+
url: "/pages/sql"

‎_layouts/css/custom.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
:root {
2+
--secondary-color: #ff6e40; /* adjust to taste or inherit from Architect theme */
3+
}
4+
5+
/* ----- Layout helpers ----- */
6+
.author-section,
7+
.content-card,
8+
.topics-grid a,
9+
.cta-section {
10+
background: var(--sidebar-bg);
11+
border-radius: 10px;
12+
}
13+
14+
/* ----- Hero ----- */
15+
.author-section {
16+
text-align: center;
17+
padding: 1.5rem;
18+
margin-bottom: 1.5rem;
19+
}
20+
.author-image {
21+
width: 150px;
22+
height: 150px;
23+
object-fit: cover;
24+
border-radius: 50%;
25+
margin: 15px auto;
26+
display: block;
27+
border: 3px solid var(--secondary-color);
28+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
29+
}
30+
.author-bio h1 { margin-bottom: 0.5rem; }
31+
32+
/* ----- Expertise grid ----- */
33+
.content-grid {
34+
display: grid;
35+
gap: 1.5rem;
36+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
37+
margin: 2rem 0;
38+
}
39+
.content-card { padding: 1.5rem; transition: transform 0.3s; }
40+
.content-card:hover { transform: translateY(-5px); }
41+
42+
/* ----- Topics grid ----- */
43+
.topics-grid {
44+
display: grid;
45+
gap: 1rem;
46+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
47+
margin: 2rem 0;
48+
}
49+
.topics-grid a {
50+
display: block;
51+
padding: .5rem;
52+
color: var(--text-color);
53+
text-decoration: none;
54+
transition: all 0.3s;
55+
}
56+
.topics-grid a:hover {
57+
background: var(--secondary-color);
58+
color: var(--bg-color);
59+
transform: translateX(5px);
60+
}
61+
62+
/* ----- CTA ----- */
63+
.cta-section {
64+
text-align: center;
65+
margin: 3rem 0;
66+
padding: 2rem;
67+
}
68+
.social-links {
69+
display: flex;
70+
justify-content: center;
71+
gap: 2rem;
72+
margin-top: 1.5rem;
73+
}
74+
.social-links a { font-size: 2rem; color: var(--text-color); }
75+
.social-links a:hover { color: var(--secondary-color); transform: scale(1.1); }

‎_layouts/js/search.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const input = document.getElementById('searchInput');
3+
const results = document.getElementById('searchResults');
4+
5+
fetch('{{ "/search.json" | relative_url }}')
6+
.then(r => r.ok ? r.json() : Promise.reject('search.json missing'))
7+
.then(articles => {
8+
input.addEventListener('input', e => {
9+
const q = e.target.value.trim().toLowerCase();
10+
results.innerHTML = '';
11+
if (q.length < 2) return;
12+
13+
const hits = articles.filter(a =>
14+
[a.title, a.content, a.category].some(
15+
field => field && field.toLowerCase().includes(q)
16+
)
17+
);
18+
19+
results.innerHTML = hits.length
20+
? hits.map(a => `
21+
<article class="search-hit">
22+
<a href="${a.url}">${a.title}</a>
23+
<small>Category • ${a.category}</small>
24+
</article>
25+
`).join('')
26+
: '<p class="search-empty">No results found</p>';
27+
});
28+
})
29+
.catch(err => {
30+
console.error(err);
31+
results.innerHTML =
32+
'<p class="search-error">Error loading search index.</p>';
33+
});
34+
});

‎index.md‎

Lines changed: 67 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,80 @@
1-
<div class="author-section" style="text-align: center; padding: 1.5rem; background: var(--sidebar-bg); border-radius: 15px; margin-bottom: 1.5rem;">
2-
<img src="assets/images/author.jpg" alt="Abid's Profile Picture" class="author-image" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin: 15px auto; display: block; border: 3px solid var(--secondary-color); box-shadow: 0 3px 10px rgba(0,0,0,0.2);">
3-
4-
<div class="author-bio" style="max-width: 700px; margin: 0 auto; line-height: 1.4;">
5-
<h1 style="color: var(--primary-color); margin-bottom: 0.5rem;">Hello! I'm Abid</h1>
6-
<p style=" margin: 0.7rem 0;">
7-
I am a certified data science professional with a passion for developing innovative machine learning solutions. As a dedicated technical writer and educator, I have authored over 450 articles to make complex concepts more accessible and to promote practical understanding. If you appreciate my work, please feel free to <a href="pages/contact" style="color: var(--secondary-color);">contact me</a> or reach out on LinkedIn.
1+
---
2+
layout: default
3+
title: "Abid Ali Awan • Data Science & ML"
4+
permalink: /
5+
---
6+
7+
<!-- ============ Hero / About ============ -->
8+
<section class="author-section">
9+
<img
10+
class="author-image"
11+
src="{{ '/assets/images/author.jpg' | relative_url }}"
12+
alt="Abid’s profile picture" />
13+
14+
<div class="author-bio">
15+
<h1>Hello! I’m Abid</h1>
16+
<p>
17+
I am a certified data science professional with a passion for developing innovative machine learning solutions. As a dedicated technical writer and educator, I have authored over 450 articles to make complex concepts more accessible and to promote practical understanding.. If you enjoy the content,
18+
<a href="{{ '/pages/contact' | relative_url }}">get in touch</a>
19+
or connect on LinkedIn.
820
</p>
921
</div>
10-
</div>
11-
12-
<input type="text" id="searchInput" placeholder="Search articles..." style="
13-
width: 100%;
14-
padding: 12px;
15-
margin: 20px 0;
16-
border: 1px solid #ddd;
17-
border-radius: 4px;
18-
font-size: 16px;
19-
">
20-
21-
<div id="searchResults" style="margin-top: 15px;"></div>
22-
23-
<script>
24-
document.addEventListener('DOMContentLoaded', function() {
25-
const searchInput = document.getElementById('searchInput');
26-
const searchResults = document.getElementById('searchResults');
27-
28-
fetch('/search.json')
29-
.then(response => {
30-
if (!response.ok) {
31-
throw new Error('Failed to load search data');
32-
}
33-
return response.json();
34-
})
35-
.then(articles => {
36-
searchInput.addEventListener('input', function() {
37-
const query = this.value.toLowerCase();
38-
searchResults.innerHTML = '';
39-
40-
if (query.length < 2) return;
41-
42-
const results = articles.filter(article => {
43-
return article.title.toLowerCase().includes(query) ||
44-
article.content.toLowerCase().includes(query) ||
45-
article.category.toLowerCase().includes(query);
46-
});
47-
48-
if (results.length > 0) {
49-
results.forEach(article => {
50-
searchResults.innerHTML += `
51-
<div style="margin-bottom: 15px; padding: 10px; border-bottom: 1px solid #eee;">
52-
<a href="${article.url}" style="font-size: 18px; color: #0366d6; text-decoration: none;">
53-
${article.title}
54-
</a>
55-
<div style="color: #666; margin-top: 5px; font-size: 14px;">
56-
Category: ${article.category}
57-
</div>
58-
</div>
59-
`;
60-
});
61-
} else {
62-
searchResults.innerHTML = '<p style="color: #666;">No results found</p>';
63-
}
64-
});
65-
})
66-
.catch(error => {
67-
console.error('Error loading search data:', error);
68-
searchResults.innerHTML = '<p style="color: #dc3545;">Error loading search data. Please try again later.</p>';
69-
});
70-
});
71-
</script>
72-
73-
## 👨‍🔬 Author Expertise
74-
75-
<div class="content-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
76-
<div class="content-card" style="background: var(--sidebar-bg); padding: 1.5rem; border-radius: 10px; transition: transform 0.3s ease;">
77-
<h3><i class="fas fa-cogs" style="color: var(--secondary-color);"></i> MLOps</h3>
78-
<p>Comprehensive guides on Machine Learning Operations, deployment, and scaling ML systems.</p>
79-
<a href="pages/machine-learning-operations" style="color: var(--secondary-color);">Learn More →</a>
80-
</div>
81-
82-
<div class="content-card" style="background: var(--sidebar-bg); padding: 1.5rem; border-radius: 10px; transition: transform 0.3s ease;">
83-
<h3><i class="fas fa-brain" style="color: var(--secondary-color);"></i> Large Language Models</h3>
84-
<p>Deep dives into LLMs, transformers, and state-of-the-art NLP applications.</p>
85-
<a href="pages/large-language-models" style="color: var(--secondary-color);">Learn More →</a>
86-
</div>
87-
88-
<div class="content-card" style="background: var(--sidebar-bg); padding: 1.5rem; border-radius: 10px; transition: transform 0.3s ease;">
89-
<h3><i class="fas fa-robot" style="color: var(--secondary-color);"></i> Machine Learning</h3>
90-
<p>In-depth tutorials on ML algorithms, deep learning, and practical implementations.</p>
91-
<a href="pages/machine-learning" style="color: var(--secondary-color);">Learn More →</a>
22+
</section>
23+
24+
<!-- ============ Search ============ -->
25+
<input
26+
type="search"
27+
id="searchInput"
28+
placeholder="Search articles…" />
29+
30+
<div id="searchResults"></div>
31+
32+
<!-- ============ Author expertise cards ============ -->
33+
## 👨‍🔬 Author Expertise
34+
<div class="content-grid">
35+
{%- for item in site.data.expertise -%}
36+
<div class="content-card">
37+
<h3><i class="{{ item.icon }}"></i> {{ item.title }}</h3>
38+
<p>{{ item.desc }}</p>
39+
<a href="{{ item.url | relative_url }}">Learn&nbsp;More&nbsp;→</a>
9240
</div>
41+
{%- endfor -%}
9342
</div>
9443

44+
<!-- ============ Popular topics ============ -->
9545
## 🎯 Popular Topics
96-
97-
<div class="topics-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0;">
98-
<a href="pages/artificial-intelligence" class="topic-link">
99-
<i class="fas fa-microchip"></i> Artificial Intelligence
100-
</a>
101-
<a href="pages/data-science" class="topic-link">
102-
<i class="fas fa-chart-bar"></i> Data Science
103-
</a>
104-
<a href="pages/natural-language-processing" class="topic-link">
105-
<i class="fas fa-language"></i> Natural Language Processing
106-
</a>
107-
<a href="pages/computer-vision" class="topic-link">
108-
<i class="fas fa-eye"></i> Computer Vision
109-
</a>
110-
<a href="pages/data-engineering" class="topic-link">
111-
<i class="fas fa-server"></i> Data Engineering
112-
</a>
113-
<a href="pages/programming" class="topic-link">
114-
<i class="fas fa-code"></i> Programming
115-
</a>
116-
<a href="pages/sql" class="topic-link">
117-
<i class="fas fa-database"></i> SQL
46+
<div class="topics-grid">
47+
{%- for t in site.data.popular_topics -%}
48+
<a href="{{ t.url | relative_url }}" class="topic-link">
49+
<i class="{{ t.icon }}"></i> {{ t.label }}
11850
</a>
51+
{%- endfor -%}
11952
</div>
12053

54+
<!-- ============ Misc links ============ -->
12155
## 📖 Miscellaneous
122-
123-
124-
- 📚 **[Books Published by Abid](pages/books-by-abid)** - Check out my published books and ebooks
125-
- 📝 **[Career Resources](pages/career-advice)** - Career guidance and interview preparation
126-
- 📋 **[Cheat Sheets](pages/cheat-sheets)** - Quick reference guides for various technologies
127-
- 📬 **[Contact Me](pages/contact)** - Get in touch with me for questions or collaborations
128-
129-
<div class="cta-section" style="text-align: center; margin: 3rem 0; padding: 2rem; background: var(--sidebar-bg); border-radius: 15px;">
56+
<ul>
57+
<li>📚 <strong><a href="{{ '/pages/books-by-abid' | relative_url }}">Books Published by Abid</a></strong></li>
58+
<li>📝 <strong><a href="{{ '/pages/career-advice' | relative_url }}">Career Resources</a></strong></li>
59+
<li>📋 <strong><a href="{{ '/pages/cheat-sheets' | relative_url }}">Cheat Sheets</a></strong></li>
60+
<li>📬 <strong><a href="{{ '/pages/contact' | relative_url }}">Contact Me</a></strong></li>
61+
</ul>
62+
63+
<!-- ============ Call-to-action ============ -->
64+
<section class="cta-section">
13065
<h2>Stay Updated!</h2>
131-
<p>Star ⭐ this <a href="https://github.com/kingabzpro/Writing-Portfolio">repository</a> to get notified about new content and updates.</p>
132-
133-
<div class="social-links" style="display: flex; justify-content: center; gap: 2rem; margin-top: 1.5rem;">
134-
<a href="https://github.com/kingabzpro" style="font-size: 2rem; color: var(--text-color);"><i class="fab fa-github"></i></a>
135-
<a href="https://linkedin.com/in/1abidaliawan" style="font-size: 2rem; color: var(--text-color);"><i class="fab fa-linkedin"></i></a>
136-
<a href="https://twitter.com/1abidaliawan" style="font-size: 2rem; color: var(--text-color);"><i class="fab fa-twitter"></i></a>
66+
<p>
67+
⭐ Star this <a href="https://github.com/kingabzpro/Writing-Portfolio">repository</a>
68+
to be notified about new content and updates.
69+
</p>
70+
71+
<div class="social-links">
72+
<a href="https://github.com/kingabzpro"><i class="fab fa-github"></i></a>
73+
<a href="https://linkedin.com/in/1abidaliawan"><i class="fab fa-linkedin"></i></a>
74+
<a href="https://twitter.com/1abidaliawan"><i class="fab fa-twitter"></i></a>
13775
</div>
138-
</div>
139-
140-
<style>
141-
.content-card:hover {
142-
transform: translateY(-5px);
143-
}
144-
145-
.topics-grid a {
146-
display: block;
147-
padding: 0.5rem;
148-
background: var(--sidebar-bg);
149-
border-radius: 5px;
150-
text-decoration: none;
151-
color: var(--text-color);
152-
transition: all 0.3s ease;
153-
}
154-
155-
.topics-grid a:hover {
156-
background: var(--secondary-color);
157-
color: var(--bg-color);
158-
transform: translateX(5px);
159-
}
76+
</section>
16077

161-
.social-links a:hover {
162-
color: var(--secondary-color);
163-
transform: scale(1.1);
164-
}
165-
</style>
78+
<!-- ============ Assets ============ -->
79+
<link rel="stylesheet" href="{{ '/assets/css/custom.css' | relative_url }}">
80+
<script src="{{ '/assets/js/search.js' | relative_url }}"></script>

0 commit comments

Comments
 (0)