From: tenkyuu Date: Wed, 7 Aug 2024 11:42:14 +0000 (+0800) Subject: tenkyuu.dev v2 X-Git-Url: https://git.bochard.net/?a=commitdiff_plain;h=5c41381b6eb3a5c39681b6e84ebfc3fdffe48a99;p=mysite.git tenkyuu.dev v2 made big updates in design and codes. --- diff --git a/about.html b/about.html new file mode 100644 index 0000000..1ec3b09 --- /dev/null +++ b/about.html @@ -0,0 +1,108 @@ + + + + + + + + + + tenkyuu - about + + + + + + + + + + + +
+ + + +
+
+ +
+
+

//ABOUT

+
+ + tenkyuu profile image + +
+

+ Hello, My name is tenkyuu.
+ Nice to meet you!
+

+

+ I'm a 17-year old self-learn
+ Filipino web developer who makes
+ hand-coded static websites. +

+

+ I've been interested on making
+ websites since grade school.
+

+

+ Now, that's what I do for a living! +

+

+ I'm really passionate on making
+ specific type of websites -
+ simple websites like this one,
+ old-internet style websites, and
+ Japanese style websites. +

+

+ Umm... that's all I can say for now HAHA
+ (tbh I'm not really good at words.) +

+

+ Thank you for reading this!
+ Thank youu!! +

+
+
+
+ +
+ + + +
+ + +
+ + + + + + \ No newline at end of file diff --git a/assets/icons/favicon.ico b/assets/icons/favicon.ico new file mode 100644 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 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 index 0000000..cd3176d --- /dev/null +++ b/contact.html @@ -0,0 +1,81 @@ + + + + + + + + + + tenkyuu - contact + + + + + + + + + + + +
+ + + +
+
+ +
+
+
+

//CONTACT

+
+
+

+ Hello! If you liked this website and you're
+ interested in making a website for your own,
+ whether for personal or business purposes.
+ You can reach me out anytime! +

+

+ For inquiries, you can email me here: +

+ + + +

+ If you didn't received a reply immediately.
+ Don't worry, I'll reply as soon as I could! +

+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..9c6eed8 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,645 @@ +:root { + --text-color: #ffffff; + --background-color: #000000; + --box-selection-color: #ffffff; + --box-text-color: #000000; + --title-text: "Lato", sans-serif; + --cursive-text: "Meddon", cursive; + --section-title-background: #0f0c0c; + --box-border: #000000; + --black-icon-color: #000000; +} +*, +::before, +::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html { + font-size: 62.5%; +} +body { + font-family: "Epilogue", sans-serif; + display: flex; + flex-direction: column; + align-items: center; +} + +/* top and sidebar */ +header { + position: fixed; + width: 100vw; + height: 10rem; + background-color: var(--background-color); + top: 0; + padding: 0 5rem; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 1; +} +.logo, .btnNav, nav, nav li { + color: var(--text-color); +} +.logo { + font-size: 2rem; + font-family: var(--title-text); + font-weight: 900; +} +.btnNav { + font-size: 3rem; +} +.btnNavClose { + font-size: 3rem; + margin-left: 15rem; +} +nav { + height: 100vh; + width: 0; + padding-top: 4rem; + font-size: 2rem; + background-color: var(--background-color); + position: fixed; + top: 0; + right: 0; + z-index: 3; + transition: 0.5s; +} +nav li { + list-style: none; + margin: 4rem 5rem; +} +nav a { + text-decoration: none; + color: var(--text-color); + padding: 1rem; +} +.current-page { + background-color: var(--box-selection-color); + color: var(--box-text-color); +} +nav a:hover, nav a:focus { + background-color: var(--box-selection-color); + color: var(--box-text-color); + transition: 0.2s; +} +#opacity-block { + width: 100vw; + height: 100vh; + top: 0; + left: 0; + background-color: var(--background-color); + opacity: 0; + z-index: 2; + position: fixed; + pointer-events: none; + transition: 1s; +} + +/* main */ +main { + padding-top: 10rem; +} +.section-title { + background-color: var(--section-title-background); + color: var(--text-color); + padding: 0.7rem 0; + padding-left: 1rem; + margin: 1rem; + font-size: 1.4rem; +} +.content-container { + margin: 2rem 1.2rem 4rem; +} +/* for centered contents */ +.content-container-centered { + margin: 2rem 1.2rem 4rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.dev-name { + font-size: 3.6rem; + font-family: var(--title-text); + font-weight: 900; +} +.description { + font-size: 1.8rem; + margin-top: 1.2rem; + margin-bottom: 1rem; + line-height: 2.4rem; +} +.center { + text-align: center; +} +.strong { + font-weight: bold; +} +/* for contact.html */ +.center-description { + text-align: center; +} +.main-section-title { + background-color: var(--section-title-background); + color: var(--text-color); + padding: 2rem; + font-size: 1.8rem; + text-align: center; + width: 100vw; +} +/* for about.html */ +.dev-pfp { + width: 20rem; + border-radius: 1rem; + margin-bottom: 2rem; +} + +/* skills */ +.skills-section { + display: flex; + justify-content: center; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; +} +.skill-container { + border: 0.2rem solid var(--box-border); + border-radius: 1rem; + padding: 2rem; + width: 100%; + max-width: 50rem; +} +.skill-title { + font-size: 2.4rem; + font-family: var(--title-text); + font-weight: 900; +} +.skill-container li { + font-size: 1.6rem; + list-style-position: inside; + padding: 0.6rem 0; +} +.skill-container li:nth-of-type(1) { + margin-top: 1rem; +} + +/* projects */ +.project-gallery { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} +.project-tile img { + width: 100%; + max-width: 50rem; + border: 0.4rem solid var(--box-border); + border-radius: 1rem; + object-fit: cover; + transition: 0.2s; +} +.project-tile img:hover, .project-tile img:focus { + transform: scale(0.99); +} +.all-projects-view { + padding: 7rem; + text-align: center; + vertical-align: middle; +} +.project-tile .all-text { + text-decoration: none; + color: var(--box-text-color); + border: 0.2rem solid var(--box-border); + font-size: 2rem; + padding: 2rem; + transition: 0.2s; +} +.project-tile .all-text:hover, .project-tile .all-text:focus { + color: var(--text-color); + background-color: var(--background-color); +} +/* for projects.html */ +.full-project-list { + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; + margin: 2rem 1.2rem 4rem; +} +.full-project-tile { + width: 100%; + max-width: 50rem; +} +.full-project-tile img { + width: 100%; + max-width: 50rem; + border: 0.4rem solid var(--box-border); + border-radius: 1rem; + object-fit: cover; + transition: 0.2s; +} +.full-project-tile img:hover, .full-project-tile img:focus { + transform: scale(0.99); +} +.project-info { + padding: 1.4rem; +} +.project-name { + font-family: var(--title-text); + font-weight: 900; + font-size: 2rem; +} +.project-description { + padding-top: 0.8rem; + font-size: 1.6rem; + line-height: 2.4rem; +} + +/* contactMe! */ +.contact-container { + text-align: center; + vertical-align: center; +} +.contact-container a { + text-decoration: none; + color: var(--black-icon-color); +} +.email-icon { + font-size: 7rem; + transition: 0.2s; +} +.email-me-text { + background-color: var(--background-color); + color: var(--text-color); + width: 10rem; + padding: 1rem; + margin: 0 auto; + font-size: 1.6rem; + border: 0.2rem solid var(--box-border); + transition: 0.2s; +} +.email-icon:hover, .email-icon:focus { + transform: scale(0.9); +} +.email-me-text:hover, .email-me-text:focus { + background-color: unset; + color: var(--box-text-color); +} +/* for contact.html */ + + +/* randomArt */ +code { + display: flex; + justify-content: center; + align-items: center; + margin: auto; + width: fit-content; + border: 0.4rem solid var(--box-border); + border-radius: 1rem; +} +.your-name { + transform: scale(0.5) +} + +/* back-to-top & social-icons */ +.back-to-top, .social-icons { + text-align: center; + vertical-align: middle; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} +.back-to-top a, .social-icons a { + color: var(--black-icon-color); + text-decoration: none; + transition: 0.3s; +} +.back-to-top { + margin-top: 4rem; + font-size: 2rem; +} +.back-to-top a { + padding: 2rem; +} +.back-to-top a:hover, .back-to-top a:focus{ + transform: translateY(-1rem); +} +.social-icons { + font-size: 4rem; +} +.social-icons a:hover, .social-icons a:focus { + transform: scale(0.9); +} + +/* footer */ +footer { + width: 95%; + margin: 2rem auto; + background-color: var(--background-color); + color: var(--text-color); + padding: 2rem; +} +footer p { + text-align: center; +} +.built-with-love { + font-size: 1.4rem; +} +.love { + font-family: var(--title-text); + font-weight: 900; + font-size: 1.8rem; +} +footer a { + color: var(--box-text-color); + background-color: var(--box-selection-color); + padding: 0.2rem 0.4rem; + font-family: var(--title-text); + text-decoration: none; +} +.copyright { + margin-top: 1.8rem; + font-size: 1.8rem; + font-family: var(--title-text); + font-weight: 700; +} + +/* media queries */ +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +/* large mobile devices*/ +@media only screen and (min-width: 600px) { + /* top and sidebar */ + .btnNav, .btnNavClose { + display: none; + } + nav { + height: 100%; + width: unset; + padding-top: unset; + font-size: 1.4rem; + background-color: transparent; + position: relative; + top: unset; + right: unset; + z-index: 1; + transition: 0.5s; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + nav ul { + width: inherit; + display: flex; + flex-direction: row; + } + nav li { + margin: 1rem; + } + nav a { + padding: 1rem; + } + + /* skills */ + .skill-container { + width: calc(50% - 1rem); + } + + /* projects */ + .project-tile img { + max-width: 40rem; + } + .all-projects-view { + width: 40rem; + } + /* for projects.html */ + .full-project-tile { + width: calc(50% - 1rem); + } + .full-project-tile img { + max-width: 40rem; + } + + /* randomArt */ + code { + font-size: 1rem; + } +} + +/* tablets, ipads, and alike */ +@media only screen and (min-width: 768px) { + .logo { + font-size: 2.6rem; + } + + /* top and sidebar */ + nav { + font-size: 1.8rem; + } + + /* whoAmI? */ + .section-title { + font-size: 1.6rem; + } + .dev-name { + font-size: 4.2rem; + } + .description { + font-size: 2rem; + line-height: 2.8rem; + } + /* for projects.html */ + .main-section-title { + font-size: 2rem; + } + .project-name { + font-size: 3rem; + } + .project-description { + font-size: 1.8rem; + } + .full-project-tile img { + max-width: 60rem; + } + + /* skills */ + .skill-title { + font-size: 3rem; + } + .skill-container li { + font-size: 2rem; + padding: 0.8rem 0; + } + + /* projects */ + .project-tile img { + max-width: 60rem; + } + .project-tile .all-text { + font-size: 2.4rem; + } + + /* contactMe! */ + .email-icon { + font-size: 9rem; + } + .email-me-text { + width: 12rem; + font-size: 2rem; + } + + /* randomArt */ + code { + font-size: 1.2rem; + } + + /* back-to-top & social icons */ + .back-to-top { + margin-top: 7rem; + font-size: 2.8rem; + } + .back-to-top a { + padding: 2rem; + } + .social-icons { + font-size: 5rem; + gap: 2.4rem; + } + + footer { + padding: 4rem; + } + .built-with-love { + font-size: 1.8rem; + } + .love { + font-size: 2.4rem; + } + footer a { + padding: 0.4rem 0.6rem; + font-size: 2rem; + } + .copyright { + margin-top: 2.4rem; + font-size: 2rem; + } +} + +/* laptops/desktops and bigger screens */ +@media only screen and (min-width: 1024px) { + .logo { + font-size: 2.8rem; + } + + /* top and sidebar */ + header { + padding: 0 10rem; + } + nav { + font-size: 2rem; + } + + /* main */ + .content-container { + margin: 2rem 6rem 4rem; + } + .content-container-centered { + margin: 2rem 6rem 4rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + /* for projects.html */ + .main-section-title { + font-size: 1.8rem; + } + .full-project-list { + width: 60%; + margin: 2rem auto 4rem; + gap: 2rem; + } + .project-name { + font-size: 2.8rem; + } + .project-description { + font-size: 1.6rem; + } + + /* whoAmI? */ + .dev-name { + font-size: 4rem; + } + .description { + line-height: 2.6rem; + } + + /* skills */ + .skill-container { + width: 15%; + } + .skill-title { + font-size: 2.4rem; + } + + /* projects */ + .project-tile img { + max-width: 35rem; + height: 50rem; + } + .all-projects-view { + width: 25rem; + } + .project-tile .all-text { + font-size: 2rem; + } + + /* contactMe! */ + .email-icon { + font-size: 8rem; + } + + /* randomArt */ + code { + font-size: 1rem; + } + + /* back-to-top & social icons */ + .back-to-top { + font-size: 2.4rem; + } + .back-to-top a { + padding: 4rem; + } + .social-icons { + font-size: 4rem; + } + + /* footer */ + .built-with-love { + font-size: 1.4rem; + } + .love { + font-size: 2rem; + } + footer a { + font-size: 1.6rem; + } + .copyright { + margin-top: 2.8rem; + } +} \ No newline at end of file diff --git a/images/projects/avif/product-landing.avif b/images/projects/avif/product-landing.avif index 00950f3..50ade0d 100644 Binary files a/images/projects/avif/product-landing.avif and b/images/projects/avif/product-landing.avif differ diff --git a/images/projects/avif/survey-form.avif b/images/projects/avif/survey-form.avif index 6e6a8cc..edde3f8 100644 Binary files a/images/projects/avif/survey-form.avif and b/images/projects/avif/survey-form.avif differ diff --git a/images/projects/avif/technical-documentation.avif b/images/projects/avif/technical-documentation.avif index bfc5c8e..00180d3 100644 Binary files a/images/projects/avif/technical-documentation.avif and b/images/projects/avif/technical-documentation.avif differ diff --git a/images/projects/avif/tribute.avif b/images/projects/avif/tribute.avif index 1a4141e..17756f5 100644 Binary files a/images/projects/avif/tribute.avif and b/images/projects/avif/tribute.avif differ diff --git a/images/projects/jpeg/product-landing.jpeg b/images/projects/jpeg/product-landing.jpeg index 025d780..5ae2ed5 100644 Binary files a/images/projects/jpeg/product-landing.jpeg and b/images/projects/jpeg/product-landing.jpeg differ diff --git a/images/projects/jpeg/survey-form.jpeg b/images/projects/jpeg/survey-form.jpeg index fe8faa7..13d8635 100644 Binary files a/images/projects/jpeg/survey-form.jpeg and b/images/projects/jpeg/survey-form.jpeg differ diff --git a/images/projects/jpeg/technical-documentation.jpeg b/images/projects/jpeg/technical-documentation.jpeg index 40e51ae..5015629 100644 Binary files a/images/projects/jpeg/technical-documentation.jpeg and b/images/projects/jpeg/technical-documentation.jpeg differ diff --git a/images/projects/jpeg/tribute.jpeg b/images/projects/jpeg/tribute.jpeg index 95b7317..181fba8 100644 Binary files a/images/projects/jpeg/tribute.jpeg and b/images/projects/jpeg/tribute.jpeg differ diff --git a/images/projects/webp/product-landing.webp b/images/projects/webp/product-landing.webp index 0173252..43960bb 100644 Binary files a/images/projects/webp/product-landing.webp and b/images/projects/webp/product-landing.webp differ diff --git a/images/projects/webp/survey-form.webp b/images/projects/webp/survey-form.webp index 4cc5fc1..acf51cc 100644 Binary files a/images/projects/webp/survey-form.webp and b/images/projects/webp/survey-form.webp differ diff --git a/images/projects/webp/technical-documentation.webp b/images/projects/webp/technical-documentation.webp index 53e87a7..681a05a 100644 Binary files a/images/projects/webp/technical-documentation.webp and b/images/projects/webp/technical-documentation.webp differ diff --git a/images/projects/webp/tribute.webp b/images/projects/webp/tribute.webp index d1edd31..6459c18 100644 Binary files a/images/projects/webp/tribute.webp and b/images/projects/webp/tribute.webp differ diff --git a/index.html b/index.html index 93f00b7..d742a38 100644 --- a/index.html +++ b/index.html @@ -1,129 +1,215 @@ - - - - - - tenkyuu - web developer - - - - - - - + + + + + + + tenkyuu - web developer + + + + + + + + + -
-

tenkyuu

- -
+
+ + + +
+
-
-
-

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

-

Web Developer :D

- -

Read more

- -
+
+
+

//whoAmI?

+
+

tenkyuu

+

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.

+

I love making websites especially from those old-internet styles, and Japanese style websites.

+
-
-

whoAmI?

-

I am nothing.

-

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

+
+

//skills

+
+
+

Front-End Development:

+
    +
  • HTML
  • +
  • CSS
  • +
  • JavaScript (beginner)
  • +
+
+
+

Softwares:

+
    +
  • Visual Studio
  • +
  • Notepad (yep, i code here)
  • +
  • CapCut
  • +
+
+
+

Other Things I'm Interested:

+
  • Cybersecurity
  • +
  • Eastern Philosophies
  • +
  • Christianity
  • +
  • Stoicism
  • +
  • Aerospace
  • +
  • Books
  • +
  • Anime
  • +
    +
    +

    Other Skills:

    +
      +
    • Video Editing
    • +
    +
    +
    +

    Spoken Languages:

    +
  • Filipino (native)
  • +
  • Japanese (conversational)
  • +
  • English (fluent)
  • +
    +
    -
    -

    myWorks

    -

    Ta-daa!

    -

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

    -
    -

    +

    + Built with 愛 using hand-coded HTML, CSS, and JavaScript. +

    +
    - - + + + + \ No newline at end of file diff --git a/javascript/script.js b/javascript/script.js new file mode 100644 index 0000000..bc17eb9 --- /dev/null +++ b/javascript/script.js @@ -0,0 +1,13 @@ +function menuToggleOpen() { + document.getElementById("menu").style.width = "50%"; + document.getElementById("opacity-block").style.opacity = "80%"; + document.getElementById("opacity-block").style.pointerEvents = "all"; +} +function menuToggleClose() { + document.getElementById("menu").style.width = "0"; + document.getElementById("opacity-block").style.opacity = "0"; + document.getElementById("opacity-block").style.pointerEvents = "none"; +} +function imgClickNull() { + alert("No link for this project yet. Construction still ongoing!"); +} \ No newline at end of file diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..d45b4dc --- /dev/null +++ b/projects.html @@ -0,0 +1,141 @@ + + + + + + + + + + tenkyuu - works + + + + + + + + + + + +
    + + + +
    +
    + +
    +
    +

    //PROJECTS

    +
    +
    + + + + + Technical Documentation Page + + +
    +

    Technical Documentation Page

    +

    + A fake technical documentation page I've made + from one of the required courses in freeCodeCamp. +

    +
    +
    + +
    + + + + + Product Landing Page + + +
    +

    Product Landing Page

    +

    + A product landing page I've made about coffee because I love coffee. +

    +
    +
    + +
    + + + + + Tribute Page + + +
    +

    Tribute Page

    +

    + A tribute page I've made for Steve Jobs, the founder of Apple. +

    +
    +
    + +
    + + + + + Survey Form + + +
    +

    Survey Form

    +

    + A simple survey form that records surveys (obviously). +

    +
    +
    +
    +
    + +
    + + + +
    + + +
    + +
    +

    + Built with 愛 using hand-coded HTML, CSS, and JavaScript. +

    + +
    + + + + \ No newline at end of file