---
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.
  - 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 [here](https://keybase.io/cclick).
---

<div class="frontpage sponsors">
  <h2>感 谢</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"
  }
]

function fetchReleaseTag() {
  onMounted(() => {
    const dom = document.getElementsByClassName('name')
    const mainTitle = dom[0]
    const docsReleaseTag = document.createElement('span')
    docsReleaseTag.classList.add('release-tag')
    const releaseTagName = `v${pk.version}`
    docsReleaseTag.innerText = releaseTagName
    if (releaseTagName !== undefined) {
      mainTitle.appendChild(docsReleaseTag)
    }
    // fetch('https://api.github.com/repos/vitejs/docs-cn/releases/latest')
    //   .then((res) => res.json())
    //   .then((json) => {
    //     const mainTitle = document.getElementById('main-title')
    //     mainTitle.style.position = 'relative'

    //     const docsReleaseTag = document.createElement('span')
    //     docsReleaseTag.classList.add('release-tag')
    //     const releaseTagName = json.tag_name
    //     docsReleaseTag.innerText = releaseTagName

    //     if (releaseTagName !== undefined) {
    //       mainTitle.appendChild(docsReleaseTag)
    //     }
    //   })
  })
}

fetchReleaseTag()
</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>