Web Tech Final Project

README.md

@@ -1,19 +1,3 @@
-# _Personal Portfolio Website - @ashmin-bhujel_
+# Web Technology Final Project
 
-## _script.js_
-
-```js
-const portfolioWebsite = new Website("Jugadu Portfolio Website 😝");
-
-portfolioWebsite.author = "ashmin-bhujel";
-
-console.log(portfolioWebsite.url);
-```
-
-## _terminal_
-
-```bash
-> node script.js
-
-> https://ashminbhujel.com.np/
-```
+A Simple web application built using HTML, CSS and JavaScript.

components/about-me.txt

@@ -0,0 +1,20 @@
+<div class="section">
+  <p class="section-heading text-lg">About Me</p>
+  <div class="section-body">
+    <p>
+      Hello, My name is Ashmin Bhujel. I'm currently studying BIT (Bachelors in
+      Information Technology) at Bhaktapur Multiple Campus.
+    </p>
+    <p>
+      I'm currently learning Web Devlopment and Music Production (as Hobby).
+    </p>
+    <p>
+      I like to explore computer technologies and make something out of what
+      I've learned together with my friends.
+    </p>
+    <p>
+      I also like to listening to music, watching movies (Sci-Fi, Animation,
+      Romance, Biopic), anime and sometimes K-Drama also.
+    </p>
+  </div>
+</div>

components/contact.txt

@@ -0,0 +1,47 @@
+<div class="section">
+  <p class="section-heading text-lg">Contact</p>
+  <form action="index.html" method="get">
+    <fieldset>
+      <legend>Get In Touch</legend>
+
+      <div class="form-sub-group">
+        <input
+          type="text"
+          name="first-name"
+          id="first-name"
+          placeholder="First Name"
+          required
+        />
+        <input
+          type="text"
+          name="last-name"
+          id="last-name"
+          placeholder="Last Name"
+          required
+        />
+      </div>
+
+      <div class="form-sub-group">
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="Email Address"
+          required
+        />
+        <input type="text" name="phone" id="phone" placeholder="Phone Number" />
+      </div>
+
+      <input type="text" name="address" id="address" placeholder="Address" />
+
+      <textarea
+        name="message"
+        id="message"
+        placeholder="Write your message here."
+        required
+      ></textarea>
+
+      <input type="submit" value="Submit" class="btn-primary" />
+    </fieldset>
+  </form>
+</div>

components/home.txt

@@ -0,0 +1,22 @@
+<div class="section">
+  <p class="section-heading text-lg">Web Technology I</p>
+  <div class="section-body">
+    <p>
+      This web application is final lab project of Web Technology I. Built using
+      basic web development technologies like HTML, CSS, JavaScript.
+    </p>
+    <p>
+      You can navigate to various section of the web application using the
+      provided navigation links.
+    </p>
+    <p>Some of the technologies/concepts used while building this project.</p>
+  </div>
+  <ul class="list">
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>JavaScript</li>
+    <li>Google Fonts</li>
+    <li>Fonts Awesome Icons</li>
+    <li>AJAX</li>
+  </ul>
+</div>

components/photographs.txt

@@ -0,0 +1,119 @@
+<div class="section">
+  <p class="section-heading text-lg">Photographs</p>
+  <div class="section-card-container">
+    <div class="card">
+      <img
+        src="./assets/image01.jpeg"
+        alt="Nagarkot Tower"
+        class="card-image"
+      />
+      <div class="card-body">
+        <p class="card-heading">Nagarkot Tower</p>
+      </div>
+    </div>
+    <div class="card">
+      <img
+        src="./assets/image02.jpeg"
+        alt="Stone Structure"
+        class="card-image"
+      />
+      <div class="card-body">
+        <p class="card-heading">Stone Structure</p>
+      </div>
+    </div>
+    <div class="card">
+      <img
+        src="./assets/image03.jpeg"
+        alt="Stone Structure"
+        class="card-image"
+      />
+      <div class="card-body">
+        <p class="card-heading">Stone Structure</p>
+      </div>
+    </div>
+    <div class="card">
+      <img
+        src="./assets/image04.jpeg"
+        alt="Guras Flower Tree"
+        class="card-image"
+      />
+      <div class="card-body">
+        <p class="card-heading">Guras Flower Tree</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image05.jpeg" alt="Guras Flower" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">Guras Flower</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image06.jpeg" alt="Guras Flower" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">Guras Flower</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image07.jpeg" alt="Green Tree" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">Green Tree</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image08.jpeg" alt="Sidhhapokhari" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">Sidhhapokhari</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image09.jpeg" alt="Sidhhapokhari" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">Sidhhapokhari</p>
+      </div>
+    </div>
+    <div class="card">
+      <img
+        src="./assets/image10.jpeg"
+        alt="Bell Shaped Flower"
+        class="card-image"
+      />
+      <div class="card-body">
+        <p class="card-heading">Bell Shaped Flower</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image11.jpeg" alt="Rose Flower" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">Rose Flower</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image12.jpeg" alt="White Flower" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">White Flower</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image13.jpg" alt="Green Plant" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">Green Plant</p>
+      </div>
+    </div>
+    <div class="card">
+      <img
+        src="./assets/image14.jpeg"
+        alt="Plum Blossoms Flower"
+        class="card-image"
+      />
+      <div class="card-body">
+        <p class="card-heading">Plum Blossoms Flower</p>
+      </div>
+    </div>
+    <div class="card">
+      <img src="./assets/image15.jpg" alt="Milk Tea" class="card-image" />
+      <div class="card-body">
+        <p class="card-heading">Milk Tea</p>
+      </div>
+    </div>
+  </div>
+</div>

components/skills.txt

@@ -0,0 +1,54 @@
+<div class="section">
+  <p class="section-heading text-lg">Skills</p>
+  <div class="section-card-container">
+    <div class="card">
+      <i class="fa-brands fa-html5 card-icon"></i>
+      <div class="card-body">
+        <p class="card-heading">HTML5</p>
+        <p class="card-body">Intermediate</p>
+      </div>
+    </div>
+    <div class="card">
+      <i class="fa-brands fa-css3-alt card-icon"></i>
+      <div class="card-body">
+        <p class="card-heading">CSS3</p>
+        <p class="card-body">Intermediate</p>
+      </div>
+    </div>
+    <div class="card">
+      <i class="fa-brands fa-square-js card-icon"></i>
+      <div class="card-body">
+        <p class="card-heading">JavaScript</p>
+        <p class="card-body">Intermediate</p>
+      </div>
+    </div>
+    <div class="card">
+      <i class="fa-brands fa-git-alt card-icon"></i>
+      <div class="card-body">
+        <p class="card-heading">Git</p>
+        <p class="card-body">Basics</p>
+      </div>
+    </div>
+    <div class="card">
+      <i class="fa-brands fa-github card-icon"></i>
+      <div class="card-body">
+        <p class="card-heading">GitHub</p>
+        <p class="card-body">Basics</p>
+      </div>
+    </div>
+    <div class="card">
+      <i class="fa-brands fa-windows card-icon"></i>
+      <div class="card-body">
+        <p class="card-heading">Windows</p>
+        <p class="card-body">Basics</p>
+      </div>
+    </div>
+    <div class="card">
+      <i class="fa-brands fa-linux card-icon"></i>
+      <div class="card-body">
+        <p class="card-heading">Linux</p>
+        <p class="card-body">Basics</p>
+      </div>
+    </div>
+  </div>
+</div>