Skip to content

Commit 0c81972

Browse files
fezcodefezcode
committed
refactor: simple about me page
1 parent ef4f5be commit 0c81972

File tree

5 files changed

+120
-5
lines changed

5 files changed

+120
-5
lines changed

‎public/about-me/about.txt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ you can find me exploring new tech or enjoying a good cup of coffee ☕.
2323
* **Frameworks & Core Concepts:** System Design, Microservices, Distributed Systems, gRPC, Node.js, Express.js, JavaFX,
2424
* **Developer Tools:** Git, CMake, Conan, Nexus Repository Manager, Bitbucket, Linux, Docker
2525

26-
## Useful Links
26+
## Links
2727

2828
* [GitHub Profile](https://github.com/fezcode)
2929
* [LinkedIn Profile](https://www.linkedin.com/in/ahmedsamilbulbul)
@@ -40,5 +40,5 @@ flow—it's my kind of interactive jam session! 🤘
4040
## More...
4141

4242
| 🗂️ Some of my Work | 📖 Articles written | 🖼️ Stuff I Consume | ✨ Some Small Apps |
43-
|:---------------------------:|:--------------------:|:----------------------:|:-------------------:|
44-
| [Projects](/#/projects) | [Blogs](/#/blog) | [Logs](/#/logs) | [ Apps](/#/apps) |
43+
|:---------------------------:|:--------------------:|:-----------------------:|:-------------------:|
44+
| [Projects](/#/projects) | [Blogs](/#/blog) | [Logs](/#/logs) | [ Apps](/#/apps) |

‎src/components/CensoredPolaroid.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
3+
const CensoredPolaroid = ({ imageUrl = "/images/herdaim.jpg", censored = true }) => (
4+
<div
5+
className="absolute top-32 -left-20 xl:-left-48 z-20 transform -rotate-3 pointer-events-none select-none hidden lg:block">
6+
{/* Paper Clip (CSS Only) */}
7+
<div className="absolute -top-3 left-1/2 -translate-x-1/2 z-30 w-4 h-12 border-4 border-[#5d5d5d] rounded-full"
8+
style={{height: '30px', borderBottom: 'none', borderRadius: '10px 10px 0 0'}}/>
9+
<div
10+
className="absolute -top-3 left-1/2 -translate-x-1/2 z-10 w-4 h-12 border-4 border-[#333] opacity-30 rounded-full"
11+
style={{height: '32px', borderBottom: 'none', borderRadius: '10px 10px 0 0', transform: 'translate(1px, 1px)'}}/>
12+
13+
{/* Polaroid Frame */}
14+
<div className="bg-white p-2 pb-8 shadow-[0_4px_6px_rgba(0,0,0,0.3)] w-40 h-auto rotate-2 border border-gray-200">
15+
{/* Image Area */}
16+
<div className="relative bg-gray-200 aspect-square overflow-hidden filter grayscale contrast-125 sepia-[.3]">
17+
<img src={imageUrl} alt="Subject"
18+
className="w-full h-full object-cover opacity-90 mix-blend-multiply"/>
19+
{/* Censor Bar */}
20+
{censored && (
21+
<div
22+
className="absolute top-[35%] left-[-10%] w-[120%] h-6 bg-black flex items-center justify-center transform -rotate-2">
23+
<span className="text-[0.3rem] text-white/50 tracking-[0.5em] font-mono">CONFIDENTIAL</span>
24+
</div>
25+
)}
26+
</div>
27+
28+
{/* Handwritten Label */}
29+
<div className="mt-3 font-mono text-[0.6rem] text-center text-gray-500 tracking-widest uppercase">
30+
Fig. 1: The Architect
31+
</div>
32+
33+
{/* Stamp over photo */}
34+
<div
35+
className="absolute bottom-12 right-2 opacity-40 transform -rotate-12 border-2 border-red-800 text-red-800 px-1 py-0.5 text-[0.5rem] font-black uppercase">
36+
VERIFIED
37+
</div>
38+
</div>
39+
</div>
40+
);
41+
42+
export default CensoredPolaroid;

‎src/components/CoffeeStain.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
3+
const CoffeeStain = () => (
4+
<div
5+
className="absolute top-16 right-4 md:right-16 z-0 pointer-events-none opacity-[0.15] rotate-[15deg] mix-blend-multiply">
6+
<svg width="200" height="200" viewBox="0 0 200 200" style={{overflow: 'visible'}}>
7+
<defs>
8+
<filter id="coffee-filter">
9+
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise"/>
10+
<feDisplacementMap in="SourceGraphic" in2="noise" scale="10"/>
11+
</filter>
12+
</defs>
13+
{/* Main Ring */}
14+
<circle
15+
cx="100"
16+
cy="100"
17+
r="70"
18+
fill="none"
19+
stroke="#3E2723"
20+
strokeWidth="8"
21+
filter="url(#coffee-filter)"
22+
opacity="0.8"
23+
/>
24+
{/* Inner dark rim */}
25+
<circle
26+
cx="100"
27+
cy="100"
28+
r="68"
29+
fill="none"
30+
stroke="#281915"
31+
strokeWidth="1"
32+
filter="url(#coffee-filter)"
33+
/>
34+
{/* Splatter dots */}
35+
<circle cx="180" cy="110" r="3" fill="#3E2723" filter="url(#coffee-filter)" opacity="0.6"/>
36+
<circle cx="20" cy="140" r="4" fill="#3E2723" filter="url(#coffee-filter)" opacity="0.5"/>
37+
</svg>
38+
</div>
39+
);
40+
41+
export default CoffeeStain;

‎src/components/GrainOverlay.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
3+
const GrainOverlay = () => (
4+
<div className="fixed inset-0 pointer-events-none z-0">
5+
{/* Noise Texture */}
6+
<div
7+
className="absolute inset-0 w-full h-full opacity-[0.15] mix-blend-multiply"
8+
style={{
9+
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
10+
}}
11+
/>
12+
13+
{/* Subtle Dirt Specks (Randomly positioned using gradients) */}
14+
<div
15+
className="absolute inset-0 opacity-20 bg-[radial-gradient(#333_1px,transparent_1px)] [background-size:400px_400px]"/>
16+
<div
17+
className="absolute inset-0 opacity-10 bg-[radial-gradient(#222_1px,transparent_1px)] [background-size:600px_600px] [background-position:100px_100px]"/>
18+
19+
{/* Vignette for old paper look */}
20+
<div
21+
className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_50%,rgba(60,50,40,0.1)_100%)] mix-blend-multiply"/>
22+
</div>
23+
);
24+
25+
export default GrainOverlay;

‎src/pages/about-views/SimpleText.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import remarkGfm from 'remark-gfm';
55
import rehypeRaw from 'rehype-raw';
66
import piml from 'piml';
77
import {ArrowSquareOut, SealCheck} from '@phosphor-icons/react';
8+
import GrainOverlay from '../../components/GrainOverlay';
9+
import CoffeeStain from '../../components/CoffeeStain';
10+
import CensoredPolaroid from '../../components/CensoredPolaroid';
811

912
const LinkRenderer = ({href, children}) => {
1013
const isExternal = href.startsWith('http') || href.startsWith('https');
@@ -69,7 +72,9 @@ const SimpleText = () => {
6972

7073
return (
7174
<div
72-
className="h-full bg-[#f3f3f3] text-[#111] overflow-y-auto selection:bg-black selection:text-white custom-scrollbar font-sans">
75+
className="h-full bg-[#f3f3f3] text-[#111] overflow-y-auto selection:bg-black selection:text-white custom-scrollbar font-sans relative">
76+
<GrainOverlay/>
77+
<CoffeeStain/>
7378

7479
{/* Top Secret Stamp / Decor */}
7580
<div className="fixed top-0 right-0 p-8 opacity-10 pointer-events-none z-0">
@@ -84,6 +89,7 @@ const SimpleText = () => {
8489
transition={{duration: 0.8, ease: "circOut"}}
8590
className="max-w-4xl mx-auto px-6 py-24 md:py-32 relative z-10"
8691
>
92+
<CensoredPolaroid imageUrl="/images/herdaim.jpg" censored={true} />
8793
<header className="mb-20">
8894
<div className="flex flex-col items-start gap-4 mb-8">
8995
<span className="bg-black text-white px-3 py-1 font-mono text-xs tracking-[0.3em] uppercase">Fezcodex Archive // File #8942</span>
@@ -111,6 +117,7 @@ const SimpleText = () => {
111117
prose-thead:bg-black prose-thead:text-white
112118
prose-th:p-4 prose-th:uppercase prose-th:tracking-wider prose-th:font-normal prose-th:text-left prose-th:text-white
113119
prose-td:p-4 prose-td:border-b prose-td:border-gray-300 prose-td:text-gray-700
120+
114121
prose-blockquote:border-l-4 prose-blockquote:border-black prose-blockquote:pl-6 prose-blockquote:italic prose-blockquote:bg-white prose-blockquote:p-6 prose-blockquote:shadow-sm"
115122
>
116123
<ReactMarkdown
@@ -137,4 +144,4 @@ const SimpleText = () => {
137144
);
138145
};
139146

140-
export default SimpleText;
147+
export default SimpleText;

0 commit comments

Comments
 (0)