Skip to content

Add files via upload #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
darausz wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add files via upload #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 119 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daraus Zhang</title>
<link rel="stylesheet" href="websiteCSS.css">
</head>
<body>
<main>
<div class="navBar">
<a class="navItem1" href="#home">Home</a>
<a class="navItem2" href="#aboutMe">About Me</a>
<a class="navItem3" href="#interests">Interests</a>
<a class="navItem4" href="#contacts">Contacts</a>
</div>
<h1 id = "home">
Daraus Zhang<br><br>
<img src = "self.jpeg" width=300px; height=340px>
<p style="font-size:50%";>
Junior Computer Science Major
</p>
</h1>
<h2 id = "aboutMe" class = "subhead1"><br>About Me</h2>
<div class = "aboutMeP">
<p>
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:
</p>
</div>
<div class = aboutMeSec2 >
<div class = aboutMeItem1>
<p class = "aboutMeSec2p">
Sushi Chef<br><br>
<span>
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. <br><br><br>
</span>
</p>
</div>
<div class = aboutMeItem2>
<img src = "sushi.jpeg">
</div>
<div class = aboutMeItem3>
<img src = "valorant.jpg">
</div>
<div class = aboutMeItem4>
<p class = "aboutMeSec2p">
Valorant Team Captain<br><br>
<span>
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. <br><br>
</span>
</p>
</div>
</div>
<h2 id = "interests" class = "subhead2">Interests</h2>
<div class = grid2>
<div class = item1>Coding
<p>
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:<br><br>
C++, Python, HTML, CSS, R
</p>
</div>
<div class = item2>Music
<p>
Music is a must have in life!<br>
Here are some of my favorite musicians:<br>
</p>
<p>Joker Xue<br>
<span id = "artist1Desc" style="display:none;">
Joker Xue is a chinese pop singer and songwriter that combines classic pop with acoustic guitar and R&B beats.
He is one of the most popular Mandopop artists on Spotify.<br>
</span>
<button id="artist1" >Who is he?</button>
</p>
<p>
Weston Estate<br>
<span id = "artist2Desc" style="display:none;">
Westone Estate is an indie boy band with 5 people, 3 of whom are singers.
They write songs that are chill and use their powerful voices together to convey strong emotions.<br>
</span>
<button id="artist2" >Who are they?</button>
</p>
</div>
<div class = item3>Games
<p>
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.
</p>
</div>
</div>
<h2 id = "contacts" class = "subhead3">Contacts</h2>
<div class="flex">
<div>Email: <br>
<a href="mailto: darauszhang@gmail.com">Send me a message!</a>
</div>
<div>LinkedIn: <br>
<a href="https://www.linkedin.com/in/daraus-zhang-98b3b9240/">Visit my LinkedIn!</a>
</div>
<div>Github: <br>
<a href="https://github.com/dareaus">Visit my Github!</a>
</div>
</div>
<div class="end">
Hope you enjoyed reading through my website!
</div>
<script src="javascript.js"></script>
</main>
</body>
</html>
27 changes: 27 additions & 0 deletions javascript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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?";
}
}
Binary file added self.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sushi.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added valorant.JPG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
246 changes: 246 additions & 0 deletions websiteCSS.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}