--- /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="Rain Torres">\r
+ <meta name="description" content="17-year self-learn web developer from The Philippines who loves writing codes and creating websites.">\r
+ <title>Tenkyuu | Web Developer</title>\r
+ <link rel="icon" type="image/x-icon" href="images\icons\favicon.ico">\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">\r
+ <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous"></script>\r
+</head>\r
+<body>\r
+ <header>\r
+ <h1 class="logo">tenkyuu<h1>\r
+ <nav id="navbar">\r
+ <ul>\r
+ <li><a href="#about">About</a></li>\r
+ <li><a href="#projects">Projects</a></li>\r
+ <li><a href="#contact">Contact</a></li>\r
+ </ul>\r
+ </nav>\r
+ </header>\r
+\r
+ <main>\r
+ <section id="heading">\r
+ <h1>// Hi, I'm rain, a...</h1>\r
+ <p class="subheading"><Web Developer /></p>\r
+ <a href="#about">\r
+ <p>Read more</p>\r
+ <p class="chevron-down">🞃</p>\r
+ </a>\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
+\r
+ <section id="projects">\r
+ <h2>myPortfolio</h2>\r
+ <p class="subheading">Tan ta-na-nannn!</p>\r
+ <p class="paragraph">These are the best works I made so far...</p>\r
+ <div class="project-gallery">\r
+ <div class="project-tile">\r
+ <a href="https://www.freecodecamp.org/tenkyuu"\r
+ target="_blank">\r
+ <img src="https://i.postimg.cc/8528P7n6/brave-screenshot-1.png"\r
+ alt="Product Landing Page"/>\r
+ </a>\r
+ </div>\r
+ <div class="project-tile">\r
+ <a href="https://www.freecodecamp.org/tenkyuu"\r
+ target="_blank">\r
+ <img src="https://i.postimg.cc/2jWR9xVF/brave-screenshot.png"\r
+ alt="Technical Documentation Page"/>\r
+ </a>\r
+ </div>\r
+ <div class="project-tile">\r
+ <a href="https://www.freecodecamp.org/tenkyuu"\r
+ target="_blank">\r
+ <img src="https://i.postimg.cc/RhKk3vjb/brave-screenshot-2.png"\r
+ alt="Tribute Page"/>\r
+ </a>\r
+ </div>\r
+ <div class="project-tile">\r
+ <a href="https://www.freecodecamp.org/tenkyuu"\r
+ target="_blank">\r
+ <img src="https://i.postimg.cc/5NMchFzc/brave-screenshot-3.png"\r
+ alt="Survey Form"/>\r
+ </a>\r
+ </div>\r
+ </div>\r
+ </section>\r
+\r
+ <section id="contact">\r
+ <h2>letsWorkTogether!</h2>\r
+ <p class="subheading">Studio Ghibli fan as well?</p>\r
+ <div class="contact-options">\r
+ <a href="https://www.twitter.com/tenkyuu28/"\r
+ id="profile-link"\r
+ target="_blank">\r
+ <i class="fab fa-twitter"></i>\r
+ </a>\r
+ <a href="mailto:raintorres@protonmail.com?subject=I&20need&20a&20Website">\r
+ <i class="fas fa-envelope"></i>\r
+ </a>\r
+ <a href="https://www.github.com/ten-kyuu/">\r
+ <i class="fa-brands fa-github"></i>\r
+ </a>\r
+ </div>\r
+ </section>\r
+ </main>\r
+\r
+ <footer>\r
+ <p class="copyright">© 2024 <span class="logo">tenkyuu</span><p>\r
+ </footer>\r
+ </body>\r
+</html>
\ No newline at end of file
--- /dev/null
+*,\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: "Source Code Pro", monospace;\r
+ background-color: #141C25;\r
+}\r
+section {\r
+ margin-top: 10rem;\r
+ padding: 2rem;\r
+}\r
+section h2 {\r
+ font-family: "Chakra Petch", sans-serif;\r
+}\r
+\r
+/* Navigation Bar */\r
+header {\r
+ background-color: #2E4057;\r
+ height: 7.5rem;\r
+ padding: 0 1.2rem;\r
+ display: flex;\r
+ justify-content: space-between;\r
+ align-items: center;\r
+ border-bottom: 0.4rem solid #729B79;\r
+ position: fixed;\r
+ top: 1rem;\r
+ left: 50%;\r
+ width: 80vw;\r
+ transform: translateX(-50%);\r
+ border-radius: 0.8rem;\r
+ box-shadow: 0.8rem 0.8rem 0.2rem #000;\r
+}\r
+.logo {\r
+ font-size: 3rem;\r
+ color: #F4FFF8;\r
+ font-family: "Chakra Petch", sans-serif;\r
+ padding-right: 0.4rem;\r
+ text-shadow: 0.2rem 0.2rem #4EA699;\r
+}\r
+#navbar ul {\r
+ display: flex;\r
+ flex-wrap: wrap;\r
+ gap: 0.4rem;\r
+}\r
+#navbar ul li {\r
+ list-style: none;\r
+}\r
+#navbar ul li a {\r
+ border: 0.2rem solid #F4FFF8;\r
+ border-radius: 0.6rem;\r
+ font-size: 1.4rem;\r
+ padding: 0.6rem 0.8rem;\r
+ text-decoration: none;\r
+ color: #F4FFF8;\r
+}\r
+#navbar ul li a:hover {\r
+ background-color: #F4FFF8;\r
+ color: #2E4057;\r
+}\r
+\r
+/* Heading */\r
+#heading {\r
+ height: 100vh;\r
+ width: 100%;\r
+ margin: auto;\r
+ text-align: center;\r
+ display: flex;\r
+ flex-direction: column;\r
+ align-items: center;\r
+ justify-content: center;\r
+}\r
+#heading h1 {\r
+ color: #4EA699;\r
+ font-size: 2rem;\r
+}\r
+#heading .subheading {\r
+ color: #F4FFF8;\r
+ font-size: 3.8rem;\r
+ font-family: "Chakra Petch", sans-serif;\r
+ animation: color-change-animation 4.5s ease-in-out infinite 0.5s;\r
+}\r
+#heading a {\r
+ color: #F4FFF8;\r
+ text-decoration: none;\r
+ margin-top: 1rem;\r
+ font-size: 1.6rem;\r
+}\r
+#heading a .chevron-down {\r
+ margin-top: -0.4rem;\r
+ font-size: 1.6rem;\r
+}\r
+#heading a:hover, #heading a .chevron-down:hover {\r
+ transform: scale(90%);\r
+ transition: 0.5s ease-in-out 0.2s;\r
+}\r
+\r
+/* About */\r
+#about {\r
+ background-color: #2E4057;\r
+ width: 80vw;\r
+ margin: auto;\r
+ border-radius: 0.6rem;\r
+ margin-bottom: 4rem;\r
+ box-shadow: 1rem 1rem 0.2rem #000;\r
+}\r
+#about h1, #about .subheading {\r
+ text-align: center;\r
+}\r
+#about h1 {\r
+ font-size: 3rem;\r
+ color: #F4FFF8;\r
+ padding-top: 1.4rem;\r
+}\r
+#about .subheading {\r
+ font-size: 1.8rem;\r
+ color: #4EA699;\r
+}\r
+#about .paragraph {\r
+ font-size: 1.6rem;\r
+ padding: 1.8rem;\r
+ color: #91A0A8;\r
+}\r
+\r
+/* Projects */\r
+#projects {\r
+ background-color: #2E4057;\r
+ width: 80vw;\r
+ margin: auto;\r
+ border-radius: 0.6rem;\r
+ padding-bottom: 1rem;\r
+ margin-bottom: 4rem;\r
+ box-shadow: 1rem 1rem 0.2rem #000;\r
+}\r
+#projects h2, #projects .subheading {\r
+ text-align: center;\r
+}\r
+#projects h2 {\r
+ font-size: 3rem;\r
+ color: #F4FFF8;\r
+ padding-top: 1.4rem;\r
+}\r
+#projects .subheading {\r
+ font-size: 1.8rem;\r
+ color: #4EA699;\r
+}\r
+#projects .paragraph {\r
+ font-size: 1.6rem;\r
+ padding: 1.8rem;\r
+ color: #91A0A8;\r
+}\r
+#projects .project-gallery {\r
+ border: 0.2rem solid #729B79;\r
+ border-radius: 0.6rem;\r
+ height: 20rem;\r
+ width: 90%;\r
+ margin: 1rem auto;\r
+ margin-bottom: 3rem;\r
+ box-shadow: 1rem 1rem 0.2rem #000;\r
+ background-color: #4EA69980;\r
+ padding: 1.4rem;\r
+ white-space: nowrap;\r
+ overflow: auto;\r
+ display: flex;\r
+ flex-direction: row;\r
+ gap: 1.4rem;\r
+}\r
+.project-tile img {\r
+ border-radius: 0.8rem;\r
+ box-shadow: 0.8rem 0.8rem 0.4rem black;\r
+ height: 90%;\r
+ object-fit: cover;\r
+}\r
+\r
+/* Contact */\r
+#contact {\r
+ background-color: #2E4057;\r
+ width: 80vw;\r
+ margin: auto;\r
+ border-radius: 0.6rem;\r
+ padding-bottom: 1rem;\r
+ box-shadow: 1rem 1rem 0.2rem #000;\r
+}\r
+#contact h2, #contact .subheading {\r
+ text-align: center;\r
+}\r
+#contact h2 {\r
+ font-size: 3rem;\r
+ color: #F4FFF8;\r
+ padding-top: 1.4rem;\r
+}\r
+#contact .subheading {\r
+ font-size: 1.8rem;\r
+ color: #4EA699;\r
+}\r
+.contact-options {\r
+ display: flex;\r
+ flex-direction: row;\r
+ justify-content: center;\r
+ align-items: center;\r
+ gap: 2rem;\r
+ height: 2rem;\r
+ padding: 3rem;\r
+ margin-top: 1.8rem;\r
+ margin-bottom: 1.8rem;\r
+}\r
+#contact a {\r
+ color: #729B79;\r
+ border: 0.2rem solid #729B79;\r
+ border-radius: 1rem;\r
+ padding: 1rem;\r
+ font-size: 2.8rem;\r
+ box-shadow: 0.6rem 0.6rem #000;\r
+ transition: 0.5s ease-in-out 0.2s;\r
+}\r
+#contact a:hover {\r
+ color: #F4FFF8;\r
+ border: 0.2rem solid #F4FFF8;\r
+ transform: scale(1.2);\r
+}\r
+\r
+/* Footer */\r
+footer {\r
+ background-color: #2E4057;\r
+ height: 10rem;\r
+ font-family: "Chakra Petch", sans-serif;\r
+ display: flex;\r
+ align-items: center;\r
+ justify-content: center;\r
+ font-size: 1.6rem;\r
+ margin-top: 8rem;\r
+}\r
+p.copyright {\r
+ color: #F4FFF8;\r
+}\r
+.copyright .logo {\r
+ font-size: 2.4rem;\r
+}\r
+\r
+/* Media Queries */\r
+@media (prefers-reduced-motion: no-preference) {\r
+ * {\r
+ scroll-behavior: smooth;\r
+ }\r
+}\r
+\r
+/* Different screen sizes responsiveness */\r
+@media only screen and (min-width: 600px) {\r
+ header {\r
+ padding: 0 2rem;\r
+ }\r
+ .logo {\r
+ font-size: 3.4rem;\r
+ }\r
+ #navbar ul {\r
+ gap: 1rem;\r
+ }\r
+ #navbar ul li a {\r
+ font-size: 1.8rem;\r
+ }\r
+ #heading h1 {\r
+ font-size: 3.4rem;\r
+ }\r
+ #heading .subheading {\r
+ font-size: 6rem;\r
+ }\r
+ #heading a {\r
+ font-size: 2rem;\r
+ }\r
+ #heading a .chevron-down {\r
+ margin-top: -0.8rem;\r
+ font-size: 2rem;\r
+ }\r
+ #about {\r
+ width: 70vw;\r
+ max-width: 100rem;\r
+ }\r
+ #about h1 {\r
+ font-size: 5rem;\r
+ }\r
+ #about .subheading {\r
+ font-size: 2.8rem;\r
+ }\r
+ #about .paragraph {\r
+ font-size: 2.4rem;\r
+ padding: 3rem;\r
+ }\r
+ #projects {\r
+ width: 80vw;\r
+ max-width: 120rem;\r
+ }\r
+ #projects h2 {\r
+ font-size: 5rem;\r
+ }\r
+ #projects .subheading {\r
+ font-size: 2.8rem;\r
+ }\r
+ #projects .paragraph {\r
+ font-size: 2.4rem;\r
+ padding: 3rem;\r
+ }\r
+ #projects .project-gallery {\r
+ height: 30rem;\r
+ gap: 2.4rem;\r
+ }\r
+ .project-tile img {\r
+ height: 95%;\r
+ }\r
+ #contact {\r
+ width: 70vw;\r
+ max-width: 100rem;\r
+ }\r
+ #contact h2 {\r
+ font-size: 5rem;\r
+ }\r
+ #contact .subheading {\r
+ font-size: 2.8rem;\r
+ }\r
+ .contact-options {\r
+ gap: 4rem;\r
+ height: 4rem;\r
+ padding: 4rem;\r
+ }\r
+ #contact a {\r
+ padding: 1.4rem;\r
+ font-size: 4rem;\r
+ }\r
+ footer {\r
+ height: 12rem;\r
+ font-size: 2rem;\r
+ }\r
+ .copyright .logo {\r
+ font-size: 2.8rem;\r
+ }\r
+}\r
+\r
+/* Animations */\r
+@keyframes color-change-animation {\r
+ 25% {\r
+ color: #729B79;\r
+ }\r
+ 50%{\r
+ color: #91A0A8;\r
+ }\r
+ 75% {\r
+ color: #4EA699;\r
+ }\r
+ 100% {\r
+ color: #F4FFF8;\r
+ }\r
+}
\ No newline at end of file
projects / mysite.git / commitdiff