diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 08bfb9f..063785d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,15 +4,25 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="7205833e-da67-4e78-9fd2-8671c41e9790" name="Changes" comment="" />
+    <list default="true" id="7205833e-da67-4e78-9fd2-8671c41e9790" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/css/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/style.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
-  "associatedIndex": 2
-}]]></component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 2
+}</component>
   <component name="ProjectId" id="2eRnpPsawVq7QB4SIqMq7OjGEhZ" />
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
@@ -22,6 +32,8 @@
   "keyToString": {
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
+    "git-widget-placeholder": "index",
+    "last_opened_file_path": "D:/Utilisateurs/Roxane/IUT/Portefolio2A/Portfolio",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
@@ -39,6 +51,7 @@
       <option name="presentableId" value="Default" />
       <updated>1711876440981</updated>
       <workItem from="1711876442645" duration="682000" />
+      <workItem from="1711877547472" duration="9648000" />
     </task>
     <servers />
   </component>
diff --git a/css/style.css b/css/style.css
index 654e876..0e3409e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,28 +1,121 @@
-/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */
-
-/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
-/*
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- */
-
-/* ==========================================================================
-   Base styles: opinionated defaults
-   ========================================================================== */
-
 html {
   color: #222;
   font-size: 1em;
   line-height: 1.4;
 }
 
-/*
- * Remove text-shadow in selection highlight:
- * https://twitter.com/miketaylr/status/12228805301
- *
- * Customize the background color to match your design.
- */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #222222;
+  color: white;
+}
+
+h1 {
+  text-align: center;
+}
+
+.container {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 5ex;
+  border-radius: 20px;
+}
+
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 20%;
+  background-color: #333333;
+  padding: 3ch;
+  border: 2px solid gray;
+  border-radius: 20px;
+  margin-right: 10px;
+}
+.backimgid {
+  width: 200px;
+  height: 200px;
+  background-color: #888888;
+  border-radius: 10px;
+  position: relative;
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+.sidebar img {
+  width: 80%;
+  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;
+}
+
+.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 ;
+}
+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;
+}
+
 
 ::-moz-selection {
   background: #b3d4fc;
diff --git a/img/photo_id.JPG b/img/photo_id.JPG
new file mode 100644
index 0000000..858e514
Binary files /dev/null and b/img/photo_id.JPG differ
diff --git a/index.html b/index.html
index 8cd13b7..70e1b37 100644
--- a/index.html
+++ b/index.html
@@ -22,11 +22,33 @@
 </head>
 
 <body>
-
-  <!-- Add your site or application content here -->
-  <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/app.js"></script>
-
+  <h1>Portefolio</h1>
+  <div class="container">
+    <section class="sidebar">
+      <figure class="backimgid">
+        <img src="/img/photo_id.JPG" alt="Photo de profil">
+      </figure>
+      <h3>Roxane Rossetto</h3>
+      <p id="titlejob">Alternante développeuse </p>
+      <ul>
+        <li><a href="https://codefirst.iut.uca.fr/git/roxane.rossetto">GitHub</a></li>
+        <li><a href="https://fr.linkedin.com/in/roxane-rossetto-3b9158211">LinkedIn</a></li>
+        <li><a href="mailto:roxane.rossetto@gmail.com">Email</a></li>
+      </ul>
+    </section>
+    <section class="main-content">
+      <nav>
+        <ul>
+          <li><a href="#a-propos">À Propos</a></li>
+          <li><a href="#cv">CV</a></li>
+          <li><a href="#projets">Projets</a></li>
+          <li><a href="#experience">Expérience</a></li>
+        </ul>
+      </nav>
+      <section id="a-propos">
+        <h2>À Propos de Moi</h2>
+        <p>blablabla pour l'instant</p>
+      </section>
 </body>
 
 </html>