this repo has no description
create a JulienCalixte's logo
+36
-1
+1
components.d.ts
+1
components.d.ts
···
5
5
declare module 'vue' {
6
6
export interface GlobalComponents {
7
7
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
+
JulienCalixte: typeof import('./src/components/core/JulienCalixte.vue')['default']
8
9
ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
9
10
Welcome: typeof import('./src/components/Welcome.vue')['default']
10
11
}
+1
-1
src/components/Welcome.vue
+1
-1
src/components/Welcome.vue
···
5
5
</script>
6
6
7
7
<template>
8
-
<h1>Hi! I'm Julien. A mobile & web developer.</h1>
8
+
<h1>Hi! I'm <julien-calixte />. A mobile & web developer.</h1>
9
9
<p>
10
10
I am into building things with code. I love creating offline first
11
11
Progressive Web Apps. I've been doing programmation for 5 years and lead
+27
src/components/core/JulienCalixte.vue
+27
src/components/core/JulienCalixte.vue
···
1
+
<script setup lang="ts">
2
+
const fontSize = {
3
+
small: "12px",
4
+
normal: "inherit",
5
+
big: "44px",
6
+
};
7
+
8
+
interface Props {
9
+
size?: keyof typeof fontSize;
10
+
}
11
+
12
+
const props = withDefaults(defineProps<Props>(), { size: "normal" });
13
+
14
+
const style = `font-size: ${fontSize[props.size]}`;
15
+
</script>
16
+
17
+
<template>
18
+
<span class="julien-calixte" :style="style">Julien Calixte</span>
19
+
</template>
20
+
21
+
<style scoped lang="scss">
22
+
@import url("https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
23
+
24
+
.julien-calixte {
25
+
font-family: "Meow Script", cursive;
26
+
}
27
+
</style>
+7
src/layouts/default.vue
+7
src/layouts/default.vue
···
2
2
<div class="default">
3
3
<header>
4
4
<div class="wrapper">
5
+
<julien-calixte size="big" />
5
6
<div id="nav">
6
7
<router-link to="/">Home</router-link>
7
8
<router-link to="/about">About</router-link>
···
27
28
28
29
.default {
29
30
padding: 0 1rem;
31
+
}
32
+
33
+
.wrapper {
34
+
display: flex;
35
+
align-items: center;
36
+
gap: 2rem;
30
37
}
31
38
</style>