Madison's Web Portfolio

This repository holds the code for Madison's Web Portfolio.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test

Run Unit Test Coverage with Vitest (v8)

npm run coverage

Lint with ESLint

npm run lint

Project Organization

The code in this repo is organized into several different directories, which are covered below.

src/assets

The directory which holds any image files needed for the project.

src/components

The directory for .vue files that are components of other views.

src/model

The directory for custom enums that are used in the project.

src/stores

The directory holding Pinia stores used throughout the project. There are four stores. The first (globalVariables.ts) is used to hold global variables that are needed on various views throughout the project. The second (scrollUtil.ts) holds variables and functions which are used to facilitate scrolling between views. The third (menuUtil.ts) holds variables and functions needed for the side menu. The fourth (ballUtil.ts) holds the variables and functions needed to run FinalPage.vue.

src/styling

The directory which holds all the .css files. Every view/component has it's own .module.css file, in addition to there being a global.css file. The global file holds styling which is used on multiple pages, or in App.vue, while each module has styling which is only used in it's own view.

src/tests

The directory which holds all the unit tests for the project. The tests are separated into 2 files. One (stores.test.ts) is mainly used to test functionality within the Pinia stores. The second (views.test.ts) is used to test views rendering.

src/view

The directory which holds all of the project's views.

/residence

The directory which holds all the views pertaining to the Residence project.

Project Test Coverage

The following is a report of the current project test coverage according to Vitest (v8).

File	% Stmts	% Branch	% Funcs	% Lines
All files	100	100	100	100
src	100	100	100	100
App.vue	100	100	100	100
src/components	100	100	100	100
BackgroundDimmer.vue	100	100	100	100
MenuIcon.vue	100	100	100	100
PageMenu.vue	100	100	100	100
src/model	100	100	100	100
MenuColour.ts	100	100	100	100
ScreenType.ts	100	100	100	100
src/stores	100	100	100	100
globalVariables.ts	100	100	100	100
ballUtil.ts	100	100	100	100
menuUtil.ts	100	100	100	100
scrollUtil.ts	100	100	100	100
src/view	100	100	100	100
AboutPage.vue	100	100	100	100
FinalPage.vue	100	100	100	100
MainTitle.vue	100	100	100	100
OtherPage.vue	100	100	100	100
src/view/Residence	100	100	100	100
ResidenceGen.vue	100	100	100	100
ResidenceInteraction.vue	100	100	100	100
ResidenceIntro.vue	100	100	100	100
ResidenceTech.vue	100	100	100	100