diff --git a/Fonts/Cascadia.ttf b/Fonts/Cascadia.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..7f2481256bc2986f0852172428e6f6c9486b0192
Binary files /dev/null and b/Fonts/Cascadia.ttf differ
diff --git a/Images/Dark-space-wallpaper-1920x1200.jpg b/Images/Dark-space-wallpaper-1920x1200.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8d0ca4a9b8302c84af92d55914609fdd8b752ff4
Binary files /dev/null and b/Images/Dark-space-wallpaper-1920x1200.jpg differ
diff --git a/Images/Icones/Java.png b/Images/Icones/Java.png
new file mode 100644
index 0000000000000000000000000000000000000000..b67be4ca53a89ce17272cd13d47ce0666ead022c
Binary files /dev/null and b/Images/Icones/Java.png differ
diff --git a/Images/Icones/Python.png b/Images/Icones/Python.png
new file mode 100644
index 0000000000000000000000000000000000000000..a29196d44e38cddb250876b124263d4dae31f15e
Binary files /dev/null and b/Images/Icones/Python.png differ
diff --git a/Images/Icones/SQL.png b/Images/Icones/SQL.png
new file mode 100644
index 0000000000000000000000000000000000000000..60a640f8ec8ee776d28f2644095fad808857a527
Binary files /dev/null and b/Images/Icones/SQL.png differ
diff --git a/Images/Icones/css.png b/Images/Icones/css.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4fde121c24452535f20291cfd35b60bf75ea94e
Binary files /dev/null and b/Images/Icones/css.png differ
diff --git a/Images/Icones/git.png b/Images/Icones/git.png
new file mode 100644
index 0000000000000000000000000000000000000000..e94ad99d3314d750d97683e2ef9c744d2d1e7aef
Binary files /dev/null and b/Images/Icones/git.png differ
diff --git a/Images/Icones/html.png b/Images/Icones/html.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c5bb469e9ef0cda406cbffd93bdb4cfd3419cc2
Binary files /dev/null and b/Images/Icones/html.png differ
diff --git a/Images/ProfilePic.png b/Images/ProfilePic.png
new file mode 100644
index 0000000000000000000000000000000000000000..86a1e8a5290dd874031037a74fb90a6d40a06b03
Binary files /dev/null and b/Images/ProfilePic.png differ
diff --git a/Images/Projets/JO.JPG b/Images/Projets/JO.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..e1c02fb21ba51d9b764d43074d49b5b70000620d
Binary files /dev/null and b/Images/Projets/JO.JPG differ
diff --git a/Images/Projets/Portfolio.JPG b/Images/Projets/Portfolio.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..e4b2deecc41cc7cecd3034d115c742cd9c2cf1ba
Binary files /dev/null and b/Images/Projets/Portfolio.JPG differ
diff --git a/Images/Projets/appariement.png b/Images/Projets/appariement.png
new file mode 100644
index 0000000000000000000000000000000000000000..39e68c51bf8928abf8e01e6348065520fd4fef97
Binary files /dev/null and b/Images/Projets/appariement.png differ
diff --git a/Images/Projets/background.png b/Images/Projets/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdbe885c36a5074cae9c2d63f96f78cb4ad89b90
Binary files /dev/null and b/Images/Projets/background.png differ
diff --git a/Images/Projets/fightbird.JPG b/Images/Projets/fightbird.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..3a51912b2b96ebd9759d4cd5075f663625b86356
Binary files /dev/null and b/Images/Projets/fightbird.JPG differ
diff --git a/Images/Screenshot-Terminal.png b/Images/Screenshot-Terminal.png
new file mode 100644
index 0000000000000000000000000000000000000000..70a8446a79e477a950e4348ec0abb205a4f8f647
Binary files /dev/null and b/Images/Screenshot-Terminal.png differ
diff --git a/Images/vintage-abstract-black-white-wave-background-free-video.jpg b/Images/vintage-abstract-black-white-wave-background-free-video.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b0e79ed7a6445e3504e672e9ec47dfec4a9f61b6
Binary files /dev/null and b/Images/vintage-abstract-black-white-wave-background-free-video.jpg differ
diff --git a/Pages/Contact.html b/Pages/Contact.html
new file mode 100644
index 0000000000000000000000000000000000000000..d76dac536ed51eb53ac8e6e0be8b8aec960df393
--- /dev/null
+++ b/Pages/Contact.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<title>Page</title>
+<link rel="stylesheet" href="../Styles/styles.css" />
+</head>
+<body>
+    <div class="topnav">
+        <a class="active" href="./Index.html">Accueil</a>
+        <a href="./Projets.html">Mes projets</a>
+    </div>
+    <header>
+        <h1>Me contacter</h1>
+    </header>
+    <main>
+        <section id="middle">
+            <div class="contact">
+                <header><h2>Contact : </h2></header>
+                <ul>
+                    <li>Telephone : +33 7 81 39 79 17</li>
+                    <li>Mail : <a href="mailto:paul.cancel.etu@univ-lille.fr">paul.cancel.etu@univ-lille.fr</a></li>
+                    <li>LinkedIn : <a href="https://www.linkedin.com/in/paul-cancel-7003b62a4/" target="_blank">Paul Cancel</a></li>
+                </ul>
+            </div>
+        </section>
+    </main>
+    <div class="bottomfoot">
+        <a href="./Contact.html">Me contacter</a>
+        <a href="../pdf/cv.pdf" target="_blank">Mon CV</a>
+    </div>
+</body>
\ No newline at end of file
diff --git a/Pages/Index.html b/Pages/Index.html
new file mode 100644
index 0000000000000000000000000000000000000000..556e29b8049eff84ea527c2351adbd2ff5fd6210
--- /dev/null
+++ b/Pages/Index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<title>Page</title>
+<link rel="stylesheet" href="../Styles/styles.css" />
+</head>
+<body>
+    <div class="topnav">
+        <a class="active" href="./Index.html">Accueil</a>
+        <a href="./Projets.html">Mes projets</a>
+        <a href="#presentation">Presentation</a>
+    </div>
+    <header>
+        <h1>Paul CANCEL</h1>
+        <h4>Mon portfolio</h4>
+    </header>
+    <div class="presentation">
+        
+        <main>
+            <section id="middle">
+                <article>
+                    <profile>
+                        <img src="../Images/ProfilePic.png" alt="pfp">
+                    </profile>
+                </article>
+                <article>
+                    <div class="boutonprojets">
+                        <a href="./Projets.html" class="button">Mes projets</a>
+                    </div>
+                </article>
+            </section>
+                <section id="presentation">
+
+                    <header>
+                        <h1>Presentation</h1>
+                    </header>
+                    <article>
+                        <h5>Bonjour, je suis etudiant en deuxieme annee de Brevet Universitaire de Technologie (BUT) en informatique a l'Universite de Lille. 
+                            Actuellement en quete d'un stage, je souhaite mettre en pratique mes competences dans le domaine informatique au sein d'une entreprise 
+                            dynamique. Depuis ma jeunesse, mon interet pour le developpement logiciel, en particulier avec Java et Python, s'est consolide. 
+                            Bien que la programmation reste ma passion premiere, je suis ouvert a explorer d'autres domaines tels que le developpement web, 
+                            la gestion de bases de donnees, ainsi que les secteurs du reseau et de l'architecture. Mon objectif est d'integrer une entreprise 
+                            offrant l'opportunite d'elargir mes connaissances et de travailler avec de nouveaux outils, renforcant ainsi mon experience professionnelle.
+                        </h5>
+                    </article>
+                    <header>
+                        <h1>
+                            Competences 
+                        </h1>
+                    </header>
+                    <article>
+                        <ul>
+                            <li>
+                                <img src="../Images/Icones/Java.png" alt="java">
+                                <div class="title">
+                                    <p>Java</p>
+                                </div>
+                            </li>
+                            <li>
+                                <img src="../Images/Icones/Python.png" alt="Python">
+                                <div class="title">
+                                    <p>Python</p>
+                                </div>
+                            </li>
+                            <li>
+                                <img src="../Images/Icones/SQL.png" alt="SQL">
+                                <div class="title">
+                                    <p>SQL</p>
+                                </div>
+                            </li>
+                            <li>
+                                <img src="../Images/Icones/html.png" alt="HTML">
+                                <div class="title">
+                                    <p>HTML</p>
+                                </div>
+                            </li>
+                            <li>
+                                <img src="../Images/Icones/css.png" alt="CSS">
+                                <div class="title">
+                                    <p>CSS</p>
+                                </div>
+                            </li>
+                            <li>
+                                <img src="../Images/Icones/git.png" alt="GIT">
+                                <div class="title">
+                                    <p>GIT</p>
+                                </div>
+                            </li>
+                        </ul>
+
+                    </article>
+                    <header>
+                        <h1>
+                            Formation 
+                        </h1>
+                    </header>
+                    <article>
+                        <h3>
+                            2021 : Baccalaureat, specialite Mathematique & NSI
+                            <br><br><br>
+                            2022/2023/2024 : BUT Informatique 
+                        </h3>
+                    </article>
+            </section>
+            <div class="end">
+                N'hesitez pas a me contacter si vous avez besoin de complements d'information
+            </div>
+        </main>
+    </div>
+    <div class="bottomfoot">
+        <a href="./Contact.html">Me contacter</a>
+        <a href="../pdf/cv.pdf" target="_blank">Mon CV</a>
+    </div>
+</body>
\ No newline at end of file
diff --git a/Pages/Projets.html b/Pages/Projets.html
new file mode 100644
index 0000000000000000000000000000000000000000..fb7b6a6ff05edafa24153d95beef20e72e7e08a1
--- /dev/null
+++ b/Pages/Projets.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<title>Page</title>
+<link rel="stylesheet" href="../Styles/styles.css" />
+</head>
+<body>
+    <div class="topnav">
+        <a class="active" href="./Index.html">Accueil</a>
+        <a href="./Projets.html">Mes projets</a>
+    </div>
+    <header>
+        <h1>
+            Mes projets 
+        </h1>
+    </header>
+    <div class="projets">
+        <ul>
+            <li>
+                <a href="https://github.com/PaulCancelEtu/BDD_Olympique" target="_blank">
+                    <img src="../Images/Projets/JO.JPG" alt="BDD">
+                    <div class="title">
+                        <p>Creation d'une base de donnee</p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/PaulCancelEtu/Affiliation" target="_blank">
+                    <img src="../Images/Projets/appariement.png" alt="appariement">
+                    <div class="title">
+                        <p>Application d'appariement</p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/PaulCancelEtu/Affiliation" target="_blank">
+                    <img src="../Images/Projets/fightbird.JPG" alt="fight bird">
+                    <div class="title">
+                        <p>Jeu video "Fight Bird"</p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/PaulCancelEtu/chasseAuMonstre" target="_blank">
+                    <img src="../Images/Projets/background.png" alt="Chasse au monstre">
+                    <div class="title">
+                        <p>Jeu video "Fight Bird"</p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/PaulCancelEtu/portfolio" target="_blank">
+                    <img src="../Images/Projets/Portfolio.JPG" alt="Portfolio">
+                    <div class="title">
+                        <p>Portfolio</p>
+                    </div>
+                </a>
+            </li>
+        </ul>
+
+    </div>
+    <main>
+        <section id="middle">
+            
+        </section>
+    </main>
+    <div class="bottomfoot">
+        <a href="./Contact.html">Me contacter</a>
+        <a href="../pdf/cv.pdf" target="_blank">Mon CV</a>
+    </div>
+</body>
\ No newline at end of file
diff --git a/Styles/styles.css b/Styles/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..371d55556cc87db3a836904148b03ca5079ff53f
--- /dev/null
+++ b/Styles/styles.css
@@ -0,0 +1,285 @@
+@font-face {
+    font-family: 'Cascadia';
+    src: url('../Fonts/Cascadia.ttf') format('truetype');
+}
+
+body{
+    background-image: url('../Images/vintage-abstract-black-white-wave-background-free-video.jpg');
+    font-family: 'Cascadia';
+    color: rgb(255, 255, 255);
+}
+
+body>header{
+    text-align: center;
+    font-size: 1.5em;
+    background-color: rgb(26, 26, 26);
+    border-color: white;
+    border-style: solid;
+}
+body>header h1{
+    letter-spacing: 1em;
+    font-size: 300%;
+}
+
+body>header h4{
+    letter-spacing: 0.5em;
+}
+
+#middle{
+    margin: auto;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    flex-flow: column;
+    width: 80%;
+    padding: 10px;
+}
+
+a{
+    text-decoration: none;
+    color: rgb(55, 77, 206);
+}
+
+.boutonprojets a:hover{
+    transition: 1s;
+    color: white;
+    background-color: black;
+    filter: drop-shadow(white 0rem 0rem 15px);
+}
+
+profile img{
+    margin-top: 40px;
+    margin-bottom: 20px;
+    margin-left: 10%;
+    width: 20em;
+    border-color: white;
+    border-style: solid;
+    border-radius: 50%;
+}
+
+profile img:hover{
+    transition: 1s;
+    filter: drop-shadow(white 0rem 0rem 15px);
+}
+
+
+.topnav {
+    background-color: #333;
+    overflow: hidden;
+}
+
+.topnav a {
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+
+.topnav a:hover {
+    background-color: #ddd;
+    color: black;
+}
+  
+.topnav a.active {
+    background-color: #242424;
+    color: white;
+}
+
+
+.bottomfoot {
+    background-color: #333;
+    overflow: hidden;
+    position: fixed;
+    bottom: 0;
+}
+
+.bottomfoot a {
+    float: right;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+
+.bottomfoot a:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+
+.image-container {
+    position: relative;
+    display: inline-block;
+}
+  
+.image-container img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+  
+.overlay-text {
+    position: absolute;
+    top: 40%; 
+    left: 40%; 
+    transform: translate(-50%, -50%); 
+    background-color: #000000; 
+    color: #fff; 
+    padding: 10px 20px; 
+    font-size: 15px; 
+    text-align: center;
+}
+
+.button {
+    background-color: white;
+    border: none;
+    color: black;
+    padding: 32px 50px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    margin-top: 15%;
+    border-style: solid;
+    margin-left: 15%;
+    margin-bottom: 150%;
+    font-size: 150%;
+}
+
+#presentation{
+    margin-left: 4em;
+    display: flex;
+    align-items: left;
+    background-color: rgb(20, 20, 20);
+    flex-flow: column;
+    margin-bottom: 5em;
+}
+
+#presentation header{
+    margin-left: 3em;
+    font-style: bold;
+    color: white;
+    border: white;
+}
+
+#presentation h5{
+    width: 80%;
+    background-color: rgb(41, 41, 41);
+    padding: 1%;
+    margin: auto;
+    text-align: center;
+    margin-bottom: 2em;
+}
+
+#presentation ul li{
+    list-style-type: none;
+    display: inline-block;
+    margin-left: 6em;
+}
+
+.projets ul li{
+    list-style-type: none;
+    display: inline-block;
+    margin-left: 6em;
+}
+
+ul li img{
+    margin-top: 40px;
+    margin-bottom: 20px;
+    margin-left: 2em;
+    width: 5em;
+}
+
+.title{
+    opacity: 0;
+    margin-bottom: 20px;
+    text-align: center;
+    padding-left: 25px;
+    font-size: 25px;
+}
+
+ul li:hover .title{
+    opacity: 1;
+}
+
+ul li img:hover{
+    transition: 1s;
+    width: 6em;
+}
+
+ul li img:not(:hover){
+    transition: 1s;
+    width: 5em;
+}
+
+.contact{
+    padding-left: 5%;
+    margin: 1em;
+    margin-top: 2em;
+    width: 80%;
+    font-size: 1.5em;
+    background-color: #242424;
+}
+
+.contact li {
+    padding-bottom: 3em;
+}
+
+.contact ul{
+    margin-top: 2em;
+}
+
+.current{
+    background-color: white;
+}
+
+.projets{
+    margin: 2em;
+    background-color: rgb(41, 41, 41, 75%);
+    margin-bottom: 2em;
+}
+
+.projets ul li img{
+    margin-top: 40px;
+    margin-bottom: 20px;
+    margin-left: 2em;
+    width: 20em;
+}
+
+.projets .title{
+    opacity: 1;
+    margin-bottom: 20px;
+    margin-left: 10%;
+    text-align: center;
+    font-size: 25px;
+    width: 60%;
+}
+
+
+.projets a:hover{
+    transition: 1s;
+    filter: drop-shadow(white 0rem 0rem 15px);
+    font-weight: bold;
+}
+
+.projets a{
+    color: white;
+    text-decoration: underline;
+}
+
+article h3{
+    background-color:#242424;
+    padding: 1em;
+    width: 60%;
+    margin-left: 9em;
+}
+
+.end{
+    -webkit-text-stroke-width: 0.5px;
+    -webkit-text-stroke-color: black;
+    margin-top: 5em;
+    text-align: end;
+}
+
diff --git a/pdf/cv.pdf b/pdf/cv.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..6415921c17a669cb15fe2c2c9beb80762882a407
Binary files /dev/null and b/pdf/cv.pdf differ