-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
193 lines (176 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Personal developer Portfolio, for me, Jules. It presents my projects, my main skills and what I like. You can also contact me through a form at the end of the page.">
<meta name="theme-color" content="#36268c"/>
<script src="https://kit.fontawesome.com/77948c1566.js" crossorigin="anonymous" defer></script>
<script src="dist/js/index.js" defer type="module"></script>
<link rel="stylesheet" href="dist/css/style.css">
<title>Portfolio</title>
<link rel="icon" href="assets/images/vector/favicon.svg" type="image/svg">
</head>
<body>
<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg' style="display: none;" aria-hidden="true">
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='0.65'
numOctaves='1'
stitchTiles='stitch'/>
<feColorMatrix type="saturate" values="0" />
</filter>
<rect
width='100%'
height='100%'
filter='url(#noiseFilter)' />
</svg>
<div id="toaster" class="error">
<p>Toast</p>
</div>
<div class="trailer" aria-hidden="true">
<img src="assets/images/vector/arrow-ext.svg" alt="trailer icon" class="trailer-icon">
</div>
<div class="background" aria-hidden="true">
</div>
<section class="hero">
<div class="container glass scroll-reveal">
<h1 class="changing-text-parent">Hi, I'm <strong class="changing-text" data-text-variations="" data-current-text="Jules">Jules</strong></h1>
<button data-section-index="1" class="no-style-button scroll-to-section-button interactable" data-interactable-type="scroll" name="scroll page call to action" aria-label="scroll page call to action">
<img src="assets/images/vector/scroll-cta.svg" alt="arrow scroll">
</button>
</div>
</section>
<section class="home">
<div class="home__header glass-header scroll-reveal">
<h2><strong>About</strong> me</h2>
</div>
<div class="home__wrapper">
<article class="glass scroll-reveal" style="transition-delay: 200ms;">
<h2>My <strong>Background</strong></h2>
<p>My name is Jules, I'm 17 and I'm currently in high school. I've been passionate about development since the age of 9. After discovering block programming with Scratch, I learned how to use Arduino, and that was really my gateway into the wonderful world of development. I then set out to learn everything, starting with the creation of a discord bot, which led me to discover Node JS, which I still love today. Then I got into front-end development, learned Python, Java, Kotlin and every time I need to learn a new technology, I do it.<br><br> Apart from development, I play the clarinet, go climbing, enjoy woodworking and electronics. I have a Brevet d'Initiation à l'Aeronautique and am interested in aerospace. I'm also interested in cinema and video production, as well as UI/UX design.</p>
</article>
<article class="glass scroll-reveal" style="transition-delay: 400ms;">
<h2>Now and <strong>Later</strong></h2>
<p>I'm currently working on some extraordinary projects and preparing to enter a preparatory school, with a view to joining the Isae Supaero engineering school.
Indeed, I'd like to be an embedded systems engineer in the aerospace field.</p>
</article>
<article class="glass scroll-reveal tech-i-use" style="transition-delay: 600ms;">
<h2><strong>Tech</strong> I master</h2>
<ul>
<li>
<h3>JavaScript and TypeScript</h3>
<p>
I'm very familiar with Javascript, which I first used with Node.js to create bots for Discord using the discord.js library.
<br>Today, I use Javascript for the front-end and back-end with Node.js and Express.js. So far I've never used a Javascript Framework, but I'm interested in learning and using one of these technologies, although I haven't yet felt the need to do so for my personal projects.
<br>I'm currentrly still learning TypeScript, but I master it's basis.
</p>
</li>
<li>
<h3>Front End development</h3>
<p>
I love creating web pages it's one of my favorite part of development. I've aquired the knowledge for this through the creation of lots of small projects that you will discover.
<br>I've mastered HTML and CSS almost completely, enabling me to create amazing projects like the one you currently look at. I now mostly use SCSS that I really like.
<br>I also master JavaScript as you've read before, and I'm learning TypeScript, that I now use for most projects.
</p>
</li>
<li>
<ul class="others">
<li>
<h3>Python</h3>
</li>
<li>
<h3>Java</h3>
</li>
<li>
<h3>Kotlin</h3>
</li>
<li>
<h3>Lua</h3>
</li>
</ul>
</li>
</ul>
</article>
</div>
</section>
<section class="projects">
<div class="projects__header glass-header scroll-reveal">
<h2>My <strong>Projects</strong></h2>
<div class="projects__sort">
<button class="projects__sort--sort-button no-style-button" name="sort projects by tag" aria-label="sort projects by tag" aria-expanded="false" aria-controls="tag-selector">
<div class="sort-icon">
<span></span>
<span></span>
<span></span>
</div>
</button>
<dialog class="projects__sort--tags-selector-dialog glass" id="tag-selector">
<div class="projects__sort--tag-list-wrapper"></div>
</dialog>
</div>
</div>
<div class="projects__wrapper">
</div>
</section>
<section class="contact">
<div class="contact__header glass-header scroll-reveal" >
<h2><strong>Contact</strong> me</h2>
</div>
<div class="contact__wrapper">
<div class="contact__form-container glass scroll-reveal" style="transition-delay: 200ms;">
<h3>Send a <strong>Message</strong></h3>
<form action="" >
<div class="input-field">
<label for="name">Name</label>
<input type="text" name="name" id="name" autocomplete="name" required placeholder="Name" data-field-invalid-message="Required">
</div>
<div class="input-field">
<label for="email">Email</label>
<input type="email" name="email" id="email" autocomplete="email" required placeholder="Email" data-field-invalid-message="Email is invalid" data-regexp="^[-!#$%&'*+/0-9=?A-Z\\^_a-z{|}~](\.?[-!#$%&'*+/0-9=?A-Z\^_a-z{|}~])*@[a-zA-Z](-?[a-zA-Z0-9])*(\.[a-zA-Z](-?[a-zA-Z0-9])*)+$">
</div>
<div class="input-field">
<label for="message">Message</label>
<textarea name="message" id="message" required placeholder="Message" data-field-invalid-message="Required"></textarea>
</div>
</form>
<button class="contact__submit-button interactable" data-interactable-type="default" aria-label="Send Message">
Send Message
<img src="assets/images/vector/arrow-right.svg" alt="arrow">
</button>
</div>
<div class="contact__socials glass scroll-reveal" style="transition-delay: 400ms;">
<h3>My <strong>Socials</strong></h3>
<ul aria-label="Links to my socials">
<li>
<a aria-label="Send me an email" href="mailto:roules.contact@gmail.com" target="_blank" rel="noopener noreferrer" class="interactable" data-interactable-type="ext">
<div class="icon"><i class="fa-regular fa-envelope"></i></div>Email
</a>
</li>
<li>
<a aria-label="Linkdin account" href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="interactable" data-interactable-type="ext">
<div class="icon"><i class="fa-brands fa-linkedin"></i></div>Linkedin
</a>
</li>
<li>
<a aria-label="Discord Server" href="https://discord.gg" target="_blank" rel="noopener noreferrer" class="interactable" data-interactable-type="ext">
<div class="icon"><i class="fa-brands fa-discord"></i></div>Discord
</a>
</li>
<li>
<a aria-label="Github account" href="https://github.com/DragonJules" target="_blank" rel="noopener noreferrer" class="interactable" data-interactable-type="ext">
<div class="icon"><i class="fa-brands fa-github"></i></div>Github
</a>
</li>
<li>
<a aria-label="Twitter account" href="https://x.com/roules_" target="_blank" rel="noopener noreferrer" class="interactable" data-interactable-type="ext">
<div class="icon"><i class="fa-brands fa-twitter"></i></div>Twitter
</a>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>