Skip to content

Commit a6fbe64

Browse files
MuhammadPenMuhammadPen
committed
added more projects. better horizontal scrolling.
1 parent fdf3f36 commit a6fbe64

11 files changed

Lines changed: 148 additions & 44 deletions

File tree

‎public/1mindFirst.png‎

-19.3 KB
Loading

‎public/1mindSecond.png‎

-20.1 KB
Loading

‎public/noise.svg‎

Lines changed: 1 addition & 2 deletions
Loading

‎public/peaqueFirst.png‎

668 KB
Loading

‎public/peaqueSecond.png‎

2.07 MB
Loading

‎public/seshaSystemsFirst.png‎

287 KB
Loading

‎public/seshaSystemsSecond.png‎

246 KB
Loading

‎src/components/projectShowcase.astro‎

Lines changed: 54 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -17,38 +17,41 @@ const { title, link, slides, color } = Astro.props;
1717
class="external-link hover:underline text-2xl md:text-3xl">{title}</a
1818
>
1919
</div>
20-
<div
21-
class="project-showcase-container flex md:flex-row flex-col border-t"
22-
style={`background-color: ${color}20`}
23-
>
24-
{
25-
slides.map((slide, index) => {
26-
return (
27-
<div class="project-showcase-content flex md:flex-row flex-col-reverse md:mr-16 mb-16 gap-x-96 gap-y-10 border-b">
28-
{slide.image && (
29-
<div class="md:border-r p-5">
30-
<img
31-
class="md:min-w-[768px] md:min-h-[425px] rounded-sm"
32-
src={slide.image}
33-
alt={slide.description}
34-
/>
35-
</div>
36-
)}
37-
{slide.description && (
38-
<div class="relative md:min-w-[568px] md:min-h-[425px] text-2xl text-right leading-10 md:leading-12 whitespace-pre-line">
39-
{slide.description}
4020

41-
{slides.length > 1 && index < slides.length - 2 && (
42-
<div class="hidden md:flex text-4xl absolute bottom-10 right-0 animate-wiggle">
43-
→
44-
</div>
45-
)}
46-
</div>
47-
)}
48-
</div>
49-
);
50-
})
51-
}
21+
<div class="border-t" style={`background-color: ${color}20`}>
22+
<div class="project-showcase-container flex md:flex-row flex-col">
23+
{
24+
slides.map((slide, index) => {
25+
return (
26+
<div class="showcase-slide flex md:flex-row flex-col-reverse md:mr-16 mb-16 gap-x-96 gap-y-10 border-b">
27+
{slide.image && (
28+
<div class="md:border-r p-5">
29+
<img
30+
class="md:min-w-[768px] md:min-h-[425px] rounded-sm"
31+
src={slide.image}
32+
alt={slide.description}
33+
/>
34+
</div>
35+
)}
36+
{slide.description && (
37+
<div class="relative md:min-w-[568px] md:min-h-[425px] text-2xl text-right leading-10 md:leading-12 whitespace-pre-line">
38+
{slide.description}
39+
40+
{slides.length > 1 && index < slides.length - 2 && (
41+
<button
42+
class="next-slide-btn hidden md:flex text-4xl absolute bottom-10 right-0 animate-wiggle hover:cursor-pointer"
43+
data-slide-index={index}
44+
>
45+
→
46+
</button>
47+
)}
48+
</div>
49+
)}
50+
</div>
51+
);
52+
})
53+
}
54+
</div>
5255
</div>
5356
</div>
5457

@@ -60,13 +63,26 @@ const { title, link, slides, color } = Astro.props;
6063
}
6164

6265
.project-showcase-container {
63-
overflow-x: auto;
66+
overflow-x: scroll;
6467
overflow-y: hidden;
65-
scrollbar-width: none; /* Firefox */
66-
-ms-overflow-style: none; /* IE/Edge */
67-
}
68-
69-
.project-showcase-container::-webkit-scrollbar {
70-
display: none; /* Chrome/Safari */
68+
scroll-behavior: smooth;
7169
}
7270
</style>
71+
72+
<script>
73+
// Event delegation - single listener for all buttons
74+
document.addEventListener("click", (e) => {
75+
const button = (e.target as Element).closest(".next-slide-btn");
76+
if (!button) return;
77+
78+
const currentSlide = button.closest(".showcase-slide");
79+
const nextSlide = currentSlide?.nextElementSibling;
80+
81+
// Use scrollIntoView for reliable, native scrolling
82+
nextSlide?.scrollIntoView({
83+
behavior: "smooth",
84+
block: "nearest",
85+
inline: "start",
86+
});
87+
});
88+
</script>

‎src/layouts/base.astro‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,21 @@ import "../styles/global.css";
2828
</div>
2929
<div class="flex py-4 justify-between text-3xl bg-black text-white">
3030
<!-- navigation -->
31-
<a href="/about" class="hover:underline">about</a>
32-
<a href="/projects" class="hover:underline">projects</a>
33-
<a href="/contact" class="hover:underline">contact</a>
31+
<a
32+
href="/about"
33+
class={`hover:underline ${Astro.url.pathname === "/about" ? "underline" : ""}`}
34+
>about</a
35+
>
36+
<a
37+
href="/projects"
38+
class={`hover:underline ${Astro.url.pathname === "/projects" ? "underline" : ""}`}
39+
>projects</a
40+
>
41+
<a
42+
href="/contact"
43+
class={`hover:underline ${Astro.url.pathname === "/contact" ? "underline" : ""}`}
44+
>contact</a
45+
>
3446
</div>
3547
</div>
3648
</div>

‎src/pages/projects.astro‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,60 @@ openai.anthropic.`,
3939
},
4040
]}
4141
/>
42+
<ProjectShowcase
43+
color="#369482"
44+
title="peaque"
45+
link="https://peaque.io"
46+
slides={[
47+
{
48+
image: "/peaqueFirst.png",
49+
description: `peaque.io is an online book reading platform mixed with social media features. you can leave public notes/comments on any part of a book and people can react and reply to your notes. alongside that you can also create your own library, add custom artwork and chat with characters from the books (using ai).`,
50+
},
51+
{
52+
image: "/peaqueSecond.png",
53+
description: `i led a small team of 2 engineers and we built this entire platform from scratch. i worked as a fullstack engineer. built and implemented a custom version of an open source reading library(https://github.com/d-i-t-a/R2D2BC). designed the app architecture. built a fully response interface with my teammates. built the mobile app for this platform.`,
54+
},
55+
{
56+
description: `tech i used:`,
57+
},
58+
{
59+
description: `typscript.
60+
gcp.firebase.cloud functions.
61+
nodejs.express.
62+
react.react native.styled components.
63+
zustand.git.workflows.
64+
react helmet.`,
65+
},
66+
]}
67+
/>
68+
<ProjectShowcase
69+
color="#2958F6"
70+
title="sesha-systems"
71+
link="https://sesha-systems.com"
72+
slides={[
73+
{
74+
image: "/seshaSystemsFirst.png",
75+
description: `sesha systems is a multi-tenant article generation and editing tool. it allows users to provide 1 or more links to news articles. and then generates a new article based on the provided links. It can also be used to summarize news. it contains a full article management system with features version control, archiving, cross-org sharing, exporting and real time updates. `,
76+
},
77+
{
78+
image: "/seshaSystemsSecond.png",
79+
description: `I worked as a fullstack engineer and cloud architect. built the application architecture including the article generation pipeline. created in-house tooling which included a custom syntax parser that our ai engineer used to create and edit prompts in real time.
80+
implemented multi-tenancy. built the user interface with real time article generation updates.`,
81+
},
82+
{
83+
description: `tech i used:`,
84+
},
85+
{
86+
description: `typscript.
87+
aws.pulumi.docker.
88+
nodejs.express.websockets.
89+
react.tailwind.mui.
90+
zustand.git.workflows.
91+
openai.anthropic.googleapi.`,
92+
},
93+
]}
94+
/>
4295
</div>
4396
</BaseLayout>
97+
98+
<script></script>

0 commit comments

Comments
 (0)