Kevin/website
1
0
Fork 0
mirror of https://github.com/LJ5O/website.git synced 2026-08-11 14:44:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Vuejs install

Browse Source
This commit is contained in:
LJ5O
2025-03-18 09:57:49 +01:00
parent 87ac190084
commit f404a80d05
27 changed files with 3383 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/node_modules

30
README.md
View File

@@ -1 +1,29 @@
# Hi !
# website
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).
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```

182
html/index.html Normal file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<div class="" id="welcome_div">
<p id="random_citation">Random Sentence</p>
<div class="test" id="name_div">
<div id="profile_picture"><img src="https://picsum.photos/200" height="100%" width="100%"></div>
<div id="name_div_right_container">
<div class="test" id="welcome_text_div">
<h1>Hello ! I'm </h1>
<h2>AI enthousiast</h2>
</div>
<div id="social_networks" class="test">
<div class="network">
<img src="https://picsum.photos/50">
</div>
<div class="network">
<img src="https://picsum.photos/50">
</div>
<div class="network">
<img src="https://picsum.photos/50">
</div>
</div>
</div>
</div> <!-- Name div -->
</div> <!-- Welcome Div -->
<div class="intersection_div">
<div class="intersection_content test">
<h2 class="test">Looking for something ?</h2>
<a href="#"><div class="intersection_button_div test"><p>Hello World</p></div></a>
</div>
</div> <!-- Intersection div -->
<div id="presentation_div" class="">
<div id="presentation_text">
<h1>Thanks for coming !</h1>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean nec ante tristique, tincidunt dolor a, maximus nisl.
Curabitur ut metus accumsan, vestibulum ex vitae, pretium enim.
Etiam tincidunt mauris quis elit egestas, vel viverra justo
efficitur. Nulla facilisi. Cras porttitor odio a massa pretium
varius. Vivamus felis risus, luctus vel mollis nec, lacinia non
libero. Proin mattis, ante vitae mattis sollicitudin, turpis
erat auctor arcu, vel fringilla arcu diam aliquam urna.
</p>
</article>
</div>
<div id="presentation_img"><img src="https://picsum.photos/500/250"></div>
</div> <!-- Presentation div -->
<div class="feature_div">
<div class="feature_img_div">
<img src="https://picsum.photos/600/400">
</div>
<div class="feature_text_div">
<h2>Titre de la catégorie.</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,
efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt,
suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor.
Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam.
Aenean faucibus neque id nibh facilisis auctor. </p>
</article>
<button class="button feature_button">Oui ! Je veux en savoir plus !</button>
</div>
</div> <!-- Feature div -->
<div class="feature_div">
<div class="feature_text_div">
<h2>Titre de la catégorie.</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,
efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt,
suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor.
Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam.
Aenean faucibus neque id nibh facilisis auctor. </p>
</article>
<button class="button feature_button">Oui ! Je veux en savoir plus !</button>
</div>
<div class="feature_img_div">
<img src="https://picsum.photos/600/400">
</div>
</div> <!-- Feature div -->
<div class="intersection_div" style="margin-top: 30px;">
<div class="intersection_content test">
<h2 class="test">Looking for something ?</h2>
<a href="#"><div class="intersection_button_div test"><p>Hello World</p></div></a>
</div>
</div> <!-- Intersection div -->
<div id="projects_summary">
<div id="projects_summary_text">
<h1>Les projets que j'ai déjà fait</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt.</p>
</div>
<div id="projects_holder">
<div class="project">
<div class="project_picture">
<img src="https://picsum.photos/400/300">
</div>
<div class="project_description">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin felis lectus, feugiat in eros sit amet, venenatis euismod
urna. Aliquam id porttitor erat, vitae dapibus velit. Praesent
id felis tincidunt,</p>
</article>
<button class="button project_button">Oui !</button>
</div>
</div>
</div>
</div> <!-- Projects summary -->
<footer>
<div id="footer_content">
<div id="footer_social_networks">
<h1>Social networks</h1>
<a href="#">
<div class="footer_social_network_item">
<img src="https://picsum.photos/50">
</div>
</a>
</div>
<nav id="footer_content_links">
<h1>Sitemap</h1>
<div class="footer_links_box">
<h2 class="footer_links_box_title">Projects</h2>
<ul>
<li><p><a href="#">Project 1</a></p></li>
<li><p><a href="#">Project 2</a></p></li>
<li><p><a href="#">Project 3</a></p></li>
</ul>
</div>
</nav> <!-- Footer content links -->
<div id="footer_contact_div">
<h1>Contact</h1>
<p>Want to contact me ? Let's have a talk !</p>
<div id="footer_contact_button" class="button">Contact</div>
</div>
<div id="footer_picture">
<img src="https://picsum.photos/50/50">
</div>
</div> <!-- Footer content -->
<p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
</footer>
</body>
</html>

0
style.css → html/style.css
View File

0
test.html → html/test.html
View File

179
index.html
View File

@@ -1,182 +1,13 @@
<!DOCTYPE html>
<html lang="fr">
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<title>Vite App</title>
</head>
<body>
<div class="" id="welcome_div">
<p id="random_citation">Random Sentence</p>
<div class="test" id="name_div">
<div id="profile_picture"><img src="https://picsum.photos/200" height="100%" width="100%"></div>
<div id="name_div_right_container">
<div class="test" id="welcome_text_div">
<h1>Hello ! I'm </h1>
<h2>AI enthousiast</h2>
</div>
<div id="social_networks" class="test">
<div class="network">
<img src="https://picsum.photos/50">
</div>
<div class="network">
<img src="https://picsum.photos/50">
</div>
<div class="network">
<img src="https://picsum.photos/50">
</div>
</div>
</div>
</div> <!-- Name div -->
</div> <!-- Welcome Div -->
<div class="intersection_div">
<div class="intersection_content test">
<h2 class="test">Looking for something ?</h2>
<a href="#"><div class="intersection_button_div test"><p>Hello World</p></div></a>
</div>
</div> <!-- Intersection div -->
<div id="presentation_div" class="">
<div id="presentation_text">
<h1>Thanks for coming !</h1>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean nec ante tristique, tincidunt dolor a, maximus nisl.
Curabitur ut metus accumsan, vestibulum ex vitae, pretium enim.
Etiam tincidunt mauris quis elit egestas, vel viverra justo
efficitur. Nulla facilisi. Cras porttitor odio a massa pretium
varius. Vivamus felis risus, luctus vel mollis nec, lacinia non
libero. Proin mattis, ante vitae mattis sollicitudin, turpis
erat auctor arcu, vel fringilla arcu diam aliquam urna.
</p>
</article>
</div>
<div id="presentation_img"><img src="https://picsum.photos/500/250"></div>
</div> <!-- Presentation div -->
<div class="feature_div">
<div class="feature_img_div">
<img src="https://picsum.photos/600/400">
</div>
<div class="feature_text_div">
<h2>Titre de la catégorie.</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,
efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt,
suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor.
Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam.
Aenean faucibus neque id nibh facilisis auctor. </p>
</article>
<button class="button feature_button">Oui ! Je veux en savoir plus !</button>
</div>
</div> <!-- Feature div -->
<div class="feature_div">
<div class="feature_text_div">
<h2>Titre de la catégorie.</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,
efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt,
suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor.
Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam.
Aenean faucibus neque id nibh facilisis auctor. </p>
</article>
<button class="button feature_button">Oui ! Je veux en savoir plus !</button>
</div>
<div class="feature_img_div">
<img src="https://picsum.photos/600/400">
</div>
</div> <!-- Feature div -->
<div class="intersection_div" style="margin-top: 30px;">
<div class="intersection_content test">
<h2 class="test">Looking for something ?</h2>
<a href="#"><div class="intersection_button_div test"><p>Hello World</p></div></a>
</div>
</div> <!-- Intersection div -->
<div id="projects_summary">
<div id="projects_summary_text">
<h1>Les projets que j'ai déjà fait</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt.</p>
</div>
<div id="projects_holder">
<div class="project">
<div class="project_picture">
<img src="https://picsum.photos/400/300">
</div>
<div class="project_description">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin felis lectus, feugiat in eros sit amet, venenatis euismod
urna. Aliquam id porttitor erat, vitae dapibus velit. Praesent
id felis tincidunt,</p>
</article>
<button class="button project_button">Oui !</button>
</div>
</div>
</div>
</div> <!-- Projects summary -->
<footer>
<div id="footer_content">
<div id="footer_social_networks">
<h1>Social networks</h1>
<a href="#">
<div class="footer_social_network_item">
<img src="https://picsum.photos/50">
</div>
</a>
</div>
<nav id="footer_content_links">
<h1>Sitemap</h1>
<div class="footer_links_box">
<h2 class="footer_links_box_title">Projects</h2>
<ul>
<li><p><a href="#">Project 1</a></p></li>
<li><p><a href="#">Project 2</a></p></li>
<li><p><a href="#">Project 3</a></p></li>
</ul>
</div>
</nav> <!-- Footer content links -->
<div id="footer_contact_div">
<h1>Contact</h1>
<p>Want to contact me ? Let's have a talk !</p>
<div id="footer_contact_button" class="button">Contact</div>
</div>
<div id="footer_picture">
<img src="https://picsum.photos/50/50">
</div>
</div> <!-- Footer content -->
<p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
</footer>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

8
jsconfig.json Normal file
View File

@@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

2584
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

20
package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "website",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.2.1",
"vite-plugin-vue-devtools": "^7.7.2"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

85
src/App.vue Normal file
View File

@@ -0,0 +1,85 @@
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>
<style scoped>
header {
line-height: 1.5;
max-height: 100vh;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}
nav a.router-link-exact-active {
color: var(--color-text);
}
nav a.router-link-exact-active:hover {
background-color: transparent;
}
nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
}
</style>

86
src/assets/base.css Normal file
View File

@@ -0,0 +1,86 @@
/* 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);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
: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;
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;
}

1
src/assets/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

35
src/assets/main.css Normal file
View File

@@ -0,0 +1,35 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

44
src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup>
defineProps({
msg: {
type: String,
required: true,
},
})
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>

94
src/components/TheWelcome.vue Normal file
View File

@@ -0,0 +1,94 @@
<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</script>
<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
you need to test your components and web pages, check out
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
and
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
/
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
<br />
More instructions are available in
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
(our official Discord server), or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
>StackOverflow</a
>. You should also follow the official
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
Bluesky account or the
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
X account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</WelcomeItem>
</template>

86
src/components/WelcomeItem.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>
<style scoped>
.item {
margin-top: 2rem;
display: flex;
position: relative;
}
.details {
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:first-of-type:before {
display: none;
}
.item:last-of-type:after {
display: none;
}
}
</style>

7
src/components/icons/IconCommunity.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>

7
src/components/icons/IconDocumentation.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>

7
src/components/icons/IconEcosystem.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>

7
src/components/icons/IconSupport.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>

19
src/components/icons/IconTooling.vue Normal file
View File

@@ -0,0 +1,19 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
</template>

11
src/main.js Normal file
View File

@@ -0,0 +1,11 @@
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

23
src/router/index.js Normal file
View File

@@ -0,0 +1,23 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'),
},
],
})
export default router

15
src/views/AboutView.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>

9
src/views/HomeView.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup>
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
</template>

18
vite.config.js Normal file
View File

@@ -0,0 +1,18 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})