Skip to content

Commit 17cbddf

Browse files
AmirSenpaiAmirSenpai
committed
practice change's
added a coffee donation button to the header, and added a function to the jsx file, I'm still working on it, I still don't know what to do with the website but I will figure it out soon. + added footer.
1 parent 9a82414 commit 17cbddf

10 files changed

+121
-40
lines changed

‎index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
6+
<title>AmirHossein</title>
87
</head>
98
<body>
109
<div id="root"></div>

‎src/App.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import Footer from "./components/footer";
66
function App() {
77
return (
88
<>
9-
<Header/>
10-
<Body />
11-
<Footer />
9+
<Header />
10+
<Body />
11+
<Footer />
1212
</>
1313
);
1414
}

‎src/components/body.jsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import React from "react";
22
import Maintest from "/src/data/Maintest";
3-
import Bodydata from "./bodydata";
3+
import Introbody from "./introbody";
4+
import Main from "./mainbody";
45

56
function Body() {
67
return (
78
<>
8-
<div className="h-screen bg-gray-800">
9+
<div className="h-screen2 bg-gray-800">
910
{Maintest.map((item) => (
10-
<Bodydata
11-
year={item.year}
12-
title={item.title}
13-
name={item.name}
14-
link={item.link}
11+
<Introbody
12+
year={item.year}
13+
title={item.title}
14+
name={item.name}
15+
link={item.link}
16+
web={item.web}
1517
/>
1618
))}
19+
<hr className="bg-rose-800 border-0 h-1 my-2" />
20+
<Main />
1721
</div>
1822
</>
1923
);

‎src/components/bodydata.jsx

-15
This file was deleted.

‎src/components/footer.jsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React from "react";
22
function Footer() {
33
return (
44
<>
5-
<h1>footer</h1>
5+
<div className="bg-gray-700 text-stone-100 h-14 text-center flex items-center justify-center">
6+
<h1>
7+
&copy; {new Date().getFullYear()} Amir Hossein Doosti - AmirSenpai.
8+
All rights reserved
9+
</h1>
10+
</div>
611
</>
712
);
813
}

‎src/components/header.jsx

+23-5
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,35 @@ function Header() {
66
<>
77
<div className="h-fit bg-gray-700 text-stone-100">
88
<h1 className="text-center text-2xl md:text-4xl pt-2 font-semibold">
9-
<img src={reactLogo} alt="react logo" className="inline-block h-6 md:h-10" />{" "}
9+
<img
10+
src={reactLogo}
11+
alt="react logo"
12+
className="inline-block h-6 md:h-10"
13+
/>{" "}
1014
AmirHossein{" "}
11-
<img src={viteLogo} alt="vite logo" className="inline-block h-6 md:h-10" />
15+
<img
16+
src={viteLogo}
17+
alt="vite logo"
18+
className="inline-block h-6 md:h-10"
19+
/>
1220
</h1>
1321
<p className="text-center mt-5 md:text-lg font-vazir font-medium">
1422
My First Website With React.js + Vite + TailwindCSS
1523
</p>
1624
<div className="flex flex-row gap-9 items-center justify-center mt-4 pb-3">
17-
18-
<a href="https://github.com/AmirSenpai/vite-react-tailwind-project" target="_blank"><button className="btn-blue">This Website's GitHub Repo</button></a>
19-
<a href="#" target="_blank"><button className="btn-blue">Buy Me Coffee</button></a>
25+
<a
26+
href="https://github.com/AmirSenpai/vite-react-tailwind-project"
27+
target="_blank"
28+
>
29+
<button className="btn-blue">This Website's GitHub Repo</button>
30+
</a>
31+
<a
32+
href="https://www.coffeebede.com/amirhosseind"
33+
target="_blank"
34+
className="h-34 w-36 flex m-0 p-0"
35+
>
36+
<button className="btn-blue">Buy Me coffee</button>
37+
</a>
2038
</div>
2139
</div>
2240
</>

‎src/components/introbody.jsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
function Introbody({ year, title, name, link, web }) {
3+
return (
4+
<>
5+
<h1 className="text-center text-amber-500 text-xl md:text-2xl pt-3 pb-2">
6+
{web}
7+
</h1>
8+
<p className="text-center text-emerald-300 md:text-lg text-lg">
9+
hello! my name is {name} and im a {title}. its currently the year {year}
10+
, here's one of my works{" "}
11+
<a
12+
href={link}
13+
target="_blank"
14+
rel="noopener noreferrer"
15+
className="text-emerald-600 underline"
16+
>
17+
click me
18+
</a>
19+
</p>
20+
</>
21+
);
22+
}
23+
export default Introbody;

‎src/components/mainbody.jsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
3+
function Main() {
4+
function clickon() {
5+
const inputvalue = document.getElementById("stitle").value;
6+
if (inputvalue.length == 0) {
7+
alert("please write something");
8+
}
9+
// else(inputvalue == "hey"){
10+
// alert()
11+
// }
12+
else {
13+
document.querySelector("h2").innerHTML = inputvalue;
14+
}
15+
}
16+
17+
return (
18+
<>
19+
<div className="flex items-center justify-center flex-col">
20+
<h2
21+
className="text-xl my-1 mb-3 text-white border p-2 border-rose-500"
22+
id="writetitle"
23+
>
24+
Write Your Title
25+
</h2>
26+
<input
27+
type="text"
28+
name="storytitle"
29+
id="stitle"
30+
className="border-0 outline-0 p-1 rounded"
31+
required
32+
/>
33+
<input
34+
type="button"
35+
value="submit"
36+
className="bg-rose-300 p-1 my-2 rounded active:bg-slate-600 duration-300"
37+
onClick={clickon}
38+
/>
39+
</div>
40+
</>
41+
);
42+
}
43+
export default Main;

‎src/data/Maintest.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
export default [
2-
{
3-
year: "2023",
4-
name: "Amir",
5-
title: "web developer",
6-
link: "https://amirsenpai.github.io/ToDo-list-website-amir"
7-
}
8-
];
2+
{
3+
web: "AmirHossein's Website",
4+
year: "2023",
5+
name: "Amir",
6+
title: "web developer",
7+
link: "https://amirsenpai.github.io/ToDo-list-website-amir",
8+
},
9+
];

‎tailwind.config.cjs

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ export default {
99
tahoma: ["tahoma"],
1010
vazir: ["vazir"],
1111
},
12+
height: {
13+
screen2: ["120vh"],
14+
},
1215
},
1316
},
1417
plugins: [],

0 commit comments

Comments
 (0)