this repo has no description
add design
+125
-53
+3
components.d.ts
+3
components.d.ts
···
4
4
5
5
declare module 'vue' {
6
6
export interface GlobalComponents {
7
+
AboutMe: typeof import('./src/components/presentation/AboutMe.vue')['default']
8
+
AppHeader: typeof import('./src/components/AppHeader.vue')['default']
9
+
BlogPosts: typeof import('./src/components/posts/BlogPosts.vue')['default']
7
10
Island: typeof import('./node_modules/.pnpm/iles@0.7.32_sass@1.49.9/node_modules/iles/dist/client/app/components/Island.vue')['default']
8
11
JulienCalixte: typeof import('./src/components/core/JulienCalixte.vue')['default']
9
12
ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
+20
-4
src/assets/base.css
src/assets/base.scss
+20
-4
src/assets/base.css
src/assets/base.scss
···
20
20
--vt-c-text-light-1: var(--vt-c-indigo);
21
21
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
22
22
--vt-c-text-dark-1: var(--vt-c-white);
23
-
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
23
+
--vt-c-text-dark-2: rgba(235, 235, 235, 0.9);
24
24
}
25
25
26
26
/* semantic color variables for this project */
···
36
36
--color-text: var(--vt-c-text-light-1);
37
37
38
38
--section-gap: 160px;
39
+
--primary: hsl(229, 90%, 28%);
39
40
}
40
41
41
-
/* @media (prefers-color-scheme: dark) {
42
+
@media (prefers-color-scheme: dark) {
42
43
:root {
43
44
--color-background: var(--vt-c-black);
44
45
--color-background-soft: var(--vt-c-black-soft);
···
49
50
50
51
--color-heading: var(--vt-c-text-dark-1);
51
52
--color-text: var(--vt-c-text-dark-2);
53
+
--primary: hsl(229, 100%, 80%);
52
54
}
53
-
} */
55
+
}
54
56
55
57
*,
56
58
*::before,
···
69
71
line-height: 1.6;
70
72
font-family: "Fenix", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
71
73
serif;
72
-
font-size: 15px;
74
+
font-size: 22px;
73
75
text-rendering: optimizeLegibility;
74
76
-webkit-font-smoothing: antialiased;
75
77
-moz-osx-font-smoothing: grayscale;
76
78
}
79
+
80
+
a {
81
+
color: var(--color-text);
82
+
}
83
+
84
+
h1,
85
+
h2,
86
+
h3,
87
+
h4,
88
+
h5,
89
+
h6 {
90
+
font-variant: small-caps;
91
+
color: var(--primary);
92
+
}
+31
src/components/AppHeader.vue
+31
src/components/AppHeader.vue
···
1
+
<script setup lang="ts"></script>
2
+
3
+
<template>
4
+
<header class="app-header">
5
+
<div class="wrapper">
6
+
<router-link to="/" class="logo">
7
+
<julien-calixte size="big" />
8
+
</router-link>
9
+
</div>
10
+
</header>
11
+
</template>
12
+
13
+
<style scoped lang="scss">
14
+
/* #nav a.router-link-exact-active {
15
+
background-color: var(--color-text);
16
+
} */
17
+
18
+
.app-header {
19
+
padding: 0 1rem;
20
+
21
+
.wrapper {
22
+
display: flex;
23
+
align-items: center;
24
+
gap: 2rem;
25
+
26
+
.logo {
27
+
text-decoration: none;
28
+
}
29
+
}
30
+
}
31
+
</style>
+11
-18
src/components/Welcome.vue
+11
-18
src/components/Welcome.vue
···
1
-
<script setup lang="ts">
2
-
import { usePosts } from "@/hooks/usePosts.hook";
3
-
4
-
const posts = usePosts();
5
-
</script>
1
+
<script setup lang="ts"></script>
6
2
7
3
<template>
8
-
<h1>Hi! I'm <julien-calixte />. A mobile & web developer.</h1>
9
-
<p>
10
-
I am into building things with code. I love creating offline first
11
-
Progressive Web Apps. I've been doing programmation for 5 years and lead
12
-
dev/technical architecture for 1 year now.
13
-
</p>
4
+
<section class="welcome">
5
+
<about-me />
14
6
15
-
<section>
16
-
<h2>My blog posts</h2>
17
-
<ul>
18
-
<li v-for="post in posts" :key="post.href">
19
-
<a :href="post.href">{{ post.title }}</a>
20
-
</li>
21
-
</ul>
7
+
<blog-posts />
22
8
</section>
23
9
</template>
10
+
11
+
<style scoped lang="scss">
12
+
.welcome {
13
+
max-width: 800px;
14
+
margin: auto;
15
+
}
16
+
</style>
+1
src/components/core/JulienCalixte.vue
+1
src/components/core/JulienCalixte.vue
+24
src/components/posts/BlogPosts.vue
+24
src/components/posts/BlogPosts.vue
···
1
+
<script setup lang="ts">
2
+
import { usePosts } from "@/hooks/usePosts.hook";
3
+
4
+
const posts = usePosts();
5
+
</script>
6
+
7
+
<template>
8
+
<div class="blog-posts">
9
+
<h2>Last posts</h2>
10
+
<div v-for="post in posts" :key="post.href">
11
+
<h3>
12
+
<a :href="post.href">{{ post.title }}</a>
13
+
</h3>
14
+
</div>
15
+
</div>
16
+
</template>
17
+
18
+
<style scoped lang="scss">
19
+
.blog-posts {
20
+
h3 {
21
+
font-weight: bold;
22
+
}
23
+
}
24
+
</style>
+13
src/components/presentation/AboutMe.vue
+13
src/components/presentation/AboutMe.vue
···
1
+
<script setup lang="ts"></script>
2
+
3
+
<template>
4
+
<h1>Hi! I'm <julien-calixte />. A mobile & web developer.</h1>
5
+
<section class="about-me">
6
+
<p>I am into building things with code.</p>
7
+
</section>
8
+
</template>
9
+
10
+
<style scoped lang="scss">
11
+
.about-me {
12
+
}
13
+
</style>
+3
-31
src/layouts/default.vue
+3
-31
src/layouts/default.vue
···
1
1
<template>
2
2
<div class="default">
3
-
<header>
4
-
<div class="wrapper">
5
-
<julien-calixte size="big" />
6
-
<div id="nav">
7
-
<router-link to="/">Home</router-link>
8
-
<router-link to="/about">About</router-link>
9
-
</div>
10
-
</div>
11
-
</header>
12
-
3
+
<app-header />
13
4
<slot />
14
5
</div>
15
6
</template>
16
7
17
-
<style>
18
-
@import "@/assets/base.css";
19
-
20
-
/* #nav a.router-link-exact-active {
21
-
background-color: var(--color-text);
22
-
} */
23
-
24
-
#nav a {
25
-
display: inline-block;
26
-
padding: 0 1rem;
27
-
}
28
-
29
-
.default {
30
-
padding: 0 1rem;
31
-
}
32
-
33
-
.wrapper {
34
-
display: flex;
35
-
align-items: center;
36
-
gap: 2rem;
37
-
}
8
+
<style lang="scss">
9
+
@import "@/assets/base";
38
10
</style>
+18
src/layouts/post.vue
+18
src/layouts/post.vue
···
1
+
<template>
2
+
<div class="post">
3
+
<app-header />
4
+
5
+
<article id="main-article">
6
+
<slot />
7
+
</article>
8
+
</div>
9
+
</template>
10
+
11
+
<style lang="scss">
12
+
@import "@/assets/base";
13
+
14
+
article#main-article {
15
+
max-width: 650px;
16
+
margin: auto;
17
+
}
18
+
</style>