포트폴리오 페이지 만들기

<script setup lang="ts">
  import type { Portfolio } from '~/types/Portfolio'

  const { t } = useI18n()
  useSeoMeta({
    title: t('pages.portfolio.title'),
    description: t('pages.portfolio.description'),
  })

  const portfolios = await getPortfolios()

  const showModal = ref(false)
  const selectedPortfolio = ref<Portfolio>(portfolios.value[0])
</script>

<template>
  <the-page inner-class="max-w-6xl pb-10 md:py-14 space-y-10 md:space-y-14">
    <h1
      class="text-3xl font-extrabold leading-9 tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl sm:leading-10 md:px-6 md:text-6xl md:leading-14 text-center"
    >
      <span class="relative inline-block px-6">
        <span
          class="absolute left-0 -translate-x-full top-1/2 -translate-y-1/2 h-1 md:h-1.5 bg-primary-500 dark:bg-primary-400 w-14 sm:w-16 md:w-20"
        />
        Portfolio
        <span
          class="absolute right-0 translate-x-full top-1/2 -translate-y-1/2 h-1 md:h-1.5 bg-primary-500 dark:bg-primary-400 w-14 sm:w-16 md:w-20"
        />
      </span>
    </h1>

    <portfolio-gallery
      v-model:modal="showModal"
      v-model:portfolio="selectedPortfolio"
      :portfolios="portfolios"
    />

    <portfolio-modal
      v-if="showModal"
      v-model="showModal"
      :portfolio="selectedPortfolio"
      @close="showModal = false"
    />
  </the-page>
</template>

<script setup lang="ts">
import type Isotope from 'isotope-layout'
import type { Portfolio } from '~/types/Portfolio'

const props = defineProps<{ portfolios: Portfolio[] }>()
const portfolios = props.portfolios

const selectedSkill = ref('*')
const allSkill = [{ label: 'All', value: '*' }, ...useUnion(portfolios.flatMap(({ techStacks }) => techStacks)).map(v => ({ label: v, value: useSnakeCase(v) }))]

function onSkillSelected(skill: string) {
  selectedSkill.value = skill
  isotope.value!.arrange({ filter: skill === '*' ? '*' : `.${skill}` })
}

const isotope = ref<Isotope>()

async function useIsotope() {
  const Isotope = (await import('isotope-layout')).default
  return new Isotope('.isotope-grid', {
    itemSelector: '.isotope-item',
    layoutMode: 'masonry',
    hiddenStyle: {
      transform: 'scale(.2) skew(30deg)',
      opacity: 0,
    },
    visibleStyle: {
      transform: 'scale(1) skew(0deg)',
      opacity: 1,
    },
    transitionDuration: '.5s',
  })
}

useNuxtApp().hooks.hookOnce('page:finish', async () => {
  isotope.value = await useIsotope()
})

/* Modal */
const showModal = defineModel('modal', { required: true })
const selectedPortfolio = defineModel('portfolio', { required: true })

function onClick(id: string) {
  selectedPortfolio.value = portfolios.find(({ _id }) => _id === id)!
  showModal.value = true
}
</script>

<template>
  <div class="text-center pb-3 max-w-screen-md mx-auto">
    <app-button
      v-for="{ label, value } in allSkill"
      :key="label"
      :color="selectedSkill === value ? 'primary' : 'gray'"
      :variant="selectedSkill === value ? 'solid': 'ghost'"
      class="min-w-14 justify-center"
      :class="selectedSkill === value && 'font-bold'"
      @click="onSkillSelected(value)"
    >
      {{ label }}
    </app-button>
  </div>

  <div class="mt-24 isotope-grid">
    <portfolio-card
      v-for="item in portfolios"
      v-bind="item"
      :key="item.title"
      class="isotope-item w-full md:w-[calc(50%-16px)] lg:w-[calc(33.33%-16px)]"
      @click="onClick(item._id)"
    />
  </div>
</template>

.
├── README.md
├── app.vue
├── assets
│   ├── css
│   │   └── main.pcss
│   └── icons
│       └── logo.svg
├── bun.lockb
├── components
│   ├── App
│   │   ├── Button.vue
│   │   ├── Link.vue
│   │   ├── Modal.vue
│   │   └── SnsLinks.vue
│   ├── Blog
│   │   ├── Hero.vue
│   │   ├── PostCard.vue
│   │   └── PostList.vue
│   ├── Index
│   │   ├── Hero.vue
│   │   └── Snaps.vue
│   ├── Portfolio
│   │   ├── Card.vue
│   │   └── Modal.vue
│   ├── The
│   │   ├── Footer.vue
│   │   ├── Header.vue
│   │   ├── LangSwitcher.vue
│   │   ├── Page.vue
│   │   └── ThemeSwitcher.vue
│   └── content
│       ├── Gallery.vue
│       ├── ProseH2.vue
│       ├── ProseH3.vue
│       ├── ProseH4.vue
│       └── ProseImg.vue
├── composables
│   └── useRepository.ts
├── constant
│   └── ButtonStyle.ts
├── content
│   ├── en
│   │   └── blog
│   │       └── 1.style guide.md
│   └── ko
│       ├── blog
│       │   └── 1.style guide.md
│       └── portfolios
│           └── 1.project1.md
├── eslint.config.mjs
├── i18n
│   ├── i18n.config.ts
│   └── locales
│       ├── en.yaml
│       └── ko.yaml
├── nuxt.config.ts
├── package.json
├── pages
│   ├── blog
│   │   ├── [...slug].vue
│   │   └── index.vue
│   ├── index.vue
│   └── portfolios.vue
├── public
│   ├── _robots.txt
│   ├── favicon.ico
│   └── images
│       ├── index
│       │   ├── hero.jpeg
│       │   ├── snap-1.jpg
│       │   ├── snap-2.jpg
│       │   ├── snap-3.jpg
│       │   ├── snap-4.jpg
│       │   └── snap-5.jpg
│       └── portfolios
│           └── img.png
├── server
│   └── tsconfig.json
├── tailwind.config.ts
├── tsconfig.json
└── types
    ├── BlogPost.ts
    ├── Button.ts
    └── Portfolio.ts