made big updates in design and codes.
--- /dev/null
+<!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">© tenkyuu.dev</p>\r
+ </footer>\r
+\r
+ <script src="/javascript/script.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file
--- /dev/null
+<!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">© tenkyuu.dev</p>\r
+ </footer>\r
+\r
+ <script src="/javascript/script.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file
--- /dev/null
+: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
<!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">© 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">© 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
--- /dev/null
+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
--- /dev/null
+<!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">© tenkyuu.dev</p>\r
+ </footer>\r
+\r
+ <script src="/javascript/script.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file