diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..3b4b623
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1712482772398
+
+
+ 1712482772398
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..3fde176
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,387 @@
+html {
+ color: #222;
+ font-size: 1em;
+ line-height: 1.4;
+}
+
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #222222;
+ color: white;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ display: flex;
+ position: sticky;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ justify-content: space-between;
+ margin: 5ex;
+ border-radius: 20px;
+}
+
+
+.sidebar {
+ position: sticky;
+ top: 5%;
+ display: flex;
+ flex-direction: column;
+ width: 20%;
+ max-height: 500px;
+ background-color: #333333;
+ text-align: center;
+ padding: 3ch;
+ border: 2px solid gray;
+ border-radius: 20px;
+ margin-right: 10px;
+}
+.backimgid {
+ width: 60%;
+ height: 60%;
+ background-color: #888888;
+ border-radius: 10px;
+ position: relative;
+ display: flex;
+ align-content: center;
+ align-items: center;
+}
+
+.imgIcon {
+ width: 20px;
+ height: 20px;
+}
+
+#idpict {
+ width: 80%;
+}
+.sidebar img {
+ border-radius: 50%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.sidebar ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+.sidebar ul li {
+ margin-bottom: 10px;
+ color: white;
+}
+
+#titlejob {
+ padding: 20px;
+ border-bottom: 2px solid gray;
+ border-top: 2px solid gray;
+}
+
+
+
+.sidebar ul li a {
+ text-decoration: none;
+ color: white;
+}
+
+
+
+.main-content {
+ display: flex;
+ flex-direction: column;
+ width: 75%;
+ overflow-y: auto;
+ background-color: #333333;
+ border: 2px solid gray;
+ border-radius: 20px;
+ margin-left: 10px;
+
+}
+
+nav {
+ align-self: end;
+ border-bottom: 2px solid gray;
+ border-left: 2px solid gray ;
+ padding: 10px;
+ border-bottom-left-radius: 20px;
+ border-top-right-radius: 20px ;
+ background-color: #555555;
+}
+nav ul {
+ list-style-type: none;
+ padding: 0;
+ margin-bottom: 20px;
+
+}
+
+nav ul li {
+ display: inline;
+ margin-right: 10px;
+}
+
+nav ul li a {
+ text-decoration: none;
+ color: white;
+}
+
+#a-propos {
+ margin: 20px;
+}
+
+section {
+ margin-bottom: 40px;
+}
+
+section h2 {
+ margin-bottom: 10px;
+ font-weight: bold;
+}
+
+.separator {
+ border-bottom: 3px solid gray;
+ width: 10%;
+ margin: 36px;
+}
+
+#watamIdoing {
+ display: grid;
+ grid-template-columns: repeat(2,1fr);
+ grid-template-rows: repeat(2,1fr);
+}
+
+.compcase {
+ border: 2px solid gray;
+ margin: 10px;
+ gap: 20px;
+ border-radius: 10px;
+ box-shadow:10px 10px hsla(0, 0%, 0%, 0.125);
+ padding: 20px;
+}
+
+
+::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+ vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+ resize: vertical;
+}
+
+/* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+
+/* ==========================================================================
+ Helper classes
+ ========================================================================== */
+
+/*
+ * Hide visually and from screen readers
+ */
+
+.hidden,
+[hidden] {
+ display: none !important;
+}
+
+/*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ * causes content to wrap 1 word per line:
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+.visually-hidden {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ /* 1 */
+}
+
+/*
+ * Extends the .visually-hidden class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+.visually-hidden.focusable:active,
+.visually-hidden.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ white-space: inherit;
+ width: auto;
+}
+
+/*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+.invisible {
+ visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * The use of `table` rather than `block` is only necessary if using
+ * `::before` to contain the top-margins of child elements.
+ */
+
+.clearfix::before,
+.clearfix::after {
+ content: "";
+ display: table;
+}
+
+.clearfix::after {
+ clear: both;
+}
+
+/* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ These examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */
+}
+
+@media print,
+(-webkit-min-device-pixel-ratio: 1.25),
+(min-resolution: 1.25dppx),
+(min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */
+}
+
+/* ==========================================================================
+ Print styles.
+ Inlined to avoid the additional HTTP request:
+ https://www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+
+@media print {
+ *,
+ *::before,
+ *::after {
+ background: #fff !important;
+ color: #000 !important;
+ /* Black prints faster */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+
+ a[href]::after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]::after {
+ content: " (" attr(title) ")";
+ }
+
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+ a[href^="#"]::after,
+ a[href^="javascript:"]::after {
+ content: "";
+ }
+
+ pre {
+ white-space: pre-wrap !important;
+ }
+
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+}
+
diff --git a/index.html b/index.html
index bb9f0dc..1dede71 100644
--- a/index.html
+++ b/index.html
@@ -1,34 +1,114 @@
-
-
-
- Portfolio2A - One incredible styled html page
-
-
+
+
-
+
+
+
+
+
+
-
-
+
+
+
+
-
-Portfolio2A is my first page, and it has got style!
+
+
+
-Welcome on this template html/css project
+
+
+
-
Very simple, some links, some menu... make it your own
-…
+
+Portefolio
+
+
+
+
+
+
+
+
+
+
+ À Propos de Moi
+
+ 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.
+ 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 convaincue que cette transition professionnelle est la bonne voie pour moi, et je suis déterminée à mettre
+ tout en œuvre pour atteindre mes objectifs dans le domaine de l'informatique.
+
+
+ Ce que je fais
+
+
+
Développement d'applications
+
Application c#, maui, mais aussi php et android-compose
+
+
+
Optimisation d'applications
+
Exploration algorithmique, Optimisation d'algorithme
+
+
+
Administrer des systèmes informatiques
+
Projets de réseaux,
+
+
+
Collaborer au sein d'une équipe informatique
+
+
-
I have nothing more to say
+
+
+
-
\ No newline at end of file
+
diff --git a/mycoolstyle.css b/mycoolstyle.css
deleted file mode 100644
index 92d69df..0000000
--- a/mycoolstyle.css
+++ /dev/null
@@ -1,32 +0,0 @@
-body {
- padding-left: 11em;
- font-family: Georgia, 'Georgia', "Times New Roman",
- Times, serif;
- color: darksalmon;
- background-color: rgb(39, 39, 84) }
- ul.navbar {
- list-style-type: none;
- padding: 0;
- margin: 0;
- position: absolute;
- top: 2em;
- left: 1em;
- width: 9em }
- h1 {
- font-family: Helvetica, Geneva, Arial,
- SunSans-Regular, sans-serif }
- ul.navbar li {
- background: white;
- margin: 0.5em 0;
- padding: 0.3em;
- border-right: 1em solid darksalmon }
- ul.navbar a {
- text-decoration: none }
- a:link {
- color: blue }
- a:visited {
- color: darkblue }
- address {
- margin-top: 1em;
- padding-top: 1em;
- border-top: thin dotted }
\ No newline at end of file