JjayTTP · ik-izz · Nov 15, 2021 · Nov 15, 2021 · Nov 16, 2021 · Nov 16, 2021
diff --git a/.vs/2022TTP-Application-Project/v16/.suo b/.vs/2022TTP-Application-Project/v16/.suo
diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
diff --git a/About.html b/About.html
@@ -0,0 +1,51 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="Style.css" />
+
+
+    <title>About</title>
+
+</head>
+
+<body id="about">
+    <header>
+        <nav>
+            <a href="Main.html">Home</a>
+            <a href="About.html">About</a>
+            <a id="skill-button" href="Skills.html">Skills</a>
+            <a href="Contact.html">Contact</a>
+        </nav>
+    </header>
+
+    <main class="about">
+        <h1>About Me:</h1>
+
+        <section>
+            <img src="Images\profile.jpg" width="350" height="500" />
+            <div>
+                <p>
+                    Hi, my name is Israel Klein. Some of my common nicknames are Izzy or Izz.
+                    I'm currently an upper sophomore at John Jay College of Criminal Justice. 
+                    I'm majoring in Computer Science &amp; Information Security and minoring in
+                    Law as well. I have a passion for tech, I love the challenge. Well, getting 
+                    errors or the wrong output is never fun but that is part of the learning 
+                    process, it is how we get better at what we do. I am only getting started
+                    with this site I will keep improving it as I learn new features and techniques
+                </p>
+                <div id="resume">
+                    <a href="https://docs.google.com/document/d/10Fk1hxxFQ3KP0pfwfaVcdLwh_7tFx7-V9dBEsOe43cs/edit?usp=sharing" target="_blank">
+                    Resume</a> 
+                </div>
+            </div>
+        </section>
+
+
+
+    </main>
+    <script src=" script.js"></script>
+</body>
+</html>
+
diff --git a/Contact.html b/Contact.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="Style.css" />
+
+    <title>Contact</title>
+
+</head>
+
+<body>
+    <nav>
+        <a href="Main.html">Home</a>
+        <a href="About.html">About</a>
+        <a id="skill-button" href="Skills.html">Skills</a>
+        <a href="Contact.html">Contact</a>
+    </nav>
+
+    <main class=" contact">
+        <div class=" contact-pic">
+                <a href=" https://github.com/ik-izz" target=" blank">
+                    <img src=" Images/github.png" width="150" height="150" />
+                </a>
+                <a href="https://www.linkedin.com/in/israel-klein-251452202" target=" blank">
+                    <img src=" Images/linkedin.png" width="150" height="150" />
+                </a>
+                <a href="mailto:[email protected]" target="_blank">
+                    <img src=" Images/Gmail.png" width="150" height="150" />
+                </a>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/Images/C++.png b/Images/C++.png
diff --git a/Images/Git.png b/Images/Git.png
diff --git a/Images/Gmail.png b/Images/Gmail.png
diff --git a/Images/bg2.jpg b/Images/bg2.jpg
diff --git a/Images/css.png b/Images/css.png
diff --git a/Images/github.png b/Images/github.png
diff --git a/Images/html5.png b/Images/html5.png
diff --git a/Images/javascript.png b/Images/javascript.png
diff --git a/Images/kitten.jpg b/Images/kitten.jpg
diff --git a/Images/linkedin.png b/Images/linkedin.png
diff --git a/Images/profile.jpg b/Images/profile.jpg
diff --git a/Images/tech.gif b/Images/tech.gif
diff --git a/Images/tech2.gif b/Images/tech2.gif
diff --git a/Images/tech3.gif b/Images/tech3.gif
diff --git a/Images/tech_bg.jpg b/Images/tech_bg.jpg
diff --git a/Images/techcat.jpg b/Images/techcat.jpg
diff --git a/Images/tiger.jpg b/Images/tiger.jpg
diff --git a/Main.html b/Main.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="Style.css" />
+
+
+    <title>Home</title>
+
+</head>
+
+<body class=" home">
+    <nav>
+        <a href="Main.html">Home</a>
+        <a href="About.html">About</a>
+        <a id="skill-button" href="Skills.html">Skills</a>
+        <a href="Contact.html">Contact</a>
+    </nav>
+
+    <main class="main">
+        <h1 class=" head">Welcome to Israel's Web Portfolio</h1>
+        <section class=" content">
+            <div id=" image"><img src=" Images/techcat.jpg" height="400" width=" 575" /></div>
+            <div id=" text">
+                <p class="paragraph">
+                    Welcome to my website. First I would like to thank my assistant (pic on the left)
+                    for helping me code this website. Ok, well that isn't my cat but I do love cats
+                    and I have some cute kittens myself. Click the button below to change the color of this text. 
+                    I do hope you enjoy my website, definitely reach out with any questions/comments.
+                 </p>
+                <button class="btn" >change text color</button>
+                <button class="btnH" >change header color</button>
+                <button class="btnH2" >click for surprise</button>
+            </div>
+
+        </section>
+
+    </main>
+    <script src=" script.js"></script>
+
+</body>
+</html>
+
+
diff --git a/Skills.html b/Skills.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="Style.css" />
+
+
+    <title>Skills</title>
+
+</head>
+
+<body class=" skill-body">
+    <nav>
+        <a href="Main.html">Home</a>
+        <a href="About.html">About</a>
+        <a id ="skill-button2" href="Skills.html">Skills</a>
+        <a href="Contact.html">Contact</a>
+    </nav>
+
+    <main class="skills">
+
+        <div id="grid">
+            <div id=" git">
+                <a><img src=" Images/Git.png" width="150" height="150" /></a><p>
+                    <a class=" skill-tag" href="https://en.wikipedia.org/wiki/Git" target="_blank">Git</a>
+                </p>
+            </div>
+
+            <div id=" javascript">
+                <a>
+                    <img src="Images/javascript.png" width="150" height="150" />
+                </a>
+                <p><a class=" skill-tag" href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a></p>
+            </div>
+
+            <div id=" c++">
+                <a>
+                    <img src=" Images/c++.png" width="150" height="150" />
+                </a>
+                <p><a class=" skill-tag" href="https://en.wikipedia.org/wiki/C%2B%2B" target="_blank">C++</a></p>
+            </div>
+
+            <div id=" html">
+                <a>
+                    <img src=" Images/html5.png" width="150" height="150" />
+                </a>
+                <p><a class=" skill-tag" href="https://en.wikipedia.org/wiki/HTML5" target="_blank">HTML5</a></p>
+            </div>
+
+            <div id=" github">
+                <a>
+                    <img src=" Images/github.png" width="150" height="150" />
+                </a>
+                <p><a class=" skill-tag" href="https://en.wikipedia.org/wiki/GitHub" target="_blank">GitHub</a></p>
+            </div>
+
+            <div id=" css">
+                <a>
+                    <img src=" Images/css.png" width="150" height="150" />
+                </a>
+                <p><a class=" skill-tag" href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a></p>
+            </div>
+
+        </div>
+    </main>
+
+</body>
+</html>
diff --git a/Style.css b/Style.css
@@ -0,0 +1,178 @@
+button{
+    border: 2px solid grey;
+    padding: 3px;
+    background-color: mediumaquamarine;
+    }
+button:hover{
+    color:white;
+}
+button:active{
+    color:black;
+}
+.content p {
+    color: white;
+    font-family: Arial;
+    padding-top: 80px;
+    font-size: 20px;
+}
+.about h1{
+     display:flex;
+     justify-content:center;
+ }
+nav a {
+    text-decoration: none;
+    background-color: white;
+    color: black;
+    font-weight: bold;
+    border: 2px solid black;
+    padding: 4px;
+    text-transform: uppercase;
+    box-shadow: 3px 3px 3px lightgray;
+}
+nav a:active{
+    color:red;
+}
+nav {
+    justify-content: center;
+    display: flex;
+    height: 33px;
+}
+nav a:hover {
+        background-color: lightgray;
+        margin:2px;
+    }
+.main h1 {
+    text-align: center;
+}
+.about {
+    background-image: url(Images/bg2.jpg);
+    background-size: 100% 100%;
+    font-weight: bold;
+    font-size: 20px;
+    color:maroon;
+}
+.about p {
+        background-color: rgba(105, 105, 105, 0.55);
+        width: 440px;
+        text-align:center;
+        float:right;
+
+    }
+.about p:hover{
+    background-color:white;
+}
+.about img {
+    float: left;
+    box-shadow: 4px 4px 4px lightgray;
+    margin:10px;
+}
+#resume > a:hover {
+    padding: 4px;
+    background-color:white;
+    color: black;
+}
+#resume {
+    display: flex;
+    justify-content: center;
+    padding-left: 30px
+}
+#resume > a {
+        color: maroon;
+        background-color: rgba(255,255,255,0.5);
+}
+.about section {
+   display:flex;
+   justify-content:center;
+}
+.about div {
+    width: 500px;
+}
+.about a {
+
+    text-transform:uppercase;
+    padding: 2px;
+    border: 2px solid black;
+    background-color: white;
+    text-decoration: none;
+    color: black;
+    box-shadow: 3px 3px 3px lightgray;
+}
+#grid {
+    margin-top: 50px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+    grid-gap: 20px;
+    justify-content: space-evenly;
+}
+    #grid div {
+        margin: 2px;
+        border: 2px solid black;
+        padding: 4px;
+        text-align: center;
+        box-shadow: 3px 3px 3px lightgray;
+        background-color: rgba(255,255,255,0.75);
+    }
+
+#grid div:hover {
+    background-color: dimgray;
+}
+.skill-tag {
+    text-decoration: none;
+    font-weight: bold;
+    color: black;
+    border: 2px solid black;
+    padding: 2px;
+    background-color: white;
+}
+.skill-tag:hover{
+    background-color:black;
+    color:white;
+}
+.skill-body {
+    background-image: url(Images/tech.gif)
+}
+#skill-button{
+    background-image: url(Images/tech3.gif);
+    color:white;
+}
+#skill-button2 {
+    background-image: url(Images/tech2.gif);
+    color: white;
+}
+.content {
+    display: grid;
+    grid-template-columns: 50% 40%;
+    justify-content:center;
+    }
+.home{
+    background-image: url(Images/tech_bg.jpg);
+    background-size:100% 150%;
+}
+.main h1 {
+    color: rgb(26, 173, 124);
+    background-color: rgba(255,255,255,0.35);
+}
+.contact-pic{
+    display:flex;
+    margin-top: 20px;
+    height: 530px;
+    justify-content:center;
+   background-image: url(Images/kitten.jpg);
+   background-size:50% 100%;
+    align-items:center;
+    justify-content:space-evenly
+}
+    .contact-pic a {
+        border: 2px solid black;
+        padding: 20px;
+        background-color: rgba(255,255,255,0.75);
+        box-shadow: 3px 3px 3px lightgray;
+    }
+        .contact-pic a:hover {
+            background-color: darkgrey;
+            /*{
+    font-size: 100px;
+    color: rgba(150, 0, 0, 0.75); /*the last parameter controls transparency ranging 0-1
+    text-align: center;
+}*/