Skip to content

Commit fc736c7

Browse files
D4mianWayneD4mianWayne
committed
Refactor Header scroll behavior for improved UX and add author box to BlogPost layout. Updated styles for post summaries across multiple pages for better readability and consistency.
1 parent c722c88 commit fc736c7

File tree

7 files changed

+127
-25
lines changed

7 files changed

+127
-25
lines changed

‎public/img/team/d4mianwayne.jpg‎

39.6 KB
Loading

‎public/img/team/ghostbyt3.jpg‎

299 KB
Loading

‎src/components/Header.astro‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -112,23 +112,16 @@ const navLinks = [
112112
}
113113
</style>
114114
<script is:inline>
115-
let lastScrollY = window.scrollY;
116-
let ticking = false;
117115
function onScroll() {
118-
if (!ticking) {
119-
window.requestAnimationFrame(() => {
120-
const header = document.getElementById('siteHeader');
121-
if (window.scrollY > lastScrollY && window.scrollY > 40) {
122-
header.classList.add('hide-on-scroll');
123-
} else {
124-
header.classList.remove('hide-on-scroll');
125-
}
126-
lastScrollY = window.scrollY;
127-
ticking = false;
128-
});
129-
ticking = true;
116+
const header = document.getElementById('siteHeader');
117+
if (window.scrollY === 0) {
118+
header.classList.remove('hide-on-scroll');
119+
} else {
120+
header.classList.add('hide-on-scroll');
130121
}
131122
}
132123
window.addEventListener('scroll', onScroll);
124+
// Run once on load in case not at top
125+
onScroll();
133126
</script>
134127
</header>

‎src/layouts/BlogPost.astro‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,87 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
142142
}
143143
}
144144
</style>
145+
<style>
146+
.author-box {
147+
display: flex;
148+
align-items: center;
149+
gap: 1.2em;
150+
background: linear-gradient(90deg, #fafdff 60%, #f7f8fa 100%);
151+
border: 1.5px solid #e0e7ef;
152+
border-radius: 16px;
153+
padding: 1.5em 2em;
154+
margin: 2.5em auto 0 auto;
155+
max-width: 600px;
156+
box-shadow: 0 4px 24px rgba(44,41,78,0.10), 0 1.5px 8px rgba(44,41,78,0.06);
157+
transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s cubic-bezier(.4,0,.2,1);
158+
cursor: pointer;
159+
}
160+
.author-box:hover {
161+
transform: translateY(-4px) scale(1.025);
162+
box-shadow: 0 8px 32px rgba(44,41,78,0.16), 0 2px 12px rgba(44,41,78,0.10);
163+
border-color: #e22d30;
164+
background: linear-gradient(90deg, #fafdff 40%, #ffeaea 100%);
165+
}
166+
.author-avatar {
167+
width: 74px;
168+
height: 74px;
169+
border-radius: 50%;
170+
object-fit: cover;
171+
border: 2.5px solid #e22d30;
172+
background: #fff;
173+
box-shadow: 0 2px 8px rgba(44,41,78,0.08);
174+
transition: border-color 0.22s;
175+
}
176+
.author-box:hover .author-avatar {
177+
border-color: #3b82f6;
178+
}
179+
.author-info {
180+
display: flex;
181+
flex-direction: column;
182+
gap: 0.3em;
183+
}
184+
.author-name {
185+
font-size: 1.18rem;
186+
font-weight: 800;
187+
color: #e22d30;
188+
margin-bottom: 0.18em;
189+
letter-spacing: 0.01em;
190+
text-shadow: 0 1px 2px #fff8, 0 0.5px 1px #e22d3022;
191+
}
192+
.author-bio {
193+
color: #23263a;
194+
font-size: 1.04rem;
195+
font-weight: 500;
196+
line-height: 1.5;
197+
}
198+
.author-extra {
199+
display: block;
200+
color: #888;
201+
font-size: 0.97rem;
202+
margin-top: 0.3em;
203+
font-style: italic;
204+
}
205+
.author-tagline {
206+
display: block;
207+
color: #3b82f6;
208+
font-size: 0.98rem;
209+
margin-top: 0.25em;
210+
font-weight: 700;
211+
letter-spacing: 0.01em;
212+
font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'Monaco', monospace;
213+
}
214+
@media (max-width: 600px) {
215+
.author-box {
216+
flex-direction: column;
217+
align-items: flex-start;
218+
padding: 1em 0.7em;
219+
}
220+
.author-avatar {
221+
width: 54px;
222+
height: 54px;
223+
}
224+
}
225+
</style>
145226
</head>
146227

147228
<body>
@@ -172,6 +253,32 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
172253
</nav>
173254
<slot />
174255
</div>
256+
<!-- Author Box Start -->
257+
{Astro.props.author && (
258+
<div class="author-box">
259+
<img class="author-avatar" src={`/img/team/${Astro.props.author.toLowerCase()}.jpg`} alt={Astro.props.author} />
260+
<div class="author-info">
261+
<div class="author-name">{Astro.props.author}</div>
262+
<div class="author-bio">
263+
{Astro.props.author === 'd4mianwayne' && (
264+
<>
265+
Security researcher focused on fuzzing, reverse engineering, and exploit development. Wannabe Pwner and a bit of a nerd.<br/>
266+
<span class="author-extra">Loves CTFs, open-source, and coffee. Always learning, always hacking.</span>
267+
<span class="author-tagline">wannabe pwner | security researcher</span>
268+
</>
269+
)}
270+
{Astro.props.author === 'ghostbyt3' && (
271+
<>
272+
Security researcher focused on red teaming and web application security, with a strong interest in reverse engineering, exploit development, and low-level Windows internals.<br/>
273+
<span class="author-extra">Enjoys automating exploits, breaking boundaries, and sharing knowledge with the community.</span>
274+
<span class="author-tagline">windows internals nerd | security researcher</span>
275+
</>
276+
)}
277+
</div>
278+
</div>
279+
</div>
280+
)}
281+
<!-- Author Box End -->
175282
</article>
176283
</main>
177284
<Footer />

‎src/pages/breakdowns/index.astro‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,10 +123,11 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
123123
letter-spacing: 0.01em;
124124
}
125125
.post-summary {
126-
color: #000;
127-
font-size: 1rem;
126+
color: #6b7280;
127+
font-size: 0.98rem;
128128
margin-bottom: 0.7rem;
129129
line-height: 1.6;
130+
font-weight: 400;
130131
}
131132
.sidebar-section {
132133
margin-bottom: 2.2rem;
@@ -175,8 +176,8 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
175176
margin: 0.7em 0 0.2em 0;
176177
}
177178
.sidebar-item-desc {
178-
font-size: 0.77em;
179-
color: var(--text-secondary);
179+
font-size: 0.92em;
180+
color: #888;
180181
margin-top: 0.2em;
181182
}
182183
.post-tags {
@@ -248,7 +249,7 @@ const totalPages = Math.ceil(breakdowns.length / BREAKDOWNS_PER_PAGE);
248249
{breakdown.data.author && <span class="author">{breakdown.data.author}</span>}
249250
<span class="reading-time">{breakdown.readingTime}</span>
250251
</div>
251-
<div class="post-summary">{breakdown.data.summary || breakdown.data.description}</div>
252+
<div class="post-summary">{(breakdown.data.summary || breakdown.data.description).split(' ').slice(0, 50).join(' ') + ((breakdown.data.summary || breakdown.data.description).split(' ').length > 50 ? '...' : '')}</div>
252253
</li>
253254
))
254255
)}

‎src/pages/page/[page].astro‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -132,10 +132,11 @@ const paginatedPosts = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER
132132
letter-spacing: 0.01em;
133133
}
134134
.post-summary {
135-
color: #000;
136-
font-size: 1rem;
135+
color: #6b7280;
136+
font-size: 0.98rem;
137137
margin-bottom: 0.7rem;
138138
line-height: 1.6;
139+
font-weight: 400;
139140
}
140141
@keyframes fadein {
141142
from { opacity: 0; transform: translateY(16px); }
@@ -407,7 +408,7 @@ const paginatedPosts = posts.slice((page - 1) * POSTS_PER_PAGE, page * POSTS_PER
407408
{post.data.author && <span class="author">{post.data.author}</span>}
408409
{/* <span class="reading-time">10 min read</span> */}
409410
</div>
410-
<div class="post-summary">{post.data.summary || post.data.description}</div>
411+
<div class="post-summary">{(post.data.summary || post.data.description).split(' ').slice(0, 50).join(' ') + ((post.data.summary || post.data.description).split(' ').length > 50 ? '...' : '')}</div>
411412
</li>
412413
))
413414
)}

‎src/pages/posts/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,8 @@ const allTags = Array.from(new Set(posts.flatMap(post => post.data.tags || [])))
129129
letter-spacing: 0.01em;
130130
}
131131
.post-summary {
132-
color: #1e293b;
133-
font-size: 1.13rem;
132+
color: #6b7280;
133+
font-size: 0.98rem;
134134
margin-bottom: 0.7rem;
135135
line-height: 1.6;
136136
font-weight: 400;
@@ -232,7 +232,7 @@ const allTags = Array.from(new Set(posts.flatMap(post => post.data.tags || [])))
232232
{post.data.author && <span class="author">{post.data.author}</span>}
233233
{/* <span class="reading-time">10 min read</span> */}
234234
</div>
235-
<div class="post-summary">{post.data.summary || post.data.description}</div>
235+
<div class="post-summary">{(post.data.summary || post.data.description).split(' ').slice(0, 50).join(' ') + ((post.data.summary || post.data.description).split(' ').length > 50 ? '...' : '')}</div>
236236
</li>
237237
))
238238
)}

0 commit comments

Comments
 (0)