Skip to content

Commit 47069b0

Browse files
MuhammadPenMuhammadPen
committed
new design
1 parent 12c15a9 commit 47069b0

12 files changed

Lines changed: 263 additions & 155 deletions

File tree

‎public/1mindFirst.png‎

810 KB
Loading

‎public/1mindSecond.png‎

584 KB
Loading

‎public/favicon.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎public/noise.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎src/components/projectShowcase.astro‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
interface Props {
3+
title: string;
4+
link: string;
5+
slides: { image: string; description: string }[];
6+
color: string;
7+
}
8+
9+
const { title, link, slides, color } = Astro.props;
10+
---
11+
12+
<div class="flex flex-col text-right gap-2">
13+
<a
14+
href={link}
15+
target="_blank"
16+
class="external-link hover:underline text-2xl md:text-3xl">{title}</a
17+
>
18+
<div
19+
class="flex md:flex-row flex-col overflow-x-auto border-t"
20+
style={`background-color: ${color}20`}
21+
>
22+
{
23+
slides.map((slide) => {
24+
return (
25+
<div class="flex md:flex-row flex-col-reverse w-full md:mr-16 mb-16 gap-x-96 gap-y-10 border-b">
26+
<div class="border-r p-5">
27+
<img
28+
class="md:min-w-[768px] md:min-h-[425px] rounded-sm"
29+
src={slide.image}
30+
alt={slide.description}
31+
/>
32+
</div>
33+
<div class="md:min-w-[568px] md:min-h-[425px] text-2xl text-right leading-10 md:leading-13">
34+
{slide.description}
35+
</div>
36+
</div>
37+
);
38+
})
39+
}
40+
</div>
41+
</div>
42+
43+
<style>
44+
.external-link::after {
45+
content: " ↗";
46+
font-size: 0.75em;
47+
margin-right: 0.25em;
48+
}
49+
</style>

‎src/layouts/base.astro‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
import "../styles/global.css";
3+
---
4+
5+
<html lang="en">
6+
<head>
7+
<meta charset="utf-8" />
8+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9+
<meta name="viewport" content="width=device-width" />
10+
<meta name="generator" content={Astro.generator} />
11+
<title>Muhammad Pen</title>
12+
</head>
13+
<body class="flex flex-col h-screen p-10">
14+
<div class="custom-cursor"></div>
15+
<div class="flex flex-col flex-1 border grain-background">
16+
<div class="flex">
17+
<div class="hidden md:flex flex-1 h-92 bg-black">
18+
<!-- 3d avatar container -->
19+
</div>
20+
<div class="flex flex-4 flex-col justify-between">
21+
<!-- info and navigation -->
22+
<div
23+
class="flex flex-col text-right text-3xl leading-10 md:text-5xl md:leading-15"
24+
>
25+
<span> muhammad.bin.fayyaz </span>
26+
<span> fullstack.software.engineer </span>
27+
<span> cloud.architect </span>
28+
</div>
29+
<div class="flex py-4 justify-between text-3xl bg-black text-white">
30+
<!-- 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>
34+
</div>
35+
</div>
36+
</div>
37+
<slot />
38+
</div>
39+
40+
<script>
41+
let cursorX = -100;
42+
let cursorY = -100;
43+
let isMoving = false;
44+
45+
document.addEventListener(
46+
"mousemove",
47+
(e) => {
48+
cursorX = e.clientX;
49+
cursorY = e.clientY;
50+
51+
if (!isMoving) {
52+
isMoving = true;
53+
requestAnimationFrame(updateCursor);
54+
}
55+
},
56+
{ passive: true }
57+
);
58+
59+
function updateCursor() {
60+
document.documentElement.style.setProperty(
61+
"--cursor-x",
62+
`${cursorX}px`
63+
);
64+
document.documentElement.style.setProperty(
65+
"--cursor-y",
66+
`${cursorY}px`
67+
);
68+
isMoving = false;
69+
}
70+
</script>
71+
</body>
72+
</html>

‎src/pages/about.astro‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
import BaseLayout from "../layouts/base.astro";
3+
---
4+
5+
<BaseLayout>
6+
<div class="flex">
7+
<div class="flex-1"></div>
8+
<div
9+
class="flex flex-4 flex-col text-right text-2xl pt-10 leading-10 md:text-3xl md:leading-13"
10+
>
11+
<span>hi.</span>
12+
<span
13+
>im {new Date().getFullYear() - 1999} years old. i live in pakistan.</span
14+
>
15+
<span
16+
>ive been writing software professionally for {
17+
new Date().getFullYear() - 2019
18+
} years.</span
19+
>
20+
<span
21+
>i started as a frontend react dev, transitioned into node and then
22+
moved to designing and building cloud infrastructure.</span
23+
>
24+
25+
<span>i believe that simple is better.</span>
26+
<span>i like learning by doing. so im always doing stuff.</span>
27+
<span>
28+
building games. playing games. making music. drawing. digital painting.
29+
politics. social justice.</span
30+
>
31+
<span>basketball > cricket.</span>
32+
</div>
33+
</div>
34+
</BaseLayout>

‎src/pages/components/Information.astro‎

Lines changed: 0 additions & 139 deletions
This file was deleted.

‎src/pages/contact.astro‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
import BaseLayout from "../layouts/base.astro";
3+
---
4+
5+
<BaseLayout>
6+
<div class="flex">
7+
<div class="flex-1"></div>
8+
<div
9+
class="flex flex-4 flex-col text-right text-2xl pt-10 leading-10 md:text-3xl md:leading-13"
10+
>
11+
<span
12+
>you can reach me via: <a
13+
href="mailto:muhammadpen@gmail.com"
14+
class="underline">muhammadpen@gmail.com</a
15+
></span
16+
>
17+
<span>i will try my best to get back to you as soon as possible.</span>
18+
19+
<div class="flex justify-end gap-8">
20+
<a
21+
href="https://github.com/MuhammadPen"
22+
class="underline"
23+
target="_blank">github</a
24+
>
25+
<a
26+
href="https://linkedin.com/in/muhammad-fayyaz-35a598125"
27+
class="underline"
28+
target="_blank">linkedin</a
29+
>
30+
<a
31+
href="https://bsky.app/profile/muhammadpen.bsky.social"
32+
class="underline"
33+
target="_blank">bsky</a
34+
>
35+
</div>
36+
</div>
37+
</div>
38+
</BaseLayout>

‎src/pages/index.astro‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11
---
22
import "../styles/global.css";
3-
import Information from "./components/Information.astro";
43
---
54

6-
<html lang="en">
7-
<head>
8-
<meta charset="utf-8" />
9-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
10-
<meta name="viewport" content="width=device-width" />
11-
<meta name="generator" content={Astro.generator} />
12-
<title>Muhammad Pen</title>
13-
</head>
14-
<body>
15-
<Information />
16-
</body>
17-
</html>
5+
// instatly redirect to /about
6+
<script>
7+
window.location.href = "/about";
8+
</script>

0 commit comments

Comments
 (0)