Merge pull request #179 from matthewkwong/developer

add music page
matthewkwong · Sep 18, 2023 · 6655c9b · 6655c9b
2 parents 2c6197f + 73a7321
commit 6655c9b
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 9 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/music/.DS_Store b/img/music/.DS_Store
diff --git a/img/music/frank-ocean-blond.mp4 b/img/music/frank-ocean-blond.mp4
diff --git a/img/music/laufey-everything-I-know-about-love.mp4 b/img/music/laufey-everything-I-know-about-love.mp4
diff --git a/img/music/louis-the-child.mp4 b/img/music/louis-the-child.mp4
diff --git a/img/music/madeon-adventure.mp4 b/img/music/madeon-adventure.mp4
diff --git a/music.css b/music.css
@@ -0,0 +1,31 @@
+a{
+    text-decoration: none;
+    color: #346DFF;
+}
+
+a:visited{
+    color: #346DFF;
+}
+
+.callout{
+    background-color: #346DFF;
+}
+
+#music{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+#music video{
+    max-width: 360px;
+    max-height: 360px;
+    height: 100%;
+    width: 100%;
+
+    /* height: 360px;
+    width: 360px; */
+}
+
diff --git a/music.html b/music.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Matthew Kwong | Music Animations</title>
+        <meta property="og:image" content="img/meta/music.jpg">
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="case-study.css">
+        <link rel="stylesheet" href="music.css">
+        <link rel="stylesheet" href="nav.css">
+        <link rel="stylesheet" href="footer.css">
+        <link rel="shortcut icon" href="img/nav/favicon.ico" type="image/x-icon"> 
+        <!-- Animated On Scroll Library -->
+        <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+        <!-- JQuery -->
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> 
+    </head>
+
+    <body>
+        <nav>
+            <!-- MK Logo -->
+            <a href = "index.html">
+                <img src = "img/nav/logo.png" height = "60" width = "60" id = "logo">
+            </a>
+
+            <!-- Nav links -->
+            <ul id = "nav-links">
+
+            <!-- Checkbox hack for mobile -->
+            <input type = "checkbox" id = "checkbox_toggle"/>
+            <label for = "checkbox_toggle" id = "hamburger">&#9776;</label>
+            <label for = "checkbox_toggle" id = "close">&#215;</label>
+
+            <!-- Nav menues -->
+            <div id = "menu-wrapper">
+                <div id = "menu">
+                    <a href = "index.html">
+                        <img src = "img/nav/logo-white.png" height = "60" width = "60" id = "logo-white">
+                    </a>
+                    <li><a href="index.html" class="middle">Work</a></li>
+                    <li><a href="about.html" class = "active-nav middle" >About</a></li>
+                    <li><a href="https://drive.google.com/file/d/1FhDiI5sC_muCGADNnV9m1qXDy_I9njyE/view" class="middle" target="_blank">Resume</a></li>
+                </div>
+            </div>
+        </ul>
+        </nav>
+
+        <div class = "content-wrapper">
+
+            <!-- Overview -->
+            <section data-aos="fade-up" data-aos-mirror="true" data-aos-anchor-placement="top-center" data-aos-offset="-200">
+                <h2>Overview</h2>
+
+                <div>
+                    <p>
+                        A dream of mine is to work in the music industry and design unique experiences that engage audiences to artists.
+                    </p>                
+                </div>
+            </section>
+
+            <section data-aos="fade-up" data-aos-mirror="true" data-aos-anchor-placement="top-center" data-aos-offset="-200" id = "music">
+
+                <video autoplay muted loop>
+                    <source src="img/music/madeon-adventure.mp4" type="video/mp4">
+                    Your browser does not support videos
+                </video>
+
+                <video autoplay muted loop>
+                    <source src="img/music/louis-the-child.mp4" type="video/mp4">
+                    Your browser does not support videos
+                </video>
+
+
+                <video autoplay muted loop>
+                    <source src="img/music/frank-ocean-blond.mp4" type="video/mp4">
+                    Your browser does not support videos
+                </video>
+
+                <video autoplay muted loop>
+                    <source src="img/music/laufey-everything-I-know-about-love.mp4" type="video/mp4">
+                    Your browser does not support videos
+                </video>
+
+
+            </section>
+        </div>
+
+        <footer>
+            <div id = "footer-content">
+              <p>Let's connect!</p>
+
+              <ul>
+                <li>
+                  <a href="mailto:&#109;&#097;&#116;&#116;&#104;&#101;&#119;&#114;&#107;&#119;&#111;&#110;&#103;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;" target="_blank">
+                  <img src = "img/footer/white/email.svg" alt = "Email" height = "20" width = "20">
+                  </a>
+                </li>
+
+                <li>
+                  <a href = "https://www.linkedin.com/in/matthewrkwong/" target="_blank">
+                    <img src = "img/footer/white/linkedin.svg" alt = "LinkedIn" height = "20" width = "20">
+                  </a> 
+                </li>
+
+                <li>
+                  <a href = "https://www.instagram.com/kwongenterprises/?hl=en" target="_blank">
+                    <img src = "img/footer/white/instagram.svg" alt = "Instagram" height = "20" width = "20">
+                  </a>
+                </li>
+
+                <li>
+                  <a href=  "https://www.etsy.com/shop/KwongEnterprises" target="_blank">
+                    <img src = "img/footer/white/etsy.svg" alt = "Etsy" height = "20" width = "20">
+                  </a>
+                </li>
+              </ul>
+
+              <div id = "line"></div>      
+
+              <p>Designed + Developed by Matthew Kwong • 2022</p>
+            </div>
+        </footer>
+
+        <script src="script.js"></script>
+        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+        <script>
+            AOS.init();
+
+
+        </script>
+    </body>
+</html>
diff --git a/style.css b/style.css
@@ -332,15 +332,6 @@ a:visited{
     #case-studies .case-study-card{
         margin-bottom: 24px;
     }
-
-    /* Mobile profile pic */
-
-
-    /* #video-profile-mobile{
-        max-width: 100%;
-        height: auto;
-    } */
-
 
 
     #heading-wrapper, #experience-values, #hobbies-polaroids{