2024-10-09 08:39:30 +00:00

131 lines
2.8 KiB
Markdown

---
layout: home
title: Charles Click
titleTemplate: Portfolio
hero:
name: Charles
text:
tagline: Software Developer
actions:
- theme: brand big
text: Projects
link: /pages/projects
- theme: alt big
text: Watching
link: /pages/watching
features:
- title: 📦 Software Developer
details: I have developed several libraries and tools used across many projects on Github.
- title: 🔩 Focused on Interconnectivity
details: I have a passion for applications that explore ways to spread information across the internet.
- title: 🔑 Keybase Verification
details: You can find my Keybase verification at <a>https://keybase.io/cclick<a/>.
---
<div class="frontpage sponsors">
<h2>Projects Used</h2>
<div class="platinum-sponsors">
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
<img :src="src" :alt="name" :id="`sponsor-${id}`">
<p>{{ name }}</p>
</a>
</div>
<div class="gold-sponsors">
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
<img :src="src" :alt="name" :id="`sponsor-${id}`">
<p>{{ name }}</p>
</a>
</div>
</div>
<script setup>
import { onMounted } from 'vue'
import pk from 'vitepress-theme-vuetom/package.json'
const sponsors = [
{
"id": "vue",
"name": "Vue",
"href": "https://vuejs.org/",
"src": "https://vuejs.org/logo.svg",
"tier": "platinum"
},
{
"id": "vite",
"name": "Vite",
"href": "https://v2.vitejs.dev/",
"src": "https://v2.vitejs.dev/logo.svg"
},
{
"id": "vitepress",
"name": "Vitepress",
"href": "https://vitepress.dev/",
"src": "https://vitepress.dev/vitepress-logo-mini.svg"
},
{
"id": "vuetom",
"name": "Vitepress Vuetom Theme",
"href": "https://github.com/vuetom/vitepress-theme-vuetom",
"src": "https://raw.githubusercontent.com/vuetom/vitepress-theme-vuetom/refs/heads/main/packages/docs/public/logo/vuetom-logo-s.png"
}
]
</script>
<style>
.sponsors {
padding: 0 1.5rem 2rem;
font-size: 0.8rem;
}
.sponsors a {
color: #999;
margin: 1em;
display: block;
}
.sponsors img {
max-width: 160px;
max-height: 40px;
}
.sponsors.frontpage {
text-align: center;
}
.sponsors.frontpage img {
display: inline-block;
vertical-align: middle;
}
.sponsors.frontpage h2 {
color: #999;
font-size: 1.2rem;
border: none;
}
.sponsors.sidebar a img {
max-height: 36px;
}
.platinum-sponsors {
margin-bottom: 1.5em;
}
.platinum-sponsors a img {
max-width: 240px;
max-height: 60px;
}
.gold-sponsors {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
</style>