techit/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change new layout

Browse Source
This commit is contained in:
Techit Thawiang
2025-08-25 21:13:33 +07:00
parent 963f460e8a
commit 136c513630
9 changed files with 428 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/web-footer.vue
+5 -3
View File
@@ -7,12 +7,14 @@ import WebThemeToggle from './web-theme-toggle.vue';
<footer> <footer>
<div class="article"> <div class="article">
<section class="web-section"> <section class="web-section">
<h3 class="text-3xl md:text-5xl mb-4">Techit's Home /// thawia.ng</h3> <h3 class="text-2xl md:text-3xl mb-4 font-light">Techit's Home /// thawia.ng</h3>
<p>
<small> <small>
Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br> Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
PGP/GPG Key: <code style="font-size: 12px;"><a href="/portal/f/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77 9ADE E649 CED3 2155 7334</a></code><br> PGP/GPG Key: <code style="font-size: 12px;"><a href="/portal/f/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77 9ADE E649 CED3 2155 7334</a></code><br>
Powered by <a href="https://dailitation.xyz">dailitation.xyz</a>, <a href="https://github.com/TechitWinner/web">Source Code</a>. Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>, <a class="link" href="https://github.com/TechitWinner/web">Source Code</a>.
</small><br/> </small>
</p>
<WebThemeToggle/> <WebThemeToggle/>
</section> </section>
</div> </div>
components/web-header.vue
+16 -22
View File
@@ -1,35 +1,32 @@
<template> <template>
<header class="web-header"> <header class="web-header web-header-bg web-header-emit-shadow-when-top">
<section class="web-heading"> <section class="web-heading">
<NuxtLink href="/" class="web-heading-left-section hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10"> <NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
<div class="flex items-center h-full bg-[#0066FF]"> <div class="flex items-center h-full bg-[#0066FF]">
<img width="36" height="36"src="/favicon.ico"> <img width="36" height="36"src="/favicon.ico">
</div> </div>
<p class="web-nav-title mx-2 text-(--ui-text)">thawia.ng</p> <p title="thawia.ng, Go home" class="web-nav-title mx-2">thawia.ng/</p>
</NuxtLink> </NuxtLink>
<div class="web-heading-right-section"> <div class="web-heading-right-section">
<nav class="nav-links"> <nav class="nav-links">
<ul class="nav-wrapper"> <ul class="nav-wrapper">
<li class="nav-link"> <li class="nav-link">
<NuxtLink href="/">Home</NuxtLink> <NuxtLink href="/posts">/posts</NuxtLink>
</li> </li>
<!-- <li class="nav-link"> <!-- <li class="nav-link">
<NuxtLink href="/blog">Blog</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink href="/projects">Projects</NuxtLink> <NuxtLink href="/projects">Projects</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink href="/about">About</NuxtLink> <NuxtLink href="/about">About</NuxtLink>
</li>--> </li> -->
<li class="nav-link"> <li class="nav-link">
<NuxtLink href="/contact">Contact</NuxtLink> <NuxtLink title="Contact" href="/contact">/contact</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink href="/fonts">Fonts</NuxtLink> <NuxtLink title="Fonts" href="/fonts">/fonts</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink href="/collections">Collections</NuxtLink> <NuxtLink title="Collection" href="/collections">/collections</NuxtLink>
</li> </li>
</ul> </ul>
</nav> </nav>
@@ -41,25 +38,19 @@
<nav v-if="mobileHamburger" class="hamburger-menu"> <nav v-if="mobileHamburger" class="hamburger-menu">
<ul class="nav-wrapper"> <ul class="nav-wrapper">
<li class="nav-link"> <li class="nav-link">
<NuxtLink @click="toggleMobileHamburger" href="/">Home</NuxtLink> <NuxtLink aria-label="Go home" @click="closeMobileHamburger" href="/">/</NuxtLink>
</li>
<!-- <li class="nav-link">
<NuxtLink href="/blog">Blog</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink href="/projects">Projects</NuxtLink> <NuxtLink aria-label="Go to posts" @click="closeMobileHamburger" href="/posts">/posts</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink href="/about">About</NuxtLink> <NuxtLink aria-label="Go to contact" @click="closeMobileHamburger" href="/contact">/contact</NuxtLink>
</li>-->
<li class="nav-link">
<NuxtLink @click="toggleMobileHamburger" href="/contact">Contact</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink @click="toggleMobileHamburger" href="/fonts">Fonts</NuxtLink> <NuxtLink aria-label="Go to fonts" @click="closeMobileHamburger" href="/fonts">/fonts</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink @click="toggleMobileHamburger" href="/collections">Collections</NuxtLink> <NuxtLink aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">/collections</NuxtLink>
</li> </li>
</ul> </ul>
</nav> </nav>
@@ -72,4 +63,7 @@ const mobileHamburger = ref(false);
function toggleMobileHamburger() { function toggleMobileHamburger() {
mobileHamburger.value = !mobileHamburger.value mobileHamburger.value = !mobileHamburger.value
} }
function closeMobileHamburger() {
mobileHamburger.value = false
}
</script> </script>
components/web-theme-toggle.vue
+2 -6
View File
@@ -1,9 +1,5 @@
<script setup> <script setup>
const colorMode = useColorMode() const colorMode = useColorMode()
defineProps({
isCompact: Boolean,
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
})
const isDark = computed({ const isDark = computed({
get() { get() {
return colorMode.value === 'dark' return colorMode.value === 'dark'
@@ -16,10 +12,10 @@ const isDark = computed({
<template> <template>
<ClientOnly v-if="!colorMode?.forced"> <ClientOnly v-if="!colorMode?.forced">
<button @click="isDark = !isDark" class="btn btn-neutral">Toggle Theme</button> <button @click="isDark = !isDark" class="btn btn-sm btn-neutral">Toggle Theme</button>
<template #fallback> <template #fallback>
<button class="btn btn-neutral">Loading...</button> <button class="btn btn-sm btn-neutral">Loading...</button>
</template> </template>
</ClientOnly> </ClientOnly>
</template> </template>
pages/collections.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Techit's Collection</h1> <h1 id="hero" class="font-hero">Techit's Collection</h1>
<p id="hero-desc" class="font-hero-desc">Techit's personal collection of various interesting, trending media/materials.</p> <p id="hero-desc" class="font-hero-desc">Techit's personal collection of various interesting, trending media/materials.</p>
</section> </section>
pages/contact.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Contact Techit</h1> <h1 id="hero" class="font-hero">Contact Techit</h1>
<p id="hero-desc" class="font-hero-desc">You can reach me in countless ways — I’m on basically every social media app out there.</p> <p id="hero-desc" class="font-hero-desc">You can reach me in countless ways — I’m on basically every social media app out there.</p>
</section> </section>
pages/fonts.vue
+91 -23
View File
@@ -1,40 +1,108 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Fonts</h1> <h1 id="hero" class="font-hero">Fonts</h1>
<p id="hero-desc" class="font-hero-desc">Welcome to /fonts! This page were created to list all fonts I have hosted it here, so you can use it too.</p> <p id="hero-desc" class="font-hero-desc">Welcome to /fonts! This page were created to list all fonts I have hosted it here, so you can use it too.</p>
</section> </section>
<section class="web-section" aria-labelledby="roboto" aria-describedby="roboto-desc"> <section v-for="family in fonts" class="web-section" :aria-labelledby="family.id" aria-describedby="family.desc">
<h3 id="roboto" class="web-title">Roboto Family</h3> <h3 id="noto" class="web-title">{{ family.family }}</h3>
<p id="roboto-desc">All Roboto Family hosted here, here's the CSS files</p> <p id="noto-desc">{{ family.desc }}</p>
<ul> <div class="font-cards">
<li><a class="link" href="/fonts/roboto/roboto.css">Roboto</a></li> <a v-for="font in family.childrens" :disabled="font.disabled" :href="font.css" class="font-card">
<li><a class="link" href="/fonts/roboto/serif/serif.css">Roboto Serif</a></li> <div class="font-card-content">
<li><a class="link" href="/fonts/roboto/mono/mono.css">Roboto Mono</a></li> <h3>{{ font.name }}</h3>
</ul> <p>{{ font.css }}</p>
</section> </div>
<section class="web-section" aria-labelledby="noto" aria-describedby="noto-desc"> </a>
<h3 id="noto" class="web-title">Noto Sans</h3> </div>
<p id="noto-desc">Noto Sans, only Thai is hosted here right now and here's the CSS files</p>
<ul>
<li><a class="link" href="/fonts/noto/thai/thai.css">Noto Sans Thai</a></li>
</ul>
</section>
<section class="web-section" aria-labelledby="tiktok" aria-describedby="tiktok-desc">
<h3 id="tiktok" class="web-title">TikTok Sans</h3>
<p id="tiktok-desc">TikTok Sans from TikTok. Here's the CSS files</p>
<ul>
<li><a class="link" href="/fonts/tiktoksans/tiktoksans.css">TikTok Sans</a></li>
</ul>
</section> </section>
</article> </article>
</main> </main>
</template> </template>
<script setup> <script setup>
const fonts = [
{
id: "roboto",
family: "Roboto Family",
desc: "Roboto, a neo-grotesque sans-serif typeface family developed by Google as the system font for its mobile operating system Android.",
childrens: [
{
id: "roboto",
name: "Roboto",
css: "/fonts/roboto/roboto.css"
},
{
id: "roboto-mono",
name: "Roboto Mono",
css: "/fonts/roboto-mono/roboto-mono.css"
},
{
id: "roboto-serif",
name: "Roboto Serif",
css: "/fonts/roboto-serif/roboto-serif.css"
}
]
},
{
id: "inter",
family: "Inter Family",
desc: "Inter, a typeface designed for computer screens. It features a tall x-height to aid in readability of mixed-case and lower-case text.",
childrens: [
{
id: "inter",
name: "Inter",
css: "/fonts/inter/inter.css"
}
]
},
{
id: "noto",
family: "Noto Family",
desc: "Noto Sans, a free font family from Google that aims to support all languages with a harmonious look and feel.",
childrens: [
{
id: "noto-sans",
name: "Noto Sans",
css: "/fonts/noto-sans/noto-sans.css"
},
{
id: "noto-sans-mono",
name: "Noto Sans Mono",
css: "/fonts/noto-sans-mono/noto-sans-mono.css"
},
{
id: "noto-sans-thai",
name: "Noto Sans Thai",
css: "/fonts/noto-sans-thai/noto-sans-thai.css"
},
{
disabled: true,
id: "noto-sans-thai-looped",
name: "Noto Sans Thai Looped",
css: "/fonts/noto-sans-thai-looped/noto-sans-thai-looped.css"
}
]
},
{
id: "tiktok-sans",
family: "TikTok Sans",
desc: "TikTok Sans, the official typeface of TikTok, designed to reflect the brand's dynamic and creative spirit.",
childrens: [
{
id: "tiktok-sans",
name: "TikTok Sans",
css: "/fonts/tiktok-sans/tiktok-sans.css"
}
]
}
]
const config = useRuntimeConfig();
const TITLE = "Fonts" const TITLE = "Fonts"
const DESC = "Fonts hosted on thawia.ng" const DESC = "Fonts hosted on thawia.ng"
const baseUrl = config.public.baseUrl
useHead({ useHead({
title: TITLE, title: TITLE,
pages/index.vue
+15 -9
View File
@@ -1,37 +1,43 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="what-does-he-do?"> <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="what-does-he-do?">
<img width="240" height="240" class="mb-6" src="https://thawia.ng/portal/f/assets/profile/techit/techit2025_student-cropped.jpg"> <img width="240" height="240" class="mb-6" src="https://thawia.ng/portal/f/assets/profile/techit/sumo-clipart.png" alt="Techit Thawiang's avatar.">
<h1 id="hero" class="font-hero">Techit Thawiang</h1> <h1 id="hero" class="font-hero">Techit Thawiang</h1>
<p id="what-does-he-do?" class="font-hero-desc">A 10th grader who's exploring computer science.</p> <p id="what-does-he-do?" class="font-hero-desc">A 10th grader <span class="text-pink-500">hobbyist developer</span>, <span class="text-green-600">a math nerd</span>, <span class="text-blue-500">self-hoster</span> and a KDE user who's exploring computer science.</p>
</section> </section>
<section class="web-section" aria-labelledby="about-me" aria-describedby="about-me-paragraph-1"> <section class="web-section" aria-labelledby="about-me" aria-describedby="about-me-paragraph-1">
<!-- <h2 class="web-title" id="about-me"><NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">About Me <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> --> <!-- <h2 class="web-title" id="about-me"><NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">About Me <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
<h2 class="web-title" id="about-me">About Me</h2> <h2 class="web-title" id="about-me">Who am I?</h2>
<p id="about-me-paragraph-1">I'm a 15 years old 10th grader at Ko Pho Tuay Ngam Wittaya School. In my free time, I usually spend my time playing games or learning more about software engineering.</p> <p id="about-me-paragraph-1">My name is Techit Thawiang, aka <u>TechitWinner</u>. I'm a 15 years old 10th grader at Ko Pho Tuay Ngam Wittaya School. In my free time, I usually spend my time playing video games or learning more about software engineering.</p>
<p id="about-me-paragraph-2">In the future, I dream of having my own tech company, being a network engineer or being a civil engineer.</p> <p id="about-me-paragraph-2">In the future, I dream of having my own tech company, being a network engineer or a software engineer.</p>
</section> </section>
<section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1"> <section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
<!-- <h2 class="web-title" id="projects"><NuxtLink href="/projects" title="Navigate to projects page." class="link link-no-underline">Projects <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> --> <!-- <h2 class="web-title" id="projects"><NuxtLink href="/projects" title="Navigate to projects page." class="link link-no-underline">Projects <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
<h2 class="web-title" id="projects">Projects</h2> <h2 class="web-title" id="projects">Projects</h2>
<p id="projects-paragraph-1">As I said above, I usually spend my free time learning more about software engineering. This includes server administration for <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. Over time, small and large projects have been born and have died.</p> <p id="projects-paragraph-1">As I said above, I usually spend my free time learning more about software engineering. This includes server administration for <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. Over time, small and large projects have born and died.</p>
<p id="projects-paragraph-2">Let's go take a look of my projects collection!</p> <p id="projects-paragraph-2">Let's go take a look of my projects collection!</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2"> <div class="project-cards">
<a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card"> <a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
<img :src="baseUrl + '/portal/f/assets/warehouse.jpg'"> <img :src="baseUrl + '/portal/f/assets/warehouse.jpg'">
<div class="project-card-content">
<h3>Warehouse</h3> <h3>Warehouse</h3>
<p title="I planned it to be my API for personal website and other stuff; written in Rust and Axum.">I planned it to be my API for personal website and other stuff; written in Rust and Axum.</p> <p title="I planned it to be my API for personal website and other stuff; written in Rust and Axum.">I planned it to be my API for personal website and other stuff; written in Rust and Axum.</p>
</div>
</a> </a>
<a target="_blank" href="https://github.com/TechitWinner/web" class="project-card"> <a target="_blank" href="https://github.com/TechitWinner/web" class="project-card">
<img :src="baseUrl + '/portal/f/assets/web.png'"> <img :src="baseUrl + '/portal/f/assets/web.png'">
<div class="project-card-content">
<h3>Web</h3> <h3>Web</h3>
<p title="Nothing much, just this website written in Nuxt (Vue) and some cool CSS.">Nothing much, just this website written in Nuxt (Vue) and some cool CSS.</p> <p title="Nothing much, just this website written in Nuxt (Vue) and some cool CSS.">Nothing much, just this website written in Nuxt (Vue) and some cool CSS.</p>
</div>
</a> </a>
<a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="project-card"> <a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="project-card">
<img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/coinbag-pro"> <img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/coinbag-pro">
<div class="project-card-content">
<h3>Coinbag Pro</h3> <h3>Coinbag Pro</h3>
<p title="A handwriting typeface, created by me but it is a dead project now.">A handwriting typeface, created by me but it is a dead project now.</p> <p title="A handwriting typeface, created by me but it is a dead project now.">A handwriting typeface, created by me but it is a dead project now.</p>
</div>
</a> </a>
</div> </div>
</section> </section>
@@ -41,9 +47,9 @@
<script setup> <script setup>
const config = useRuntimeConfig(); const config = useRuntimeConfig();
const baseUrl = config.public.baseUrl
const TITLE = "Home" const TITLE = "Home"
const DESC = "Welcome to thawia.ng, a Techit's website." const DESC = "Welcome to thawia.ng, a Techit's website."
const baseUrl = config.public.baseUrl
useHead({ useHead({
title: TITLE, title: TITLE,
pages/portal.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<main> <main>
<article class="article"> <article class="article">
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc"> <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
<h1 id="hero" class="font-hero">Portal</h1> <h1 id="hero" class="font-hero">Portal</h1>
<p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p> <p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p>
</section> </section>