change new layout
This commit is contained in:
+36
-36
@@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<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>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="docs" aria-describedby="docs-desc">
|
||||
<h3 id="docs" class="web-title">Interesting Documents</h3>
|
||||
<ul>
|
||||
<li><a class="link" href="https://thawia.ng/portal/f/act/Copyright_Act2_TH.pdf">Thailand Copyright Act: พระราชบัญญัติลิขสิทธิ์ พ.ศ. ๒๕๓๗</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="tools" aria-describedby="tools-desc">
|
||||
<h3 id="tools" class="web-title">Interesting Tools</h3>
|
||||
<ul>
|
||||
<li><a class="link" href="https://github.com/Tyrrrz/YoutubeDownloader">YoutubeDownloader: Downloads videos and playlists from YouTube</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const TITLE = "Collections"
|
||||
const DESC = "Techit's personal-public collections"
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<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>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="docs" aria-describedby="docs-desc">
|
||||
<h3 id="docs" class="web-title">Interesting Documents</h3>
|
||||
<ul>
|
||||
<li><a class="link" href="https://thawia.ng/portal/f/act/Copyright_Act2_TH.pdf">Thailand Copyright Act: พระราชบัญญัติลิขสิทธิ์ พ.ศ. ๒๕๓๗</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="tools" aria-describedby="tools-desc">
|
||||
<h3 id="tools" class="web-title">Interesting Tools</h3>
|
||||
<ul>
|
||||
<li><a class="link" href="https://github.com/Tyrrrz/YoutubeDownloader">YoutubeDownloader: Downloads videos and playlists from YouTube</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const TITLE = "Collections"
|
||||
const DESC = "Techit's personal-public collections"
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
+60
-60
@@ -1,61 +1,61 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<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>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1">
|
||||
<h2 class="web-title" id="decentralized">Decentral­ized Ways</h2>
|
||||
<p id="decentralized-paragraph-1">I recommended to contact me via these given ways.</p>
|
||||
<ul class="list-disc">
|
||||
<li>
|
||||
<p>techit@thawia.ng — E-mail Address</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techit@furnu.org — Mastodon</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner:matrix.org — Matrix</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1">
|
||||
<h2 class="web-title" id="centralized">Social Media</h2>
|
||||
<p id="centralized-paragraph-1">If I do not reply to messages sent via contact above, plesae kindly contact me via these social media accounts.</p>
|
||||
<ul class="list-disc">
|
||||
<li>
|
||||
<p>@techitwinner — X (Twitter)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — TikTok</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — Instagram</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — Facebook</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@thawia.ng — BlueSky</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const TITLE = "Contact"
|
||||
const DESC = "How to contact Techit"
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<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>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1">
|
||||
<h2 class="web-title" id="decentralized">Decentral­ized Ways</h2>
|
||||
<p id="decentralized-paragraph-1">I recommended to contact me via these given ways.</p>
|
||||
<ul class="list-disc">
|
||||
<li>
|
||||
<p>techit@thawia.ng — E-mail Address</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techit@furnu.org — Mastodon</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner:matrix.org — Matrix</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1">
|
||||
<h2 class="web-title" id="centralized">Social Media</h2>
|
||||
<p id="centralized-paragraph-1">If I do not reply to messages sent via contact above, plesae kindly contact me via these social media accounts.</p>
|
||||
<ul class="list-disc">
|
||||
<li>
|
||||
<p>@techitwinner — X (Twitter)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — TikTok</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — Instagram</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@techitwinner — Facebook</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>@thawia.ng — BlueSky</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const TITLE = "Contact"
|
||||
const DESC = "How to contact Techit"
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
+115
-47
@@ -1,48 +1,116 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<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>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="roboto" aria-describedby="roboto-desc">
|
||||
<h3 id="roboto" class="web-title">Roboto Family</h3>
|
||||
<p id="roboto-desc">All Roboto Family hosted here, here's the CSS files</p>
|
||||
<ul>
|
||||
<li><a class="link" href="/fonts/roboto/roboto.css">Roboto</a></li>
|
||||
<li><a class="link" href="/fonts/roboto/serif/serif.css">Roboto Serif</a></li>
|
||||
<li><a class="link" href="/fonts/roboto/mono/mono.css">Roboto Mono</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="noto" aria-describedby="noto-desc">
|
||||
<h3 id="noto" class="web-title">Noto Sans</h3>
|
||||
<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>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const TITLE = "Fonts"
|
||||
const DESC = "Fonts hosted on thawia.ng"
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<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>
|
||||
</section>
|
||||
<section v-for="family in fonts" class="web-section" :aria-labelledby="family.id" aria-describedby="family.desc">
|
||||
<h3 id="noto" class="web-title">{{ family.family }}</h3>
|
||||
<p id="noto-desc">{{ family.desc }}</p>
|
||||
<div class="font-cards">
|
||||
<a v-for="font in family.childrens" :disabled="font.disabled" :href="font.css" class="font-card">
|
||||
<div class="font-card-content">
|
||||
<h3>{{ font.name }}</h3>
|
||||
<p>{{ font.css }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<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 DESC = "Fonts hosted on thawia.ng"
|
||||
const baseUrl = config.public.baseUrl
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
+63
-57
@@ -1,57 +1,63 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero" 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">
|
||||
<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>
|
||||
</section>
|
||||
<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">About Me</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-2">In the future, I dream of having my own tech company, being a network engineer or being a civil engineer.</p>
|
||||
</section>
|
||||
<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">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-2">Let's go take a look of my projects collection!</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
|
||||
<a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
|
||||
<img :src="baseUrl + '/portal/f/assets/warehouse.jpg'">
|
||||
<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>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/TechitWinner/web" class="project-card">
|
||||
<img :src="baseUrl + '/portal/f/assets/web.png'">
|
||||
<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>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="project-card">
|
||||
<img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/coinbag-pro">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig();
|
||||
const TITLE = "Home"
|
||||
const DESC = "Welcome to thawia.ng, a Techit's website."
|
||||
const baseUrl = config.public.baseUrl
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<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/sumo-clipart.png" alt="Techit Thawiang's avatar.">
|
||||
<h1 id="hero" class="font-hero">Techit Thawiang</h1>
|
||||
<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 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">Who am I?</h2>
|
||||
<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 a software engineer.</p>
|
||||
</section>
|
||||
<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">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 born and died.</p>
|
||||
<p id="projects-paragraph-2">Let's go take a look of my projects collection!</p>
|
||||
<div class="project-cards">
|
||||
<a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
|
||||
<img :src="baseUrl + '/portal/f/assets/warehouse.jpg'">
|
||||
<div class="project-card-content">
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/TechitWinner/web" class="project-card">
|
||||
<img :src="baseUrl + '/portal/f/assets/web.png'">
|
||||
<div class="project-card-content">
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="project-card">
|
||||
<img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/coinbag-pro">
|
||||
<div class="project-card-content">
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig();
|
||||
const baseUrl = config.public.baseUrl
|
||||
const TITLE = "Home"
|
||||
const DESC = "Welcome to thawia.ng, a Techit's website."
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
+38
-38
@@ -1,38 +1,38 @@
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<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>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
|
||||
<a :href="baseUrl + '/portal/f/'" class="project-card">
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<Icon name="oundr:folder"/>
|
||||
<h3>Files</h3>
|
||||
</div>
|
||||
<p title="A portal that collects this website data, whether it's mine or not.">A portal that collects this website data, whether it's mine or not.</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig();
|
||||
const TITLE = "Portal"
|
||||
const DESC = "Choose your way wisely."
|
||||
const baseUrl = config.public.baseUrl
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<main>
|
||||
<article class="article">
|
||||
<section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
|
||||
<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>
|
||||
</section>
|
||||
<section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
|
||||
<a :href="baseUrl + '/portal/f/'" class="project-card">
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<Icon name="oundr:folder"/>
|
||||
<h3>Files</h3>
|
||||
</div>
|
||||
<p title="A portal that collects this website data, whether it's mine or not.">A portal that collects this website data, whether it's mine or not.</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig();
|
||||
const TITLE = "Portal"
|
||||
const DESC = "Choose your way wisely."
|
||||
const baseUrl = config.public.baseUrl
|
||||
|
||||
useHead({
|
||||
title: TITLE,
|
||||
meta: [
|
||||
{ name: 'description', content: DESC },
|
||||
{ property: 'og:title', content: TITLE },
|
||||
{ property: 'og:description', content: DESC },
|
||||
{ property: 'og:type', content: 'website' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user