Skip to content

Commit 8f3091d

Browse files
camarm-devcamarm-dev
committed
fix: updated about section
1 parent 0815c61 commit 8f3091d

File tree

1 file changed

+258
-66
lines changed

1 file changed

+258
-66
lines changed

‎components/AboutSection.vue‎

Lines changed: 258 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,241 @@
1-
<script setup>
2-
import { Github, Gitlab, Mail, Phone, Coffee } from 'lucide-vue-next'
3-
</script>
4-
<script>
5-
export default defineComponent({
6-
name: 'AboutSection'
7-
})
1+
<script setup lang="ts">
2+
import { Github, Gitlab, Mail, Phone, Coffee, ArrowUpRight } from 'lucide-vue-next'
3+
import TypescriptIcon from '@/assets/icons/ts.png'
4+
import MongoIcon from '@/assets/icons/mongo.png'
5+
import PythonIcon from '@/assets/icons/python.png'
6+
import RubyIcon from '@/assets/icons/ruby.png'
7+
import IonicIcon from '@/assets/icons/ionic.png'
8+
import VueIcon from '@/assets/icons/vue.png'
9+
import FlaskIcon from '@/assets/icons/flask.png'
10+
import FastAPIIcon from '@/assets/icons/fastapi.png'
11+
import CouchIcon from '@/assets/icons/couch.png'
12+
import SqliteIcon from '@/assets/icons/sqlite.png'
13+
import PVEIcon from '@/assets/icons/pve.png'
14+
import LinuxIcon from '@/assets/icons/linux.png'
815
</script>
916
<template>
1017
<section class="about mt">
11-
<div class="col left half">
12-
<div class="content drawer">
13-
<h2 class="title">
14-
Welcome ! 👨‍💻
18+
<div class="col half">
19+
<div class="content">
20+
<div class="sectionTitle">
21+
<p>About me</p>
22+
<span></span>
23+
</div>
24+
<h2 class="title heading">
25+
Passionated developer, with
26+
unlimited <span class="blue">power</span>
1527
</h2>
1628
<p>
17-
Welcome on my website !
18-
I’m a french 15 years old junior developer and growing sysadmin passionated of Linux, servers infrastructures
19-
and open source.
29+
I'm a passionated 16 yo developer. I love computers and started development at age of 12.
30+
I'm interested in open source, and I'm an everyday Linux user.
31+
</p>
32+
<p>
33+
I'm available to work with you
2034
</p>
2135
</div>
22-
23-
<div class="media drawer">
24-
<img src="../assets/images/illustrations/gradient1.png" alt="Gradient">
25-
</div>
26-
27-
<div class="content drawer">
28-
<h2 class="title">
29-
My engagements 👊
30-
</h2>
36+
</div>
37+
<div class="col half">
38+
<figure class="image pl">
39+
<img src="https://images.unsplash.com/photo-1668681919287-7367677cdc4c?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gradient">
40+
<figcaption>Image by Pawel Czerwinski on Unsplash</figcaption>
41+
</figure>
42+
</div>
43+
<div class="col third">
44+
<div class="content drawer outlined" draggable="true">
45+
<h2 class="title">Objectives</h2>
3146
<p>
32-
I'm always trying to use open source and privacy respectives tools. That’s why I host alternatives to GAFAM's
33-
services on my server.
34-
I use Linux (Ubuntu) 90% of the time to code and work and only use windows to play games. Linux is today a
35-
good alternative to windows, it’s free, open source and powerful !
36-
I can't stand data privacy violation made particularly by the GAFAM. That's why I support open source and open
37-
projects !
47+
Fond of servers administration and development, I really enjoy making these on my free
48+
time and absolutely want to make them my job.
49+
I am currently in high school, in première class with Maths, NSI (IT) and Physics specialties.
50+
My goal is to enter an engineering school, to become software engineer.
3851
</p>
3952
</div>
40-
41-
<div class="media drawer">
42-
<img src="../assets/images/illustrations/gradient3.png" alt="Gradient">
53+
</div>
54+
<div class="col thirds">
55+
<div class="content drawer" draggable="true">
56+
<h2 class="title">Experience</h2>
57+
<div class="grid">
58+
<div class="xp">
59+
<p class="head">
60+
<span class="number">4</span>
61+
<span class="unit"> years</span>
62+
</p>
63+
<p class="desc">Developing applications</p>
64+
</div>
65+
<div class="xp">
66+
<p class="head">
67+
<span class="number">3</span>
68+
<span class="unit"> years</span>
69+
</p>
70+
<p class="desc">Managing my own infrastructure</p>
71+
</div>
72+
<div class="xp">
73+
<p class="head">
74+
<span class="unit">+ </span>
75+
<span class="number">5500</span>
76+
</p>
77+
<p class="desc">Git commits</p>
78+
</div>
79+
<div class="xp">
80+
<p class="head">
81+
<span class="unit">+ </span>
82+
<span class="number">20</span>
83+
</p>
84+
<p class="desc">Webapp created</p>
85+
</div>
86+
<div class="xp">
87+
<p class="head">
88+
<span class="unit">+ </span>
89+
<span class="number">15</span>
90+
</p>
91+
<p class="desc">Services self-hosted</p>
92+
</div>
93+
<div class="xp">
94+
<p class="head">
95+
<span class="unit">+ </span>
96+
<span class="number">3.1</span>
97+
<span class="unit">M</span>
98+
</p>
99+
<p class="desc">Lines of code written</p>
100+
</div>
101+
<div class="xp">
102+
<p class="head">
103+
<span class="unit">+ </span>
104+
<span class="number">250</span>
105+
</p>
106+
<p class="desc">Github issues resolved</p>
107+
</div>
108+
<div class="xp">
109+
<p class="head">
110+
<span class="unit">+ </span>
111+
<span class="number">50</span>
112+
</p>
113+
<p class="desc">Pull requests merged</p>
114+
</div>
115+
</div>
43116
</div>
44-
45-
<div class="content drawer">
46-
<h2 class="title">
47-
Experiences 🔮
117+
</div>
118+
<div class="col third">
119+
<figure class="image">
120+
<img src="https://images.unsplash.com/photo-1659469377768-4f42f2f091c5?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gradient">
121+
<figcaption>Image by Pawel Czerwinski on Unsplash</figcaption>
122+
</figure>
123+
</div>
124+
<div class="col thirds">
125+
<div class="content">
126+
<div class="sectionTitle">
127+
<p>Engagements</p>
128+
<span></span>
129+
</div>
130+
<h2 class="title heading">
131+
I'm an Open Source enthusiast and
132+
I believe in an <span class="pink">ethical</span> Internet.
48133
</h2>
49134
<p>
50-
+ 20 projects<br>
51-
+ 3.1 millions lines of code<br>
52-
+ 4000 github commits<br>
53-
+ 200 issues resolved<br>
54-
+ 50 PR merged<br><br>
55-
+ 10 self-hosted services online<br>
56-
+ 15 web-applications online<br><br>
57-
+ 3 years developing applications<br>
58-
+ 2 years managing my own infrastructure<br>
135+
I'm always trying to use open source and privacy respectives tools (FOSS).
136+
That’s why I host alternatives to GAFAM's services on my own server at home.
137+
<br>
138+
I can't stand data privacy violation made particularly by the GAFAM.
139+
That's why I support open source and open projects !
140+
<br>
141+
<br>
142+
That's why I created <a href="https://labse.camarm.fr" target="_blank">Labse Studio</a> in 2021 :
143+
a non profit organization which powers various open source projects around Internet. My goal is to
144+
offer hosting, development or deployment services to small FOSS.
59145
</p>
146+
<h2 class="title">My open source contributions</h2>
147+
<div class="grid gap">
148+
<div class="drawer media outlined" draggable="true">
149+
<a class="open" href="https://papillon.bzh" target="_blank"><ArrowUpRight/></a>
150+
<img src="https://vincelinise.com/assets/papillon-banner.jpg" alt="Papillon, open source school client">
151+
</div>
152+
<div class="drawer media outlined" draggable="true">
153+
<a class="open" href="https://github.com/literateInk/pawnote" target="_blank"><ArrowUpRight/></a>
154+
<img src="https://repository-images.githubusercontent.com/734874385/e1ca8f8e-ec28-456b-ac06-46f845f8364d" alt="Pawnote, API wrapper for Pronote">
155+
</div>
156+
<div class="drawer media outlined" draggable="true">
157+
<a class="open" href="https://github.com/EduWireApps/ecoledirecte-api-docs/" target="_blank"><ArrowUpRight/></a>
158+
<img src="https://opengraph.githubassets.com/9dae490696257d07dbb5320d90c27d536e9f2436a4ff8557fdd142019e56316f/EduWireApps/ecoledirecte-api-docs" alt="Documentation for Ecoledirecte API">
159+
</div>
160+
</div>
161+
<br>
162+
<p>Discover more open source projects I contributed to on <a href="https://github.com/camarm-dev" target="_blank">my Github</a>.</p>
60163
</div>
61164
</div>
62-
63-
<div class="col right half">
64-
<div class="media drawer">
65-
<img src="../assets/images/illustrations/gradient.png" alt="Gradient">
66-
</div>
67-
68-
<div class="content drawer">
69-
<h2 class="title">
70-
My objectives 🗒️
165+
<div class="col half">
166+
<div class="content">
167+
<div class="sectionTitle">
168+
<p>Technologies</p>
169+
<span></span>
170+
</div>
171+
<h2 class="title heading">
172+
From frontend to backend,
173+
administration to creation,
174+
I'm a <span class="purple">fullstack</span> developer !
71175
</h2>
72176
<p>
73-
I wanna use and administrate servers but also code in my future job. I really enjoy making these on my free
74-
time and absolutely want to make them my job.<br>
75-
Actually in tenth grade, I want to make an informatics BUT after the high school. I’m also hyped to study at
76-
school 42. I think the devops job is a good option to balance between servers and code.
177+
With my 4 years experience creating various applications, I know how to structure, develop, deploy and scale software.
178+
I'm
77179
</p>
78180
</div>
79-
80-
<div class="media drawer">
81-
<img src="../assets/images/illustrations/gradient2.png" alt="Gradient">
181+
</div>
182+
<div class="col half">
183+
<div class="content drawer outlined">
184+
<h2 class="title">Technologies I'm familiar with</h2>
185+
<div class="techno-jail">
186+
<div class="techno">
187+
<a class="open" href="https://www.typescriptlang.org/" target="_blank"><ArrowUpRight/></a>
188+
<img :src="TypescriptIcon" alt="Typescript icon" class="icon">
189+
</div>
190+
<div class="techno">
191+
<a class="open" href="https://www.mongodb.com" target="_blank"><ArrowUpRight/></a>
192+
<img :src="MongoIcon" alt="MongoDB icon" class="icon">
193+
</div>
194+
<div class="techno">
195+
<a class="open" href="https://python.org" target="_blank"><ArrowUpRight/></a>
196+
<img :src="PythonIcon" alt="Python icon" class="icon">
197+
</div>
198+
<div class="techno">
199+
<a class="open" href="https://www.ruby-lang.org" target="_blank"><ArrowUpRight/></a>
200+
<img :src="RubyIcon" alt="Ruby icon" class="icon">
201+
</div>
202+
<div class="techno">
203+
<a class="open" href="https://vuejs.org/" target="_blank"><ArrowUpRight/></a>
204+
<img :src="VueIcon" alt="Vue icon" class="icon">
205+
</div>
206+
<div class="techno">
207+
<a class="open" href="https://ionicframework.com" target="_blank"><ArrowUpRight/></a>
208+
<img :src="IonicIcon" alt="Ionic icon" class="icon">
209+
</div>
210+
<div class="techno">
211+
<a class="open" href="https://flask.palletsprojects.com/" target="_blank"><ArrowUpRight/></a>
212+
<img :src="FlaskIcon" alt="Flask icon" class="icon">
213+
</div>
214+
<div class="techno">
215+
<a class="open" href="https://fastapi.tiangolo.com" target="_blank"><ArrowUpRight/></a>
216+
<img :src="FastAPIIcon" alt="FastAPi icon" class="icon">
217+
</div>
218+
<div class="techno">
219+
<a class="open" href="https://docs.couchdb.org/en/stable/" target="_blank"><ArrowUpRight/></a>
220+
<img :src="CouchIcon" alt="couchDB icon" class="icon">
221+
</div>
222+
<div class="techno">
223+
<a class="open" href="https://sqlite.org" target="_blank"><ArrowUpRight/></a>
224+
<img :src="SqliteIcon" alt="Sqlite icon" class="icon">
225+
</div>
226+
<div class="techno">
227+
<a class="open" href="https://www.proxmox.com/en/" target="_blank"><ArrowUpRight/></a>
228+
<img :src="PVEIcon" alt="Proxmox icon" class="icon">
229+
</div>
230+
<div class="techno">
231+
<a class="open" href="https://www.linux.org/pages/download/" target="_blank"><ArrowUpRight/></a>
232+
<img :src="LinuxIcon" alt="Linux icon" class="icon">
233+
</div>
234+
</div>
82235
</div>
236+
</div>
237+
</section>
238+
<section>
83239

84240
<div class="content drawer">
85241
<h2 class="title">
@@ -115,11 +271,6 @@ export default defineComponent({
115271
</NuxtLink> to see me in action.
116272
</p>
117273
</div>
118-
119-
<div class="media drawer">
120-
<img src="../assets/images/illustrations/gradient4.png" alt="Gradient">
121-
</div>
122-
</div>
123274
</section>
124275
<section class="about">
125276
<div class="drawer" style="width: 100%; margin-top: 1em; margin-bottom: 1em;">
@@ -139,3 +290,44 @@ export default defineComponent({
139290
</div>
140291
</section>
141292
</template>
293+
<script lang="ts">
294+
import {defineComponent} from 'vue'
295+
import startListeningDragDrop from '@/scripts/drag'
296+
import startTechnosFall from '@/scripts/technosfalling'
297+
298+
export default defineComponent({
299+
name: 'AboutSection',
300+
mounted() {
301+
document.querySelectorAll('.xp').forEach(el => {
302+
const numberElement = el.querySelector('.number')
303+
if (numberElement) {
304+
el?.addEventListener('mouseenter', () => this.animateNumber(numberElement))
305+
}
306+
})
307+
startListeningDragDrop()
308+
startTechnosFall()
309+
},
310+
methods: {
311+
animateNumber(element: Element) {
312+
if (element.classList.contains('animated')) return
313+
element.classList.add('animated')
314+
const number = Number(element.innerHTML)
315+
const increaseNumber = (i: number) => {
316+
i++
317+
element.innerHTML = i.toString()
318+
if (i + 1 >= number) {
319+
setTimeout(() => element.innerHTML = number.toString(), 500 / number)
320+
element.classList.remove('animated')
321+
return
322+
}
323+
if (number < 1000) {
324+
setTimeout(() => increaseNumber(i), 500 / number)
325+
} else {
326+
setTimeout(() => increaseNumber(i + 50), 500 / number)
327+
}
328+
}
329+
increaseNumber(0)
330+
}
331+
}
332+
})
333+
</script>

0 commit comments

Comments
 (0)