nicolas.marsal
4 years ago
24 changed files with 7561 additions and 0 deletions
@ -0,0 +1,12 @@
|
||||
/* eslint-env node */ |
||||
require("@rushstack/eslint-patch/modern-module-resolution"); |
||||
|
||||
module.exports = { |
||||
root: true, |
||||
extends: [ |
||||
"plugin:vue/vue3-essential", |
||||
"eslint:recommended", |
||||
"@vue/eslint-config-typescript/recommended", |
||||
"@vue/eslint-config-prettier", |
||||
], |
||||
}; |
||||
@ -0,0 +1,28 @@
|
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
lerna-debug.log* |
||||
|
||||
node_modules |
||||
.DS_Store |
||||
dist |
||||
dist-ssr |
||||
coverage |
||||
*.local |
||||
|
||||
/cypress/videos/ |
||||
/cypress/screenshots/ |
||||
|
||||
# Editor directories and files |
||||
.vscode/* |
||||
!.vscode/extensions.json |
||||
.idea |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,46 @@
|
||||
# Nicolas Marsal's CV |
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. |
||||
|
||||
## Recommended IDE Setup |
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
||||
|
||||
## Type Support for `.vue` Imports in TS |
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. |
||||
|
||||
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: |
||||
|
||||
1. Disable the built-in TypeScript Extension |
||||
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette |
||||
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` |
||||
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. |
||||
|
||||
## Customize configuration |
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/). |
||||
|
||||
## Project Setup |
||||
|
||||
```sh |
||||
npm install |
||||
``` |
||||
|
||||
### Compile and Hot-Reload for Development |
||||
|
||||
```sh |
||||
npm run dev |
||||
``` |
||||
|
||||
### Type-Check, Compile and Minify for Production |
||||
|
||||
```sh |
||||
npm run build |
||||
``` |
||||
|
||||
### Lint with [ESLint](https://eslint.org/) |
||||
|
||||
```sh |
||||
npm run lint |
||||
``` |
||||
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<link rel="icon" href="/favicon.ico" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>Vite App</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/main.ts"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,32 @@
|
||||
{ |
||||
"name": "marsal.cv", |
||||
"version": "0.0.0", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "run-p type-check build-only", |
||||
"preview": "vite preview --port 4173", |
||||
"build-only": "vite build", |
||||
"type-check": "vue-tsc --noEmit", |
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" |
||||
}, |
||||
"dependencies": { |
||||
"pinia": "^2.0.14", |
||||
"vue": "^3.2.37" |
||||
}, |
||||
"devDependencies": { |
||||
"@rushstack/eslint-patch": "^1.1.0", |
||||
"@types/node": "^16.11.43", |
||||
"@vitejs/plugin-vue": "^2.3.3", |
||||
"@vitejs/plugin-vue-jsx": "^1.3.10", |
||||
"@vue/eslint-config-prettier": "^7.0.0", |
||||
"@vue/eslint-config-typescript": "^11.0.0", |
||||
"@vue/tsconfig": "^0.1.3", |
||||
"eslint": "^8.5.0", |
||||
"eslint-plugin-vue": "^9.0.0", |
||||
"npm-run-all": "^4.1.5", |
||||
"prettier": "^2.5.1", |
||||
"typescript": "~4.7.4", |
||||
"vite": "^2.9.14", |
||||
"vue-tsc": "^0.38.4" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,51 @@
|
||||
<script setup lang="ts"> |
||||
import FirstNameAndLastName from "@/components/informations/FirstNameAndLastName.vue"; |
||||
import MyInformations from "@/components/informations/MyInformations.vue"; |
||||
import MyEducation from "@/components/education/MyEducation.vue"; |
||||
import MyLanguages from "@/components/informations/MyLanguages.vue"; |
||||
import MyHobbies from "@/components/informations/MyHobbies.vue"; |
||||
import MySkills from "@/components/skills/MySkills.vue"; |
||||
import MyExperiences from "@/components/experiences/MyExperiences.vue"; |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="main"> |
||||
<div class="left"> |
||||
<FirstNameAndLastName /> |
||||
<MyInformations /> |
||||
<MyEducation /> |
||||
<MyLanguages /> |
||||
<MyHobbies /> |
||||
</div> |
||||
<div class="right"> |
||||
<MySkills /> |
||||
<MyExperiences /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.main { |
||||
display: flex; |
||||
flex-direction: row; |
||||
width: 1024px; |
||||
height: 100%; |
||||
} |
||||
|
||||
.left { |
||||
margin: 8px; |
||||
flex-grow: 0.3; |
||||
flex-shrink: 0; |
||||
border-right: 1px solid gray; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.right { |
||||
flex-grow: 0.7; |
||||
flex-shrink: 0; |
||||
margin: 8px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,5 @@
|
||||
#app { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
} |
||||
@ -0,0 +1,32 @@
|
||||
<script setup lang="ts"> |
||||
defineProps<{ |
||||
title: string; |
||||
}>(); |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="wrapper"> |
||||
<div class="title"> |
||||
{{ title }} |
||||
</div> |
||||
<div class="body"> |
||||
<slot></slot> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
|
||||
<style scoped> |
||||
.wrapper{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.title { |
||||
font-size: 18px; |
||||
font-weight: bolder; |
||||
font-variant: titling-caps; |
||||
} |
||||
.body { |
||||
flex: 1; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,15 @@
|
||||
<template> |
||||
<div> |
||||
My Education |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "MyEducation" |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts"> |
||||
import RightSection from "@/components/common/RightSection.vue"; |
||||
</script> |
||||
|
||||
<template> |
||||
<RightSection title="Experiences"> |
||||
{{ message }} |
||||
</RightSection> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
export default { |
||||
name: "MyExperiences", |
||||
data: () => { |
||||
return { |
||||
message: "Here are my experiences", |
||||
}; |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
@ -0,0 +1,18 @@
|
||||
<template> |
||||
<div> |
||||
{{ firstName }} {{ lastName }} ! |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
firstName: "Nicolas", |
||||
lastName: "Marsal", |
||||
}; |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
@ -0,0 +1,15 @@
|
||||
<template> |
||||
<div> |
||||
My Hobbies |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "MyHobbies" |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,15 @@
|
||||
<template> |
||||
<div> |
||||
My Informations |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "MyInformations" |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,15 @@
|
||||
<template> |
||||
<div> |
||||
My Languages |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "MyLanguages" |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,15 @@
|
||||
<template> |
||||
<div> |
||||
Words Cloud ! |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "WordsCloud" |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts"> |
||||
import RightSection from "@/components/common/RightSection.vue"; |
||||
</script> |
||||
|
||||
<template> |
||||
<RightSection title="Skills"> |
||||
Here are my skills |
||||
</RightSection> |
||||
</template> |
||||
|
||||
|
||||
<script lang="ts"> |
||||
export default { |
||||
name: "MySkills" |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,11 @@
|
||||
import { createApp } from "vue"; |
||||
import { createPinia } from "pinia"; |
||||
import App from "./App.vue"; |
||||
|
||||
import "./assets/main.css"; |
||||
|
||||
const app = createApp(App); |
||||
|
||||
app.use(createPinia()); |
||||
|
||||
app.mount("#app"); |
||||
@ -0,0 +1,16 @@
|
||||
import { defineStore } from "pinia"; |
||||
|
||||
export const useCounterStore = defineStore({ |
||||
id: "counter", |
||||
state: () => ({ |
||||
counter: 0, |
||||
}), |
||||
getters: { |
||||
doubleCount: (state) => state.counter * 2, |
||||
}, |
||||
actions: { |
||||
increment() { |
||||
this.counter++; |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,8 @@
|
||||
{ |
||||
"extends": "@vue/tsconfig/tsconfig.node.json", |
||||
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], |
||||
"compilerOptions": { |
||||
"composite": true, |
||||
"types": ["node"] |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
{ |
||||
"extends": "@vue/tsconfig/tsconfig.web.json", |
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"], |
||||
"compilerOptions": { |
||||
"baseUrl": ".", |
||||
"paths": { |
||||
"@/*": ["./src/*"] |
||||
} |
||||
}, |
||||
|
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.config.json" |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
import { fileURLToPath, URL } from "url"; |
||||
|
||||
import { defineConfig } from "vite"; |
||||
import vue from "@vitejs/plugin-vue"; |
||||
import vueJsx from "@vitejs/plugin-vue-jsx"; |
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({ |
||||
plugins: [vue(), vueJsx()], |
||||
resolve: { |
||||
alias: { |
||||
"@": fileURLToPath(new URL("./src", import.meta.url)), |
||||
}, |
||||
}, |
||||
}); |
||||
Loading…
Reference in new issue