From: rain <136299953+ten-kyuu@users.noreply.github.com> Date: Sat, 13 Jul 2024 10:44:23 +0000 (+0800) Subject: Add files via upload X-Git-Url: https://git.bochard.net/?a=commitdiff_plain;h=4e9487cb955f9587a1e295be80642c852d6d3a12;p=mysite.git Add files via upload --- diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..30a3548 Binary files /dev/null and b/favicon.ico differ 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

+ +

+ +
+
+

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

+

<Web Developer />

+ +

Read more

+

🞃

+ +
+ +
+

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...

+
+
+ + Product Landing Page + +
+
+ + Technical Documentation Page + +
+
+ + Tribute Page + +
+
+ + Survey Form + +
+
+
+ +
+

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