From 4e9487cb955f9587a1e295be80642c852d6d3a12 Mon Sep 17 00:00:00 2001 From: rain <136299953+ten-kyuu@users.noreply.github.com> Date: Sat, 13 Jul 2024 18:44:23 +0800 Subject: [PATCH] Add files via upload --- favicon.ico | Bin 0 -> 4286 bytes index.html | 104 +++++++++++++++ styles.css | 357 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 461 insertions(+) create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 styles.css diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..30a3548bb8f6e5c4d63529b904125a6ae60902d2 GIT binary patch literal 4286 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 aFCI&gzdIf>^YA-)e?8)_{~z%Gef+;OS5Nc+ literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..ba6b25f --- /dev/null +++ b/index.html @@ -0,0 +1,104 @@ + + + + + + + + Tenkyuu | Web Developer + + + + + + + + +

tenkyuu

+
+
+
About
+
Projects
+
Contact
+
+
+

+ +

// Hi, I'm rain, a...

+ +

🞃

+ +

whoAmI?

I am nothing.

I'm a 17 year-old Filipino guy who loves writing codes and creating websites. Fully self-taught programmer. +

+ +

myPortfolio

Tan ta-na-nannn!

These are the best works I made so far...

+ +

+ +

+ +

+ +

+ +

letsWorkTogether!

Studio Ghibli fan as well?

+ + + + + + + + + +

+ + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d3b6017 --- /dev/null +++ b/styles.css @@ -0,0 +1,357 @@ +*, +before, +after { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html { + font-size: 62.5%; +} +body { + font-family: "Source Code Pro", monospace; + background-color: #141C25; +} +section { + margin-top: 10rem; + padding: 2rem; +} +section h2 { + font-family: "Chakra Petch", sans-serif; +} + +/* Navigation Bar */ +header { + background-color: #2E4057; + height: 7.5rem; + padding: 0 1.2rem; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 0.4rem solid #729B79; + position: fixed; + top: 1rem; + left: 50%; + width: 80vw; + transform: translateX(-50%); + border-radius: 0.8rem; + box-shadow: 0.8rem 0.8rem 0.2rem #000; +} +.logo { + font-size: 3rem; + color: #F4FFF8; + font-family: "Chakra Petch", sans-serif; + padding-right: 0.4rem; + text-shadow: 0.2rem 0.2rem #4EA699; +} +#navbar ul { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} +#navbar ul li { + list-style: none; +} +#navbar ul li a { + border: 0.2rem solid #F4FFF8; + border-radius: 0.6rem; + font-size: 1.4rem; + padding: 0.6rem 0.8rem; + text-decoration: none; + color: #F4FFF8; +} +#navbar ul li a:hover { + background-color: #F4FFF8; + color: #2E4057; +} + +/* Heading */ +#heading { + height: 100vh; + width: 100%; + margin: auto; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +#heading h1 { + color: #4EA699; + font-size: 2rem; +} +#heading .subheading { + color: #F4FFF8; + font-size: 3.8rem; + font-family: "Chakra Petch", sans-serif; + animation: color-change-animation 4.5s ease-in-out infinite 0.5s; +} +#heading a { + color: #F4FFF8; + text-decoration: none; + margin-top: 1rem; + font-size: 1.6rem; +} +#heading a .chevron-down { + margin-top: -0.4rem; + font-size: 1.6rem; +} +#heading a:hover, #heading a .chevron-down:hover { + transform: scale(90%); + transition: 0.5s ease-in-out 0.2s; +} + +/* About */ +#about { + background-color: #2E4057; + width: 80vw; + margin: auto; + border-radius: 0.6rem; + margin-bottom: 4rem; + box-shadow: 1rem 1rem 0.2rem #000; +} +#about h1, #about .subheading { + text-align: center; +} +#about h1 { + font-size: 3rem; + color: #F4FFF8; + padding-top: 1.4rem; +} +#about .subheading { + font-size: 1.8rem; + color: #4EA699; +} +#about .paragraph { + font-size: 1.6rem; + padding: 1.8rem; + color: #91A0A8; +} + +/* Projects */ +#projects { + background-color: #2E4057; + width: 80vw; + margin: auto; + border-radius: 0.6rem; + padding-bottom: 1rem; + margin-bottom: 4rem; + box-shadow: 1rem 1rem 0.2rem #000; +} +#projects h2, #projects .subheading { + text-align: center; +} +#projects h2 { + font-size: 3rem; + color: #F4FFF8; + padding-top: 1.4rem; +} +#projects .subheading { + font-size: 1.8rem; + color: #4EA699; +} +#projects .paragraph { + font-size: 1.6rem; + padding: 1.8rem; + color: #91A0A8; +} +#projects .project-gallery { + border: 0.2rem solid #729B79; + border-radius: 0.6rem; + height: 20rem; + width: 90%; + margin: 1rem auto; + margin-bottom: 3rem; + box-shadow: 1rem 1rem 0.2rem #000; + background-color: #4EA69980; + padding: 1.4rem; + white-space: nowrap; + overflow: auto; + display: flex; + flex-direction: row; + gap: 1.4rem; +} +.project-tile img { + border-radius: 0.8rem; + box-shadow: 0.8rem 0.8rem 0.4rem black; + height: 90%; + object-fit: cover; +} + +/* Contact */ +#contact { + background-color: #2E4057; + width: 80vw; + margin: auto; + border-radius: 0.6rem; + padding-bottom: 1rem; + box-shadow: 1rem 1rem 0.2rem #000; +} +#contact h2, #contact .subheading { + text-align: center; +} +#contact h2 { + font-size: 3rem; + color: #F4FFF8; + padding-top: 1.4rem; +} +#contact .subheading { + font-size: 1.8rem; + color: #4EA699; +} +.contact-options { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 2rem; + height: 2rem; + padding: 3rem; + margin-top: 1.8rem; + margin-bottom: 1.8rem; +} +#contact a { + color: #729B79; + border: 0.2rem solid #729B79; + border-radius: 1rem; + padding: 1rem; + font-size: 2.8rem; + box-shadow: 0.6rem 0.6rem #000; + transition: 0.5s ease-in-out 0.2s; +} +#contact a:hover { + color: #F4FFF8; + border: 0.2rem solid #F4FFF8; + transform: scale(1.2); +} + +/* Footer */ +footer { + background-color: #2E4057; + height: 10rem; + font-family: "Chakra Petch", sans-serif; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.6rem; + margin-top: 8rem; +} +p.copyright { + color: #F4FFF8; +} +.copyright .logo { + font-size: 2.4rem; +} + +/* Media Queries */ +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +/* Different screen sizes responsiveness */ +@media only screen and (min-width: 600px) { + header { + padding: 0 2rem; + } + .logo { + font-size: 3.4rem; + } + #navbar ul { + gap: 1rem; + } + #navbar ul li a { + font-size: 1.8rem; + } + #heading h1 { + font-size: 3.4rem; + } + #heading .subheading { + font-size: 6rem; + } + #heading a { + font-size: 2rem; + } + #heading a .chevron-down { + margin-top: -0.8rem; + font-size: 2rem; + } + #about { + width: 70vw; + max-width: 100rem; + } + #about h1 { + font-size: 5rem; + } + #about .subheading { + font-size: 2.8rem; + } + #about .paragraph { + font-size: 2.4rem; + padding: 3rem; + } + #projects { + width: 80vw; + max-width: 120rem; + } + #projects h2 { + font-size: 5rem; + } + #projects .subheading { + font-size: 2.8rem; + } + #projects .paragraph { + font-size: 2.4rem; + padding: 3rem; + } + #projects .project-gallery { + height: 30rem; + gap: 2.4rem; + } + .project-tile img { + height: 95%; + } + #contact { + width: 70vw; + max-width: 100rem; + } + #contact h2 { + font-size: 5rem; + } + #contact .subheading { + font-size: 2.8rem; + } + .contact-options { + gap: 4rem; + height: 4rem; + padding: 4rem; + } + #contact a { + padding: 1.4rem; + font-size: 4rem; + } + footer { + height: 12rem; + font-size: 2rem; + } + .copyright .logo { + font-size: 2.8rem; + } +} + +/* Animations */ +@keyframes color-change-animation { + 25% { + color: #729B79; + } + 50%{ + color: #91A0A8; + } + 75% { + color: #4EA699; + } + 100% { + color: #F4FFF8; + } +} \ No newline at end of file -- 2.39.5