Browse Source

Différentes modifications SEO et visuelles

Hugo LEROUX 2 months ago
parent
commit
b9f485bb53
Signed by: Hugo LEROUX <hugo.leroux@alternanet.fr> GPG Key ID: 3EA260A4F0EE1BCC
3 changed files with 54 additions and 32 deletions
  1. 10
    0
      css/hugo.css
  2. BIN
      files/attestation_secnumacademie.pdf
  3. 44
    32
      index.html

+ 10
- 0
css/hugo.css View File

@@ -74,3 +74,13 @@ body > .container {
74 74
     margin-bottom: 5px;
75 75
     margin: 10px;
76 76
 }
77
+
78
+.nav-icon {
79
+  display: block;
80
+  padding: .2rem .2rem;
81
+  color: rgba(255,255,255,.5);
82
+}
83
+
84
+.nav-icon:hover {
85
+  color:rgba(255,255,255,.75);
86
+}

BIN
files/attestation_secnumacademie.pdf View File


+ 44
- 32
index.html View File

@@ -3,11 +3,12 @@
3 3
 <head>
4 4
   <meta charset="utf-8">
5 5
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
-  <meta name="description" content="">
7
-  <meta name="author" content="">
8
-  <link rel="icon" href="../../../../favicon.ico">
6
+  <meta name="description" content="Site internet personnel d'Hugo LEROUX - Étudiant en ingénierie informatique, passionnée par le logiciel libre, la sécurité informatique et le respect de la vie privée sur internet.">
7
+  <meta name="author" content="Hugo LEROUX">
8
+  <link rel="icon" href="pictures/favicon.png">
9
+  <link rel="canonical" href="https://hugoleroux.ovh" />
9 10
 
10
-  <title>Hugo LEROUX - Devops et passionné des logiciels libres</title>
11
+  <title>Hugo LEROUX - Étudiant passionné des logiciels libres et le respect de la vie privée.</title>
11 12
 
12 13
   <!-- Bootstrap css file -->
13 14
   <link href="./css/bootstrap.min.css" rel="stylesheet">
@@ -22,38 +23,51 @@
22 23
 <body>
23 24
   <!-- Begin page content -->
24 25
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
25
-    <a class="navbar-brand" href="#">hugo@website ~ $</a>
26
+    <a class="navbar-brand" href="#"><i class="fa fa-home" aria-hidden="true"></i> hugo@website ~ $</a>
26 27
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
27 28
       <span class="navbar-toggler-icon"></span>
28 29
     </button>
29 30
     <div class="collapse navbar-collapse" id="navbarNav">
30 31
       <ul class="navbar-nav ml-auto">
31 32
         <li class="nav-item">
32
-          <a class="nav-link" href="#">À propos</a>
33
+          <a class="nav-link" href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> À propos</a>
33 34
         </li>
34 35
         <li class="nav-item">
35
-          <a class="nav-link" href="#projects">Projets</a>
36
+          <a class="nav-link" href="#projects"><i class="fa fa-cubes" aria-hidden="true"></i> Projets</a>
36 37
         </li>
37 38
         <li class="nav-item">
38
-          <a class="nav-link" href="#resume">Expériences</a>
39
+          <a class="nav-link" href="#resume"><i class="fa fa-briefcase" aria-hidden="true"></i> Expériences</a>
39 40
         </li>
40 41
         <li class="nav-item">
41
-          <a class="nav-link" href="#testimonies">Attestations</a>
42
+          <a class="nav-link" href="#testimonies"><i class="fa fa-trophy" aria-hidden="true"></i> Attestations</a>
42 43
         </li>
43 44
         <li class="nav-item">
44
-          <a class="nav-link" href="#school">Scolarité</a>
45
+          <a class="nav-link" href="#school"><i class="fa fa-university" aria-hidden="true"></i> Scolarité</a>
45 46
         </li>
46 47
         <li class="nav-item">
47
-          <a class="nav-link" href="#contact">Contact</a>
48
+          <a class="nav-link" href="#contact"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a>
49
+        </li>
50
+        <li class="nav-item">
51
+          <a class="nav-icon ml-md-1" href="&#x78;&#x6d;&#x70;&#x70;&#x3a;&#x67;&#x6f;&#x74;&#x65;&#x78;&#x78;&#x40;&#x61;&#x6c;&#x74;&#x65;&#x72;&#x6e;&#x61;&#x6e;&#x65;&#x74;&#x2e;&#x66;&#x72;" title="Adresse XMPP: &#x67;&#x6f;&#x74;&#x65;&#x78;&#x78;&#x40;&#x61;&#x6c;&#x74;&#x65;&#x72;&#x6e;&#x61;&#x6e;&#x65;&#x74;&#x2e;&#x66;&#x72;"><i class="fa fa-xmpp fa-2x"></i></a>
52
+        </li>
53
+        <li class="nav-item">
54
+          <a class="nav-icon ml-md-1" href="&#x6d;&#x61;&#x69;&#x6c;&#x74;&#x6f;&#x3a;&#x68;&#x75;&#x67;&#x6f;&#x2e;&#x6c;&#x65;&#x72;&#x6f;&#x75;&#x78;&#x40;&#x61;&#x6c;&#x74;&#x65;&#x72;&#x6e;&#x61;&#x6e;&#x65;&#x74;&#x2e;&#x66;&#x72;"><i class="fa fa-envelope fa-2x"></i></a>
55
+        </li>
56
+        <li class="nav-item">
57
+          <a class="nav-icon ml-md-1" href="hleroux.pub.txt" title="Clé publique GPG"><i class="fa fa-gnupg fa-2x"></i></a>
58
+        </li>
59
+        <li class="nav-item">
60
+          <a class="nav-icon ml-md-1" href="https://git.alternanet.fr/gotexx" title="Profil Gitea"><i class="fa fa-git fa-2x"></i></a>
48 61
         </li>
49 62
       </ul>
63
+      <a href="#" class="btn btn-outline-light ml-md-3 disabled" role="button" aria-pressed="true">Blog</a>
50 64
     </div>
51 65
   </nav>
52 66
   <div class="container">
53 67
     <main role="main" class="section" id="about">
54 68
       <div class="row me">
55 69
         <div class="col-lg-2">
56
-          <img src="pictures/portrait_pro.jpg" alt="..." class="rounded-circle img-fluid">
70
+          <img src="pictures/portrait.png" alt="Avatar fictif d'Hugo LEROUX" class="rounded-circle img-fluid mx-auto d-block">
57 71
         </div>
58 72
         <div class="col-lg-10">
59 73
           <h1><span itemprop="givenName">Hugo</span> <span itemprop="familyName">LEROUX</span></h1>
@@ -82,21 +96,23 @@
82 96
       <div class="row">
83 97
         <div class="col-md-6 col-sm-12">
84 98
           <div class="card space-bottom-card-10">
85
-            <img class="card-img" src="pictures/projects-logo/logo-alternanet.png" alt="Card image">
99
+            <img class="card-img" src="pictures/projects-logo/logo-alternanet.png" alt="Logo du projet Alternanet.fr">
86 100
             <div class="card-body">
87 101
               <h5 class="card-title">Alternanet.fr</h5>
88
-              <p class="card-text">Des services libre et gratuit pour tous.</p>
102
+              <p class="card-text">Alternanet propose un ensemble de services libres et gratuits respectueux de votre vie privée.
103
+              Alternanet se positionne en alternative vis à vis des GAFAM et leurs appétit constament grandissant de données personnelles.</p>
89 104
               <a href="https://alternanet.fr" class="btn btn-primary"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Visiter</a>
90 105
             </div>
91 106
           </div>
92 107
         </div>
93 108
         <div class="col-md-6 col-sm-12">
94 109
           <div class="card">
95
-            <img class="card-img" src="pictures/projects-logo/logo-billoky.png" alt="Card image">
110
+            <img class="card-img" src="pictures/projects-logo/logo-billoky.png" alt="Logo du projet Billoky">
96 111
             <div class="card-body">
97 112
               <h5 class="card-title">Billoky</h5>
98
-              <p class="card-text">Un inventaire sécurisé pour vos tout vos biens.</p>
99
-              <a href="#" class="btn btn-primary disabled"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Visiter</a>
113
+              <p class="card-text">Billoky vous permet de créer un inventaire sécurisé pour tout vos biens et ainsi accélérer vos démarches de remboursement lorsqu'un sinistre intervient dans votre vie.
114
+              Billoky vous permet également de stocker vos documents à la manière d'un coffre-fort numérique.</p>
115
+              <a href="#" class="btn btn-primary disabled"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> Visiter</a> <strong>Bientôt disponible !</strong>
100 116
             </div>
101 117
           </div>
102 118
         </div>
@@ -111,7 +127,7 @@
111 127
               <strong>Depuis septembre 2017 <span class="badge badge-success"> Actuel</span></strong>
112 128
             </div>
113 129
             <div class="card-body">
114
-              <div class="card-image"><img class="card-img" src="pictures/experiences-logo/thales.png" alt="Card image"></div>
130
+              <div class="card-image"><img class="card-img" src="pictures/experiences-logo/thales.png" alt="Logo de l'entreprise THALES"></div>
115 131
               <h5 class="card-title">Administrateur Support Atelier</h5>
116 132
               <h6 class="card-subtitle mb-2 text-muted">Thales Global Services - Bordeaux, FRANCE</h6>
117 133
               <p class="card-text">J'ai intégré l'équipe DSI sur le campus de Bordeaux Mérignac en septembre 2017 pour un contrat professionnel
@@ -153,18 +169,18 @@
153 169
               <img src="pictures/testimonials-logo/cnil.png" class="card-img-top" alt="Logo de la Commission nationale française de l'informatique et des libertés">
154 170
               <div class="card-body">
155 171
                 <h5 class="card-title">L'atelier RGPD de la CNIL</h5>
156
-                <p class="card-text"><span class="badge badge-danger">PDF</span> <span class="badge badge-dark"><i class="fa fa-trophy" aria-hidden="true"></i> Obtenu le 23 mai 2019</span></p>
172
+                <p class="card-text"><!--<span class="badge badge-danger">PDF</span> --><span class="badge badge-dark"><i class="fa fa-hourglass" aria-hidden="true"></i> En cours...</span></p>
157 173
               </div>
158 174
             </a>
159 175
           </div>
160 176
         </div>
161 177
         <div class="col-md-6 col-sm-12">
162 178
           <div class="card card-reward">
163
-            <a href="#">
179
+            <a href="files/attestation_secnumacademie.pdf">
164 180
               <img src="pictures/testimonials-logo/anssi.png" class="card-img-top" alt="Logo de l'Agence nationale française de la sécurité des systèmes d'information">
165 181
               <div class="card-body">
166 182
                 <h5 class="card-title">SecuAcadémie de l'ANSSI</h5>
167
-                <p class="card-text"><span class="badge badge-danger">PDF</span> <span class="badge badge-dark"><i class="fa fa-trophy" aria-hidden="true"></i> Obtenu le 23 mai 2019</span></p>
183
+                <p class="card-text"><span class="badge badge-danger">PDF</span> <span class="badge badge-dark"><i class="fa fa-trophy" aria-hidden="true"></i> Obtenu le 16 mars 2019</span></p>
168 184
               </div>
169 185
             </a>
170 186
           </div>
@@ -221,35 +237,31 @@
221 237
               <h5>Diplômes obtenus</h5>
222 238
               <div class="row">
223 239
                 <div class="col-md-6 col-sm-12">
224
-                  <div class="card card-reward space-bottom-card-10">
225
-                    <a href="">
240
+                  <div class="card space-bottom-card-10">
226 241
                       <div class="card-body">
227 242
                         <div class="row">
228 243
                           <div class="col-12 col-md-2 reward">
229 244
                             <i class="fa fa-3x fa-graduation-cap" aria-hidden="true"></i>
230 245
                           </div>
231
-                          <div class="col-md-10">
232
-                            <p>Titre RNCP niveau II - "Concepteur développeur informatique" <span class="badge badge-danger">PDF</span></p>
246
+                          <div class="col-md-10 align-self-center">
247
+                            Titre RNCP niveau II - "Concepteur développeur informatique"
233 248
                           </div>
234 249
                         </div>
235 250
                       </div>
236
-                    </a>
237 251
                   </div>
238 252
                 </div>
239 253
                 <div class="col-md-6 col-sm-12">
240
-                  <div class="card card-reward">
241
-                    <a href="">
254
+                  <div class="card">
242 255
                       <div class="card-body">
243 256
                         <div class="row">
244 257
                           <div class="col-12 col-md-2 reward">
245 258
                             <i class="fa fa-3x fa-graduation-cap" aria-hidden="true"></i>
246 259
                           </div>
247
-                          <div class="col-md-10">
248
-                            <p>Titre école EPSI – "Concepteur intégrateur devops" <span class="badge badge-danger">PDF</span></p>
260
+                          <div class="col-md-10 align-self-center">
261
+                            Titre école EPSI – "Concepteur intégrateur devops"
249 262
                           </div>
250 263
                         </div>
251 264
                       </div>
252
-                    </a>
253 265
                   </div>
254 266
                 </div>
255 267
               </div>
@@ -282,7 +294,7 @@
282 294
   <footer class="footer">
283 295
     <div class="container">
284 296
       <span class="text-muted icon-footer">
285
-        <a href="xmpp:gotexx@alternanet.fr" title="Adresse XMPP: gotexx@alternanet.fr"><i class="fa fa-xmpp fa-2x"></i></a>
297
+        <a href="&#x78;&#x6d;&#x70;&#x70;&#x3a;&#x67;&#x6f;&#x74;&#x65;&#x78;&#x78;&#x40;&#x61;&#x6c;&#x74;&#x65;&#x72;&#x6e;&#x61;&#x6e;&#x65;&#x74;&#x2e;&#x66;&#x72;" title="Adresse XMPP: &#x67;&#x6f;&#x74;&#x65;&#x78;&#x78;&#x40;&#x61;&#x6c;&#x74;&#x65;&#x72;&#x6e;&#x61;&#x6e;&#x65;&#x74;&#x2e;&#x66;&#x72;"><i class="fa fa-xmpp fa-2x"></i></a>
286 298
         <a href="&#x6d;&#x61;&#x69;&#x6c;&#x74;&#x6f;&#x3a;&#x68;&#x75;&#x67;&#x6f;&#x2e;&#x6c;&#x65;&#x72;&#x6f;&#x75;&#x78;&#x40;&#x61;&#x6c;&#x74;&#x65;&#x72;&#x6e;&#x61;&#x6e;&#x65;&#x74;&#x2e;&#x66;&#x72;"><i class="fa fa-envelope fa-2x"></i></a>
287 299
         <a href="hleroux.pub.txt" title="Clé publique GPG"><i class="fa fa-gnupg fa-2x"></i></a>
288 300
         <a href="https://git.alternanet.fr/gotexx" title="Profil Gitea"><i class="fa fa-git fa-2x"></i></a>

Loading…
Cancel
Save