JjayTTP · mariocarbache · Apr 19, 2023 · Apr 19, 2023 · Apr 20, 2023 · Apr 20, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/Luxury Avenue.png b/assets/Luxury Avenue.png
diff --git a/assets/NewYorkAtNight.jpeg b/assets/NewYorkAtNight.jpeg
diff --git a/assets/c++.png b/assets/c++.png
diff --git a/assets/csharp.png b/assets/csharp.png
diff --git a/assets/css.png b/assets/css.png
diff --git a/assets/github.svg b/assets/github.svg
diff --git a/assets/google.svg b/assets/google.svg
diff --git a/assets/html.png b/assets/html.png
diff --git a/assets/java.png b/assets/java.png
diff --git a/assets/javascript.png b/assets/javascript.png
diff --git a/assets/kotlin.png b/assets/kotlin.png
diff --git a/assets/linkedin.svg b/assets/linkedin.svg
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/me.jpg b/assets/me.jpg
diff --git a/assets/mysql.png b/assets/mysql.png
diff --git a/assets/php.png b/assets/php.png
diff --git a/assets/swift.png b/assets/swift.png
diff --git a/index.html b/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+    <title>Mario Carbache</title>
+
+    <!-- Logo -->
+    <link href="assets/logo.png" rel="icon">
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i|Playfair+Display:400,400i,500,500i,600,600i,700,700i,900,900i" rel="stylesheet">
+
+    <!-- Main CSS File -->
+    <link href="style.css" rel="stylesheet">
+
+    <!-- Main JavaScript File-->
+    <script src="main.js"></script>
+  </head>
+  <body>
+    <!--Sticky Header-->
+    <header id="header">
+        <div>
+
+          <a href="index.html" class="logo"><img src="assets/logo.png" alt=""></a>
+          <!--Navbar -->
+          <nav id="navbar" class="navbar">
+            <ul>
+              <li><a href="#home">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#languages">Skills</a></li>
+              <li><a href="#portfolio">Projects</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </nav>
+
+        </div>
+      </header>
+
+      <!--Home-->
+      <div id="home" class="home">
+          <div class="home-content">
+            <h1>Mario Carbache, CS Student, Aspiring Software Engineer</h1>
+
+            <ul class="list-social">
+              <li><a href="https://github.com/mariocarbache"><img src="assets/github.svg" class="icon"></a></li>
+              <li><a href="https://www.linkedin.com/in/mario-carbache/"><img src="assets/linkedin.svg" class="icon"></a></li>
+              <li><a href="mailto:mariocarbache@gmail.com"><img src="assets/google.svg" class="icon"></a></li>
+            </ul>
+          </div>
+      </div>
+
+
+      <main>
+        <!--About-->
+        <div id="about">
+                  <div class="div-img-bg">
+                    <div class="about-img">
+                      <img src="assets/me.jpg" alt="me">
+                    </div>
+                  </div>
+                  <div class="about-descr">
+
+                    <p class="p-heading">It's me, Mario!</p>
+                    <p class="separator">An ex sous-chef who after 8 years of experience in the restaurant industry decided to pursue his dream in tech.</p>
+                    <p class="separator">From a young age, I was always fascinated by the way computers and phones changed millions of people’s lives. I grew curious about how these devices worked and wanted to know what went on behind the scenes.</p>
+                    <p class="separator">Fast forward to today, I'm now following up on that aspiration. Upon obtaining my Associate Degree in Programming and Software Development at LaGuardia Community College, I transfered to John Jay College to pursue my Bachelor in Computer Science.</p>
+                    <p class="separator">I look forward to continue learning and growing as a software engineer and hope to one day contribute to this growing field.</p>
+
+                  </div>
+          </div>
+
+          <!--Languages-->
+      <div id="languages">
+        <h2>Languages I'm familiar with</h2>
+        <div>
+            <img src="assets/c++.png" class="icons">
+            <img src="assets/csharp.png" class="icons">
+            <img src="assets/java.png" class="icons">
+            <img src="assets/html.png" class="icons">
+            <img src="assets/css.png" class="icons">
+        </div>
+        <div>
+            <img src="assets/javascript.png" class="icons">
+            <img src="assets/php.png" class="icons">
+            <img src="assets/mysql.png" class="icons">
+            <img src="assets/swift.png" class="icons">
+            <img src="assets/kotlin.png" class="icons">
+        </div>
+      </div>
+
+      <!--Projects-->
+      <div id="portfolio">
+        <h2>Projects</h2>
+        <div class="example">
+            <a href="https://github.com/mariocarbache/Luxury-avenue"><img src="assets/Luxury Avenue.png" height="300" width="350"></a>
+            <a href="https://github.com/mariocarbache/Luxury-avenue"><div class="content">
+                <div>A car-browsing website that allows users to register new accounts, login/logout, and save their
+                    favorite cars using a client-server model.</div>
+            </div></a>
+        </div>
+      </div>
+
+      <!--Contacts-->
+      <div id="contact">
+        <h2>WHERE TO FIND ME</h2>
+        <ul class="contact-details">
+            <div class="socials-media">
+                <ul>
+                        <li class="contact center"><h3>follow</h3><br><a href="https://github.com/mariocarbache"><img src="assets/github.svg" width="30px" height="30px"></a></li>
+                        <li class="contact"><h3>connect</h3><br><a href="https://www.linkedin.com/in/mario-carbache/"><img src="assets/linkedin.svg" width="30px" height="30px"></a></li>
+                        <li class="contact"><h3>contact</h3><br><a href="mailto:mariocarbache@gmail.com"><img src="assets/google.svg" width="30px" height="30px"></a></li>
+                </ul>
+            </div>
+        </ul>
+      </div>
+      </main>
+  </body>
diff --git a/main.js b/main.js
@@ -0,0 +1,9 @@
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 15 || document.documentElement.scrollTop > 15) {
+    document.getElementById("header").style.top = "0";
+  } else {
+    document.getElementById("header").style.top = "-70px";
+  }
+}