Added basic files

Ashmin-Bhujel · Feb 23, 2024 · c89cff0 · c89cff0
1 parent 5f3eb24
commit c89cff0
Show file tree

Hide file tree

Showing 4 changed files with 227 additions and 0 deletions.
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/hello.gif b/images/hello.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Personal portfolio website of Ashmin Bhujel. Don't expect too much..."
+    />
+    <meta name="author" content="ashmin-bhujel" />
+
+    <title>Ashmin Bhujel - Personal Portfolio</title>
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon" />
+
+    <!-- Google Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Font Awesome -->
+    <script
+      src="https://kit.fontawesome.com/0f03b1c93a.js"
+      crossorigin="anonymous"
+    ></script>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="./style/style.css" />
+  </head>
+
+  <body>
+    <main class="container">
+      <!-- Hello! -->
+      <img
+        src="./images/hello.gif"
+        alt="Hello from fluffy duck"
+        class="hello-world-gif"
+      />
+
+      <!-- My Info -->
+      <section class="my-info">
+        <p class="hello-world">
+          <i class="fa-solid fa-code"></i>
+          HELLO, WORLD!
+          <i class="fa-solid fa-code"></i>
+        </p>
+
+        <p class="my-info-text">YOU CAN FIND ME IN THESE PLATFORMS</p>
+
+        <p class="my-info-text">BUT DON'T EXPECT TOO MUCH...</p>
+
+        <p class="my-info-text">@ashmin-bhujel</p>
+
+        <!-- Socials -->
+        <div class="socials">
+          <ul class="links">
+            <!-- GitHub -->
+            <li>
+              <a
+                href="https://github.com/Ashmin-Bhujel"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="GitHub"
+              >
+                <i class="fa-brands fa-github"></i>
+              </a>
+            </li>
+
+            <!-- LinkedIn -->
+            <li>
+              <a
+                href="https://www.linkedin.com/in/ashmin-bhujel/"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="LinkedIn"
+              >
+                <i class="fa-brands fa-linkedin"></i>
+              </a>
+            </li>
+
+            <!-- X (Twitter) -->
+            <li>
+              <a
+                href="https://twitter.com/ashmin_bhujel"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="X (Twitter)"
+              >
+                <i class="fa-brands fa-x-twitter"></i>
+              </a>
+            </li>
+
+            <!-- Instagram -->
+            <li>
+              <a
+                href="https://www.instagram.com/ashmin_bhujel/"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Instagram"
+              >
+                <i class="fa-brands fa-instagram"></i>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </main>
+
+    <!-- JavaScript -->
+    <script>
+      console.warn(
+        "%cWhat? Did you expect to find something here? I told you not to expect too much... 😝",
+        "background-color: #040d12; color: #eef5ff; padding: 2rem; font-family: monospace; font-size: 20px; text-align: center;"
+      );
+    </script>
+  </body>
+</html>
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,106 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --primary-color: #00a9ff;
+  --dark-color: #040d12;
+  --light-color: #eef5ff;
+}
+
+a {
+  color: var(--light-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+body {
+  background-color: var(--dark-color);
+  color: var(--light-color);
+  font-family: Poppins, sans-serif;
+}
+
+main {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.my-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-style: italic;
+}
+
+.hello-world {
+  font-size: 2.5rem;
+  font-weight: 400;
+  margin: 1rem 0 4rem 0;
+}
+
+.socials .links {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 1rem;
+}
+
+.socials .links a {
+  font-size: 1.5rem;
+  transition: color 250ms ease-in-out;
+}
+
+.socials .links a:hover {
+  color: var(--primary-color);
+}
+
+.container {
+  padding: 2rem;
+}
+
+@media (max-width: 400px) {
+  .hello-world {
+    font-size: 1.5rem;
+  }
+
+  .my-info-text {
+    font-size: 0.8rem;
+  }
+}
+
+@media (min-width: 400px) and (max-width: 768px) {
+  .hello-world {
+    font-size: 2rem;
+  }
+
+  .my-info-text {
+    font-size: 0.8rem;
+  }
+}
+
+@media (min-width: 2560px) {
+  .hello-world-gif {
+    width: 800px;
+  }
+
+  .hello-world {
+    font-size: 6rem;
+  }
+
+  .my-info-text {
+    font-size: 2rem;
+  }
+
+  .socials .links a {
+    font-size: 2rem;
+  }
+}