Merge pull request #23 from sheldonmaschmeyer/develop/reorganize-code

Seperate code into views, containers and misc. components

.eslintrc.json

@@ -13,8 +13,10 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["vue", "prettier"],
+  "plugins": ["vue", "prettier", "simple-import-sort"],
   "rules": {
-    "prettier/prettier": "error"
+    "prettier/prettier": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error"
   }
 }

.eslintrc.prod.json

@@ -13,9 +13,11 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["vue", "prettier"],
+  "plugins": ["vue", "prettier", "simple-import-sort"],
   "rules": {
     "prettier/prettier": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
     "no-console": 2
   }
 }

Changelog.md

@@ -10,6 +10,13 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [2.2.0] - 2023/02/26
 
+### Develop
+
+- Separate code into new sections, sectionItems, containers and, miscellaneous
+  components. 
+- ESLint uses single quotes for imports.
+- Imports are sorted alphabetically and auto-fixed using `--fix`.
+
 ### Fixed
 
 - Create `CollapseSubheading` custom component that uses the

package.json

@@ -40,6 +40,7 @@
     "@vue/eslint-config-typescript": "^11.0.2",
     "eslint": "^8.34.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-vue": "^9.9.0",
     "prettier": "^2.8.4",
     "sass": "^1.58.3",

src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <div id="app">
-    <link
-      href="https://use.fontawesome.com/releases/v5.0.1/css/all.css"
-      rel="stylesheet"
-    />
     <VideoNav :name="name" />
     <div
       class="container-fluid p-0"
@@ -28,20 +24,19 @@
 </template>
 
 <script lang="ts">
-// TODO: not need the three links above
 import smoothScroll from 'smooth-scroll';
+import { reactive } from 'vue';
 
-import AboutSection from './components/About.vue';
-import ExperienceSection from './components/Experience.vue';
-import EducationSection from './components/Education.vue';
-import SkillsSection from './components/Skills.vue';
-import VolunteerSection from './components/volunteer.vue';
-import VideoNav from './components/VideoNav.vue';
 import BorderSpacer from './components/Border.vue';
-import ActivitiesSection from './components/Activities.vue';
-import LifeGoalsSection from './components/lifeGoals.vue';
-import VideoContainer from './components/VideoContainer.vue';
-import { reactive } from 'vue';
+import VideoNav from './components/VideoNav.vue';
+import VideoContainer from './containers/VideoContainer.vue';
+import AboutSection from './sections/About.vue';
+import ActivitiesSection from './sections/Activities.vue';
+import EducationSection from './sections/Education.vue';
+import ExperienceSection from './sections/Experience.vue';
+import LifeGoalsSection from './sections/lifeGoals.vue';
+import SkillsSection from './sections/Skills.vue';
+import VolunteerSection from './sections/volunteer.vue';
 
 export default {
   name: 'App',

src/components/Navigation.vue

@@ -39,6 +39,7 @@
 
 <script lang="ts">
 import { useWindowSize } from 'vue-window-size';
+
 import { name } from '../definitions/props';
 export default {
   name: 'NavigationComponent',

src/components/VideoNav.vue

@@ -21,10 +21,11 @@
 </template>
 
 <script lang="ts">
-import { name } from '../definitions/props';
-import Navigation from './Navigation.vue';
 import { defineComponent } from 'vue';
 import { useWindowSize } from 'vue-window-size';
+
+import { name } from '../definitions/props';
+import Navigation from './Navigation.vue';
 export default defineComponent({
   name: 'VideoNav',
   components: {