Skip to content

Commit ff7f5f6

Browse files
fezcodefezcode
committed
Contact Modal
1 parent 6b892fa commit ff7f5f6

File tree

6 files changed

+153
-17
lines changed

6 files changed

+153
-17
lines changed

‎public/posts/warning-post.txt‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
# My Warning Post
1+
# My Warning Post (and what is this site about)
22

3-
> **warning**
4-
>
5-
> asda
6-
>
7-
> asd
3+
**Welcome to my little corner of the internet!** This isn't just a website; it's my personal playground, a digital diary where I ramble about pretty much anything that catches my fancy.
4+
I'm _A. Samil Bulbul_, a senior software engineer by trade, but here, **I'm just me** - sharing thoughts, creations, and obsessions.
85

9-
This is my second post. I'm getting the hang of this.
6+
You'll find a **mixed bag** here, from deep dives into the fascinating world of computer science and engineering (think React, Go, JavaScript, and Linux wizardry)
7+
to my unfiltered rants about **life** (_not really_), the universe, and everything in between. But it's not all serious code and existential crises! I'm also a huge fan of escaping into other worlds,
8+
so expect plenty of reviews and musings on the latest (or classic) video games that have stolen my hours (Vampire: The Masquerade - Bloodlines 2, anyone?).
9+
And when I'm not gaming, I'm probably lost in a good book, binging a captivating series like _"The Bear"_, or grooving to some timeless tunes (_De La Soul always on rotation_).
1010

11-
- Item 1
12-
- Item 2
13-
- Item 3
11+
This space is entirely my own, a place where my ideas, opinions, and sometimes questionable tastes run wild.
12+
I share whatever I want, whenever I want, without apology. So, if you're looking for polished, perfectly curated content,
13+
you might find some of that, but mostly, you'll find genuine, unadulterated me. Dive in, explore, and enjoy the ride!
14+
15+
![The Stranger](images/logs/albert-camus-the-stranger.jpg)

‎src/App.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { HashRouter as Router } from 'react-router-dom';
33
import Layout from './components/Layout';
44
import AnimatedRoutes from './components/AnimatedRoutes';
55
import { ToastProvider } from './components/ToastProvider';
66
import ScrollToTop from './components/ScrollToTop';
7+
import ContactModal from './components/ContactModal';
78

89
function App() {
10+
const [isModalOpen, setIsModalOpen] = useState(false);
11+
12+
const toggleModal = () => {
13+
setIsModalOpen(!isModalOpen);
14+
};
15+
916
return (
1017
<Router>
1118
<ScrollToTop />
1219
<ToastProvider>
13-
<Layout>
20+
<Layout toggleModal={toggleModal}>
1421
<AnimatedRoutes />
1522
</Layout>
23+
<ContactModal isOpen={isModalOpen} onClose={toggleModal} />
1624
</ToastProvider>
1725
</Router>
1826
);

‎src/components/ContactModal.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.modal-overlay {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
right: 0;
6+
bottom: 0;
7+
background-color: rgba(0, 0, 0, 0.5);
8+
backdrop-filter: blur(5px);
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
z-index: 1000;
13+
}
14+
15+
.modal-content {
16+
background-color: #1a202c; /* Dark Blue */
17+
padding: 20px;
18+
border-radius: 8px;
19+
max-width: 500px;
20+
width: 100%;
21+
color: white;
22+
display: flex;
23+
flex-direction: column;
24+
gap: 20px;
25+
box-shadow: inset 0 0 0 4px #4a5568; /* Inner border */
26+
font-family: 'Arvo', serif;
27+
font-weight: 300;
28+
}
29+
30+
.modal-header {
31+
display: flex;
32+
justify-content: space-between;
33+
align-items: center;
34+
}
35+
36+
.modal-header h2 {
37+
font-size: 1.5rem;
38+
font-weight: bold;
39+
}
40+
41+
.close-button {
42+
background-color: #374151;
43+
border: none;
44+
color: white;
45+
cursor: pointer;
46+
border-radius: 4px;
47+
padding: 5px;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
}
52+
53+
.close-button:hover {
54+
background-color: #4b5563;
55+
}
56+
57+
.modal-body {
58+
display: flex;
59+
flex-direction: column;
60+
gap: 10px;
61+
}
62+
63+
.contact-links {
64+
display: flex;
65+
flex-direction: column;
66+
gap: 10px;
67+
}
68+
69+
.contact-link {
70+
display: flex;
71+
align-items: center;
72+
gap: 10px;
73+
color: white;
74+
text-decoration: none;
75+
}
76+
77+
.red-text {
78+
color: #f87171;
79+
}

‎src/components/ContactModal.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import './ContactModal.css';
3+
import { X, Envelope, LinkedinLogo } from '@phosphor-icons/react';
4+
5+
const colorizeText = (text) => {
6+
return text.split(' ').map((word, index) => {
7+
if (index % 2 === 1) {
8+
return <span key={index} className="red-text text-lg font-normal tracking-tight">{word} </span>;
9+
} else {
10+
return <span key={index} className="text-lg font-normal tracking-tight">{word} </span>;
11+
}
12+
});
13+
};
14+
15+
const ContactModal = ({ isOpen, onClose }) => {
16+
if (!isOpen) {
17+
return null;
18+
}
19+
20+
return (
21+
<div className="modal-overlay" onClick={onClose}>
22+
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
23+
<div className="modal-header">
24+
<h2>{colorizeText('Contact Me')}</h2>
25+
<button onClick={onClose} className="close-button">
26+
<X size={24} />
27+
</button>
28+
</div>
29+
<div className="modal-body">
30+
<p className="text-lg font-normal tracking-tight">{colorizeText('You can reach me at:')}</p>
31+
<div className="contact-links">
32+
<a href="mailto:samil.bulbul@gmail.com" className="contact-link">
33+
<Envelope size={24} />
34+
<span>{colorizeText('samil.bulbul at gmail.com')}</span>
35+
</a>
36+
<a href="https://tr.linkedin.com/in/ahmed-samil-bulbul" target="_blank" rel="noopener noreferrer" className="contact-link">
37+
<LinkedinLogo size={24} />
38+
<span>{colorizeText('LinkedIn')}</span>
39+
</a>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
);
45+
};
46+
47+
export default ContactModal;

‎src/components/Layout.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useLocation } from 'react-router-dom';
88

99
import { DndProvider } from '../context/DndContext';
1010

11-
const Layout = ({ children }) => {
11+
const Layout = ({ children, toggleModal }) => {
1212
const [isSidebarOpen, setIsSidebarOpen] = useState(window.innerWidth > 768);
1313
const location = useLocation();
1414

@@ -44,7 +44,7 @@ const Layout = ({ children }) => {
4444

4545
return (
4646
<div className="bg-gray-950 min-h-screen font-sans flex">
47-
<Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
47+
<Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} toggleModal={toggleModal} />
4848
<div
4949
className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen ? 'md:ml-64' : 'md:ml-0'}`}>
5050
<Navbar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />

‎src/components/Sidebar.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import Fez from './Fez';
2424

2525
import { version } from '../version';
2626

27-
const Sidebar = ({ isOpen, toggleSidebar }) => {
27+
const Sidebar = ({ isOpen, toggleSidebar, toggleModal }) => {
2828
const [isMainOpen, setIsMainOpen] = useState(true);
2929
const [isContentOpen, setIsContentOpen] = useState(true);
3030
const [isExtrasOpen, setIsExtrasOpen] = useState(true);
@@ -300,8 +300,8 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
300300
Button 1
301301
</button>
302302

303-
<button className="bg-gray-900 hover:bg-gray-800 text-white py-2 px-4 rounded-md transition-colors w-full font-sans">
304-
Button 2
303+
<button onClick={toggleModal} className="bg-gray-900 hover:bg-gray-800 text-white py-2 px-4 rounded-md transition-colors w-full font-sans">
304+
Contact Me
305305
</button>
306306
</div>
307307

0 commit comments

Comments
 (0)