unurled/site-pro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

First commit website working

Browse source
This commit is contained in:
unurled 2023-08-04 11:57:39 +02:00
commit 7ae7cafe97
Signed by: unurled
GPG key ID: FDBC9CBE1F82423F
34 changed files with 1796 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

19
LICENSE.MD Normal file
View file

@ -0,0 +1,19 @@
Copyright (c) 2023 Matthieu Peterschmitt
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

7
README.md Normal file
View file

@ -0,0 +1,7 @@
# Unurled's pro website
`yarn build` to build\
`yarn dev` to make a dev build\
`yarn preview`
`yarn install` first

12
index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matthieu Peterschmitt</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

25
package.json Normal file
View file

@ -0,0 +1,25 @@
{
"name": "-site-pro",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"chart.js": "^4.3.0",
"vue": "^3.2.47",
"vue-chartjs": "^5.2.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.2",
"vite": "^4.3.2",
"vue-tsc": "^1.4.2"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

98
src/App.vue Normal file
View file

@ -0,0 +1,98 @@
<script setup lang="ts">
import NavBar from './components/NavBar.vue';
import Home from './components/content/Home.vue';
import Footer from './components/Footer.vue'
import CV from './components/content/CV.vue'
import Projects from './components/content/Projects.vue'
import Lang from './components/content/Lang.vue'
import Contact from './components/content/Contact.vue'
import { ref, watchEffect } from 'vue';
const darkMode = ref(document.body.classList.contains('dark'));
const applyDarkMode = () => document.body.classList[darkMode.value ? 'add' : 'remove']('dark');
watchEffect(applyDarkMode);
</script>
<script lang="ts">
export default {
components: {
Home,
CV,
Projects,
Lang,
Contact,
},
data() {
return {
cv: false,
proj: false,
lang: false,
cont: false,
home: true,
darkmode: false,
};
},
methods: {
button(n: number) {
switch (n) {
case 0:
this.cv = true;
this.proj = false;
this.lang = false;
this.cont = false;
this.home = false;
break;
case 1:
this.cv = false;
this.proj = true;
this.lang = false;
this.cont = false;
this.home = false;
break;
case 2:
this.cv = false;
this.proj = false;
this.lang = true;
this.cont = false;
this.home = false;
break;
case 3:
this.cv = false;
this.proj = false;
this.lang = false;
this.cont = true;
this.home = false;
break;
case 4:
this.cv = false;
this.proj = false;
this.lang = false;
this.cont = false;
this.home = true;
break;
}
},
onDarkSwitch() {
this.darkmode = !this.darkmode;
}
},
created() {
this.onDarkSwitch()
}
}
</script>
<template>
<div id="main" :class="{ dark: darkmode }">
<div class="page bg-white-1 dark:bg-dark-bg h-screen">
<NavBar @button="button" @dark-switch="onDarkSwitch"/>
<Home :home="home" />
<CV :cv="cv" />
<Projects :proj="proj" />
<Lang :lang="lang" :dark="darkmode" />
<Contact :cont="cont" />
<Footer />
</div>
</div>
</template>

BIN
src/assets/campfire.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 KiB

4
src/assets/moon.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 622 B

4
src/assets/sun.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 566 B

7
src/components/Footer.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<div class="bottom-10">
<div class="mt-10 mb-10 mx-auto bg box bg-white-3 dark:bg-dark-black-2 h-20 rounded-lg w-150 items-center flex justify-center">
<p class="m-auto text-center text-black-1 dark:text-dark-white-3 text-2xl">Made by Matthieu Peterschmitt. View source at <a class="text-accent-2 dark:text-accent-1" href="https://git.unurled.me/unurled/site-pro">https://git.unurled.me/unurled/site-pro</a></p>
</div>
</div>
</template>

50
src/components/NavBar.vue Normal file
View file

@ -0,0 +1,50 @@
<script lang="ts">
export default {
methods: {
toggleDarkMode() {
this.$emit('dark-switch')
}
}
}
</script>
<template>
<div class="pt-5 pl-5 pb-5 navbar container flex flex-nowrap">
<div class="title">
<button @click="$emit('button', 4)"><h1 class="w-121 pl-5 pt-7 text-5xl font-bold text-black-1 dark:text-dark-white-1">Matthieu Peterschmitt</h1></button>
</div>
<div class="bar ml-35 pl-10">
<div class="bg bg-white-3 dark:bg-dark-black-1 ml-50 w-128 h-100 pl-3 pb-3 pt-3 grid grid-cols-4 rounded-xl">
<button @click="$emit('button', 0)" id="cv-btn">
<div class="ml-13 card bg-white-2 dark:bg-dark-black-2 w-64 h-16 rounded-xl flex justify-center shadow-2xl hover:border-4 hover:border-solid hover:border-dark-bg">
<p class="text-center m-auto text-3xl text-black-1 dark:text-dark-white-1">CV</p>
</div>
</button>
<button @click="$emit('button', 1)" id="projects-btn">
<div class="ml-15 card bg-white-2 dark:bg-dark-black-2 w-64 h-16 rounded-xl flex justify-center shadow-2xl hover:border-4 hover:border-solid hover:border-dark-bg">
<p class="text-center m-auto text-3xl text-black-1 dark:text-dark-white-1">Projects</p>
</div>
</button>
<button @click="$emit('button', 2)" id="lang-btn">
<div class="ml-15 card bg-white-2 dark:bg-dark-black-2 w-64 h-16 rounded-xl flex justify-center shadow-2xl hover:border-4 hover:border-solid hover:border-dark-bg">
<p class="text-center m-auto text-3xl text-black-1 dark:text-dark-white-1">Languages</p>
</div>
</button>
<button @click="$emit('button', 3)" id="contact-btn">
<div class="ml-15 card bg-white-2 dark:bg-dark-black-2 w-64 h-16 rounded-xl flex justify-center shadow-2xl hover:border-4 hover:border-solid hover:border-dark-bg">
<p class="text-center m-auto text-3xl text-black-1 dark:text-dark-white-1">Contact</p>
</div>
</button>
</div>
</div>
<div id="theme" class="pl-5 pt-7">
<label id="switch" class="switch">
<input @click="toggleDarkMode" type="checkbox" id="slider">
<span class="slider round"></span>
</label>
</div>
</div>
</template>

31
src/components/content/CV.vue Normal file
View file

@ -0,0 +1,31 @@
<script lang="ts">
export default {
props: {
cv: Boolean
}
}
</script>
<template>
<div class="mt-10 container mx-auto bg bg-white-2 dark:bg-dark-black-1 rounded-2xl p-12 h-1/2" :class="cv ? '' : 'hidden'">
<div class="border rounded-lg dark:border-white-2">
<table class="table-auto w-full border-spacing-1 border-separate">
<thead class="text-dark-black-3 dark:text-white-2">
<tr class="border-black-1 dark:border-white-3">
<th>Location</th>
<th>Description</th>
<th>Year</th>
</tr>
</thead>
<tbody class="text-dark-bg dark:text-white-1">
<tr class="">
<th>BUT Informatique S1-2 Belfort</th>
<th>First year of computer science</th>
<th>2022-2023</th>
</tr>
</tbody>
</table>
</div>
</div>
</template>

19
src/components/content/Cards.vue Normal file
View file

@ -0,0 +1,19 @@
<script lang="ts">
export default {
props: {
name: String,
description: String,
repo: String,
tech: String,
}
}
</script>
<template>
<div class="flex w-full flex-col items-center justify-center rounded-lg border p-8 bg-dark-white-3 dark:bg-dark-black-2 text-dark-bg dark:text-dark-white-2">
<h1>{{ name }}</h1>
<p>{{ description }}</p>
<a class="text-accent-2 dark:text-accent-1" :href=repo>{{ repo }}</a>
<p>Technologies used : {{ tech }}</p>
</div>
</template>

21
src/components/content/Contact.vue Normal file
View file

@ -0,0 +1,21 @@
<script lang="ts">
export default {
props: {
cont: Boolean
}
}
</script>
<template>
<div class="mt-10 container mx-auto bg bg-white-2 dark:bg-dark-black-1 rounded-2xl p-12 h-1/2" :class="cont ? '' : 'hidden'">
<form action="mailto:matthieu.pro@peterschmitt.eu" method="get" enctype="application/x-www-form-urlencoded">
<div class="container grid grid-cols-4 gap-y-2">
<p class="text-black-2 dark:text-white-2">Subject</p>
<input class="rounded-xl p-2 col-span-3" type="text" name="subject" placeholder="Subject">
<p class="text-black-2 dark:text-white-2">Message:</p>
<textarea class="rounded-xl p-2 col-span-3" name="body" rows="5" cols="45" placeholder="Your Message"></textarea><br>
</div>
<input class="w-1/6 text-black-2 dark:text-white-2 p-2 rounded-xl cursor-pointer border bg-white-3 dark:bg-dark-bg" type="submit" value="Send">
</form>
</div>
</template>

25
src/components/content/Home.vue Normal file
View file

@ -0,0 +1,25 @@
<script lang="ts">
export default {
props: {
home: Boolean
},
mounted() {
const born_date = new Date(2004, 11, 4);
const date = new Date();
const diff_time = Math.abs(date.getTime() - born_date.getTime());
const diff_years = Math.ceil(diff_time / (1000 * 60 * 60 * 24 * 365));
const years = document.getElementById("years");
if (years !!= null)
years.innerHTML = diff_years-1 as unknown as string;
}
}
</script>
<template>
<div id="home" class="mt-10 container mx-auto rounded-2xl p-12 h-1/2 flex" :class="home ? '' : 'hidden'">
<p class="text-3xl text-justify text-black-1 dark:text-dark-white-2">Hallo ! <br/> I'm Matthieu Peterschmitt. I come from France, Grand-EST. I'm currently <span id="years"></span> years old and am learning in the IUT in France. I am currently in my first year of BUT Informatique. Feel free to visit this site and it's different parts.<br /> Enjoy your stay!</p> <img src="./../../assets/campfire.gif">
</div>
</template>

84
src/components/content/Lang.vue Normal file
View file

@ -0,0 +1,84 @@
<script lang="ts">
// @ts-nocheck
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: 'Lang',
components: {
Bar
},
data() {
return {
chartData: {
labels: ['Java', 'Typescript', 'Python', 'Rust'],
datasets: [ {
axis: 'y',
barThickness: 10,
borderRadius: 10,
data: [100, 80, 90, 80],
backgroundColor: [
'rgba(193, 132, 1, 0.3)',
'rgba(1, 132, 188, 0.3)',
'rgba(97, 175, 239, 0.3)',
'rgba(209, 154, 102, 0.3)'
],
} ]
},
chartOptions: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y',
events: [],
plugins: {
legend: {
display: false,
},
title: {
display: false,
}
},
scales: {
y: {
grid: {
display: false,
},
ticks: {
font: {
size: 30,
},
color: '#a0a1a7'
}
},
x: {
grid: {
display: false,
},
display: false,
padding: 5,
}
}
}
}
},
mounted() {
},
computed: {
// chart
},
props: {
lang: Boolean,
}
}
</script>
<template>
<div class="mt-10 container mx-auto bg bg-white-2 dark:bg-dark-black-1 rounded-2xl p-12 h-1/2" :class="lang ? '' : 'hidden'">
<h3 class="text-4xl font-bold text-black-1 dark:text-dark-white-2 text-center">My knowledge</h3>
<Bar id="chart" :options="chartOptions" :data="chartData"/>
</div>
</template>

27
src/components/content/Projects.vue Normal file
View file

@ -0,0 +1,27 @@
<script setup lang="ts">
import Cards from './Cards.vue'
</script>
<script lang="ts">
export default {
props: {
proj: Boolean
}
}
</script>
<template>
<div class="mt-10 container mx-auto bg-white-2 dark:bg-dark-black-1 rounded-2xl p-12 h-1/2" :class="proj ? '' : 'hidden'">
<div class="grid grid-cols-3 grid-rows-2 gap-2 h-full">
<Cards :name="'Cutscenes'" :description="'A custom Minecraft plugin framework that helps player do cutscenes.'" :repo="'https://git.unurled.me/SacredRealms/Cutscenes'" :tech="'Java, Gradle'"/>
<Cards :name="'Raxen'" :description="'A custom Minecraft plugin that aims at adding custom items, custom mobs and custom blocks.'" :repo="'https://git.unurled.me/Elixium/Raxen'" :tech="'Java, Gradle'"/>
<Cards :name="'Text'" :description="'A little text display website with authentification with db storage.'" :repo="'https://git.unurled.me/unurled/text-display'" :tech="'Javascript, MongoDB, Rust (rewritten in rust)'"/>
<Cards :name="'Url'" :description="'A simple url shortener website.'" :repo="'https://git.unurled.me/unurled/url-shortener'" :tech="'Javascript'"/>
<Cards :name="'Capes'" :description="'A bypass to Optifine\'s cape dlc.'" :repo="'https://git.unurled.me/unurled/capes'" :tech="'JavaScript, Rust (rewritten in rust)'"/>
<Cards :name="'Color'" :description="'A small plugin for Obsidian that colors text.'" :repo="'https://git.unurled.me/unurled/obsidian-color-text'" :tech="'TypeScript'"/>
</div>
</div>
</template>

5
src/components/content/projects/Capes.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="flex w-full flex-col items-center justify-center rounded-lg border border-gray-200 p-8">
<h1>Capes</h1>
</div>
</template>

5
src/components/content/projects/Color.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="flex w-full flex-col items-center justify-center rounded-lg border border-gray-200 p-8">
<h1>Color</h1>
</div>
</template>

5
src/components/content/projects/Cutscenes.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="flex w-full flex-col items-center justify-center rounded-lg border border-gray-200 p-8">
<h1>Cutscenes</h1>
</div>
</template>

5
src/components/content/projects/Raxen.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="flex w-full flex-col items-center justify-center rounded-lg border border-gray-200 p-8">
<h1>Raxen</h1>
</div>
</template>

5
src/components/content/projects/Text.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="flex w-full flex-col items-center justify-center rounded-lg border border-gray-200 p-8">
<h1>Text</h1>
</div>
</template>

5
src/components/content/projects/Url.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="flex w-full flex-col items-center justify-center rounded-lg border border-gray-200 p-8">
<h1>Url</h1>
</div>
</template>

7
src/main.ts Normal file
View file

@ -0,0 +1,7 @@
import { createApp } from 'vue'
import './style.css'
import './sun-moon.css'
import App from './App.vue'
createApp(App).mount('#app')

5
src/style.css Normal file
View file

@ -0,0 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

86
src/sun-moon.css Normal file
View file

@ -0,0 +1,86 @@
.theme-light {
--color-primary: #0060df;
--color-secondary: #fbfbfe;
--color-accent: #fd6f53;
--font-color: #000000;
}
.theme-dark {
--color-primary: #17ed90;
--color-secondary: #2a2c2d;
--color-accent: #12cdea;
--font-color: #ffffff;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 40px;
width: 40px;
left: 0px;
/* bottom: 4px; */
top: 0;
bottom: 0;
margin: auto 0;
-webkit-transition: 0.4s;
transition: 0.4s;
box-shadow: 0 0px 15px #2020203d;
background: white url('./assets/moon.svg');
background-repeat: no-repeat;
background-position: center;
}
input:checked + .slider {
background-color: #2196f3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(24px);
-ms-transform: translateX(24px);
transform: translateX(24px);
background: white url('./assets/sun.svg');
background-repeat: no-repeat;
background-position: center;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

1
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

44
tailwind.config.js Normal file
View file

@ -0,0 +1,44 @@
/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class",
content: [
"./index.html",
"src/**/*.{vue,js,ts,jsx,tsx}"
],
theme: {
colors: {
"dark-bg": "#282c34",
"dark-black-1": "#393e48",
"dark-black-2": "#4b515c",
"dark-white-1": "#fafafa",
"dark-white-2": "#cdced1",
"dark-white-3": "#a0a1a7",
"white-1": "#fafafa",
"white-2": "#cdced1",
"white-3": "#a0a1a7",
"black-1": "#383a42",
"black-2": "#51535d",
"accent-1": "#56b6c2",
"accent-2": "#2f97ec",
},
fontFamily: {
sans: ["Roboto", "sans-serif"]
},
extend: {
spacing: {
64: 270,
16: 75,
128: 1150,
120: 400,
121: 550,
20: 100,
150: 1440
},
boxShadow: {
"2xl": "0 0px 100px 5px rgb(0 0 0 / .1)",
}
},
},
plugins: [],
}

25
tsconfig.json Normal file
View file

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
tsconfig.node.json Normal file
View file

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})

1115
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff