add the a-propos-de-moi section and some photos

1 day ago · 206b292aca
parent d747ca32cb
commit 206b292aca
6 changed files with 96 additions and 171 deletions
--- a/images/Gazet.png
+++ b/images/Gazet.png
--- a/images/MCTG.png
+++ b/images/MCTG.png
--- a/images/SAEandroid.png
+++ b/images/SAEandroid.png
--- a/images/forge.jpg
+++ b/images/forge.jpg
--- a/images/pinou_logo.png
+++ b/images/pinou_logo.png
--- a/index.html
+++ b/index.html
@ -1,187 +1,112 @@
 <!doctype html>
-<html class="no-js" lang="fr">
+<html lang="fr">

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Roxane Rossetto Portfolio </title>
-  <link rel="stylesheet" href="/containers/roxanerossetto-portfolio3a/css/style.css">
-  <meta name="description" content="">
+  <title>Roxane Rossetto Portfolio</title>
+  <meta name="description" content="Portfolio de Roxane Rossetto, développeuse en alternance spécialisée en intelligence artificielle.">
  <link rel="icon" href="/containers/roxanerossetto-portfolio3a/favicon.ico" sizes="any">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="/containers/roxanerossetto-portfolio3a/css/style.css" rel="stylesheet">
 </head>

-<body>
-<h1>Portfolio</h1>
-<div class="container">
-  <section class="sidebar">
-    <figure class="backimgid">
-      <img id="idpict" src="/containers/roxanerossetto-portfolio3a/images/photo_id.JPG" alt="Photo de profil">
-    </figure>
-    <h3>Roxane Rossetto</h3>
-    <p id="titlejob">Alternante développeuse <br><br> BUT 2e année <br> Informatique</p>
-    <ul>
-      <li>
-        <img  class="imgIcon" src="/containers/roxanerossetto-portfolio3a/images/logo.png" alt="logo du site codefirst">
-        <a href="https://codefirst.iut.uca.fr/git/roxane.rossetto" >CodeFirst</a>
+<body class="bg-light">
+  <header class="text-center py-3 mb-4 bg-white border-bottom">
+    <h1 class="h3">Portfolio de Roxane Rossetto</h1>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <!-- Sidebar -->
+      <aside class="col-md-4 mb-4 text-center bg-white p-4 rounded shadow" aria-label="Informations personnelles">
+        <img src="/containers/roxanerossetto-portfolio3a/images/pinou_logo.png" class="img-fluid rounded-circle mb-3" alt="Portrait de Roxane Rossetto">
+        <h2 class="h5">Roxane Rossetto</h2>
+        <p class="text-muted">Développeuse IA en alternance<br>BUT Informatique 3e année</p>
+        <nav aria-label="Liens professionnels">
+          <ul class="list-unstyled">
+            <li class="mb-2">
+              <a href="https://codefirst.iut.uca.fr/git/roxane.rossetto" class="btn btn-outline-primary w-100" target="_blank" rel="noopener">
+                <img src="/containers/roxanerossetto-portfolio3a/images/logo.png" alt="CodeFirst" class="me-2" width="20">CodeFirst
+              </a>
            </li>
-      <li>
-        <img class="imgIcon" src="/containers/roxanerossetto-portfolio3a/images/logo-linkedin-rond.png" alt="logo du site LinkedIn">
-        <a href="https://fr.linkedin.com/in/roxane-rossetto-3b9158211">LinkedIn</a>
+            <li class="mb-2">
+              <a href="https://fr.linkedin.com/in/roxane-rossetto-3b9158211" class="btn btn-outline-primary w-100" target="_blank" rel="noopener">
+                <img src="/containers/roxanerossetto-portfolio3a/images/logo-linkedin-rond.png" alt="LinkedIn" class="me-2" width="20">LinkedIn
+              </a>
            </li>
            <li>
-        <img class="imgIcon" src="/containers/roxanerossetto-portfolio3a/images/iconMail.png" alt="logo ">
-        <a href="mailto:roxane.rossetto@gmail.com">Email</a>
+              <a href="mailto:roxane.rossetto@gmail.com" class="btn btn-outline-secondary w-100">
+                <img src="/containers/roxanerossetto-portfolio3a/images/iconMail.png" alt="Email" class="me-2" width="20">Email
+              </a>
            </li>
          </ul>
-  </section>
-  <div id="bigC">
-    <nav >
-      <ul>
-        <li><a href="#a-propos" accesskey="a"><span class="daccesskey">À</span> Propos</a></li>
-        <li><a href="#mesProjets" accesskey="p"><span class="daccesskey">P</span>rojets</a></li>
-        <li><a href="#cv" accesskey="c"><span class="daccesskey">C</span>V</a></li>
-      </ul>
        </nav>
-    <div class="main-content">
-      <section class="sec" id="a-propos">
-        <h2>À Propos de Moi</h2>
-        <div class="separator"></div>
-        <p>Je suis une étudiante en reconversion professionnelle, ayant décidé de passer de la maréchalerie au domaine
-          de l'informatique. Cette transition découle de ma passion pour la technologie et mon désir de relever
-          de nouveaux défis. Mon parcours atypique m'a inculqué des valeurs telles que la persévérance et la détermination,
-          des qualités essentielles dans ce cheminement de reconversion. <br><br>
-          Je suis motivée par les défis intellectuels et technologiques que ce domaine offre, et je suis toujours à la
-          recherche d'opportunités pour élargir mes connaissances et mes compétences. Dans le cadre de mes études, je m'investis
-          dans des projets dans lesquels je m'exerce dans divers types de developpement.
-          Je suis actuellement en BUT 2e année en alternance dans l'entreprise Akkodis où je m'épanouie pleinement.
-        </p>
-        <div class="separator"></div>
-        <h2> Ce que je fais</h2>
-        <div id="watamIdoing">
-          <div class="compcase" id="comp1">
-            <h4>Développement d'applications</h4>
-            <p>Application c#, maui, mais aussi php et android-compose</p>
-          </div>
-          <div class="compcase" id="comp2">
-            <h4>Optimisation d'applications</h4>
-            <p>Exploration algorithmique, Optimisation d'algorithme</p>
-          </div>
-          <div class="compcase" id="comp3">
-            <h4>Administrer des systèmes informatiques</h4>
-            <p>Projets de réseaux et de Docker. </p>
-          </div>
-          <div class="compcase" id="comp4">
-            <h4>Collaborer au sein d'une équipe informatique</h4>
-            <p> Nombreux projets en équipes de 2 a 5 développeur.</p>
-          </div>
-        </div>
-      </section>
-      <section id="mesProjets" class="sec">
-        <h2>Mes projets</h2>
-        <div>
-          <div class="compcase" id="comp5">
-            <h4>SAE de première année : </h4>
-            <p> Cette SAE m'a permis d'apprendre à développer une application en C#, Maui. J'ai pu, à travers elle,
-              développer une application de type master-details. J'ai vraiment pu profiter de ce projet pour acquérir
-              la compétence de développer des applications dans ce langage.</p>
-            <img class="img-competences" src="/containers/roxanerossetto-portfolio3a/images/MCTG.png" alt="Image représentant la page d'accueil du master-details. Il y a un menu sur la droite, avec plusieurs bouton dont la connexion, un champs de recherche, et 3 filtres, entrées, plats, desserts. Sur le reste de l'image se trouve les images miniatures et le titre de chaque recette proposée.">
-          </div>
-          <div class="compcase" id="comp666">
-            <h4>SAE de deuxième année : </h4>
-            <p>Première partie
-              <br>Durant cette SAE, j'ai pu développer deux applications en équipe. Pour la première, il s'agit d'une
-              application web en PHP pour la récupération de flux RSS (ce sont des flux qui permettent de recevoir tous
-              les nouveaux articles suivant les sites favoris que l'on a ajoutés sur l'application). J'ai vraiment pu
-              m'améliorer dans ce langage à travers ce projet et acquérir les compétences nécessaires au développement
-              d'une application dans ce langage.
-              <br><br>
-              Deuxième partie
-              <br>
-              Dans la seconde partie de l'année, j'ai pu développer une application Android en équipe. Cela m'a
-              grandement aidé à progresser dans ce langage et à approfondir les concepts de développement d'application
-              au sens plus large du terme. C'est-à-dire que l'on y trouve des problématiques redondantes telles que la
-              sauvegarde des données en base de données, la mise à jour de l'application lors de sa manipulation et la
-              sauvegarde des données lors de la mise en arrière-plan de l'application. Ce sont des parties essentielles
-              d'une application pour son bon fonctionnement.
-            </p>
-            <img id="imgGazet" src="/containers/roxanerossetto-portfolio3a/images/Gazet.png" alt="Image représentant l'interface d'ajout d'article que j'ai pu faire durant cette SAE. Elle est composée d'un titre ADD ARTICLE, et de plusieurs champs de saisie. Il y a également un carrousel horizontal pour pouvoir choisir les collections dans lesquelles on souhaite ajouter l'article.">
-            <p>De plus, lors de cette SAE, j'ai eu au début du mal à trouver ma place au sein de cette équipe. Cependant
-              , ce fut une excellente expérience qui m'a permis de vraiment développer ma compétence de collaboration au
-              sein d'une équipe de développeurs. De fait, j'ai dû prendre du recul et m'appuyer sur certaines techniques
-              de management telles que la négociation gagnant-gagnant ou la communication ouverte pour pouvoir améliorer
-              mes échanges. Je suis satisfaite du résultat puisque la deuxième partie de notre SAE s'est bien mieux déroulée.
-              C'est pourquoi je peux dire que j'ai encore bien fait évoluer ma compétence à collaborer au sein d'une équipe
-              informatique.
-            </p>
-          </div>
-          <div class="compcase" id="comp7">
-            <h4>SAE d'optimisation algorithmique : </h4>
-            <p>Cette SAE fait partie de celles que j'ai le plus appréciées. En effet, durant celle-ci, j'ai pu librement
-              faire toute une partie avec la confiance de mon binôme. L'objectif de cette SAE était de choisir la structure
-              la plus adaptée pour manipuler un graphe représentant des routes. Je suis contente car j'ai très bien réussi
-              à la faire et surtout j'ai bien saisi l'importance de chacune des structures qui nous étaient présentées.
-              C'est aussi grâce à notre équipe et notre organisation que j'ai pu travailler aussi bien. En effet, au départ
-              nous avions décidé d'une certaine organisation, mais comme nous avons travaillé régulièrement en communiquant
-              souvent, j'ai pu lui proposer une autre solution pour une partie de la SAE. C'est pourquoi je pense avoir
-              acquis les compétences de conduire un projet avec souplesse, ainsi que d'optimiser des algorithmes.
-              C'est une image correspondant à un graphe représentant un réseau routier. Chaque sommet correspond à une place,
-              et chaque arête à une rue que l'on peut prendre dans un sens ou un autre:
-            </p>
-            <img id="imgGraphe" src="/containers/roxanerossetto-portfolio3a/images/graphes.png" alt="Photo du graphe orientés a 8 sommets">
+      </aside>
+
+      <!-- Main content with tabs -->
+      <section class="col-md-8">
+        <ul class="nav nav-tabs mb-4" id="portfolioTabs" role="tablist">
+          <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="apropos-tab" data-bs-toggle="tab" data-bs-target="#a-propos" type="button" role="tab" aria-controls="a-propos" aria-selected="true">À propos</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="experience-tab" data-bs-toggle="tab" data-bs-target="#experience" type="button" role="tab" aria-controls="experience" aria-selected="false">Expérience</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="formation-tab" data-bs-toggle="tab" data-bs-target="#formation" type="button" role="tab" aria-controls="formation" aria-selected="false">Formation</button>
+          </li>
+          <li class="nav-item" role="presentation">
+            <button class="nav-link" id="cv-tab" data-bs-toggle="tab" data-bs-target="#cv" type="button" role="tab" aria-controls="cv" aria-selected="false">CV</button>
+          </li>
+        </ul>
+
+        <div class="tab-content" id="portfolioTabsContent">
+          <div class="tab-pane fade show active" id="a-propos" role="tabpanel" aria-labelledby="apropos-tab">
+            <h2>À propos de moi</h2>
+            <img src="/containers/roxanerossetto-portfolio3a/images/forge.jpg" alt="Photo de Roxane devant le feu d'une de plus anciennes forges de France, en train de faire chauffer un lopin de fer. ">
+            <p>Avant de me lancer dans le domaine de l'informatique, j’ai exercé un métier aussi exigeant que rare : maréchale-ferrante. Un travail de terrain, physique, manuel, qui m’a appris la rigueur, la persévérance, et le goût du travail bien fait. Mais au fil du temps, une autre curiosité s’est imposée à moi : celle de la technologie, du numérique, et un peu plus tard celle pour l'intelligence artificielle.
+Ce désir de reconversion n’est pas né d’un hasard, mais d’un vrai besoin de challenge intellectuel, et d’un attrait profond pour les innovations qui transforment notre monde.</p>
+            <img src="" alt="">
+            <p> J’ai alors fait le choix d’entamer une formation en informatique, en repartant de zéro, emmenant avec moi toute la détermination et la perseverance qu'il faut pour mener à bien ce projet.
+Ces trois années de formation, ponctuées par deux années d’alternance, ont confirmé que j’avais trouvé ma voie. J’ai pu combiner mon sens pratique avec une approche technique et humaine des projets, en particulier dans le domaine de l’IA. Mon objectif aujourd’hui : continuer à évoluer dans ce secteur passionnant, en contribuant à des projets concrets et utiles.
+À travers ce portfolio, je souhaite partager ce parcours atypique mais cohérent, illustré par des expériences concrètes, des projets que j’ai menés, et des compétences que j’ai consolidées. Je crois profondément que ce sont les croisements d’univers – artisanat et technologie, rigueur et curiosité – qui font la richesse de mon profil. Et c’est ce que je souhaite continuer à cultiver.</p></div>
+
+          <div class="tab-pane fade" id="experience" role="tabpanel" aria-labelledby="experience-tab">
+            <h2>Expérience professionnelle</h2>
+            <p>Avant de me lancer dans le domaine de l'informatique, j’ai exercé un métier aussi exigeant que rare : maréchale-ferrante. Un travail de terrain, physique, manuel, qui m’a appris la rigueur, la persévérance, et le goût du travail bien fait. Mais au fil du temps, une autre curiosité s’est imposée à moi : celle de la technologie, du numérique, et un peu plus tard celle pour l'intelligence artificielle.
+Ce désir de reconversion n’est pas né d’un hasard, mais d’un vrai besoin de challenge intellectuel, et d’un attrait profond pour les innovations qui transforment notre monde. J’ai alors fait le choix d’entamer une formation en informatique, en repartant de zéro, emmenant avec moi toute la détermination et la perseverance qu'il faut pour mener à bien ce projet.
+Ces trois années de formation, ponctuées par deux années d’alternance, ont confirmé que j’avais trouvé ma voie. J’ai pu combiner mon sens pratique avec une approche technique et humaine des projets, en particulier dans le domaine de l’IA. Mon objectif aujourd’hui : continuer à évoluer dans ce secteur passionnant, en contribuant à des projets concrets et utiles.
+À travers ce portfolio, je souhaite partager ce parcours atypique mais cohérent, illustré par des expériences concrètes, des projets que j’ai menés, et des compétences que j’ai consolidées. Je crois profondément que ce sont les croisements d’univers – artisanat et technologie, rigueur et curiosité – qui font la richesse de mon profil. Et c’est ce que je souhaite continuer à cultiver.</p>
          </div>
+
+          <div class="tab-pane fade" id="formation" role="tabpanel" aria-labelledby="formation-tab">
+            <h2>Formation</h2>
+            <p>Avant de me lancer dans le domaine de l'informatique, j’ai exercé un métier aussi exigeant que rare : maréchale-ferrante. Un travail de terrain, physique, manuel, qui m’a appris la rigueur, la persévérance, et le goût du travail bien fait. Mais au fil du temps, une autre curiosité s’est imposée à moi : celle de la technologie, du numérique, et un peu plus tard celle pour l'intelligence artificielle.
+Ce désir de reconversion n’est pas né d’un hasard, mais d’un vrai besoin de challenge intellectuel, et d’un attrait profond pour les innovations qui transforment notre monde. J’ai alors fait le choix d’entamer une formation en informatique, en repartant de zéro, emmenant avec moi toute la détermination et la perseverance qu'il faut pour mener à bien ce projet.
+Ces trois années de formation, ponctuées par deux années d’alternance, ont confirmé que j’avais trouvé ma voie. J’ai pu combiner mon sens pratique avec une approche technique et humaine des projets, en particulier dans le domaine de l’IA. Mon objectif aujourd’hui : continuer à évoluer dans ce secteur passionnant, en contribuant à des projets concrets et utiles.
+À travers ce portfolio, je souhaite partager ce parcours atypique mais cohérent, illustré par des expériences concrètes, des projets que j’ai menés, et des compétences que j’ai consolidées. Je crois profondément que ce sont les croisements d’univers – artisanat et technologie, rigueur et curiosité – qui font la richesse de mon profil. Et c’est ce que je souhaite continuer à cultiver.</p>
           </div>
-        <div class="compcase" id="comp8">
-          <h4>Alternance Akkodis </h4>
-          <p>Au sein de mon entreprise,j'évolue dans une équipe de 2 personnes. Il y a mon chef, Mehdi Mounsif et moi.
-            Ma misson principale est d'appréhender les divers concepts liés à l'intelligence artificielle, plus précisément
-            ceux liés au langage llm (large language model). Je dois développer des agents capables de produire des solutions
-            pour les clients d'Akkodis. Nous nous appuyons sur l'utilisation de GP4 pour pourvoir produire ces agents et
-            les modeler selon le besoin des clients.
-          </p>
-          <img id="imgllm" src="/containers/roxanerossetto-portfolio3a/images/llm.png" alt="Photo du graphe orientés a 8 sommets">
+
+          <div class="tab-pane fade" id="cv" role="tabpanel" aria-labelledby="cv-tab">
+            <h2>Mon CV</h2>
+            <img src="/containers/roxanerossetto-portfolio3a/images/cv_rox.jpg" alt="CV de Roxane Rossetto" class="img-fluid rounded shadow mb-3">
+            <p>Avant de me lancer dans le domaine de l'informatique, j’ai exercé un métier aussi exigeant que rare : maréchale-ferrante. Un travail de terrain, physique, manuel, qui m’a appris la rigueur, la persévérance, et le goût du travail bien fait. Mais au fil du temps, une autre curiosité s’est imposée à moi : celle de la technologie, du numérique, et un peu plus tard celle pour l'intelligence artificielle.
+Ce désir de reconversion n’est pas né d’un hasard, mais d’un vrai besoin de challenge intellectuel, et d’un attrait profond pour les innovations qui transforment notre monde. J’ai alors fait le choix d’entamer une formation en informatique, en repartant de zéro, emmenant avec moi toute la détermination et la perseverance qu'il faut pour mener à bien ce projet.
+Ces trois années de formation, ponctuées par deux années d’alternance, ont confirmé que j’avais trouvé ma voie. J’ai pu combiner mon sens pratique avec une approche technique et humaine des projets, en particulier dans le domaine de l’IA. Mon objectif aujourd’hui : continuer à évoluer dans ce secteur passionnant, en contribuant à des projets concrets et utiles.
+À travers ce portfolio, je souhaite partager ce parcours atypique mais cohérent, illustré par des expériences concrètes, des projets que j’ai menés, et des compétences que j’ai consolidées. Je crois profondément que ce sont les croisements d’univers – artisanat et technologie, rigueur et curiosité – qui font la richesse de mon profil. Et c’est ce que je souhaite continuer à cultiver.</p>
          </div>
        </div>
      </section>
-      <section id="cv" class="sec">
-        <h2>Mon CV</h2>
-        <img id="imgcv" src="/containers/roxanerossetto-portfolio3a/images/cv_rox.jpg"
-             alt="C'est une image du CV de Roxane Rossetto Expérience professionnelle ALTERNANTE EN BUT INFORMATIQUE AKKODIS : ALTERNANCE 2 ANS
-Recherche en IA, élaboration d’une IA commercialisable.
-CONDUITE DE MULTIPLES PROJETS SUR 3ANS A L’IUT
-Apprentissage de nombreux langages de programmation tel que   HTML/CSS -> Développement d’un site web
-   C++ et C# -> Développement d’une application   C -> Structures et optimisation d’application
-  SQL -> Gestion d’une base de données
-MARÉCHALE- FERRANTE 2016 à 2022
-GÉRANTE DE L'ENTREPRISE RR MARÉCHALERIE
-Développement, suivi et gestion d’une clientèle - Utilisation d’un logiciel de gestion – Mise en place des relations avec
-les partenaires professionnels (expert-comptable, banque, assurance) – Communication et Marketing d’entreprise – Gestion
-des stocks, d’un planning et de tournées – Création d’un protocole de sécurité – Gestion de situations à risque – Interventions
- d’urgence – Accueil et gestion de stagiaires
- APPRENTISSAGE MARÉCHALERIE 2013 - 2016
-APPRENTISSAGE TYPE COMPAGNONNAGE
-8 maîtres d’apprentissage dans toute la France – Travail d’équipe/management de stagiaires
-JOBS ETUDIANT
-Hôtesse de caisse - Agent de mise en rayon - Serveuse en restauration - Secrétaire de direction – Inventoriste usine de décolletage – Serveuse en salon – Enquêtes porte à porte
-2022 / 25 BUT INFORMATIQUE IUT CLERMONT- FD
-Formation sur 3 ans, en cours.
-   Partir des exigences et aller jusqu’à une application complète
-   Sélectionner les algorithmes adéquats pour répondre à un problème donné
-  Optimiser une base de données, interagir avec une application et mettre en oeuvre la sécurité
-   Situer son rôle et ses missions au sein d’une équipe informatique
-2016 STAGE DE PRÉPARATION A L’ INSTALLATION
-   CHAMBRE DES MÉTIERS ET DE L’ARTISANAT
-Droit du travail – Fiscalité – Comptabilité – Relation client – Gestion d’entreprise
-2016 CAPA MARECHALERIE - CFA GOURDAN POLIGNAN
-Travail de l’acier et de l’aluminium – Ferrage/Parage/Orthopédie – Gestion d’entreprise
-2013 FORMATION EN OSTEOPATHIE - CEESO LYON
-Classe internationale anglais – Prise en charge de patientèle
-2012 BAC SCIENTIFIQUE OBTENU - LYCEE JEAN MONNET
-Organisation de trec et randonnée en autonomie à pied et/ou à cheval Dressage jeunes chevaux et compétitions
-Lecture : Romans Historique et Fantastique Bénévolat SOS Cheval
-">
-      </section>
    </div>
+  </main>
+
+  <footer class="text-center py-4 mt-4 bg-white border-top">
+    <div class="container">
+      <p class="mb-1">Merci pour votre visite ! N'hésitez pas à me contacter pour toute collaboration ou question.</p>
    </div>
-</div>
+  </footer>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>