]> git.bochard.net Git - mysite.git/commitdiff
tenkyuu.dev v2
authortenkyuu <hello@tenkyuu.dev>
Wed, 7 Aug 2024 11:42:14 +0000 (19:42 +0800)
committerGitHub <noreply@github.com>
Wed, 7 Aug 2024 11:42:14 +0000 (19:42 +0800)
made big updates in design and codes.

20 files changed:
about.html [new file with mode: 0644]
assets/icons/favicon.ico [new file with mode: 0644]
assets/pfp/tenkyuu-img.webp [new file with mode: 0644]
contact.html [new file with mode: 0644]
css/styles.css [new file with mode: 0644]
images/projects/avif/product-landing.avif
images/projects/avif/survey-form.avif
images/projects/avif/technical-documentation.avif
images/projects/avif/tribute.avif
images/projects/jpeg/product-landing.jpeg
images/projects/jpeg/survey-form.jpeg
images/projects/jpeg/technical-documentation.jpeg
images/projects/jpeg/tribute.jpeg
images/projects/webp/product-landing.webp
images/projects/webp/survey-form.webp
images/projects/webp/technical-documentation.webp
images/projects/webp/tribute.webp
index.html
javascript/script.js [new file with mode: 0644]
projects.html [new file with mode: 0644]

diff --git a/about.html b/about.html
new file mode 100644 (file)
index 0000000..1ec3b09
--- /dev/null
@@ -0,0 +1,108 @@
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+  <meta charset="UTF-8">\r
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">\r
+  <meta name="author" content="tenkyuu">\r
+  <meta name="description" content="Some information about me.">\r
+  <meta name="referrer" content="no-referrer">\r
+  <meta name="robots" content="index, follow">\r
+  <title>tenkyuu - about</title>\r
+  <link rel="icon" type="image/ico" href="/assets/icons/favicon.ico">\r
+  <link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">\r
+  <link rel="stylesheet" href="/css/styles.css">\r
+<!-- Google Fonts -->\r
+  <link rel="preconnect" href="https://fonts.googleapis.com">\r
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\r
+  <link href="https://fonts.googleapis.com/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
+<!-- Font Awesome -->\r
+  <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
+</head>\r
+<body>\r
+  <header>\r
+    <span class="logo">tenkyuu</span>\r
+    <i class="fa fa-bars btnNav" onclick="menuToggleOpen()"></i>\r
+    <nav id="menu">\r
+      <i class="fas fa-times btnNavClose" onclick="menuToggleClose()"></i>\r
+      <ul>\r
+        <li><a href="index.html">Home</a></li>\r
+        <li><a href="projects.html">Projects</a></li>\r
+        <li><a href="about.html" class="current-page">About</a></li>\r
+        <li><a href="contact.html">Contact</a></li>\r
+      </ul>\r
+    </nav>\r
+    <div id="opacity-block" onclick="menuToggleClose()"></div>\r
+  </header>\r
+\r
+  <main id="top">\r
+    <section>\r
+      <h1 class="main-section-title">//ABOUT</h1>\r
+      <div class="content-container-centered">\r
+        <a href="https://twitter.com/tenkyuu28">\r
+          <img src="/assets/pfp/tenkyuu-img.webp"\r
+               alt="tenkyuu profile image"\r
+               title="Yuzaki Nasa from 'Tonikawa'"\r
+               class="dev-pfp">\r
+        </a>\r
+        <div>\r
+          <p class="description center">\r
+            Hello, My name is <span class="strong">tenkyuu.</span><br>\r
+            Nice to meet you!<br>\r
+          </p>\r
+          <p class="description center">\r
+            I'm a 17-year old self-learn<br>\r
+            Filipino web developer who makes<br>\r
+            hand-coded static websites.\r
+          </p>\r
+          <p class="description center">\r
+            I've been interested on making<br>\r
+            websites since grade school.<br>\r
+          </p>\r
+          <p class="description center">\r
+            Now, that's what I do for a living!\r
+          </p>\r
+          <p class="description center">\r
+            I'm really passionate on making<br>\r
+            specific type of websites - <br>\r
+            simple websites like this one,<br>\r
+            old-internet style websites, and<br>\r
+            Japanese style websites.\r
+          </p>\r
+          <p class="description center">\r
+            Umm... that's all I can say for now HAHA<br>\r
+            (tbh I'm not really good at words.)\r
+          </p>\r
+          <p class="description center">\r
+            Thank you for reading this!<br>\r
+            <span class="strong">Thank youu!!</span>\r
+          </p>\r
+        </div>\r
+      </div>\r
+    </section>\r
+\r
+    <div class="back-to-top">\r
+      <a href="#top">\r
+        <i class="fa fa-chevron-up"></i>\r
+      </a>\r
+    </div>\r
+\r
+    <div class="social-icons">\r
+      <a href="https://twitter.com/tenkyuu28/">\r
+        <i class="fab fa-twitter"></i>\r
+      </a>\r
+      <a href="https://github.com/ten-kyuu/">\r
+        <i class="fa-brands fa-github"></i>\r
+      </a>\r
+    </div>\r
+  </main>\r
+\r
+  <footer>\r
+    <p class="built-with-love">\r
+      Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.\r
+    </p>\r
+    <p class="copyright">&copy; tenkyuu.dev</p>\r
+  </footer>\r
+\r
+  <script src="/javascript/script.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/assets/icons/favicon.ico b/assets/icons/favicon.ico
new file mode 100644 (file)
index 0000000..30a3548
Binary files /dev/null and b/assets/icons/favicon.ico differ
diff --git a/assets/pfp/tenkyuu-img.webp b/assets/pfp/tenkyuu-img.webp
new file mode 100644 (file)
index 0000000..2dd14dc
Binary files /dev/null and b/assets/pfp/tenkyuu-img.webp differ
diff --git a/contact.html b/contact.html
new file mode 100644 (file)
index 0000000..cd3176d
--- /dev/null
@@ -0,0 +1,81 @@
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+  <meta charset="UTF-8">\r
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">\r
+  <meta name="author" content="tenkyuu">\r
+  <meta name="description" content="You can contact me using the following links.">\r
+  <meta name="referrer" content="no-referrer">\r
+  <meta name="robots" content="index, follow">\r
+  <title>tenkyuu - contact</title>\r
+  <link rel="icon" type="image/ico" href="/assets/icons/favicon.ico">\r
+  <link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">\r
+  <link rel="stylesheet" href="/css/styles.css">\r
+<!-- Google Fonts -->\r
+  <link rel="preconnect" href="https://fonts.googleapis.com">\r
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\r
+  <link href="https://fonts.googleapis.com/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
+<!-- Font Awesome -->\r
+  <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
+</head>\r
+<body>\r
+  <header>\r
+    <span class="logo">tenkyuu</span>\r
+    <i class="fa fa-bars btnNav" onclick="menuToggleOpen()"></i>\r
+    <nav id="menu">\r
+      <i class="fas fa-times btnNavClose" onclick="menuToggleClose()"></i>\r
+      <ul>\r
+        <li><a href="index.html">Home</a></li>\r
+        <li><a href="projects.html">Projects</a></li>\r
+        <li><a href="about.html">About</a></li>\r
+        <li><a href="contact.html" class="current-page">Contact</a></li>\r
+      </ul>\r
+    </nav>\r
+    <div id="opacity-block" onclick="menuToggleClose()"></div>\r
+  </header>\r
+\r
+  <main id="top">\r
+    <section>\r
+      <div class="full-width-title">\r
+        <h1 class="main-section-title">//CONTACT</h1>\r
+      </div>\r
+      <div class="content-container-centered contact-container">\r
+        <p class="description">\r
+          Hello! If you liked this website and you're<br>\r
+          interested in making a website for your own,<br>\r
+          whether for personal or business purposes.<br>\r
+          You can reach me out anytime!\r
+        </p>\r
+        <p class="description center-description strong">\r
+          For inquiries, you can email me here:\r
+        </p>\r
+        <a href="mailto:hello@tenkyuu.dev">\r
+          <i class="fas fa-envelope email-icon"></i>\r
+        </a>\r
+        <p class="description center-description">\r
+          If you didn't received a reply immediately.<br>\r
+          Don't worry, I'll reply as soon as I could!\r
+        </p>\r
+      </div>\r
+    </section>\r
+\r
+    <div class="social-icons">\r
+      <a href="https://twitter.com/tenkyuu28/">\r
+        <i class="fab fa-twitter"></i>\r
+      </a>\r
+      <a href="https://github.com/ten-kyuu/">\r
+        <i class="fa-brands fa-github"></i>\r
+      </a>\r
+    </div>\r
+  </main>\r
+\r
+  <footer>\r
+    <p class="built-with-love">\r
+      Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.\r
+    </p>\r
+    <p class="copyright">&copy; tenkyuu.dev</p>\r
+  </footer>\r
+\r
+  <script src="/javascript/script.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
new file mode 100644 (file)
index 0000000..9c6eed8
--- /dev/null
@@ -0,0 +1,645 @@
+:root {\r
+  --text-color: #ffffff;\r
+  --background-color: #000000;\r
+  --box-selection-color: #ffffff;\r
+  --box-text-color: #000000;\r
+  --title-text: "Lato", sans-serif;\r
+  --cursive-text: "Meddon", cursive;\r
+  --section-title-background: #0f0c0c;\r
+  --box-border: #000000;\r
+  --black-icon-color: #000000;\r
+}\r
+*,\r
+::before,\r
+::after {\r
+  box-sizing: border-box;\r
+  margin: 0;\r
+  padding: 0;\r
+}\r
+html {\r
+  font-size: 62.5%;\r
+}\r
+body {\r
+  font-family: "Epilogue", sans-serif;\r
+  display: flex;\r
+  flex-direction: column;\r
+  align-items: center;\r
+}\r
+\r
+/* top and sidebar */\r
+header {\r
+  position: fixed;\r
+  width: 100vw;\r
+  height: 10rem;\r
+  background-color: var(--background-color);\r
+  top: 0;\r
+  padding: 0 5rem;\r
+  display: flex;\r
+  justify-content: space-between;\r
+  align-items: center;\r
+  z-index: 1;\r
+}\r
+.logo, .btnNav, nav, nav li {\r
+  color: var(--text-color);\r
+}\r
+.logo {\r
+  font-size: 2rem;\r
+  font-family: var(--title-text);\r
+  font-weight: 900;\r
+}\r
+.btnNav {\r
+  font-size: 3rem;\r
+}\r
+.btnNavClose {\r
+  font-size: 3rem;\r
+  margin-left: 15rem;\r
+}\r
+nav {\r
+  height: 100vh;\r
+  width: 0;\r
+  padding-top: 4rem;\r
+  font-size: 2rem;\r
+  background-color: var(--background-color);\r
+  position: fixed;\r
+  top: 0;\r
+  right: 0;\r
+  z-index: 3;\r
+  transition: 0.5s;\r
+}\r
+nav li {\r
+  list-style: none;\r
+  margin: 4rem 5rem;\r
+}\r
+nav a {\r
+  text-decoration: none;\r
+  color: var(--text-color);\r
+  padding: 1rem;\r
+}\r
+.current-page {\r
+  background-color: var(--box-selection-color);\r
+  color: var(--box-text-color);\r
+}\r
+nav a:hover, nav a:focus {\r
+  background-color: var(--box-selection-color);\r
+  color: var(--box-text-color);\r
+  transition: 0.2s;\r
+}\r
+#opacity-block {\r
+  width: 100vw;\r
+  height: 100vh;\r
+  top: 0;\r
+  left: 0;\r
+  background-color: var(--background-color);\r
+  opacity: 0;\r
+  z-index: 2;\r
+  position: fixed;\r
+  pointer-events: none;\r
+  transition: 1s;\r
+}\r
+\r
+/* main */\r
+main {\r
+  padding-top: 10rem;\r
+}\r
+.section-title {\r
+  background-color: var(--section-title-background);\r
+  color: var(--text-color);\r
+  padding: 0.7rem 0;\r
+  padding-left: 1rem;\r
+  margin: 1rem;\r
+  font-size: 1.4rem;\r
+}\r
+.content-container {\r
+  margin: 2rem 1.2rem 4rem;\r
+}\r
+/* for centered contents */\r
+.content-container-centered {\r
+  margin: 2rem 1.2rem 4rem;\r
+  display: flex;\r
+  flex-direction: column;\r
+  justify-content: center;\r
+  align-items: center;\r
+}\r
+.dev-name {\r
+  font-size: 3.6rem;\r
+  font-family: var(--title-text);\r
+  font-weight: 900;\r
+}\r
+.description {\r
+  font-size: 1.8rem;\r
+  margin-top: 1.2rem;\r
+  margin-bottom: 1rem;\r
+  line-height: 2.4rem;\r
+}\r
+.center {\r
+  text-align: center;\r
+}\r
+.strong {\r
+  font-weight: bold;\r
+}\r
+/* for contact.html */\r
+.center-description {\r
+  text-align: center;\r
+}\r
+.main-section-title {\r
+  background-color: var(--section-title-background);\r
+  color: var(--text-color);\r
+  padding: 2rem;\r
+  font-size: 1.8rem;\r
+  text-align: center;\r
+  width: 100vw;\r
+}\r
+/* for about.html */\r
+.dev-pfp {\r
+  width: 20rem;\r
+  border-radius: 1rem;\r
+  margin-bottom: 2rem;\r
+}\r
+\r
+/* skills */\r
+.skills-section {\r
+  display: flex;\r
+  justify-content: center;\r
+  flex-direction: row;\r
+  flex-wrap: wrap;\r
+  gap: 1rem;\r
+}\r
+.skill-container {\r
+  border: 0.2rem solid var(--box-border);\r
+  border-radius: 1rem;\r
+  padding: 2rem;\r
+  width: 100%;\r
+  max-width: 50rem;\r
+}\r
+.skill-title {\r
+  font-size: 2.4rem;\r
+  font-family: var(--title-text);\r
+  font-weight: 900;\r
+}\r
+.skill-container li {\r
+  font-size: 1.6rem;\r
+  list-style-position: inside;\r
+  padding: 0.6rem 0;\r
+}\r
+.skill-container li:nth-of-type(1) {\r
+  margin-top: 1rem;\r
+}\r
+\r
+/* projects */\r
+.project-gallery {\r
+  display: flex;\r
+  flex-direction: row;\r
+  justify-content: center;\r
+  align-items: center;\r
+  flex-wrap: wrap;\r
+  gap: 1rem;\r
+}\r
+.project-tile img {\r
+  width: 100%;\r
+  max-width: 50rem;\r
+  border: 0.4rem solid var(--box-border);\r
+  border-radius: 1rem;\r
+  object-fit: cover;\r
+  transition: 0.2s;\r
+}\r
+.project-tile img:hover, .project-tile img:focus {\r
+  transform: scale(0.99);\r
+}\r
+.all-projects-view {\r
+  padding: 7rem;\r
+  text-align: center;\r
+  vertical-align: middle;\r
+}\r
+.project-tile .all-text {\r
+  text-decoration: none;\r
+  color: var(--box-text-color);\r
+  border: 0.2rem solid var(--box-border);\r
+  font-size: 2rem;\r
+  padding: 2rem;\r
+  transition: 0.2s;\r
+}\r
+.project-tile .all-text:hover, .project-tile .all-text:focus {\r
+  color: var(--text-color);\r
+  background-color: var(--background-color);\r
+}\r
+/* for projects.html */\r
+.full-project-list {\r
+  display: flex;\r
+  justify-content: center;\r
+  align-items: flex-start;\r
+  flex-direction: row;\r
+  flex-wrap: wrap;\r
+  gap: 1rem;\r
+  margin: 2rem 1.2rem 4rem;\r
+}\r
+.full-project-tile {\r
+  width: 100%;\r
+  max-width: 50rem;\r
+}\r
+.full-project-tile img {\r
+  width: 100%;\r
+  max-width: 50rem;\r
+  border: 0.4rem solid var(--box-border);\r
+  border-radius: 1rem;\r
+  object-fit: cover;\r
+  transition: 0.2s;\r
+}\r
+.full-project-tile img:hover, .full-project-tile img:focus {\r
+  transform: scale(0.99);\r
+}\r
+.project-info {\r
+  padding: 1.4rem;\r
+}\r
+.project-name {\r
+  font-family: var(--title-text);\r
+  font-weight: 900;\r
+  font-size: 2rem;\r
+}\r
+.project-description {\r
+  padding-top: 0.8rem;\r
+  font-size: 1.6rem;\r
+  line-height: 2.4rem;\r
+}\r
+\r
+/* contactMe! */\r
+.contact-container {\r
+  text-align: center;\r
+  vertical-align: center;\r
+}\r
+.contact-container a {\r
+  text-decoration: none;\r
+  color: var(--black-icon-color);\r
+}\r
+.email-icon {\r
+  font-size: 7rem;\r
+  transition: 0.2s;\r
+}\r
+.email-me-text {\r
+  background-color: var(--background-color);\r
+  color: var(--text-color);\r
+  width: 10rem;\r
+  padding: 1rem;\r
+  margin: 0 auto;\r
+  font-size: 1.6rem;\r
+  border: 0.2rem solid var(--box-border);\r
+  transition: 0.2s;\r
+}\r
+.email-icon:hover, .email-icon:focus {\r
+  transform: scale(0.9);\r
+}\r
+.email-me-text:hover, .email-me-text:focus {\r
+  background-color: unset;\r
+  color: var(--box-text-color);\r
+}\r
+/* for contact.html */\r
+\r
+\r
+/* randomArt */\r
+code {\r
+  display: flex;\r
+  justify-content: center;\r
+  align-items: center;\r
+  margin: auto;\r
+  width: fit-content;\r
+  border: 0.4rem solid var(--box-border);\r
+  border-radius: 1rem;\r
+}\r
+.your-name {\r
+  transform: scale(0.5)\r
+}\r
+\r
+/* back-to-top & social-icons */\r
+.back-to-top, .social-icons {\r
+  text-align: center;\r
+  vertical-align: middle;\r
+  display: flex;\r
+  align-items: center;\r
+  justify-content: center;\r
+  gap: 1rem;\r
+}\r
+.back-to-top a, .social-icons a {\r
+  color: var(--black-icon-color);\r
+  text-decoration: none;\r
+  transition: 0.3s;\r
+}\r
+.back-to-top {\r
+  margin-top: 4rem;\r
+  font-size: 2rem;\r
+}\r
+.back-to-top a {\r
+  padding: 2rem;\r
+}\r
+.back-to-top a:hover, .back-to-top a:focus{\r
+  transform: translateY(-1rem);\r
+}\r
+.social-icons {\r
+  font-size: 4rem;\r
+}\r
+.social-icons a:hover, .social-icons a:focus {\r
+  transform: scale(0.9);\r
+}\r
+\r
+/* footer */\r
+footer {\r
+  width: 95%;\r
+  margin: 2rem auto;\r
+  background-color: var(--background-color);\r
+  color: var(--text-color);\r
+  padding: 2rem;\r
+}\r
+footer p {\r
+  text-align: center;\r
+}\r
+.built-with-love {\r
+  font-size: 1.4rem;\r
+}\r
+.love {\r
+  font-family: var(--title-text);\r
+  font-weight: 900;\r
+  font-size: 1.8rem;\r
+}\r
+footer a {\r
+  color: var(--box-text-color);\r
+  background-color: var(--box-selection-color);\r
+  padding: 0.2rem 0.4rem;\r
+  font-family: var(--title-text);\r
+  text-decoration: none;\r
+}\r
+.copyright {\r
+  margin-top: 1.8rem;\r
+  font-size: 1.8rem;\r
+  font-family: var(--title-text);\r
+  font-weight: 700;\r
+}\r
+\r
+/* media queries */\r
+@media (prefers-reduced-motion: no-preference) {\r
+  * {\r
+    scroll-behavior: smooth;\r
+  }\r
+}\r
+\r
+/* large mobile devices*/\r
+@media only screen and (min-width: 600px) {\r
+  /* top and sidebar */\r
+  .btnNav, .btnNavClose {\r
+    display: none;\r
+  }\r
+  nav {\r
+    height: 100%;\r
+    width: unset;\r
+    padding-top: unset;\r
+    font-size: 1.4rem;\r
+    background-color: transparent;\r
+    position: relative;\r
+    top: unset;\r
+    right: unset;\r
+    z-index: 1;\r
+    transition: 0.5s;\r
+    display: flex;\r
+    flex-direction: row;\r
+    justify-content: center;\r
+    align-items: center;\r
+  }\r
+  nav ul {\r
+    width: inherit;\r
+    display: flex;\r
+    flex-direction: row;\r
+  }\r
+  nav li {\r
+    margin: 1rem;\r
+  }\r
+  nav a {\r
+    padding: 1rem;\r
+  }\r
+\r
+  /* skills */\r
+  .skill-container {\r
+    width: calc(50% - 1rem);\r
+  }\r
+\r
+  /* projects */\r
+  .project-tile img {\r
+    max-width: 40rem;\r
+  }\r
+  .all-projects-view {\r
+    width: 40rem;\r
+  }\r
+  /* for projects.html */\r
+  .full-project-tile {\r
+    width: calc(50% - 1rem);\r
+  }\r
+  .full-project-tile img {\r
+    max-width: 40rem;\r
+  }\r
+\r
+  /* randomArt */\r
+  code {\r
+    font-size: 1rem;\r
+  }\r
+}\r
+\r
+/* tablets, ipads, and alike */\r
+@media only screen and (min-width: 768px) {\r
+  .logo {\r
+    font-size: 2.6rem;\r
+  }\r
+\r
+  /* top and sidebar */\r
+  nav {\r
+    font-size: 1.8rem;\r
+  }\r
+\r
+  /* whoAmI? */\r
+  .section-title {\r
+    font-size: 1.6rem;\r
+  }\r
+  .dev-name {\r
+    font-size: 4.2rem;\r
+  }\r
+  .description {\r
+    font-size: 2rem;\r
+    line-height: 2.8rem;\r
+  }\r
+  /* for projects.html */\r
+  .main-section-title {\r
+    font-size: 2rem;\r
+  }\r
+  .project-name {\r
+    font-size: 3rem;\r
+  }\r
+  .project-description {\r
+    font-size: 1.8rem;\r
+  }\r
+  .full-project-tile img {\r
+    max-width: 60rem;\r
+  }\r
+\r
+  /* skills */\r
+  .skill-title {\r
+    font-size: 3rem;\r
+  }\r
+  .skill-container li {\r
+    font-size: 2rem;\r
+    padding: 0.8rem 0;\r
+  }\r
+\r
+  /* projects */\r
+  .project-tile img {\r
+    max-width: 60rem;\r
+  }\r
+  .project-tile .all-text {\r
+    font-size: 2.4rem;\r
+  }\r
+\r
+  /* contactMe! */\r
+  .email-icon {\r
+    font-size: 9rem;\r
+  }\r
+  .email-me-text {\r
+    width: 12rem;\r
+    font-size: 2rem;\r
+  }\r
+\r
+  /* randomArt */\r
+  code {\r
+    font-size: 1.2rem;\r
+  }\r
+\r
+  /* back-to-top & social icons */\r
+  .back-to-top {\r
+    margin-top: 7rem;\r
+    font-size: 2.8rem;\r
+  }\r
+  .back-to-top a {\r
+    padding: 2rem;\r
+  }\r
+  .social-icons {\r
+    font-size: 5rem;\r
+    gap: 2.4rem;\r
+  }\r
+\r
+  footer {\r
+    padding: 4rem;\r
+  }\r
+  .built-with-love {\r
+    font-size: 1.8rem;\r
+  }\r
+  .love {\r
+    font-size: 2.4rem;\r
+  }\r
+  footer a {\r
+    padding: 0.4rem 0.6rem;\r
+    font-size: 2rem;\r
+  }\r
+  .copyright {\r
+    margin-top: 2.4rem;\r
+    font-size: 2rem;\r
+  }\r
+}\r
+\r
+/* laptops/desktops and bigger screens */\r
+@media only screen and (min-width: 1024px) {\r
+  .logo {\r
+    font-size: 2.8rem;\r
+  }\r
+\r
+  /* top and sidebar */\r
+  header {\r
+    padding: 0 10rem;\r
+  }\r
+  nav {\r
+    font-size: 2rem;\r
+  }\r
+\r
+  /* main */\r
+  .content-container {\r
+    margin: 2rem 6rem 4rem;\r
+  }\r
+  .content-container-centered {\r
+    margin: 2rem 6rem 4rem;\r
+    display: flex;\r
+    flex-direction: column;\r
+    justify-content: center;\r
+    align-items: center;\r
+  }\r
+\r
+  /* for projects.html */\r
+  .main-section-title {\r
+    font-size: 1.8rem;\r
+  }\r
+  .full-project-list {\r
+    width: 60%;\r
+    margin: 2rem auto 4rem;\r
+    gap: 2rem;\r
+  }\r
+  .project-name {\r
+    font-size: 2.8rem;\r
+  }\r
+  .project-description {\r
+    font-size: 1.6rem;\r
+  }\r
+\r
+  /* whoAmI? */\r
+  .dev-name {\r
+    font-size: 4rem;\r
+  }\r
+  .description {\r
+    line-height: 2.6rem;\r
+  }\r
+\r
+  /* skills */\r
+  .skill-container {\r
+    width: 15%;\r
+  }\r
+  .skill-title {\r
+    font-size: 2.4rem;\r
+  }\r
+\r
+  /* projects */\r
+  .project-tile img {\r
+    max-width: 35rem;\r
+    height: 50rem;\r
+  }\r
+  .all-projects-view {\r
+    width: 25rem;\r
+  }\r
+  .project-tile .all-text {\r
+    font-size: 2rem;\r
+  }\r
+\r
+  /* contactMe! */\r
+  .email-icon {\r
+    font-size: 8rem;\r
+  }\r
+\r
+  /* randomArt */\r
+  code {\r
+    font-size: 1rem;\r
+  }\r
+\r
+  /* back-to-top & social icons */\r
+  .back-to-top {\r
+    font-size: 2.4rem;\r
+  }\r
+  .back-to-top a {\r
+    padding: 4rem;\r
+  }\r
+  .social-icons {\r
+    font-size: 4rem;\r
+  }\r
+\r
+  /* footer */\r
+  .built-with-love {\r
+    font-size: 1.4rem;\r
+  }\r
+  .love {\r
+    font-size: 2rem;\r
+  }\r
+  footer a {\r
+    font-size: 1.6rem;\r
+  }\r
+  .copyright {\r
+    margin-top: 2.8rem;\r
+  }\r
+}
\ No newline at end of file
index 00950f3deb837035f90a75ba3add8a71f4d99fc8..50ade0d135b172b683ed6e661644455197f74041 100644 (file)
Binary files a/images/projects/avif/product-landing.avif and b/images/projects/avif/product-landing.avif differ
index 6e6a8cc5e0a837fcc9ec024013c63c81cab0924e..edde3f8622da7cdb62db0c61b0e45bd88a88081d 100644 (file)
Binary files a/images/projects/avif/survey-form.avif and b/images/projects/avif/survey-form.avif differ
index bfc5c8eef41228725ebf2483cdc362815d653fc5..00180d3eb952787eefbb3eca849b941bb6e63c9d 100644 (file)
Binary files a/images/projects/avif/technical-documentation.avif and b/images/projects/avif/technical-documentation.avif differ
index 1a4141e7cb7f6c4d663cf166f44c1f440e553316..17756f5bf2cb2bd00465c9dbde4bb9f080f94c2b 100644 (file)
Binary files a/images/projects/avif/tribute.avif and b/images/projects/avif/tribute.avif differ
index 025d780f802077bdbd4bbf99705cb432c872900c..5ae2ed5e329bb379f965aed9e6fa463dd4faf464 100644 (file)
Binary files a/images/projects/jpeg/product-landing.jpeg and b/images/projects/jpeg/product-landing.jpeg differ
index fe8faa77a68e6c633816086097f71a0f81701490..13d8635bddc10c5676a0de1e514305f61d1715fb 100644 (file)
Binary files a/images/projects/jpeg/survey-form.jpeg and b/images/projects/jpeg/survey-form.jpeg differ
index 40e51ae0773e9ac38771e56948942fbbc3720e6e..5015629d089c9df9d30fd636ff456652c212c818 100644 (file)
Binary files a/images/projects/jpeg/technical-documentation.jpeg and b/images/projects/jpeg/technical-documentation.jpeg differ
index 95b731744c459414b1cb28ba090cb37f9556b24f..181fba8a053220aad8ec6ed9c5a4c8e65384487c 100644 (file)
Binary files a/images/projects/jpeg/tribute.jpeg and b/images/projects/jpeg/tribute.jpeg differ
index 01732529228e4cb3f5808432838aeb192de551e9..43960bb2c0d6aedb8642b0d3c17d550d79c9de0d 100644 (file)
Binary files a/images/projects/webp/product-landing.webp and b/images/projects/webp/product-landing.webp differ
index 4cc5fc19080cb9a20582cbedd52a33906cb718cb..acf51ccf84eca2017cedee2bbb62c1c44da251bd 100644 (file)
Binary files a/images/projects/webp/survey-form.webp and b/images/projects/webp/survey-form.webp differ
index 53e87a724bee1cbc1ce10349ca627ac8e37232c7..681a05a7a5e7a7daf2aab7072cb1085409d1d9dc 100644 (file)
Binary files a/images/projects/webp/technical-documentation.webp and b/images/projects/webp/technical-documentation.webp differ
index d1edd31da0e2283f27972ed507cef0f2872dd88c..6459c189e2827e28247d2f74e7033b4d36a571b8 100644 (file)
Binary files a/images/projects/webp/tribute.webp and b/images/projects/webp/tribute.webp differ
index 93f00b7ad02c596780ea76fd66e478ab974275a3..d742a38d9964542ac1884132672abaa116d0aaa2 100644 (file)
 <!DOCTYPE html>\r
 <html lang="en">\r
 <head>\r
-    <meta charset="UTF-8">\r
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">\r
-    <meta name="author" content="tenkyuu">\r
-    <meta name="description" content="a 17-year old awesome web developer who loves writing codes and creating websites.">\r
-    <meta name="referrer" content="no-referrer">\r
-    <title>tenkyuu - web developer</title>\r
-    <link rel="icon" type="image/x-icon" href="https://tenkyuu.dev/images/icons/favicon.ico">\r
-    <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">\r
-    <link rel="stylesheet" href="styles.css">\r
-    <link rel="preconnect" href="https://fonts.googleapis.com">\r
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\r
-    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Tiny5&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
-    <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
+  <meta charset="UTF-8">\r
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=no">\r
+  <meta name="author" content="tenkyuu">\r
+  <meta name="description" content="17-year old awesome web developer who loves creating websites and stuffs.">\r
+  <meta name="referrer" content="no-referrer">\r
+  <meta name="robots" content="index, follow">\r
+  <title>tenkyuu - web developer</title>\r
+  <link rel="icon" type="image/ico" href="/assets/icons/favicon.ico">\r
+  <link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">\r
+  <link rel="stylesheet" href="/css/styles.css">\r
+<!-- Google Fonts -->\r
+  <link rel="preconnect" href="https://fonts.googleapis.com">\r
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\r
+  <link href="https://fonts.googleapis.com/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
+<!-- Font Awesome -->\r
+  <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
 </head>\r
 <body>\r
-    <header>\r
-      <h1 class="logo">tenkyuu</h1>\r
-      <nav id="navbar">\r
-        <ul>\r
-          <li><a href="https://tenkyuu.dev/about.html">About</a></li>\r
-          <li><a href="https://tenkyuu.dev/works.html">Works</a></li>\r
-          <li><a href="https://tenkyuu.dev/contact.html">Contact</a></li>\r
-        </ul>\r
-      </nav>\r
-    </header>\r
+  <header>\r
+    <span class="logo">tenkyuu</span>\r
+    <i class="fa fa-bars btnNav" onclick="menuToggleOpen()"></i>\r
+    <nav id="menu">\r
+      <i class="fas fa-times btnNavClose" onclick="menuToggleClose()"></i>\r
+      <ul>\r
+        <li><a href="index.html" class="current-page">Home</a></li>\r
+        <li><a href="projects.html">Projects</a></li>\r
+        <li><a href="about.html">About</a></li>\r
+        <li><a href="contact.html">Contact</a></li>\r
+      </ul>\r
+    </nav>\r
+    <div id="opacity-block" onclick="menuToggleClose()"></div>\r
+  </header>\r
 \r
-    <main>\r
-      <section id="heading">\r
-        <h1>// Hello, I'm rain, a...</h1>\r
-        <p class="subheading">Web Developer :D</p>\r
-        <a href="#about">\r
-          <p>Read more</p>\r
-          <i class="fa-solid fa-arrow-down"></i>\r
-        </a>\r
+    <main id="top">\r
+      <section>\r
+        <p class="section-title">//whoAmI?</p>\r
+        <div class="content-container">\r
+          <h1 class="dev-name">tenkyuu</h1>\r
+          <p class="description">I'm a 17-year old Filipino web developer making hand-coded static websites for fun. I've been improving my skills and learning new stuffs everyday.</p>\r
+          <p class="description">I love making websites especially from those old-internet styles, and Japanese style websites.</p>\r
+        </div>\r
       </section>\r
 \r
-      <section id="about">\r
-        <h1>whoAmI?</h1>\r
-        <p class="subheading">I am nothing.</p>\r
-        <p class="paragraph">I'm a 17 year-old Filipino guy who loves writing codes and creating websites. Fully self-taught programmer.\r
-        </p>\r
+      <section>\r
+        <p class="section-title">//skills</p>\r
+        <div class="content-container skills-section">\r
+          <div class="skill-container">\r
+            <h2 class="skill-title">Front-End Development:</h2>\r
+            <ul>\r
+              <li>HTML</li>\r
+              <li>CSS</li>\r
+              <li>JavaScript (beginner)</li>\r
+            </ul>\r
+          </div>\r
+          <div class="skill-container">\r
+            <h2 class="skill-title">Softwares:</h2>\r
+            <ul>\r
+              <li>Visual Studio</li>\r
+              <li>Notepad (yep, i code here)</li>\r
+              <li>CapCut</li>\r
+            </ul>\r
+          </div>\r
+          <div class="skill-container">\r
+            <h2 class="skill-title">Other Things I'm Interested:</h2>\r
+            <li>Cybersecurity</li>\r
+            <li>Eastern Philosophies</li>\r
+            <li>Christianity</li>\r
+            <li>Stoicism</li>\r
+            <li>Aerospace</li>\r
+            <li>Books</li>\r
+            <li>Anime</li>\r
+          </div>\r
+          <div class="skill-container">\r
+            <h2 class="skill-title">Other Skills:</h2>\r
+            <ul>\r
+              <li>Video Editing</li>\r
+            </ul>\r
+          </div>\r
+          <div class="skill-container">\r
+            <h2 class="skill-title">Spoken Languages:</h2>\r
+            <li>Filipino (native)</li>\r
+            <li>Japanese (conversational)</li>\r
+            <li>English (fluent)</li>\r
+          </div>\r
+        </div>\r
       </section>\r
 \r
-      <section id="projects">\r
-        <h2>myWorks</h2>\r
-        <p class="subheading">Ta-daa!</p>\r
-        <p class="paragraph">These are the best works I made so far...</p>\r
-        <div class="project-gallery">\r
+      <section>\r
+        <p class="section-title">//projects</p>\r
+        <div class="content-container project-gallery">\r
           <div class="project-tile">\r
-            <a href="https://www.freecodecamp.org/tenkyuu"\r
-               target="_blank">\r
+            <a href="" onclick="imgClickNull()">\r
               <picture>\r
-                <source srcset="https://tenkyuu.dev/images/projects/avif/product-landing.avif" type="image/avif">\r
-                <source srcset="https://tenkyuu.dev/images/projects/webp/product-landing.webp" type="image/webp">\r
-                <img src="https://tenkyuu.dev/images/projects/jpeg/product-landing.jpeg"\r
-                   alt="Product Landing Page"\r
-                   title="Product Landing Page">\r
+                <source srcset="/images/projects/avif/technical-documentation.avif" type="image/avif">\r
+                <source srcset="/images/projects/webp/technical-documentation.webp" type="image/webp">\r
+                <img src="/images/projects/jpeg/technical-documentation.jpeg"\r
+                     alt="Technical Documentation Page"\r
+                     title="Technical Documentation Page">\r
               </picture>\r
             </a>\r
           </div>\r
           <div class="project-tile">\r
-            <a href="https://www.freecodecamp.org/tenkyuu"\r
-               target="_blank">\r
+            <a href="" onclick="imgClickNull()">\r
               <picture>\r
-                <source srcset="https://tenkyuu.dev/images/projects/avif/technical-documentation.avif" type="image/avif">\r
-                <source srcset="https://tenkyuu.dev/images/projects/webp/technical-documentation.webp" type="image/webp">\r
-                <img src="https://tenkyuu.dev/images/projects/jpeg/technical-documentation.jpeg"\r
-                   alt="Technical Documentation Page"\r
-                   title="Technical Documentation Page">\r
+                <source srcset="/images/projects/avif/product-landing.avif" type="image/avif">\r
+                <source srcset="/images/projects/webp/product-landing.webp" type="image/webp">\r
+                <img src="/images/projects/jpeg/product-landing.jpeg"\r
+                     alt="Product Landing Page"\r
+                     title="Product Landing Page">\r
               </picture>\r
             </a>\r
           </div>\r
           <div class="project-tile">\r
-            <a href="https://www.freecodecamp.org/tenkyuu"\r
-               target="_blank">\r
+            <a href="" onclick="imgClickNull()">\r
               <picture>\r
-                <source srcset="https://tenkyuu.dev/images/projects/avif/tribute.avif" type="image/avif">\r
-                <source srcset="https://tenkyuu.dev/images/projects/webp/tribute.webp" type="image/webp">\r
-                <img src="https://tenkyuu.dev/images/projects/jpeg/tribute.jpeg"\r
-                   alt="Tribute Page"\r
-                   title="Tribute Page">\r
+                <source srcset="/images/projects/avif/tribute.avif" type="image/avif">\r
+                <source srcset="/images/projects/webp/tribute.webp" type="image/webp">\r
+                <img src="/images/projects/jpeg/tribute.jpeg"\r
+                     alt="Tribute Page"\r
+                     title="Tribute Page">\r
               </picture>\r
             </a>\r
           </div>\r
-          <div class="project-tile">\r
-            <a href="https://www.freecodecamp.org/tenkyuu"\r
-               target="_blank">\r
-              <picture>\r
-                <source srcset="https://tenkyuu.dev/images/projects/avif/survey-form.avif" type="image/avif">\r
-                <source srcset="https://tenkyuu.dev/images/projects/webp/survey-form.webp" type="image/webp">\r
-                <img src="https://tenkyuu.dev/images/projects/jpeg/survey-form.jpeg"\r
-                   alt="Survey Form"\r
-                   title="Survey Form">\r
-              </picture>\r
-            </a>\r
+          <div class="project-tile all-projects-view">\r
+              <a href="projects.html" class="all-text">All <i class="fa fa-arrow-right"></i></a>\r
           </div>\r
         </div>\r
       </section>\r
 \r
-      <section id="contact">\r
-        <h2>letsWorkTogether!</h2>\r
-        <p class="subheading">lemme cook</p>\r
-        <div class="contact-options">\r
-          <a href="https://www.twitter.com/tenkyuu28/"\r
-             id="profile-link"\r
-             target="_blank"\r
-             aria-label="Contact me through my Twitter account">\r
-            <i class="fab fa-twitter"></i>\r
-          </a>\r
-          <a href="mailto:hello@tenkyuu.dev?subject=I%20need%20a%20Website"\r
-             aria-label="Email me">\r
-            <i class="fas fa-envelope"></i>\r
-          </a>\r
-          <a href="https://www.github.com/ten-kyuu/"\r
-             aria-label="Reach me out through Github">\r
-            <i class="fa-brands fa-github"></i>\r
+      <section>\r
+        <p class="section-title">//contactMe!</p>\r
+        <div class="content-container contact-container">\r
+          <a href="mailto:hello@tenkyuu.dev">\r
+            <i class="fas fa-envelope email-icon"></i>\r
+            <div class="email-me-text">\r
+              Email me\r
+            </div>\r
           </a>\r
+        <p class="description">Want to talk about life?<br>\r
+           or maybe about work, I guess?!<br>\r
+           You want to make your own website, right?<br>\r
+           Agh... whatever it is, just email me<br>\r
+           I'll reply right away!\r
+        </p>\r
+        </div>\r
+      </section>\r
+\r
+      <section>\r
+        <p class="section-title">//randomArt</p>\r
+        <div class="content-container">\r
+          <code><pre>\r
+░░░░░░░░░░░░░░░░░░░░░░████░░░░░░░░░░░░░░░░░░░░\r
+░░░░░░░░░░░░░░░░████████████████░░░░░░░░░░░░░░\r
+░░░░░░░░░░░░████▒▒▓▓██▓▓▓▓██▒▒▓▓████░░░░░░░░░░\r
+░░░░░░░░░░██░░▒▒▓▓██▓▓▒▒▓▓▓▓██▒▒▓▓▓▓██░░░░░░░░\r
+░░░░░░░░██▒▒▒▒▓▓██▓▓▒▒▒▒▓▓▓▓▓▓██▒▒▓▓▓▓██░░░░░░\r
+░░░░░░██▒▒▒▒▓▓▓▓██▓▓▒▒▒▒▓▓▓▓▓▓██▒▒▓▓▓▓▓▓██░░░░\r
+░░░░██▒▒▒▒▓▓▓▓██▓▓▒▒░░▓▓▓▓▓▓▓▓▓▓██▒▒▒▒▓▓▓▓██░░\r
+░░░░██▒▒▓▓▓▓▓▓██▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓██▒▒▓▓▓▓▓▓██░░\r
+░░██▒▒▓▓██████████████████████████████▓▓▒▒▓▓██\r
+░░██████░░██▒▒██░░░░░░░░██░░██▒▒██░░░░████████\r
+░░██░░░░░░██▒▒▒▒████████████▒▒▒▒██░░░░░░░░░░██\r
+░░░░░░░░██▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒██░░░░░░░░░░\r
+░░██░░░░██      ▒▒▒▒▒▒▒▒██▒▒      ██░░░░██░░░░\r
+░░░░████▒▒  ██  ▒▒▒▒██████▒▒  ██  ▒▒████░░░░░░\r
+░░░░░░██▒▒      ▒▒▒▒▒▒▒▒██▒▒      ▒▒██░░░░░░░░\r
+██████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒██████░░\r
+░░░░██▒▒▒▒▒▒▒▒▒▒▒▒      ██████▒▒▒▒▒▒▒▒██░░░░░░\r
+░░░░██▒▒▒▒▒▒▒▒          ██▒▒▒▒██▒▒▒▒▒▒██░░░░░░\r
+░░██▒▒▒▒▒▒▒▒            ██▒▒▒▒▒▒████▒▒▒▒██░░░░\r
+░░██▒▒▒▒▒▒        ██    ██▒▒▒▒▒▒▒▒▒▒▒▒▒▒██░░░░\r
+██▒▒▒▒▒▒            ████  ██▒▒▒▒▒▒▒▒▒▒▒▒██░░░░\r
+██▒▒██▒▒                    ██▒▒▒▒▒▒▒▒▒▒██░░░░\r
+██▒▒██      ▒▒      ▒▒      ▒▒██████▒▒▒▒██░░░░\r
+████▒▒    ▒▒  ▒▒  ▒▒  ▒▒  ▒▒  ▒▒      ▒▒██░░░░\r
+████▒▒                                ▒▒██░░░░\r
+░░████                                ██░░░░░░\r
+░░░░██                                ██░░░░░░\r
+░░░░░░██                            ██░░░░░░░░\r
+░░░░░░░░██                        ██░░░░░░░░░░\r
+░░░░░░░░██▒▒▒▒▒▒▒▒        ▒▒▒▒▒▒▒▒██░░░░░░░░░░\r
+░░░░░░░░░░██▒▒▒▒▒▒▒▒████▒▒▒▒▒▒▒▒██░░░░░░░░░░░░\r
+░░░░░░░░░░░░████████████████████░░░░░░░░░░░░░░</pre></code>\r
         </div>\r
       </section>\r
+      \r
+      <div class="back-to-top">\r
+        <a href="#top">\r
+          <i class="fa fa-chevron-up"></i>\r
+        </a>\r
+      </div>\r
+\r
+      <div class="social-icons">\r
+        <a href="https://twitter.com/tenkyuu28/">\r
+          <i class="fab fa-twitter"></i>\r
+        </a>\r
+        <a href="https://github.com/ten-kyuu/">\r
+          <i class="fa-brands fa-github"></i>\r
+        </a>\r
+      </div>\r
     </main>\r
 \r
     <footer>\r
-      <p class="copyright">&copy; 2024 <span class="logo">tenkyuu.dev</span><p>\r
+      <p class="built-with-love">\r
+        Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.\r
+      </p>\r
+      <p class="copyright">&copy; tenkyuu.dev</p>\r
     </footer>\r
-  </body>\r
-</html>\r
+\r
+    <script src="/javascript/script.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/javascript/script.js b/javascript/script.js
new file mode 100644 (file)
index 0000000..bc17eb9
--- /dev/null
@@ -0,0 +1,13 @@
+function menuToggleOpen() {\r
+  document.getElementById("menu").style.width = "50%";\r
+  document.getElementById("opacity-block").style.opacity = "80%";\r
+  document.getElementById("opacity-block").style.pointerEvents = "all";\r
+}\r
+function menuToggleClose() {\r
+  document.getElementById("menu").style.width = "0";\r
+  document.getElementById("opacity-block").style.opacity = "0";\r
+  document.getElementById("opacity-block").style.pointerEvents = "none";\r
+}\r
+function imgClickNull() {\r
+  alert("No link for this project yet. Construction still ongoing!");\r
+}
\ No newline at end of file
diff --git a/projects.html b/projects.html
new file mode 100644 (file)
index 0000000..d45b4dc
--- /dev/null
@@ -0,0 +1,141 @@
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+  <meta charset="UTF-8">\r
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=no">\r
+  <meta name="author" content="tenkyuu">\r
+  <meta name="description" content="List of all my works and personal projects.">\r
+  <meta name="referrer" content="no-referrer">\r
+  <meta name="robots" content="index, follow">\r
+  <title>tenkyuu - works</title>\r
+  <link rel="icon" type="image/ico" href="/assets/icons/favicon.ico">\r
+  <link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">\r
+  <link rel="stylesheet" href="/css/styles.css">\r
+<!-- Google Fonts -->\r
+  <link rel="preconnect" href="https://fonts.googleapis.com">\r
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\r
+  <link href="https://fonts.googleapis.com/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
+<!-- Font Awesome -->\r
+  <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
+</head>\r
+<body>\r
+  <header>\r
+    <span class="logo">tenkyuu</span>\r
+      <i class="fa fa-bars btnNav" onclick="menuToggleOpen()"></i>\r
+      <nav id="menu">\r
+        <i class="fas fa-times btnNavClose" onclick="menuToggleClose()"></i>\r
+        <ul>\r
+          <li><a href="index.html">Home</a></li>\r
+          <li><a href="projects.html" class="current-page">Projects</a></li>\r
+          <li><a href="about.html">About</a></li>\r
+          <li><a href="contact.html">Contact</a></li>\r
+        </ul>\r
+      </nav>\r
+      <div id="opacity-block" onclick="menuToggleClose()"></div>\r
+  </header>\r
+\r
+  <main id="top">\r
+    <section>\r
+      <h1 class="main-section-title">//PROJECTS</h1>\r
+      <div class="full-project-list">\r
+        <div class="full-project-tile">\r
+          <a href="" onclick="imgClickNull()">\r
+            <picture>\r
+              <source srcset="/images/projects/avif/technical-documentation.avif" type="image/avif">\r
+              <source srcset="/images/projects/webp/technical-documentation.webp" type="image/webp">\r
+              <img src="/images/projects/jpeg/technical-documentation.jpeg"\r
+                   alt="Technical Documentation Page"\r
+                   title="Technical Documentation Page">\r
+            </picture>\r
+          </a>\r
+          <div class="project-info">\r
+            <h2 class="project-name">Technical Documentation Page</h2>\r
+            <p class="project-description">\r
+              A fake technical documentation page I've made\r
+              from one of the required courses in freeCodeCamp.\r
+            </p>\r
+          </div>\r
+        </div>\r
+\r
+        <div class="full-project-tile">\r
+          <a href="" onclick="imgClickNull()">\r
+            <picture>\r
+              <source srcset="/images/projects/avif/product-landing.avif" type="image/avif">\r
+              <source srcset="/images/projects/webp/product-landing.webp" type="image/webp">\r
+              <img src="/images/projects/jpeg/product-landing.jpeg"\r
+                   alt="Product Landing Page"\r
+                   title="Product Landing Page">\r
+            </picture>\r
+          </a>\r
+          <div class="project-info">\r
+            <h2 class="project-name">Product Landing Page</h2>\r
+            <p class="project-description">\r
+              A product landing page I've made about coffee because I love coffee.\r
+            </p>\r
+          </div>\r
+        </div>\r
+\r
+        <div class="full-project-tile">\r
+          <a href="" onclick="imgClickNull()">\r
+            <picture>\r
+              <source srcset="/images/projects/avif/tribute.avif" type="image/avif">\r
+              <source srcset="/images/projects/webp/tribute.webp" type="image/webp">\r
+              <img src="/images/projects/jpeg/tribute.jpeg"\r
+                   alt="Tribute Page"\r
+                   title="Tribute Page">\r
+            </picture>\r
+          </a>\r
+          <div class="project-info">\r
+            <h2 class="project-name">Tribute Page</h2>\r
+            <p class="project-description">\r
+              A tribute page I've made for Steve Jobs, the founder of Apple.\r
+            </p>\r
+          </div>\r
+        </div>\r
+\r
+        <div class="full-project-tile">\r
+          <a href="" onclick="imgClickNull()">\r
+            <picture>\r
+              <source srcset="/images/projects/avif/survey-form.avif" type="image/avif">\r
+              <source srcset="/images/projects/webp/survey-form.webp" type="image/webp">\r
+              <img src="/images/projects/jpeg/survey-form.jpeg"\r
+                   alt="Survey Form"\r
+                   title="Survey Form">\r
+            </picture>\r
+          </a>\r
+          <div class="project-info">\r
+            <h2 class="project-name">Survey Form</h2>\r
+            <p class="project-description">\r
+              A simple survey form that records surveys (obviously).\r
+            </p>\r
+          </div>\r
+        </div>\r
+      </div>\r
+    </section>\r
+\r
+    <div class="back-to-top">\r
+      <a href="#top">\r
+        <i class="fa fa-chevron-up"></i>\r
+      </a>\r
+    </div>\r
+\r
+    <div class="social-icons">\r
+      <a href="https://twitter.com/tenkyuu28/">\r
+        <i class="fab fa-twitter"></i>\r
+      </a>\r
+      <a href="https://github.com/ten-kyuu/">\r
+        <i class="fa-brands fa-github"></i>\r
+      </a>\r
+    </div>\r
+  </main>\r
+\r
+  <footer>\r
+    <p class="built-with-love">\r
+      Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.\r
+    </p>\r
+    <p class="copyright">&copy; tenkyuu.dev</p>\r
+  </footer>\r
+\r
+  <script src="/javascript/script.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file