copy v2 components to v3

nek0meshi · Nov 19, 2023 · 8d9f87e · 8d9f87e
1 parent b1c36b6
commit 8d9f87e
Show file tree

Hide file tree

Showing 14 changed files with 1,262 additions and 0 deletions.
diff --git a/v3/components/App.vue b/v3/components/App.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <AppHeader />
+    <Hero />
+    <AboutSection />
+    <HistorySection />
+    <SkillsSection />
+    <LinksSection />
+    <PhotosSection />
+    <AppFooter />
+  </div>
+</template>
+
+<script>
+import AppFooter from './page-parts/AppFooter.vue'
+import AppHeader from './page-parts/AppHeader.vue'
+import AboutSection from './page-parts/AboutSection.vue'
+import Hero from './page-parts/Hero.vue'
+import HistorySection from './page-parts/HistorySection.vue'
+import SkillsSection from './page-parts/SkillsSection.vue'
+import LinksSection from './page-parts/LinksSection.vue'
+import PhotosSection from './page-parts/PhotosSection.vue'
+
+export default {
+  components: {
+    AppFooter,
+    AppHeader,
+    AboutSection,
+    Hero,
+    HistorySection,
+    SkillsSection,
+    LinksSection,
+    PhotosSection,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+section {
+  padding-top: 70px;
+  padding-bottom: 70px;
+}
+</style>
diff --git a/v3/components/page-parts/AboutSection.vue b/v3/components/page-parts/AboutSection.vue
@@ -0,0 +1,13 @@
+<template>
+  <section class="app-container">
+    <h2 id="about" class="section-title">ABOUT</h2>
+    <div>
+      <p>2017年より、関西でWebエンジニアをしています。</p>
+      <p>PHP、JavaScriptをよく書いています。</p>
+      <p>広く浅くかじるタイプです。</p>
+      <p>
+        趣味は、ギター・ベース、音楽・漫画・アニメ鑑賞、将棋、卓球、ルービックキューブ、写真などです。
+      </p>
+    </div>
+  </section>
+</template>
diff --git a/v3/components/page-parts/AppFooter.vue b/v3/components/page-parts/AppFooter.vue
@@ -0,0 +1,76 @@
+<template>
+  <footer>
+    <ul class="logos flex flex-row">
+      <li v-for="link in links" :key="link.title">
+        <a :href="link.url" target="_blank">
+          <img
+            :src="'logo/' + link.imageFileName"
+            class="link-logo"
+            :style="{ 'background-color': link.bdColor || '#fff' }"
+          />
+        </a>
+      </li>
+    </ul>
+    <p>©︎ 2021-2023 YUSHI WATANABE</p>
+  </footer>
+</template>
+
+<script>
+export default {
+  computed: {
+    links() {
+      return [
+        {
+          title: 'github',
+          url: 'https://github.com/nek0meshi',
+          imageFileName: 'GitHub-Mark-Light-120px-plus.png',
+          bdColor: '#000',
+        },
+        {
+          title: 'twitter',
+          url: 'https://twitter.com/yushi0dev',
+          imageFileName: 'Twitter social icons - circle - blue.png',
+        },
+        {
+          title: 'hatena-blog',
+          url: 'https://yushi-dev.hatenablog.com',
+          imageFileName: 'hatenablog-logo.svg',
+        },
+      ]
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  height: 180px;
+  width: 100%;
+  background-color: $main-1;
+}
+
+.logos {
+  gap: 30px;
+}
+
+.link-logo {
+  background-color: #fff;
+  height: 50px;
+  width: 50px;
+  border-radius: 100%;
+  transition: 0.5s;
+  &:hover {
+    transition: 0.5s;
+    transform: translateY(-5px);
+  }
+}
+</style>
diff --git a/v3/components/page-parts/AppHeader.vue b/v3/components/page-parts/AppHeader.vue
@@ -0,0 +1,225 @@
+<template>
+  <header class="header fixed w-full" :class="headerClass">
+    <div class="header-wrap mx-auto text-white relative">
+      <ul
+        class="
+          flex flex-row
+          gap-4
+          justify-end
+          items-center
+          header-content header-links
+        "
+      >
+        <li v-for="link in links" :key="link.label">
+          <a class="header-link-a text-white" @click="scrollLink(link.href)">{{
+            link.label
+          }}</a>
+        </li>
+      </ul>
+      <nav
+        class="
+          flex flex-row
+          justify-end
+          items-center
+          header-content
+          hamburger-wrap
+        "
+        :class="hamburgerWrapClass"
+      >
+        <a class="hamburger" @click="clickHamburger">
+          <span class="hamburger-bar"></span>
+          <span class="hamburger-bar"></span>
+          <span class="hamburger-bar"></span>
+        </a>
+      </nav>
+    </div>
+    <NavModal
+      :show="showNavModal"
+      :links="links"
+      @close="showNavModal = false"
+      @jump="scrollLink($event)"
+    />
+  </header>
+</template>
+
+<script>
+import NavModal from './NavModal.vue'
+
+export default {
+  components: {
+    NavModal,
+  },
+
+  data() {
+    return {
+      showNavModal: false,
+      isScrolled: false,
+    }
+  },
+
+  computed: {
+    links() {
+      return [
+        {
+          href: '#about',
+          label: 'ABOUT',
+        },
+        {
+          href: '#history',
+          label: 'HISTORY',
+        },
+        {
+          href: '#skills',
+          label: 'SKILLS',
+        },
+        {
+          href: '#links',
+          label: 'LINKS',
+        },
+        {
+          href: '#photos',
+          label: 'PHOTOS',
+        },
+      ]
+    },
+    headerClass() {
+      return {
+        scrolled: this.isScrolled,
+      }
+    },
+    hamburgerWrapClass() {
+      return {
+        'show-modal': this.showNavModal,
+      }
+    },
+  },
+
+  mounted() {
+    window.addEventListener('scroll', () => {
+      const header = document.querySelector('.hero-image')
+      this.isScrolled = window.scrollY > header.clientHeight - 50
+    })
+  },
+
+  methods: {
+    clickHamburger() {
+      this.showNavModal = !this.showNavModal
+    },
+    scrollLink(href) {
+      // https://www.fenet.jp/dotnet/column/language/javascript/7491#JavaScript
+      const target = document.querySelector(href)
+      const top = target.offsetTop - 80
+      window.scrollTo({
+        top,
+        behavior: 'smooth',
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  z-index: 8000;
+  .header-wrap {
+    & > * {
+      transition: 1s;
+    }
+  }
+  &.scrolled {
+    .header-wrap {
+      & > * {
+        background-color: $main-1;
+      }
+    }
+  }
+}
+.header-content {
+  position: absolute;
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;
+  height: 56px;
+
+  a {
+    cursor: pointer;
+  }
+}
+.header-links {
+  @media (max-width: $mobile-max-width) {
+    display: none;
+  }
+}
+.header-link-a {
+  display: block;
+  position: relative;
+  text-decoration: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -3px;
+    width: 0;
+    border-bottom: solid 2px $white;
+    transition: 0.5s;
+  }
+
+  &:hover {
+    &::after {
+      transition: 0.5s;
+      width: 100%;
+    }
+  }
+}
+.hamburger-bar {
+  position: absolute;
+  width: 30px;
+  height: 2px;
+  background-color: #eee;
+  transition: 0.5s;
+
+  &:nth-child(1) {
+    top: calc(50% - 10px);
+  }
+  &:nth-child(2) {
+    top: 50%;
+  }
+  &:nth-child(3) {
+    top: calc(50% + 10px);
+  }
+}
+.hamburger {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+  height: 24px;
+  width: 24px;
+  z-index: 10000;
+}
+.hamburger-wrap {
+  display: none;
+  @media (max-width: $mobile-max-width) {
+    display: flex;
+  }
+
+  &.show-modal {
+    .hamburger-bar {
+      background-color: #000;
+      transform: rotateZ(45deg);
+      transition: 0.5s;
+      &:nth-child(1) {
+        top: 50%;
+      }
+      &:nth-child(2) {
+        top: 50%;
+      }
+      &:nth-child(3) {
+        top: 50%;
+        transform: rotateZ(-45deg);
+      }
+    }
+  }
+}
+</style>
diff --git a/v3/components/page-parts/Hero.vue b/v3/components/page-parts/Hero.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="hero-image bg-no-repeat bg-cover flex justify-center items-center"
+  >
+    <h1 class="h2 text-white">YUSHI WATANABE</h1>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.hero-image {
+  width: 100%;
+  height: 100vh;
+  background-image: url('./static/hero.jpg');
+  h1 {
+    color: #fff;
+    font-size: 72px;
+    @media (max-width: $mobile-max-width) {
+      font-size: 50px;
+    }
+  }
+}
+</style>