-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (176 loc) · 8.67 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
194
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Développeuse Frontend | Marion GAJIC</title>
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="img/favicon-color.png" sizes="180x180">
<link rel="icon" href="img/favicon-color.png" sizes="32x32" type="image/png">
<link rel="icon" href="img/favicon-color.png" sizes="16x16" type="image/png">
</head>
<body>
<!--Menu déroulant-->
<nav>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">A propos de moi</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="https://blog.mariongajic.fr/">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!--Header-->
<header class="container" id="header" data-spy>
<div class="construction">
<p>En construction</p>
</div>
<div class="avatar">
<img src="img/avatar.jpg" alt="Avatar">
</div>
<div class="title" id="about">
<h2>Marion GAJIC</h2>
<h1>Développeuse junior Frontend</h1>
</div>
<div class="about">
<h2>A propos de moi</h2>
<div class="divider"><i class="fas fa-star fa-2x"></i></div>
<div class="aboutP">
<div class="first">
<p>Passionnée par l'informatique, les jeux-vidéos et le dessin depuis mon plus jeune âge,
j'ai d'abord effectué un bac pro communication visuelle avant de me tourner vers le
développement front qui, aujourd'hui, est ce que j'aime le plus. Mon côté créatif met un point
d'honneur à créer des sites performants et agréables. Je suis aussi très intéressée par l'UI
et l'UX design.
</p>
</div>
<div class="second">
<p>Je suis actuellement en formation avec OpenClassrooms pour obtenir mon diplôme de développeuse
frontend. C'est une formation comprenant 9 projets professionnels et j'en ai actuellement validé 3.
Motivée, consciencieuse, rigoureuse et créative, je souhaite mettre à profit mes multiples
compétences et ma flexibilité pour vous apporter un site ou une application web qualitative.
</p>
</div>
</div>
<div class="bouton-cv">
<a href="cv.html" target="blank"><i class="fas fa-search"></i> Voir mon cv</a>
</div>
</div>
</header>
<!--Section Portfolio-->
<main class="container2" id="portfolio" data-spy>
<h2>Portfolio</h2>
<div class="divider"><i class="fas fa-star fa-2x"></i></div>
<section class="flex-container">
<!--<div class="card">
<div class="projet">
<img src="img/cabin.png" alt="Chalet">
<h3>Chalets et Caviar</h3>
<p>Un site fait sous WordPress. Il devait convenir pour de la location et
de la vente de chalets en mode vitrine. Il fallait également créer une
documentation pour la cliente.
</p>
<div class="bouton-projet">
<a href="http://chaletscaviar.eu/" target="blank">Voir le site</a>
</div>
</div>
</div>-->
<div class="card">
<div class="projet">
<img src="img/circus.png" alt="Circus">
<h3>Festival des films de plein air</h3>
<p>Il était demandé de créer la maquette et le cahier des charges d'un site
de festival de films en plein air pour une association.
Fait sur Bootstrap.</p>
<div class="bouton-projet">
<a href="https://festival-des-films.mariongajic.fr/" target="blank">Voir le site</a>
</div>
</div>
</div>
<div class="card">
<div class="projet">
<img src="img/safe.png" alt="Safe">
<h3>Solution technique ExpressFood</h3>
<p>Schémas UML, contexte, classe, modèle de données et séquence
et base de données pour une application de restauration en ligne ExpressFood.
</p>
<div class="bouton-projet">
<a href="https://drive.google.com/file/d/1_RppGsikgAVihQcF4aIv60P3w_HJghNZ/view?usp=sharing" target="blank">Voir le document</a>
</div>
</div>
</div>
<div class="card">
<div class="projet">
<img src="img/submarine.png" alt="Submarine">
<h3>Générateur de citations</h3>
<p>Générateur de citations aléatoires en anglais et en français avec une
séléction de phrases de 1 à 5. Les citations sont faites avec 3 bouts de phrases.
Utilisation d'HTML, CSS, JS et JSON.
</p>
<div class="bouton-projet">
<a href="https://citations.mariongajic.fr/" target="blank">Voir le site</a>
</div>
</div>
</div>
<div class="card">
<div class="projet">
<img src="img/game.png" alt="Gamepad">
<h3>Jeu de plateau en tour par tour</h3>
<p>A venir. Génération d'une carte, les joueurs peuvent se déplacer et attaquer, avec des armes
à ramasser sur la carte et un système de points de vie.
Utilisation du HTML, CSS et JS.</p>
<div class="bouton-projet">
<a href="#" target="blank">A venir</a>
</div>
</div>
</div>
<!--<div class="card">
<div class="projet">
<img src="img/banana.png" alt="Cake">
<h3>Banana Design</h3>
<p>Site WordPress fictif d'une agence de design bordelaise. Le site a été fait avec
Elementor et comporte un blog et des pages portfolios, ainsi que les mentions légales.
Il y a également une page de contact.
</p>
<div class="bouton-projet">
<a href="https://agencebanana.mariongajic.fr/" target="blank">voir le site</a>
</div>
</div>
</div>-->
</section>
</main>
<footer class="container3" id="contact" data-spy>
<h2>Me trouver sur</h2>
<a class="social" href="https://www.linkedin.com/in/marion-gajic" target="blank"><i class="fab fa-fw fa-linkedin-in"></i></a>
<a class="social" href="https://github.com/Shunkashuu" target="blank"><i class="fab fa-fw fa-github"></i></a>
<a class="social" href="mailto:marion.gajic@outlook.fr" target="blank"><i class="far fa-fw fa-envelope"></i></a>
<a class="social" href="https://twitter.com/shunkashuu1" target="blank"><i class="fab fa-fw fa-twitter"></i></a>
<a class="social" href="https://instagram.com/drawingshunn/" target="blank"><i class="fab fa-fw fa-instagram"></i></a>
<p>Copyright © Marion GAJIC 2020</p>
</footer>
<!--Script-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--Menu déroulant-->
<script type="text/javascript">
$(document).ready(function() {
$('.menu').click(function() {
$('ul').toggleClass('active');
})
})
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-172686456-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
</body>
</html>