画面表示のための転記と細かい修正

nek0meshi · Nov 21, 2023 · b57cd41 · b57cd41
1 parent 8d9f87e
commit b57cd41
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 59 deletions.
diff --git a/v3/app.vue b/v3/app.vue
@@ -1,5 +1,45 @@
 <template>
   <div>
-    <NuxtWelcome />
+    <AppHeader />
+    <Hero />
+    <AboutSection />
+    <HistorySection />
+    <SkillsSection />
+    <LinksSection />
+    <PhotosSection />
+    <AppFooter />
   </div>
 </template>
+
+<script>
+import AppFooter from './components/page-parts/AppFooter.vue'
+import AppHeader from './components/page-parts/AppHeader.vue'
+import AboutSection from './components/page-parts/AboutSection.vue'
+import Hero from './components/page-parts/Hero.vue'
+import HistorySection from './components/page-parts/HistorySection.vue'
+import SkillsSection from './components/page-parts/SkillsSection.vue'
+import LinksSection from './components/page-parts/LinksSection.vue'
+import PhotosSection from './components/page-parts/PhotosSection.vue'
+
+export default {
+  components: {
+    AppFooter,
+    AppHeader,
+    AboutSection,
+    Hero,
+    HistorySection,
+    SkillsSection,
+    LinksSection,
+    PhotosSection,
+  },
+}
+</script>
+
+<style lang="scss">
+@use '~/assets/scss/main.scss';
+
+section {
+  padding-top: 70px;
+  padding-bottom: 70px;
+}
+</style>
diff --git a/v3/assets/scss/main.scss b/v3/assets/scss/main.scss
@@ -1,3 +1,5 @@
+@use './variables.scss' as *;
+
 @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono&family=Zen+Kaku+Gothic+Antique&display=swap');
 
 * {

diff --git a/v3/components/App.vue b/v3/components/App.vue
diff --git a/v3/components/page-parts/AppHeader.vue b/v3/components/page-parts/AppHeader.vue
@@ -2,13 +2,7 @@
   <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
-        "
+        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)">{{
@@ -17,13 +11,7 @@
         </li>
       </ul>
       <nav
-        class="
-          flex flex-row
-          justify-end
-          items-center
-          header-content
-          hamburger-wrap
-        "
+        class="flex flex-row justify-end items-center header-content hamburger-wrap"
         :class="hamburgerWrapClass"
       >
         <a class="hamburger" @click="clickHamburger">

diff --git a/v3/components/page-parts/Hero.vue b/v3/components/page-parts/Hero.vue
@@ -10,7 +10,7 @@
 .hero-image {
   width: 100%;
   height: 100vh;
-  background-image: url('./static/hero.jpg');
+  background-image: url('./hero.jpg');
   h1 {
     color: #fff;
     font-size: 72px;