change whole site

ezhang04 · Nov 10, 2023 · 7b473fc · 7b473fc
1 parent 9ad3445
commit 7b473fc
Show file tree

Hide file tree

Showing 23 changed files with 740 additions and 0 deletions.
diff --git a/Comick.png b/Comick.png
diff --git a/Erics_Updated_Resume_2.pdf b/Erics_Updated_Resume_2.pdf
diff --git a/Erics_Updated_Resume_2.png b/Erics_Updated_Resume_2.png
diff --git a/MAL.png b/MAL.png
diff --git a/about.css b/about.css
@@ -0,0 +1,62 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    background-color: #ACC8E5;
+    color: #112A46;
+}
+nav{
+    font-size: 150%;
+    padding-top: 2em;
+}
+ul.nav{
+    margin-top: 1em;
+}
+#navbar-brand{
+    max-width: 20%;
+    max-height: 20%;
+}
+.bg-custom {
+    background-color: #ACC8E5 !important;
+}
+
+@media (max-width: 768px) {
+    .navbar-nav {
+        flex-direction: row !important;
+    }
+
+    .navbar-nav .nav-item {
+        margin-right: 10px;
+        padding: .25em;
+    }
+}
+.about{
+    margin: auto;
+}
+.about_me_p {
+    margin-top: 15%;
+    font-size: 2em;
+    color: #112A46;
+    font-weight: 500;
+    max-height: 100px;
+    text-align: center;
+}
+.interests{
+    text-align: center;
+}
+.dropdown-menu{
+    background-color: #E4E3EF;
+}
+footer{
+    margin-top: 19%;
+}
diff --git a/about.html b/about.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Eric Zhang</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="about.css">
+        <link rel="icon" type="image/x-icon" href="icon.ico" />
+    </head>
+    <body>
+        <nav class="navbar navbar-expand-lg navbar-light bg-custom">
+            <a class="navbar-brand"><img src="herta.gif" width="100" height="100" alt="Logo"></a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="index.html">Home</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="about.hmtl" role="button" aria-haspopup="true" aria-expanded="false">About Me</a>
+                        <div class="dropdown-menu">
+                          <a class="dropdown-item interests" href="about.html#about">Who I Am</a>
+                          <a class="nav-link dropright interests" data-toggle="dropdown" href="about.html" role="button" aria-haspopup="true" aria-expanded="false">My Interests</a>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item interests" href="https://tracker.gg/valorant/profile/riot/Protagonist%237490/overview" target="_blank">Valorant Stats</a>
+                            <a class="dropdown-item interests" href="https://myanimelist.net/animelist/Protagonist_04" target="_blank">Anime List</a>
+                            <a class="dropdown-item interests" href="https://comick.app/user/c5c7ad2c-983f-411a-bbbc-fe54e5c628a7/list"target="_blank">Manga List</a>
+                        </div>
+                      </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="resume.html">Resume</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="projects.html">Projects</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">Contact Me</a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        <section id="about">
+            <p class="about_me_p">Hello! I'm Eric Zhang, an aspiring software developer based in
+                Caldwell, NJ. Currently, I'm pursuing my computer science major at New Jersey Institute of
+                Technology as a sophomore. My focus is on full-stack development and machine
+                learning, two areas that have captured my interest and drive for innovation. I'm eager
+                to expand my knowledge and skills in the world of computer science as I embark on this
+                exciting journey.</p>
+        </section>
+
+    </body>
+    <footer class="text-center text-lg-start">
+        <!-- Copyright -->
+        <div class="text-center p-3">
+            &copy; 2023 Copyright:
+          <a class="text-dark" href="https://ericzhang.us/">Eric Zhang</a>
+        </div>
+        <!-- Copyright -->
+      </footer>
+</html>
diff --git a/battle.png b/battle.png
diff --git a/contact.css b/contact.css
@@ -0,0 +1,85 @@
+#contact-header{
+    font-size: 300%;
+    text-align: center;
+}
+@import url('https://fonts.googleapis.com/css?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+.bg-custom {
+    background-color: #ACC8E5 !important;
+}
+
+@media (max-width: 768px) {
+    .navbar-nav {
+        flex-direction: row !important;
+    }
+
+    .navbar-nav .nav-item {
+        margin-right: 10px;
+        padding: .25em;
+    }
+}
+
+body {
+    background-color: #ACC8E5;
+    color: #112A46;
+}
+nav{
+    font-size: 150%;
+    padding-top: 2em;
+}
+ul.nav{
+    margin-top: 1em;
+}
+#navbar-brand{
+    max-width: 20%;
+    max-height: 20%;
+}
+#contact-info {
+    display: flex;
+    justify-content: center; /* Horizontally center the items */
+    align-items: center; /* Vertically center the items */
+}
+#contact-info div{
+    margin: 10px;
+    text-align: center;
+}
+.social-icons {
+    margin-top: 30px;
+    text-align: center;
+}
+
+.social-icon {
+    width: 40px;
+    height: auto;
+    border-radius: 25%;
+    text-align: center;
+}
+.social-icons a {
+    text-decoration: none;
+    font-size: 15px;
+    margin-right: 15px;
+    color: #112A46;
+    display: inline-block;
+}
+
+
+#contact-info div a{
+    color: black;
+    background-color: transparent;
+    text-decoration: none;
+}
+#contact-info div p{
+    margin-top: 1.05em;
+}
+
diff --git a/contact.html b/contact.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="eng">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Eric Zhang</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+          crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="home.css">
+    <link rel="icon" type="image/x-icon" href="icon.ico" />
+</head>
+<body>
+
+<div class="container-fluid">
+    <div class="row">
+        <nav class="navbar navbar-expand-lg navbar-light bg-custom">
+            <a class="navbar-brand"><img src="herta.gif" width="100" height="100" alt="Logo"></a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="index.html">Home</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="about.hmtl" role="button" aria-haspopup="true" aria-expanded="false">About Me</a>
+                        <div class="dropdown-menu">
+                          <a class="dropdown-item interests" href="about.html#about">Who I Am</a>
+                          <a class="nav-link dropright interests" data-toggle="dropdown" href="about.html" role="button" aria-haspopup="true" aria-expanded="false">My Interests</a>
+                          <div class="dropdown-menu">
+                            <a class="dropdown-item interests" href="https://tracker.gg/valorant/profile/riot/Protagonist%237490/overview" target="_blank">Valorant Stats</a>
+                            <a class="dropdown-item interests" href="https://myanimelist.net/animelist/Protagonist_04" target="_blank">Anime List</a>
+                            <a class="dropdown-item interests" href="https://comick.app/user/c5c7ad2c-983f-411a-bbbc-fe54e5c628a7/list"target="_blank">Manga List</a>
+                        </div>
+                      </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="resume.html">Resume</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="projects.html">Projects</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="contact.html">Contact Me</a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        <form>
+            <div class="form-group">
+                <label for="firstname">First Name:</label>
+                <input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" required>
+            </div>
+            <div class="form-group">
+                <label for="lastname">Last Name:</label>
+                <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email:</label>
+                <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
+            </div>
+            <button type="button" onclick="validateAndSubmit()" style="margin-top: .5em; margin-left: .5em; background-color:#ACC8E5; border: none; background: none; color: black;">Submit</button>
+        </form>        
+</div>
+<!--------------Contacts------------------>
+<div id="contact" style="display: flex; justify-content: center; align-items: center; margin-top: 1em;">
+    <div class="container reveal fade-left">
+        <div class="row">
+            <div class="contact" style="display: flex; flex-direction: column; align-items: center;">
+                <p>ericzhang200@gmail.com</p>
+                <p>(646) 866-1593</p>
+                <div class="social-icons" style="display: flex; align-items: center;">
+                    <a href="https://github.com/ezhang04" target="_blank"><img src="github-logo-24.png" class="social-icon" style="margin-right: 10px;"></a>
+                    <a href="https://www.linkedin.com/in/eric-zhang-868339251/" target="_blank"><img src="linkedin-logo-24.png" class="social-icon" style="margin-right: 10px;"></a>
+                    <img src="discord-alt-logo-24.png" onclick="copyDiscordText()" class="social-icon">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    function copyDiscordText() {
+            navigator.clipboard.writeText
+                ("ZhangZhang#1761");
+            alert("Copied Discord Username");
+        }
+
+    function validateAndSubmit() {
+        var firstName = document.getElementById("firstname").value;
+        var lastName = document.getElementById("lastname").value;
+        var email = document.getElementById("email").value;
+
+        if (firstName.trim() === "" || lastName.trim() === "" || email.trim() === "") {
+            alert("Please fill in all required fields.");
+            return;
+        }
+        alert("Form submitted successfully!");
+    }
+
+</script>
+ <footer class="footer page-footer font-small ">
+     <div class="container">
+        <div class="row">
+            <!-- Copyright -->
+            <div class="text-center p-3">
+                &copy; 2023 Copyright:
+                <a class="text-dark" href="https://ericzhang.us/">Eric Zhang</a>
+            </div>
+            <!-- Copyright -->
+        </div>
+     </div>
+  </footer>
+</div>
+
+
+    <!-- Javascript Bundle with Popper -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+        crossorigin="anonymous">
+</script>
+
+</body>
+</html>
diff --git a/discord-alt-logo-24.png b/discord-alt-logo-24.png
diff --git a/github-logo-24.png b/github-logo-24.png
diff --git a/herta.gif b/herta.gif