diff --git a/index.html b/index.html new file mode 100644 index 0000000..5c1d8aa --- /dev/null +++ b/index.html @@ -0,0 +1,119 @@ + + + + + + Daraus Zhang + + + +
+
+ Home + About Me + Interests + Contacts +
+

+ Daraus Zhang

+ +

+ Junior Computer Science Major +

+

+


About Me

+
+

+ I am Daraus Zhang, a junior at John Jay College studying computer science. + I enjoy coding and have been tinkering with computers since middle school. + I am proficient with C++ and have some experience with Python, HTML, CSS, and R. + I work part-time at a sushi place and lead our school's Valorant team. + In my free time I enjoy listening to music and hanging out with friends. + Here are my jobs below: +

+
+
+
+

+ Sushi Chef

+ + On the weekends, I help out at a sushi place in Long Island. + I do a lot of prep work and make sushi rolls or help out in the kitchen. + I also restock food and clean up at the end of the shift.


+ +

+
+
+ +
+
+ +
+
+

+ Valorant Team Captain

+ + I lead our school's Valorant team. We have a tournament every semester with a game each Tuesday and practice sessions on Thursdays. + I manage the team and set up scrims against other schools.

+ +

+
+
+

Interests

+
+
Coding +

+ Coding is something I have a lot of fun with. + Many times, there are things that don't work or things that I don't know. + When that happens, it allows me to use my problem solving skills and it feels great when I fix it. + Here are some of the languages that I know:

+ C++, Python, HTML, CSS, R +

+
+
Music +

+ Music is a must have in life!
+ Here are some of my favorite musicians:
+

+

Joker Xue
+ + +

+

+ Weston Estate
+ + +

+
+
Games +

+ Video games are something I greatly enjoy doing with friends. Some of the games I play are League of Legends and Valorant. + My favorite games are the ones from FromSoftware, who made Elden Ring and Sekiro. +

+
+
+

Contacts

+
+
Email:
+ Send me a message! +
+
LinkedIn:
+ Visit my LinkedIn! +
+
Github:
+ Visit my Github! +
+
+
+ Hope you enjoyed reading through my website! +
+ +
+ + \ No newline at end of file diff --git a/javascript.js b/javascript.js new file mode 100644 index 0000000..8f4f4d2 --- /dev/null +++ b/javascript.js @@ -0,0 +1,27 @@ +document.getElementById("artist1").addEventListener("click", showMore1); + function showMore1() { + let a1Display = document.getElementById("artist1Desc").style.display; + let button = document.getElementById("artist1"); + if (a1Display == "none") { + document.getElementById("artist1Desc").style.display = "inline"; + button.innerHTML = "Thanks, I got it"; + } + else { + document.getElementById("artist1Desc").style.display = "none"; + button.innerHTML = "Who is he again?"; + } + } + +document.getElementById("artist2").addEventListener("click", showMore2); + function showMore2() { + let a2Display = document.getElementById("artist2Desc").style.display; + let button = document.getElementById("artist2"); + if (a2Display == "none") { + document.getElementById("artist2Desc").style.display = "inline"; + button.innerHTML = "Thanks, I got it"; + } + else { + document.getElementById("artist2Desc").style.display = "none"; + button.innerHTML = "Who are they again?"; + } + } \ No newline at end of file diff --git a/self.jpeg b/self.jpeg new file mode 100644 index 0000000..f9ebd76 Binary files /dev/null and b/self.jpeg differ diff --git a/sushi.jpeg b/sushi.jpeg new file mode 100644 index 0000000..e99bea1 Binary files /dev/null and b/sushi.jpeg differ diff --git a/valorant.JPG b/valorant.JPG new file mode 100644 index 0000000..acf625b Binary files /dev/null and b/valorant.JPG differ diff --git a/websiteCSS.css b/websiteCSS.css new file mode 100644 index 0000000..8671966 --- /dev/null +++ b/websiteCSS.css @@ -0,0 +1,246 @@ +.navBar{ + display:grid; + align-items: right; + position:fixed; + top:0; + width:100%; + background-color: transparent; + grid-template-columns: 9% auto auto 9% 9% 9%; +} + +.navBar a{ + text-align: center; + text-decoration: none; + padding-top: 7px; + padding-bottom: 7px; + margin:0; + border: 1px solid red; + border-style: solid solid solid solid; + background-color: white; + color:black; + font-size:120%; +} + +.navBar a:hover{ + background-color: red; + color: white; +} + +.navItem1{ + grid-column-start: 1; + grid-column-end: 2; +} +.navItem2{ + grid-column-start: 4; + grid-column-end: 5; +} + +.navItem3{ + grid-column-start: 5; + grid-column-end: 6; +} + +.navItem4{ + grid-column-start: 6; + grid-column-end: 7; +} + +body { + margin:0; +} + +h1 { + text-align: center; + width:auto; + color:blue; + background-color:aqua; + font-size:400%; + width: 100%; + border-top: 170px solid aqua; + border-bottom: 200px solid aqua; + padding-bottom: 100px; + margin:0; +} + +h2 { + text-align:center; + font-size:300%; +} + +.subhead1 { + color:red; + background-color: yellow; + margin:0; +} + +.subhead2 { + padding-top: 50px; + padding-bottom:100px; + color:deeppink; + margin:0; + background-color: aquamarine; + font-family:'Franklin Gothic Medium'; +} + +.subhead3 { + padding-top:50px; + color:rgb(148, 40, 40); + background-color: rgb(16, 226, 33); + margin:0; + font-family:Cambria; +} +.aboutMeP { + padding-bottom: 100px; + border-top:100px solid yellow; + width: 100%; + margin:auto; + background-color: yellow; +} + +.aboutMeP p { + text-align:justify; + font-family: 'Trebuchet MS'; + color: green; + font-size: 200%; + width: 30%; + margin: auto; +} + +.aboutMeSec2 { + display:grid; + column-gap: 0px; + grid-template-columns: 25% 25% 25% 25% ; + grid-template-rows: 500px; + background-color: brown; +} + +.aboutMeSec2p{ + text-align: center; + font-size: 170%; + font-family: Arial; + color: purple; + background-color: darksalmon; +} + +.aboutMeSec2p span{ + display:block; + text-align: justify; + font-size: 90%; + color:brown; + margin: 20px 20px 20px 20px; + +} + +.aboutMeSec2 div img { + width: 100%; + height: 100%; +} + +.aboutMeItem1 { + grid-column-start: 2; + grid-column-end: 3; + background-color: darksalmon; +} + +.aboutMeItem2 { + grid-column-start: 3; + grid-column-end: 4; +} + +.aboutMeItem3 { + grid-column-start: 2; + grid-column-end: 3; +} + +.aboutMeItem4 { + grid-column-start: 3; + grid-column-end: 4; + background-color: darksalmon; +} + +.grid2 { + display:grid; + column-gap: 10%; + grid-template-columns: 75px auto auto auto 75px; + grid-template-rows: auto; + background-color: aquamarine; + padding-bottom: 150px;; + font-family:'Courier New'; + color:indigo +} + +.grid2 .item1 { + grid-column-start: 2; + grid-column-end: 3; + text-align: center; + font-size: 200%; + +} + +.grid2 .item2 { + grid-column-start: 3; + grid-column-end: 4; + text-align: center; + font-size: 200%; +} + +.grid2 .item3 { + grid-column-start: 4; + grid-column-end: 5; + text-align: center; + font-size: 200%; +} + +.grid2 div p{ + font-size:80%; + text-align: justify; +} + +.grid2 div p button { + font-size:80%; + color:indigo; + border: 2px solid rgb(24, 221, 221); + background-color:rgb(26, 240, 240); +} + +.grid2 div p button:hover { + background-color: rgb(24, 221, 221); +} + + +.flex{ + display:flex; + flex-direction:row; + padding-top:150px; + padding-bottom:300px; + justify-content:space-evenly; + align-items: center; + text-align: center; + background-color: rgb(16, 226, 33); +} + +.flex div { + font-size: 230%; + text-align:justify; + color:rgb(148, 40, 40); +} + +.flex div a { + text-decoration: none; + color:rgb(148, 40, 40); + border: 2px solid rgb(44, 180, 44); + background-color: rgb(47, 202, 47); +} + +.flex div a:hover { + background-color:rgb(44, 180, 44); +} + +.end { + padding-bottom:300px; + font-size:230%; + font-family:Cambria; + text-align: center; + background-color: rgb(16, 226, 33); + color:rgb(148, 40, 40); +} \ No newline at end of file