Skip to content

Commit 5b62ffc

Browse files
abdullahalsazibabdullahalsazib
committed
new app
1 parent d0f0732 commit 5b62ffc

11 files changed

+1937
-73
lines changed

‎package-lock.json

+784-54
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+8-4
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,19 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@blueprintjs/core": "^5.17.2",
14+
"@blueprintjs/icons": "^5.19.1",
15+
"@emotion/react": "^11.14.0",
1316
"@tailwindcss/vite": "^4.0.9",
14-
"react": "^19.0.0",
15-
"react-dom": "^19.0.0",
17+
"@types/react": "^18.3.18",
18+
"@types/react-dom": "^18.3.5",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1",
21+
"react-icons": "^5.5.0",
1622
"tailwindcss": "^4.0.9"
1723
},
1824
"devDependencies": {
1925
"@eslint/js": "^9.21.0",
20-
"@types/react": "^19.0.10",
21-
"@types/react-dom": "^19.0.4",
2226
"@vitejs/plugin-react": "^4.3.4",
2327
"eslint": "^9.21.0",
2428
"eslint-plugin-react-hooks": "^5.1.0",

‎src/App.tsx

+85-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,91 @@
1+
// src/App.tsx
2+
import React, { useState } from "react";
3+
import Terminal from "./components/Terminal";
4+
import About from "./components/About";
5+
import Skills from "./components/Skill";
6+
import Projects from "./components/Projects";
7+
import Contact from "./components/Contact";
8+
9+
const App: React.FC = () => {
10+
const [activeWindow, setActiveWindow] = useState<string>("terminal");
111

2-
const App = () => {
312
return (
4-
<div className="w-full h-screen mx-auto bg-slate-900">
5-
<h1 className=" text-[#fff] text-center bolder text-2xl font-mono">
6-
Hello World
7-
</h1>
8-
<p className="text-center text-lg font-sans text-gray-500 mt-4 ">
9-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
10-
voluptates, voluptatum, quidem, quos quia quae quibusdam doloribus
11-
doloremque quod magnam quas. Quae, quibusdam. Fugit, voluptate
12-
repudiandae. Quo, natus. Quisquam, quidem.
13-
</p>
13+
<div className="bg-gray-900 text-gray-200 font-mono">
14+
{/* Top Bar */}
15+
<div className="bg-gray-800 p-2 flex items-center">
16+
<div className="flex space-x-2">
17+
<div className="w-3 h-3 rounded-full bg-red-500"></div>
18+
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
19+
<div className="w-3 h-3 rounded-full bg-green-500"></div>
20+
</div>
21+
<div className="flex mx-auto space-x-4">
22+
<button
23+
className={`px-4 py-1 rounded ${
24+
activeWindow === "terminal"
25+
? "bg-gray-700"
26+
: "bg-gray-800 hover:bg-gray-700"
27+
}`}
28+
onClick={() => setActiveWindow("terminal")}
29+
>
30+
Terminal
31+
</button>
32+
<button
33+
className={`px-4 py-1 rounded ${
34+
activeWindow === "about"
35+
? "bg-gray-700"
36+
: "bg-gray-800 hover:bg-gray-700"
37+
}`}
38+
onClick={() => setActiveWindow("about")}
39+
>
40+
About
41+
</button>
42+
<button
43+
className={`px-4 py-1 rounded ${
44+
activeWindow === "skills"
45+
? "bg-gray-700"
46+
: "bg-gray-800 hover:bg-gray-700"
47+
}`}
48+
onClick={() => setActiveWindow("skills")}
49+
>
50+
Skills
51+
</button>
52+
<button
53+
className={`px-4 py-1 rounded ${
54+
activeWindow === "projects"
55+
? "bg-gray-700"
56+
: "bg-gray-800 hover:bg-gray-700"
57+
}`}
58+
onClick={() => setActiveWindow("projects")}
59+
>
60+
Projects
61+
</button>
62+
<button
63+
className={`px-4 py-1 rounded ${
64+
activeWindow === "contact"
65+
? "bg-gray-700"
66+
: "bg-gray-800 hover:bg-gray-700"
67+
}`}
68+
onClick={() => setActiveWindow("contact")}
69+
>
70+
Contact
71+
</button>
72+
</div>
73+
<a
74+
href="/cv.pdf"
75+
download
76+
className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded transition"
77+
>
78+
Download CV
79+
</a>
80+
</div>
1481

15-
<div className=" py-10 px-10 ">
16-
<button className=" priamry_btn">Click Me</button>
82+
{/* Main Content */}
83+
<div className="container mx-auto p-6">
84+
{activeWindow === "terminal" && <Terminal />}
85+
{activeWindow === "about" && <About />}
86+
{activeWindow === "skills" && <Skills />}
87+
{activeWindow === "projects" && <Projects />}
88+
{activeWindow === "contact" && <Contact />}
1789
</div>
1890
</div>
1991
);

‎src/components/About.tsx

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
// src/components/About.tsx
2+
import React from "react";
3+
4+
const About: React.FC = () => {
5+
return (
6+
<div className="bg-gray-800 rounded-lg p-6 shadow-lg">
7+
<div className="flex flex-col md:flex-row">
8+
<div className="md:w-1/3 mb-6 md:mb-0">
9+
<div className="bg-gray-700 p-4 rounded-lg">
10+
<h2 className="text-2xl font-bold mb-4 text-blue-400">Profile</h2>
11+
<div className="space-y-4">
12+
<div className="flex items-center">
13+
<div className="bg-yellow-600 p-2 rounded mr-3">
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
className="h-5 w-5"
17+
fill="none"
18+
viewBox="0 0 24 24"
19+
stroke="currentColor"
20+
>
21+
<path
22+
strokeLinecap="round"
23+
strokeLinejoin="round"
24+
strokeWidth={2}
25+
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
26+
/>
27+
<path
28+
strokeLinecap="round"
29+
strokeLinejoin="round"
30+
strokeWidth={2}
31+
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
32+
/>
33+
</svg>
34+
</div>
35+
<div>
36+
<div className="text-sm text-gray-400">Address</div>
37+
<div>Bangladesh</div>
38+
</div>
39+
</div>
40+
41+
<div className="flex items-center">
42+
<div className="bg-yellow-600 p-2 rounded mr-3">
43+
<svg
44+
xmlns="http://www.w3.org/2000/svg"
45+
className="h-5 w-5"
46+
fill="none"
47+
viewBox="0 0 24 24"
48+
stroke="currentColor"
49+
>
50+
<path
51+
strokeLinecap="round"
52+
strokeLinejoin="round"
53+
strokeWidth={2}
54+
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
55+
/>
56+
</svg>
57+
</div>
58+
<div>
59+
<div className="text-sm text-gray-400">Email</div>
60+
<div>contact@abdullah.dev</div>
61+
</div>
62+
</div>
63+
64+
<div className="flex items-center">
65+
<div className="bg-yellow-600 p-2 rounded mr-3">
66+
<svg
67+
xmlns="http://www.w3.org/2000/svg"
68+
className="h-5 w-5"
69+
fill="none"
70+
viewBox="0 0 24 24"
71+
stroke="currentColor"
72+
>
73+
<path
74+
strokeLinecap="round"
75+
strokeLinejoin="round"
76+
strokeWidth={2}
77+
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
78+
/>
79+
</svg>
80+
</div>
81+
<div>
82+
<div className="text-sm text-gray-400">Date of Birth</div>
83+
<div>1998</div>
84+
</div>
85+
</div>
86+
87+
<div className="flex items-center">
88+
<div className="bg-yellow-600 p-2 rounded mr-3">
89+
<svg
90+
xmlns="http://www.w3.org/2000/svg"
91+
className="h-5 w-5"
92+
fill="none"
93+
viewBox="0 0 24 24"
94+
stroke="currentColor"
95+
>
96+
<path
97+
strokeLinecap="round"
98+
strokeLinejoin="round"
99+
strokeWidth={2}
100+
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
101+
/>
102+
</svg>
103+
</div>
104+
<div>
105+
<div className="text-sm text-gray-400">Alias</div>
106+
<div>Jack Sparrow 🏴‍☠️</div>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
113+
<div className="md:w-2/3 md:pl-6">
114+
<h1 className="text-4xl font-bold text-yellow-500 mb-4">
115+
Hi, I am Abdullah Al Sazib
116+
</h1>
117+
118+
<p className="mb-6 text-lg">
119+
I'm a passionate <span className="text-green-400">developer</span>,{" "}
120+
<span className="text-green-400">learner</span>, and{" "}
121+
<span className="text-green-400">tech enthusiast</span>. I enjoy
122+
exploring new technologies and building cool projects that solve
123+
real-world problems.
124+
</p>
125+
126+
<h2 className="text-2xl font-bold mb-4 text-blue-400">About Me</h2>
127+
128+
<ul className="list-disc list-inside space-y-2 mb-6">
129+
<li>
130+
🎓 Currently learning <span className="text-green-400">Go</span>,{" "}
131+
<span className="text-green-400">DSA</span>,{" "}
132+
<span className="text-green-400">Java</span>,{" "}
133+
<span className="text-green-400">ReactJs</span>,{" "}
134+
<span className="text-green-400">Cybersecurity</span>, and more.
135+
</li>
136+
<li>
137+
🌱 Always looking to improve my{" "}
138+
<span className="text-green-400">coding</span> skills and{" "}
139+
<span className="text-green-400">problem-solving</span> abilities.
140+
</li>
141+
<li>
142+
💬 Ask me about <span className="text-green-400">Linux</span>,{" "}
143+
<span className="text-green-400">DevOps</span>,{" "}
144+
<span className="text-green-400">C++</span>,{" "}
145+
<span className="text-green-400">Ethical Hacking</span>,{" "}
146+
<span className="text-green-400">Cybersecurity</span>, and{" "}
147+
<span className="text-green-400">Web Development</span>.
148+
</li>
149+
<li>
150+
🌍 Based in <span className="text-green-400">Bangladesh</span> 🇧🇩.
151+
</li>
152+
</ul>
153+
154+
<p className="mb-6">
155+
My ultimate goal is to become proficient in{" "}
156+
<span className="text-yellow-500">ethical hacking</span> and
157+
<span className="text-yellow-500"> cybersecurity</span>, leveraging
158+
my coding skills to create robust and secure systems. I'm always
159+
eager to learn new things and contribute to open-source projects.
160+
</p>
161+
162+
<div className="p-4 bg-gray-700 rounded-lg">
163+
<h3 className="text-xl font-bold mb-2">💬 Fun Fact:</h3>
164+
<p>
165+
I'm a huge fan of{" "}
166+
<span className="text-yellow-500">Jack Sparrow</span> 🏴‍☠️ (Johnny
167+
Depp) and love watching the{" "}
168+
<span className="text-yellow-500">Pirates of the Caribbean</span>{" "}
169+
movies! 🎬
170+
</p>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
);
176+
};
177+
178+
export default About;

0 commit comments

Comments
 (0)