finishing touches

MorpheusZI · Sep 24, 2023 · 5d9d577 · 5d9d577
commit 5d9d577
Show file tree

Hide file tree

Showing 46 changed files with 753 additions and 0 deletions.
diff --git a/amogus.js b/amogus.js
@@ -0,0 +1,15 @@
+const hamburg = document.querySelector(".burga");
+const nav = document.querySelector(".sidebar");
+const acc = document.querySelector(".acc");
+hamburg.addEventListener("click", () => {
+  const isOpened = hamburg.getAttribute("aria-expanded");
+  if (isOpened === "false") {
+    hamburg.setAttribute("aria-expanded", "true");
+    nav.classList.toggle("open");
+    acc.classList.toggle("acpen");
+  } else {
+    acc.classList.remove("acpen");
+    nav.classList.remove("open");
+    hamburg.setAttribute("aria-expanded", "false");
+  }
+});
diff --git a/contact.html b/contact.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="icons/murphicon.jpg" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Morpheus</title>
+  </head>
+  <body>
+    <a href="iisstart.html" class="acc">MZI</a>
+    <div class="nav">
+      <button
+        class="burga"
+        aria-controls="primary-navigation"
+        aria-expanded="false">
+        <svg fill="white" class="hamburger" viewbox="0 0 10 10" width="40px">
+          <rect class="top" width="8" height="0.5" x="1" y="2"></rect>
+          <rect class="middle" width="8" height="0.5" x="1" y="4"></rect>
+          <rect class="bottom" width="8" height="0.5" x="1" y="6"></rect>
+        </svg>
+      </button>
+      <nav class="sidebar" aria-expanded="false">
+        <a href="skillz.html"> Skillz </a>
+        <a href="contact.html "> Contact </a>
+      </nav>
+    </div>
+
+    <section class="contact">
+      <div class="cinfo">
+        <div class="items">
+          <div class="title">
+            <img src="icons/phone-call.png" alt="" class="cicons" />
+            <p>Call me</p>
+          </div>
+          <p class="asz">+62811-3900-1106</p>
+        </div>
+        <div class="items">
+          <div class="title">
+            <img src="icons/email.png" alt="" class="cicons" />
+            <p>Email</p>
+          </div>
+          <p class="asz">[email protected]</p>
+        </div>
+        <div class="items">
+          <div class="title">
+            <img src="icons/pin.png" alt="" class="cicons" />
+            <p>Location</p>
+          </div>
+          <p class="asz">Pabuaran, Cibinong, Bogor</p>
+        </div>
+      </div>
+      </div>
+    </section>
+
+    <form action="" class="wow">
+      <div class="hp for">
+        <label for="nohp">Phone Number</label>
+        <input type="text"  name="nohp" class="mask ifs" placeholder="Phone Number">
+      </div>
+      <div class="Email for">
+        <label for="email">Email</label>
+        <input type="email" name="email" class="mask ifs" placeholder="E-mail">
+      </div>
+      <div class="message for">
+        <label for="message">Message</label>
+        <textarea name="message" class="mask" id="message" cols="30" rows="10"></textarea>
+      </div>
+      <input type="submit" value="Submit" class="sub">
+    </form>
+    <script src="amogus.js"></script>
+  </body>
+</html>
diff --git a/icons/Next-js.png b/icons/Next-js.png
diff --git a/icons/Pocketbase.png b/icons/Pocketbase.png
diff --git a/icons/Post.png b/icons/Post.png
diff --git a/icons/Reactigon.png b/icons/Reactigon.png
diff --git a/icons/Sassy.png b/icons/Sassy.png
diff --git a/icons/Svelte.png b/icons/Svelte.png
diff --git a/icons/VueJS.png b/icons/VueJS.png
diff --git a/icons/contact-us.png b/icons/contact-us.png
diff --git a/icons/csszz.png b/icons/csszz.png
diff --git a/icons/discord.png b/icons/discord.png
diff --git a/icons/email.png b/icons/email.png
diff --git a/icons/express.png b/icons/express.png
diff --git a/icons/github.png b/icons/github.png
diff --git a/icons/htmlszz.png b/icons/htmlszz.png
diff --git a/icons/information.png b/icons/information.png
diff --git a/icons/instagram.png b/icons/instagram.png
diff --git a/icons/jszz.png b/icons/jszz.png
diff --git a/icons/murphicon.jpg b/icons/murphicon.jpg
diff --git a/icons/phone-call.png b/icons/phone-call.png
diff --git a/icons/pin.png b/icons/pin.png
diff --git a/icons/postgres.png b/icons/postgres.png
diff --git a/icons/prisma.png b/icons/prisma.png
diff --git a/icons/project.png b/icons/project.png
diff --git a/icons/sqlit.png b/icons/sqlit.png
diff --git a/iisstart.html b/iisstart.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="icons/murphicon.jpg" />
+    <title>Morpheus</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <a href="#" class="acc">MZI</a>
+    <div class="nav">
+      <button
+        class="burga"
+        aria-controls="primary-navigation"
+        aria-expanded="false">
+        <svg fill="white" class="hamburger" viewbox="0 0 10 10" width="40px">
+          <rect class="top" width="8" height="0.5" x="1" y="2"></rect>
+          <rect class="middle" width="8" height="0.5" x="1" y="4"></rect>
+          <rect class="bottom" width="8" height="0.5" x="1" y="6"></rect>
+        </svg>
+      </button>
+      <nav class="sidebar" aria-expanded="false">
+        <a href="skillz.html"> Skillz </a>
+        <a href="contact.html "> Contact </a>
+      </nav>
+    </div>
+    <section class="Landingpage">
+      <div class="info">
+        <h1>Im <b class="em">M</b>urphy</h1>
+        <p>Junior <b class="heru">Full-Stack</b> web developer</p>
+        <div class="butts">
+          <a class="info-b" href="contact.html">Chat with me</a>
+          <a class="info-b" href="skillz.html">See what i can do</a>
+        </div>
+      </div>
+      <div class="art">
+        <img src="img/murphy.png" alt="" />
+      </div>
+    </section>
+    <section class="aboutme">
+      <h1 class="hai"><span class="em">About</span> me</h1>
+      <hr />
+      <p class="abouts">
+        Hello 👋, my name is <span class="ems">Morpheus Zein Irawan</span> but
+        you can call me <span class="em">Murphy</span>, I am a Junior
+        <span class="ems">Full-stack</span> Web Developer. I am currently 17
+        years old. I live in Cibinong, Bogor, West Java. I am currently studying
+        at SMK Plus Pelita Nusantara majoring in Software Engineering class of
+        XI RPL-2. And Now, I'm learning how to become the best Full stack
+        developer.
+      </p>
+      <p class="abouts">
+        My experience in software programming can be said to be a fun and useful
+        experience, so I started my coding journey when i was in my 9th grade
+        junior highscool, my dad tought me how to code, especially the
+        fundementals, from then i learned by myself by joining code bootcamps or
+        learn from the internet
+      </p>
+      <p class="abouts">
+        I have now 2 years of coding experience and 1 of those years are full of
+        web development,i believe web development is a very fun major to learn
+        because it is the most powerfull thing you could learn from such a basic
+        level, i could make websites, apps, and other things from this. i
+        started with the usual, HTML,CSS,JS. my favorite is probably ReactJS,
+        Ive been studying it from the start of this year and made a bunch of
+        cool projects with it, And NextJS (its framework) is probably the best
+        meta-framework ive used, made so many
+        <a class="poj" href="skillz.html">projects</a> with it and had so much
+        fun!
+      </p>
+      <hr>
+    </section>
+    <footer>
+
+      <a href="https://github.com/MorpheusZI">
+        <img src="/icons/github.png" alt="Github" class="ficons">
+      </a>
+      <a href="https://github.com/MorpheusZI">
+        <img src="/icons/discord.png" alt="Github" class="ficons">
+      </a>
+      <a href="https://www.instagram.com/morpheuszs">
+        <img src="/icons/instagram.png" alt="Github" class="ficons">
+      </a>
+    </footer>
+    <script src="amogus.js"></script>
+  </body>
+</html>
diff --git a/img/Bouclir.png b/img/Bouclir.png
diff --git a/img/Buktam.jpg b/img/Buktam.jpg
diff --git a/img/E-VOTING.png b/img/E-VOTING.png
diff --git a/img/Gustave.png b/img/Gustave.png
diff --git a/img/Murphy.jpg b/img/Murphy.jpg
diff --git a/img/Murphy2.jpg b/img/Murphy2.jpg
diff --git a/img/Murphy3.jpg b/img/Murphy3.jpg
diff --git a/img/N.png b/img/N.png
diff --git a/img/Netclone.jpg b/img/Netclone.jpg
diff --git a/img/Notes.png b/img/Notes.png
diff --git a/img/Selime.png b/img/Selime.png
diff --git a/img/Todos.png b/img/Todos.png
diff --git a/img/alefsports.png b/img/alefsports.png
diff --git a/img/asx2.png b/img/asx2.png
diff --git a/img/murphicon.png b/img/murphicon.png
diff --git a/img/murphy.png b/img/murphy.png
diff --git a/img/must.png b/img/must.png
diff --git a/skillz.html b/skillz.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="icons/murphicon.jpg" type="image/icon" />
+    <title>Morpheus</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <a href="iisstart.html" class="acc">MZI</a>
+    <div class="nav">
+      <button
+        class="burga"
+        aria-controls="primary-navigation"
+        aria-expanded="false">
+        <svg fill="white" class="hamburger" viewbox="0 0 10 10" width="40px">
+          <rect class="top" width="8" height="0.5" x="1" y="2"></rect>
+          <rect class="middle" width="8" height="0.5" x="1" y="4"></rect>
+          <rect class="bottom" width="8" height="0.5" x="1" y="6"></rect>
+        </svg>
+      </button>
+      <nav class="sidebar" aria-expanded="false">
+        <a href="skillz.html"> Skillz </a>
+        <a href="contact.html"> Contact </a>
+      </nav>
+    </div>
+    <section class="Frontend">
+      <h1 class="lang"><b class="lans">Front</b>end</h1>
+      <div class="Fimg">
+        <div class="Frow1">
+          <div class="Fitems">
+            <div class="icons">
+              <img src="icons/htmlszz.png" alt="" class="fucons" />
+              <img src="icons/csszz.png " alt="" class="fucon2" />
+              <img src="icons/jszz.png" alt="" class="fucon2" />
+            </div>
+            <img src="/img/Gustave.png " alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>Gustave</h1>
+              <p>
+                one of my few starting projects as a web developer, a travel website used to book hotels
+              </p>
+            </div>
+          </div>
+          <div class="Fitems">
+            <div class="icons">
+              <img src="/icons/Reactigon.png" alt="" class="fucons" />
+              <img src="/icons/Sassy.png" alt="" class="fucon2" />
+            </div>
+            <img src="/img/Bouclir.png" alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>Bouclier</h1>
+              <p>
+                First ever React & SCSS Design, a car insurance website
+              </p>
+            </div>
+          </div>
+          <div class="Fitems">
+            <div class="icons">
+              <img src="/icons/Reactigon.png" alt="" class="fucons" />
+              <img src="/icons/Sassy.png" alt="" class="fucon2" />
+            </div>
+            <img src="/img/alefsports.png" alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>Alef-Sports E-commerce</h1>
+              <p>
+                An e-commerce website to buy and sell sports goods
+              </p>
+            </div>
+          </div>
+          <div class="Fitems">
+            <div class="icons">
+              <img src="/icons/Sassy.png" alt="" class="fucons" />
+              <img src="/icons/Svelte.png" alt="" class="fucon2" />
+            </div>
+            <img src="/img/Selime.png" alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>Slime (Spotify Clone)</h1>
+              <p>
+                Spotify clone i made for working out my svelte & SCSS skills
+              </p>
+            </div>
+          </div>
+          <div class="Fitems">
+            <div class="icons">
+              <img src="/icons/Reactigon.png" alt="" class="fucons" />
+            </div>
+            <img src="/img/Netclone.jpg" alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>Netflix Clone</h1>
+              <p>
+                A Netflix Clone i made to exercise my react skills
+              </p>
+            </div>
+          </div>
+          <div class="Fitems">
+            <div class="icons">
+              <img src="/icons/Reactigon.png" alt="" class="fucons" />
+            </div>
+            <img src="/img/Todos.png" alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>Simple TodoList</h1>
+              <p>
+                A simple todolist app to remind you of what you need to do
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="Frontend">
+      <h1 class="lang"><b class="lans">Full</b>  Stack</h1>
+      <div class="Fimg">
+        <div class="Frow1">
+          <div class="Fitems">
+            <div class="icons">
+              <img src="icons/express.png" alt="" class="fucons" />
+              <img src="icons/sqlit.png" alt="" class="fucon2" />
+            </div>
+            <img src="/img/Buktam.jpg " alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>PENUS Digital Guest Book</h1>
+              <p>
+                A guest book webapp used to sign and data guests that comes to our school
+              </p>
+            </div>
+          </div>
+          <div class="Fitems">
+            <div class="icons">
+              <img src="/icons/Reactigon.png" alt="" class="fucons" />
+              <img src="/icons/Next-js.png" alt="" class="fucon2" />
+              <img src="/icons/Pocketbase.png" alt="" class="fucon2">
+            </div>
+            <img src="/img/Notes.png" alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>Notes</h1>
+              <p>
+                A simple Notes CRUD webapp to store all your notes in a database
+              </p>
+            </div>
+          </div>
+          <div class="Fitems">
+            <div class="icons">
+              <img src="/icons/Next-js.png" alt="" class="fucons" />
+              <img src="/icons/prisma.png" alt="" class="fucon2" />
+              <img src="/icons/postgres.png" alt="" class="fucon2" />
+
+            </div>
+            <img src="/img/E-VOTING.png" alt="" class="gimp" />
+            <hr />
+            <div class="fec">
+              <h1>E-Voting Osis</h1>
+              <p>
+                an e-voting website i made to vote the next OSIS/MPK Headmaster
+              </p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+
+    <script src="amogus.js"></script>
+  </body>
+</html>