initial commit
This commit is contained in:
nessar committed
1 parent
3aabdb41ec
commit
23a22c2f4f
18 files changed
+4522
No files matched your search
+28
@@ -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?
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
# portfolio
|
||||
|
||||
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
|
||||
```
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/logo.svg">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Théophyl Hoguet - Portfolio</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Generated
+2470
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "portfolio",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check build-only",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"tsparticles": "^2.9.3",
|
||||
"tsparticles-demo-configs": "^2.9.3",
|
||||
"tsparticles-engine": "^2.9.3",
|
||||
"vue": "^3.2.47",
|
||||
"vue3-particles": "^2.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.14.0",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"typescript": "~4.7.4",
|
||||
"vite": "^4.1.3",
|
||||
"vue-tsc": "^1.1.5"
|
||||
}
|
||||
}
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../src/assets/json/particles.json
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import type { Engine } from "tsparticles-engine";
|
||||
import { defineComponent } from 'vue';
|
||||
import { loadFull } from "tsparticles";
|
||||
const particlesInit = async (engine: Engine) => {
|
||||
await loadFull(engine);
|
||||
};
|
||||
</script>
|
||||
<script lang="ts">
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
created() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
unmounted() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
methods: {
|
||||
handleScroll(event: Event) {
|
||||
const scroll = window.scrollY;
|
||||
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<nav>
|
||||
<!-- <img alt="Logo" src="@/assets/images/logo.svg" class="logo" /> -->
|
||||
</nav>
|
||||
<Particles id="tsparticles" :particlesInit="particlesInit" url="particles.json" />
|
||||
</header>
|
||||
<main>
|
||||
<div class="about">
|
||||
<h1>Hi, I'm <span class="name">Théophyl</span></h1>
|
||||
<div class="bio">
|
||||
<div class="imagePerso">
|
||||
<img src="@/assets/images/proCircleBlur.png" alt="Photo de moi" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<p>
|
||||
Hello and welcome to my portfolio! I am currently a student in Computer Science at the Université de
|
||||
Bordeaux.
|
||||
<br />
|
||||
<br />
|
||||
Ever since I was 10 years old, I have had a love for programming. The idea of being able to create
|
||||
something from scratch using code fascinated me, and I knew from a young age that I wanted to pursue
|
||||
a
|
||||
career in this field. Over the years, I have continued to develop my skills and knowledge,
|
||||
constantly
|
||||
seeking out new technologies and programming languages to learn.
|
||||
<br />
|
||||
<br />
|
||||
As a student, I have had the opportunity to work on many exciting projects. These projects have not
|
||||
only
|
||||
allowed me to put my skills into practice, but they have also given me the chance to work with other
|
||||
students and professionals in the field. (see <a href="#projects">projects</a> section of the
|
||||
website)
|
||||
<br />
|
||||
<br />
|
||||
Thank you for taking the time to learn more about me, and I hope to have the opportunity to work
|
||||
with
|
||||
you in the future.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transi">
|
||||
</div>
|
||||
<div class="projects">
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 10vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.projects {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
background: #0b1829;
|
||||
}
|
||||
|
||||
.transi {
|
||||
height: 8vw;
|
||||
width: 120vw;
|
||||
margin: -4vw 0 -4vw 0;
|
||||
background-color: rgb(29, 29, 29);
|
||||
transform: rotate(-4deg) scale(1.2, 1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: radial-gradient(ellipse at bottom, #0b1829 0%, #000000 100%)
|
||||
}
|
||||
|
||||
.about {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 4vw 0 4vw 0;
|
||||
margin-bottom: 4vw;
|
||||
}
|
||||
|
||||
.bio {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.about {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.about a {
|
||||
color: rgb(110, 161, 255);
|
||||
}
|
||||
|
||||
.imagePerso {
|
||||
width: 30%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.imagePerso img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: rgb(29, 29, 29);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import url("base.css");
|
||||
|
||||
html::-webkit-scrollbar {
|
||||
/* Chrome, Safari, Opera */
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 659 KiB |
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 481.0236182596568
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.6493818846505367,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 4.791255552577936,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 120,
|
||||
"color": "#1bbef5",
|
||||
"opacity": 0.6786669718037545,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 1.5782952832645452,
|
||||
"direction": "top",
|
||||
"random": true,
|
||||
"straight": true,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 1200,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "grab"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": false,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 191.80819180819182,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { createApp } from "vue";
|
||||
import Particles from "vue3-particles";
|
||||
import App from "./App.vue";
|
||||
|
||||
import "@/assets/css/main.css";
|
||||
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(Particles as any);
|
||||
|
||||
app.mount("#app");
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue",
|
||||
"public/particles.js"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.config.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in new issue
Block a user