Skip to content

Commit a776ed7

Browse files
AlexITCAlexITC
committed
Move testimonials above the blogposts section in the home page
1 parent aecc3a5 commit a776ed7

1 file changed

Lines changed: 96 additions & 94 deletions

File tree

‎src/pages/index.astro‎

Lines changed: 96 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -182,100 +182,7 @@ import LogoPattern from "../assets/logo-pattern.png";
182182
</div>
183183
</div>
184184
</section>
185-
186-
<!-- Featured Blog Posts -->
187-
<section id="blog" class="bg-gray-800 py-16">
188-
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
189-
<div class="mb-12 text-center">
190-
<h2 class="mb-4 text-3xl font-bold md:text-4xl">Featured Blog Posts</h2>
191-
<p class="text-lg text-gray-300">
192-
Latest insights and technical articles
193-
</p>
194-
<a
195-
href="/blog"
196-
class="mt-4 inline-block font-semibold text-blue-400 transition-colors hover:text-blue-300"
197-
>View All →</a
198-
>
199-
</div>
200-
<div class="swiper blogposts-swiper">
201-
<div class="swiper-wrapper">
202-
{
203-
posts.map((post) => (
204-
<div class="swiper-slide">
205-
<article class="h-full overflow-hidden rounded-lg bg-gray-900 shadow-lg transition-shadow hover:shadow-xl">
206-
{post.data.heroImage && (
207-
<div class="aspect-video overflow-hidden">
208-
<Image
209-
width={720}
210-
height={360}
211-
src={post.data.heroImage}
212-
alt={post.data.title}
213-
class="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
214-
/>
215-
</div>
216-
)}
217-
<div class="p-6">
218-
<h3 class="mb-3 text-xl font-bold text-gray-100">
219-
<a
220-
href={getBlogPostUrl(post)}
221-
class="transition-colors hover:text-blue-400"
222-
>
223-
{post.data.title}
224-
</a>
225-
</h3>
226-
<p class="mb-4 text-gray-300">{post.data.description}</p>
227-
<a
228-
href={getBlogPostUrl(post)}
229-
class="font-semibold text-blue-400 hover:underline"
230-
>
231-
Read More →
232-
</a>
233-
</div>
234-
</article>
235-
</div>
236-
))
237-
}
238-
</div>
239-
<!-- Controls below to avoid overlapping cards -->
240-
<div class="mt-6 flex items-center justify-between gap-4">
241-
<div
242-
class="swiper-button-prev !static !text-blue-400 after:!text-2xl"
243-
>
244-
</div>
245-
<div class="swiper-pagination flex-1"></div>
246-
<div
247-
class="swiper-button-next !static !text-blue-400 after:!text-2xl"
248-
>
249-
</div>
250-
</div>
251-
</div>
252-
</div>
253-
</section>
254-
255-
<!-- Projects Section -->
256-
<!-- TODO
257-
<section id="projects" class="py-16">
258-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
259-
<div class="text-center mb-12">
260-
<h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2>
261-
<p class="text-gray-300 text-lg">Open source contributions and personal projects</p>
262-
<a href="/projects" class="inline-block mt-4 text-blue-400 hover:text-blue-300 font-semibold transition-colors">View All Projects →</a>
263-
</div>
264-
<div class="grid md:grid-cols-3 gap-8">
265-
{projects.map((project) => (
266-
<article class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
267-
<div class="p-6">
268-
<h3 class="text-xl font-bold mb-3 text-gray-100">{project.data.title}</h3>
269-
<p class="text-gray-300 mb-4">{project.data.description}</p>
270-
<a href={`/projects/${project.id}/`} class="text-blue-400 hover:underline font-semibold">View Project →</a>
271-
</div>
272-
</article>
273-
))}
274-
</div>
275-
</div>
276-
</section>
277-
-->
278-
185+
279186
<!-- Testimonials -->
280187
<section id="testimonials" class="py-16">
281188
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -379,6 +286,101 @@ import LogoPattern from "../assets/logo-pattern.png";
379286
</div>
380287
</section>
381288

289+
<!-- Featured Blog Posts -->
290+
<section id="blog" class="bg-gray-800 py-16">
291+
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
292+
<div class="mb-12 text-center">
293+
<h2 class="mb-4 text-3xl font-bold md:text-4xl">Featured Blog Posts</h2>
294+
<p class="text-lg text-gray-300">
295+
Latest insights and technical articles
296+
</p>
297+
<a
298+
href="/blog"
299+
class="mt-4 inline-block font-semibold text-blue-400 transition-colors hover:text-blue-300"
300+
>View All →</a
301+
>
302+
</div>
303+
<div class="swiper blogposts-swiper">
304+
<div class="swiper-wrapper">
305+
{
306+
posts.map((post) => (
307+
<div class="swiper-slide">
308+
<article class="h-full overflow-hidden rounded-lg bg-gray-900 shadow-lg transition-shadow hover:shadow-xl">
309+
{post.data.heroImage && (
310+
<div class="aspect-video overflow-hidden">
311+
<Image
312+
width={720}
313+
height={360}
314+
src={post.data.heroImage}
315+
alt={post.data.title}
316+
class="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
317+
/>
318+
</div>
319+
)}
320+
<div class="p-6">
321+
<h3 class="mb-3 text-xl font-bold text-gray-100">
322+
<a
323+
href={getBlogPostUrl(post)}
324+
class="transition-colors hover:text-blue-400"
325+
>
326+
{post.data.title}
327+
</a>
328+
</h3>
329+
<p class="mb-4 text-gray-300">{post.data.description}</p>
330+
<a
331+
href={getBlogPostUrl(post)}
332+
class="font-semibold text-blue-400 hover:underline"
333+
>
334+
Read More →
335+
</a>
336+
</div>
337+
</article>
338+
</div>
339+
))
340+
}
341+
</div>
342+
<!-- Controls below to avoid overlapping cards -->
343+
<div class="mt-6 flex items-center justify-between gap-4">
344+
<div
345+
class="swiper-button-prev !static !text-blue-400 after:!text-2xl"
346+
>
347+
</div>
348+
<div class="swiper-pagination flex-1"></div>
349+
<div
350+
class="swiper-button-next !static !text-blue-400 after:!text-2xl"
351+
>
352+
</div>
353+
</div>
354+
</div>
355+
</div>
356+
</section>
357+
358+
<!-- Projects Section -->
359+
<!-- TODO
360+
<section id="projects" class="py-16">
361+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
362+
<div class="text-center mb-12">
363+
<h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2>
364+
<p class="text-gray-300 text-lg">Open source contributions and personal projects</p>
365+
<a href="/projects" class="inline-block mt-4 text-blue-400 hover:text-blue-300 font-semibold transition-colors">View All Projects →</a>
366+
</div>
367+
<div class="grid md:grid-cols-3 gap-8">
368+
{projects.map((project) => (
369+
<article class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
370+
<div class="p-6">
371+
<h3 class="text-xl font-bold mb-3 text-gray-100">{project.data.title}</h3>
372+
<p class="text-gray-300 mb-4">{project.data.description}</p>
373+
<a href={`/projects/${project.id}/`} class="text-blue-400 hover:underline font-semibold">View Project →</a>
374+
</div>
375+
</article>
376+
))}
377+
</div>
378+
</div>
379+
</section>
380+
-->
381+
382+
383+
382384
<!-- Custom scripts -->
383385
<script>
384386
document.addEventListener("DOMContentLoaded", () => {

0 commit comments

Comments
 (0)