<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Amatic+SC:wght@400;700&family=Pangolin&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
<body>
- <header>
- <a href="https://tenkyuu.dev"
- class="logo">
- <p>bocharudo.</p>
- </a>
- <nav class="navbar">
- <div class="nav-menu">
- <div class="nav-title">General</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="index.html" class="nav-link">Home</a>
- </li>
- <li class="nav-item">
- <a href="contact.html" class="nav-link">Contact</a>
- </li>
- </ul>
+ <div id="header"></div>
- <div class="nav-title">Projects</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="https://zeld.pages.dev" class="nav-link">
- <p class="project-link-name">Zeld - Video Editor</p>
- <p class="project-link-info">A website for Zeld (zeld.pages.dev).</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/survey-form.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Survey Form</p>
- <p class="project-link-info">A simple, classic style survey form.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/tribute-page.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Tribute Page</p>
- <p class="project-link-info">A basic tribute page I've made for Steve Jobs. Founder of Apple Inc.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/technical-documentation.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Technical Documentation</p>
- <p class="project-link-info">One of the required projects in freeCodeCamp.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/product-landing.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Product Landing</p>
- <p class="project-link-info">Product landing page for a coffee business.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects.html" class="nav-link">
- See more projects...
- </a>
- </li>
- </ul>
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ fetch('header.html')
+ .then(response => response.text())
+ .then(data => {
+ document.getElementById('header').innerHTML = data;
- <div class="nav-title">Other</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="terms-of-service.html" class="nav-link">Terms of Service</a>
- </li>
- <li class="nav-item">
- <a href="privacy-policy.html" class="nav-link">Privacy Policy</a>
- </li>
- </ul>
+ const script = document.createElement("script");
+ script.src = "js/script.js";
+ document.body.appendChild(script);
+ });
+ });
+ </script>
- <div class="nav-row-ctn">
- <span class="made-with-love">
- Made with <span class="love">愛</span> using hand-coded HTML, CSS, and JavaScript.
- </span>
- <ul class="nav-social">
- <a href="https://bocharudo.bsky.social/">
- <i class="fa-brands fa-bluesky"
- aria-hidden="true"
- aria-label="my bluesky account"></i>
- </a>
- <!-- <a href="https://twitter.com/bocharudo">
- <i class="fa-brands fa-square-twitter"
- aria-hidden="true"
- aria-label="my twitter account"></i>
- </a> -->
- <a href="https://github.com/bocharudo">
- <i class="fa-brands fa-github"
- aria-hidden="true"
- aria-label="my github account"></i>
- </a>
- <a href="mailto:mail@tenkyuu.dev">
- <i class="fa-solid fa-envelope"
- aria-hidden="true"
- aria-label="my email address"></i>
- </a>
- </ul>
- </div>
- </div>
-
- <!-- hamburger menu -->
- <div class="mobile-menu">
- <span class="bar"></span>
- <span class="bar"></span>
- <span class="bar"></span>
- </div>
- </nav>
- </header>
<main>
placeholder="Write something here..."
required></textarea>
<span class="form-privacy-notice">By clicking the submit button, you agree to the <a href="privacy-policy.html" class="privacy-notice-link">Privacy Policy</a></span>
- <button type="submit"
+ <button type="button"
class="contact-submit-btn"
aria-label="submit the form">Submit</button>
</form>
</p>
</footer>
- <script src="js/script.js"></script>
+
<script src="js/brands.min.js"></script>
<script src="js/solid.min.js"></script>
<script src="js/fontawesome.min.js"></script>
text-decoration: none;
background-size: cover;
background-position: center;
- filter: saturate(0) blur(0.5px) brightness(90%);
transition: filter 0.2s ease-in-out;
padding-top: 4rem;
}
-.crd-link:hover {
- filter: saturate(1) blur(0) brightness(100%);
-}
-.crd-link:hover .fa-arrow-right {
- right: 0;
- visibility: visible;
- opacity: 1;
-}
.crd-content-ctn-1,
.crd-content-ctn-2,
.crd-content-ctn-3 {
font-size: 5rem;
position: absolute;
bottom: 0;
- right: 3rem;
+ right: 0;
padding: 2rem;
transition: 0.2s ease-in-out;
- visibility: hidden;
- opacity: 0;
color: var(--linkcolor);
filter: drop-shadow( 1px 1px 2px #000);
}
+@media only screen and (min-width: 600px) {
+ .crd-link {
+ filter: saturate(0) blur(0.5px) brightness(90%);
+ }
+ .crd-link:hover {
+ filter: saturate(1) blur(0) brightness(100%);
+ }
+ .crd-arrow {
+ right: 3rem;
+ opacity: 0;
+ }
+ .crd-link:hover .fa-arrow-right {
+ right: 0;
+ opacity: 1;
+ }
+}
+
+
+
+
+
+
/* UNDER CONSTRUCTION */
.under-construction-ctn {
position: fixed;
height: fit-content;
width: 100%;
- font-size: 2rem;
+ font-size: 1.7rem;
text-align: center;
margin-top: 6rem;
z-index: 1;
display: flex;
justify-content: center;
+ background-color: #ff4a4a;
}
-.under-construction-text {
- width: 50%;
- background-color: var(--mainbg2);
+
+/* FORM NOT WORKING */
+.form-not-working-ctn {
+ font-size: 1.5rem;
+ background-color: #fd3535;
+ width: 100%;
+ padding: 1rem;
+ text-align: center;
}
--- /dev/null
+<header>
+ <a href="https://tenkyuu.dev"
+ class="logo">
+ <p>bocharudo.</p>
+ </a>
+ <nav class="navbar">
+ <div class="nav-menu">
+ <div class="nav-title">General</div>
+ <ul class="nav-itm-ctn">
+ <li class="nav-item">
+ <a href="index.html" class="nav-link">Home</a>
+ </li>
+ <li class="nav-item">
+ <a href="contact.html" class="nav-link">Contact</a>
+ </li>
+ </ul>
+
+ <div class="nav-title">Projects</div>
+ <ul class="nav-itm-ctn">
+ <li class="nav-item">
+ <a href="https://zeld.pages.dev" class="nav-link">
+ <p class="project-link-name">Zeld - Video Editor</p>
+ <p class="project-link-info">A website for Zeld (zeld.pages.dev).</p>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="projects/survey-form.html" onclick="nullLink()" class="nav-link">
+ <p class="project-link-name">Survey Form</p>
+ <p class="project-link-info">A simple, classic style survey form.</p>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="projects/tribute-page.html" onclick="nullLink()" class="nav-link">
+ <p class="project-link-name">Tribute Page</p>
+ <p class="project-link-info">A basic tribute page I've made for Steve Jobs. Founder of Apple Inc.</p>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="projects/technical-documentation.html" onclick="nullLink()" class="nav-link">
+ <p class="project-link-name">Technical Documentation</p>
+ <p class="project-link-info">One of the required projects in freeCodeCamp.</p>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="projects/product-landing.html" onclick="nullLink()" class="nav-link">
+ <p class="project-link-name">Product Landing</p>
+ <p class="project-link-info">Product landing page for a coffee business.</p>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a href="projects.html" class="nav-link">
+ See more projects...
+ </a>
+ </li>
+ </ul>
+
+ <div class="nav-title">Other</div>
+ <ul class="nav-itm-ctn">
+ <li class="nav-item">
+ <a href="terms-of-service.html" class="nav-link">Terms of Service</a>
+ </li>
+ <li class="nav-item">
+ <a href="privacy-policy.html" class="nav-link">Privacy Policy</a>
+ </li>
+ </ul>
+
+ <div class="nav-row-ctn">
+ <span class="made-with-love">
+ Made with <span class="love">愛</span> using hand-coded HTML, CSS, and JavaScript.
+ </span>
+ <ul class="nav-social">
+ <a href="https://bocharudo.bsky.social/">
+ <i class="fa-brands fa-bluesky"
+ aria-hidden="true"
+ aria-label="my bluesky account"></i>
+ </a>
+ <a href="https://github.com/bocharudo">
+ <i class="fa-brands fa-github"
+ aria-hidden="true"
+ aria-label="my github account"></i>
+ </a>
+ <a href="mailto:mail@tenkyuu.dev">
+ <i class="fa-solid fa-envelope"
+ aria-hidden="true"
+ aria-label="my email address"></i>
+ </a>
+ </ul>
+ </div>
+ </div>
+
+ <!-- hamburger menu -->
+ <div class="mobile-menu">
+ <span class="bar"></span>
+ <span class="bar"></span>
+ <span class="bar"></span>
+ </div>
+ </nav>
+</header>
\ No newline at end of file
aria-hidden="true"\r
aria-label="my bluesky account"></i>\r
</a>\r
- <!-- <a href="https://twitter.com/bocharudo">\r
- <i class="fa-brands fa-square-twitter"\r
- aria-hidden="true"\r
- aria-label="my twitter account"></i>\r
- </a> -->\r
<a href="https://github.com/bocharudo">\r
<i class="fa-brands fa-github"\r
aria-hidden="true"\r
// navigation
-const mobile_menu = document.querySelector(".mobile-menu");
-const nav_menu = document.querySelector(".nav-menu");
+const mobile_menu = document.querySelector('.mobile-menu');
+const nav_menu = document.querySelector('.nav-menu');
-mobile_menu.addEventListener("click", () => {
- mobile_menu.classList.toggle("active");
- nav_menu.classList.toggle("active");
+mobile_menu.addEventListener('click', () => {
+ mobile_menu.classList.toggle('active');
+ nav_menu.classList.toggle('active');
})
-document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
- mobile_menu.classList.remove("active");
- nav_menu.classList.remove("active");
+document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
+ mobile_menu.classList.remove('active');
+ nav_menu.classList.remove('active');
}))
function nullLink() {
- alert("NO LINK FOR THIS PROJECT YET :D");
+ alert('NO LINK FOR THIS PROJECT YET :D');
}
// navigation - page indicator
-const active_page = window.location.pathname === "/" ? "/index.html" : window.location.pathname;
+const active_page = window.location.pathname === '/' ? '/index.html' : window.location.pathname;
console.log(active_page);
-const nav_links = document.querySelectorAll(".nav-link").forEach(link => {
+const nav_links = document.querySelectorAll('.nav-link').forEach(link => {
if(link.href.includes(active_page)) {
- link.classList.add("active-page");
- link.closest(".nav-item").classList.add("active-page-bg");
+ link.classList.add('active-page');
+ link.closest('.nav-item').classList.add('active-page-bg');
}
})
header.insertAdjacentHTML('afterend',
`<div class="under-construction-ctn">
- <div class="under-construction-text">
- WEBSITE IS UNDER CONSTRUCTION :D
- </div>
+ WEBSITE IS UNDER CONSTRUCTION :D
</div>`);
};
-underConstruction();
\ No newline at end of file
+underConstruction();
+
+//form not working
+const formNotWorking = () => {
+ const form = document.querySelector('.form');
+ if (!form) {
+ console.log('Form class not found.');
+ return;
+ }
+
+ form.insertAdjacentHTML('afterbegin',
+ `<div class="form-not-working-ctn">Form not working in the meantime.</div>`
+ )
+}
+
+formNotWorking();
\ No newline at end of file
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Amatic+SC:wght@400;700&family=Pangolin&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
<body>
- <header>
- <a href="https://tenkyuu.dev"
- class="logo">
- <p>bocharudo.</p>
- </a>
- <nav class="navbar">
- <div class="nav-menu">
- <div class="nav-title">General</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="index.html" class="nav-link">Home</a>
- </li>
- <li class="nav-item">
- <a href="contact.html" class="nav-link">Contact</a>
- </li>
- </ul>
+ <div id="header"></div>
- <div class="nav-title">Projects</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="https://zeld.pages.dev" class="nav-link">
- <p class="project-link-name">Zeld - Video Editor</p>
- <p class="project-link-info">A website for Zeld (zeld.pages.dev).</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/survey-form.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Survey Form</p>
- <p class="project-link-info">A simple, classic style survey form.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/tribute-page.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Tribute Page</p>
- <p class="project-link-info">A basic tribute page I've made for Steve Jobs. Founder of Apple Inc.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/technical-documentation.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Technical Documentation</p>
- <p class="project-link-info">One of the required projects in freeCodeCamp.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/product-landing.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Product Landing</p>
- <p class="project-link-info">Product landing page for a coffee business.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects.html" class="nav-link">
- See more projects...
- </a>
- </li>
- </ul>
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ fetch('header.html')
+ .then(response => response.text())
+ .then(data => {
+ document.getElementById('header').innerHTML = data;
- <div class="nav-title">Other</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="terms-of-service.html" class="nav-link">Terms of Service</a>
- </li>
- <li class="nav-item">
- <a href="privacy-policy.html" class="nav-link">Privacy Policy</a>
- </li>
- </ul>
-
- <div class="nav-row-ctn">
- <span class="made-with-love">
- Made with <span class="love">愛</span> using hand-coded HTML, CSS, and JavaScript.
- </span>
- <ul class="nav-social">
- <a href="https://bocharudo.bsky.social/">
- <i class="fa-brands fa-bluesky"
- aria-hidden="true"
- aria-label="my bluesky account"></i>
- </a>
- <!-- <a href="https://twitter.com/bocharudo">
- <i class="fa-brands fa-square-twitter"
- aria-hidden="true"
- aria-label="my twitter account"></i>
- </a> -->
- <a href="https://github.com/bocharudo">
- <i class="fa-brands fa-github"
- aria-hidden="true"
- aria-label="my github account"></i>
- </a>
- <a href="mailto:mail@tenkyuu.dev">
- <i class="fa-solid fa-envelope"
- aria-hidden="true"
- aria-label="my email address"></i>
- </a>
- </ul>
- </div>
- </div>
-
- <!-- hamburger menu -->
- <div class="mobile-menu">
- <span class="bar"></span>
- <span class="bar"></span>
- <span class="bar"></span>
- </div>
- </nav>
- </header>
+ const script = document.createElement("script");
+ script.src = "js/script.js";
+ document.body.appendChild(script);
+ });
+ });
+ </script>
<main>
</p>
</footer>
- <script src="js/script.js"></script>
<script src="js/brands.min.js"></script>
<script src="js/solid.min.js"></script>
<script src="js/fontawesome.min.js"></script>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css2?family=Amatic+SC:wght@400;700&family=Pangolin&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
<body>
- <header>
- <a href="https://tenkyuu.dev"
- class="logo">
- <p>bocharudo.</p>
- </a>
- <nav class="navbar">
- <div class="nav-menu">
- <div class="nav-title">General</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="index.html" class="nav-link">Home</a>
- </li>
- <li class="nav-item">
- <a href="contact.html" class="nav-link">Contact</a>
- </li>
- </ul>
+ <div id="header"></div>
- <div class="nav-title">Projects</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="https://zeld.pages.dev" class="nav-link">
- <p class="project-link-name">Zeld - Video Editor</p>
- <p class="project-link-info">A website for Zeld (zeld.pages.dev).</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/survey-form.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Survey Form</p>
- <p class="project-link-info">A simple, classic style survey form.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/tribute-page.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Tribute Page</p>
- <p class="project-link-info">A basic tribute page I've made for Steve Jobs. Founder of Apple Inc.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/technical-documentation.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Technical Documentation</p>
- <p class="project-link-info">One of the required projects in freeCodeCamp.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects/product-landing.html" onclick="nullLink()" class="nav-link">
- <p class="project-link-name">Product Landing</p>
- <p class="project-link-info">Product landing page for a coffee business.</p>
- </a>
- </li>
- <li class="nav-item">
- <a href="projects.html" class="nav-link">
- See more projects...
- </a>
- </li>
- </ul>
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ fetch('header.html')
+ .then(response => response.text())
+ .then(data => {
+ document.getElementById('header').innerHTML = data;
- <div class="nav-title">Other</div>
- <ul class="nav-itm-ctn">
- <li class="nav-item">
- <a href="terms-of-service.html" class="nav-link">Terms of Service</a>
- </li>
- <li class="nav-item">
- <a href="privacy-policy.html" class="nav-link">Privacy Policy</a>
- </li>
- </ul>
-
- <div class="nav-row-ctn">
- <span class="made-with-love">
- Made with <span class="love">愛</span> using hand-coded HTML, CSS, and JavaScript.
- </span>
- <ul class="nav-social">
- <a href="https://bocharudo.bsky.social/">
- <i class="fa-brands fa-bluesky"
- aria-hidden="true"
- aria-label="my bluesky account"></i>
- </a>
- <!-- <a href="https://twitter.com/bocharudo">
- <i class="fa-brands fa-square-twitter"
- aria-hidden="true"
- aria-label="my twitter account"></i>
- </a> -->
- <a href="https://github.com/bocharudo">
- <i class="fa-brands fa-github"
- aria-hidden="true"
- aria-label="my github account"></i>
- </a>
- <a href="mailto:mail@tenkyuu.dev">
- <i class="fa-solid fa-envelope"
- aria-hidden="true"
- aria-label="my email address"></i>
- </a>
- </ul>
- </div>
- </div>
-
- <!-- hamburger menu -->
- <div class="mobile-menu">
- <span class="bar"></span>
- <span class="bar"></span>
- <span class="bar"></span>
- </div>
- </nav>
- </header>
+ const script = document.createElement("script");
+ script.src = "js/script.js";
+ document.body.appendChild(script);
+ });
+ });
+ </script>
<main>
</p>
</footer>
- <script src="js/script.js"></script>
<script src="js/brands.min.js"></script>
<script src="js/solid.min.js"></script>
<script src="js/fontawesome.min.js"></script>
projects / mysite.git / commitdiff