<script setup lang="ts">
import DeviceFrame from '@/components/DeviceFrame.vue'
import IconLink from '@/components/IconLink.vue'
import IconLinkList from '@/components/IconLinkList.vue'

import ArchLinux from '@/assets/icons/IconArchLinux.vue'
import Firefox from '@/assets/icons/IconFirefox.vue'
import VSCode from '@/assets/icons/IconVSCode.vue'
import HTML from '@/assets/icons/IconHTML.vue'
import CSS from '@/assets/icons/IconCSS.vue'
import JavaScript from '@/assets/icons/IconJavaScript.vue'
import TypeScript from '@/assets/icons/IconTypeScript.vue'
import NodeJS from '@/assets/icons/IconNodeJs.vue'
import VueJS from '@/assets/icons/IconVue.vue'

import Github from '@/assets/icons/IconGithub.vue'
import Gitlab from '@/assets/icons/IconGitlab.vue'
</script>

<template>
  <section>
    <h1>Projects</h1>
    <p>I code for work but also for fun. See below for my own personal projects.</p>

    <h2>Tools of the trade</h2>
    <IconLinkList>
      <IconLink
        title="Arch Linux (btw)"
        href="https://archlinux.org/"
        :icon="ArchLinux"
        style="--color: #1793d1"
      />
      <IconLink title="Firefox" href="https://www.mozilla.org/firefox" :icon="Firefox" />
      <IconLink title="Visual Studio Code" href="https://code.visualstudio.com/" :icon="VSCode" />
      <IconLink
        title="HTML5"
        href="https://developer.mozilla.org/en-US/docs/Glossary/HTML5"
        :icon="HTML"
        style="--color: #e54c21"
      />
      <IconLink
        title="CSS3"
        href="https://developer.mozilla.org/en-US/docs/Web/CSS"
        :icon="CSS"
        style="--color: #2965f1"
      />
      <IconLink
        title="JavaScript"
        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
        :icon="JavaScript"
        style="--color: #f7df1e"
      />
      <IconLink
        title="TypeScript"
        href="https://www.typescriptlang.org/"
        :icon="TypeScript"
        style="--color: #3178c6"
      />
      <IconLink
        title="Node.js"
        href="https://nodejs.org/"
        :icon="NodeJS"
        style="--color: #5fa04e"
      />
      <IconLink title="Vue" href="https://vuejs.org/" :icon="VueJS" />
    </IconLinkList>

    <h2>Code Places</h2>
    <IconLinkList>
      <IconLink
        title="GitHub"
        href="https://github.com/SebinNyshkim"
        :icon="Github"
        style="--color: #ffffff"
      />
      <IconLink
        title="GitLab"
        href="https://gitlab.com/SebinNyshkim"
        :icon="Gitlab"
        style="--color: #e24329"
      />
    </IconLinkList>

    <h2>My works</h2>
    <p>Click on the screen to be taken to the page!</p>
    <h3>Sebin Nyshkim Ref Page</h3>
    <DeviceFrame>
      <a href="https://ref.sebin-nyshkim.net/sebin/" target="_blank">
        <img src="https://ref.sebin-nyshkim.net/sebin/preview.png" alt="Sebin Reference Page" />
      </a>
    </DeviceFrame>

    <h3>Viktor Krastav Ref Page</h3>
    <DeviceFrame>
      <a href="https://ref.sebin-nyshkim.net/viktor/" target="_blank">
        <img src="https://ref.sebin-nyshkim.net/viktor/preview.png" alt="Viktor Reference Page" />
      </a>
    </DeviceFrame>
  </section>
</template>
