Merge pull request #26 from nek0meshi/copy-files

Copy files
nek0meshi · Dec 6, 2023 · 96880ae · 96880ae
2 parents d15199a + f162e9a
commit 96880ae
Show file tree

Hide file tree

Showing 43 changed files with 1,335 additions and 5 deletions.
diff --git a/v3/app.vue b/v3/app.vue
diff --git a/v3/assets/scss/main.scss b/v3/assets/scss/main.scss
@@ -0,0 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono&family=Zen+Kaku+Gothic+Antique&display=swap');
+
+* {
+  font-family: 'Red Hat Mono', 'Zen Kaku Gothic Antique', monospace, sans-serif;
+  text-align: center;
+  font-size: 16px;
+  color: $text-1;
+}
+
+.h2 {
+  font-size: 40px;
+}
+
+.h3 {
+  font-size: 24px;
+}
+
+.section-title {
+  font-size: 40px;
+  margin-bottom: 30px;
+  @media (max-width: $mobile-max-width) {
+    font-size: 32px;
+  }
+}
+
+a {
+  text-decoration: underline;
+  color: $main-2;
+}
+
+.app-container {
+  width: $tablet-max-width;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+  @media (max-width: $tablet-max-width) {
+    width: $mobile-max-width;
+  }
+  @media (max-width: $mobile-max-width) {
+    width: 100%;
+  }
+}
diff --git a/v3/assets/scss/variables.scss b/v3/assets/scss/variables.scss
@@ -0,0 +1,16 @@
+$gray-1: #444;
+$gray-2: #999;
+$gray-3: #ddd;
+
+$main-1: #1d2618;
+$main-2: #3d5133;
+$main-3: #516b44;
+
+$white: #fff;
+
+$bg-1: #f8f9f9;
+
+$text-1: #444;
+
+$mobile-max-width: 768px;
+$tablet-max-width: 1024px;
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>