diff --git a/icons8-github-48.svg b/icons8-github-48.svg
new file mode 100644
index 0000000..75005f3
--- /dev/null
+++ b/icons8-github-48.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="48px" height="48px">    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
\ No newline at end of file
diff --git a/icons8-linkedin.svg b/icons8-linkedin.svg
new file mode 100644
index 0000000..229b778
--- /dev/null
+++ b/icons8-linkedin.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 76b1fbe..8bc8c3f 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 
 <body>
     <header>
-       <a href="https://nexonstudio.pl"><img src="nexonstudio-logo.png" width="80px" height="80px"></a>
+        <a href="https://nexonstudio.pl"><img src="nexonstudio-logo.png" width="80px" height="80px"></a>
         <ul class="header-list">
             <li class="list-li" data-key="main2">O mnie</li>
             <li class="list-li" data-key="projects">Projekty</li>
@@ -45,8 +45,10 @@
         <img src="undraw_coding_re_iv62.svg" id="main-2-man" alt="">
         <p id="text-main2">
             Jestem Marcin i mam 19 lat.
-            Pierwszą stronę napisałem w technikum, ale błache szkolne projekty szybko się znudziły i sam zacząłem tworzyć rozbudowane projekty.
-            Poczułem się spełniony, gdy wdrożyłem większy projekt na pierwszą własną domenę, która nazywa się własnie <a href="https://nexonstudio.pl/" style="text-decoration:none; color: black"><b>nexonstudio.pl</b></a>.
+            Pierwszą stronę napisałem w technikum, ale błache szkolne projekty szybko się znudziły i sam zacząłem
+            tworzyć rozbudowane projekty.
+            Poczułem się spełniony, gdy wdrożyłem większy projekt na pierwszą własną domenę, która nazywa się własnie <a
+                href="https://nexonstudio.pl/" style="text-decoration:none; color: black"><b>nexonstudio.pl</b></a>.
             <br><br>
             Po tegorocznej maturze chciałbym
             rozpocząć staż, który pozwoli mi zdobyć
@@ -56,24 +58,59 @@
             frameworków (React). Nie są mi obce
             podstawowe narzędzia i języki przy
             pracy jako Web Developer a językiem
-            angielskim posługuję się na poziomie B2. Odbyłem również praktyki na których pracowałem z systemem Liferay.<br><br>
-            Uważam, że najważniejsze w tworzeniu stron jest <i>zaciekawienie i przykucie uwagi</i> użytkownika. Sam zawsze szukam na stronach czegoś co się rusza.
+            angielskim posługuję się na poziomie B2. Odbyłem również praktyki na których pracowałem z systemem
+            Liferay.<br><br>
+            Uważam, że najważniejsze w tworzeniu stron jest <i>zaciekawienie i przykucie uwagi</i> użytkownika. Sam
+            zawsze szukam na stronach czegoś co się rusza.
         </p>
     </section>
-    <!-- <section class="main3">
-
-    </section> -->
-    
+    <section class="projects">
+        <p id="header-main3">
+            Projekty
+        </p>
+        <!-- FIRST PROJECT -->
+        <div class="projekt-main3">
+            <div id="div-inside-img">
+                <a href="https://nexonstudio.pl/pogoda"><img src="weatherapi.webp" id="zdjecie-projektu">
+                    <h1>Weather API</h1>
+                </a>
+            </div>
+            <div id="project-info">
+                <div id="title-project">
+                    <h3><a href="https://nexonstudio.pl/pogoda">Weather API</a></h3>
+                </div>
+                <div id="description-project">Pogodynka to najlepsza witryna pokazująca współpracę strony internetowej z
+                    API.
+                    Komunikacja między serwerem pobierającym dane, a stroną która je odbiera musi być niezawodna, aby
+                    strona ciągle pracowała.
+                </div>
+            </div>
+        </div>
+        
+    </section>
+    <section class="contact">
+        <p id="header-main3">
+            Kontakt
+        </p>
+        <div id="contact-infos">
+            <p class="contact-info">+48 796 970 474</p>
+            <p class="contact-info"><a href="mailto:kontakt@nexonstudio.pl">kontakt@nexonstudio.pl</a></p>
+        </div>
+        <div class="icons">
+            <a href="https://www.linkedin.com/in/nexonyt/" target="_blank"><img src="icons8-linkedin.svg" alt=""></a>
+            <a href="/nexonyt" target="_blank"><img src="icons8-github-48.svg" alt=""></a>
+        </div>
+    </section>
     <footer id="stopka">
-            <p id="footer-text-p1">All rights reserved</p><br>
-            <p id="footer-text-p2"> Portfolio site Marcin Kaczmarek by <a href="https://nexonstudio.pl/">nexonstudio.pl</a></p>
+        <p id="footer-text-p1">All rights reserved</p><br>
+        <p id="footer-text-p2"> Portfolio site Marcin Kaczmarek by <a href="https://nexonstudio.pl/">nexonstudio.pl</a>
+        </p>
 
         <br>
         <p id="footer-text-copyright">Copyright by <a href="https://nexonstudio.pl/">nexonstudio.pl</a> © 2023</h5>
     </footer>
     <!-- SECTION 2 -->
     <script src="main.js"></script>
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/main.js b/main.js
index 235ad3f..49fff1a 100644
--- a/main.js
+++ b/main.js
@@ -21,13 +21,26 @@ burgerButton.addEventListener('click', () => {
 const menuLinks = document.querySelectorAll(".list-li");
 menuLinks.forEach(link => link.addEventListener('click', (e) => {
     const key = e.target.dataset.key;
+    let section;
+    if (key == 'projects') {
+        section =
+            document.querySelector(`.${key}`).getBoundingClientRect().top +
+            window.pageYOffset - 40;
+    }
+    if (key == 'main2') {
+        section =
+            document.querySelector(`.${key}`).getBoundingClientRect().top +
+            window.pageYOffset - 180;
+    }
+    if (key == 'contact') {
+        section =
+            document.querySelector(`.${key}`).getBoundingClientRect().top +
+            window.pageYOffset - 180;
+    }
 
-    const section =
-        document.querySelector(`.${key}`).getBoundingClientRect().top +
-        window.pageYOffset - 180;
 
     window.scrollTo({ top: section, behavior: 'smooth' });
-    
+
     headerListUL.classList.remove("active");
     burgerButton.classList.remove("active");
 }))
diff --git a/style.css b/style.css
index 0eda93d..d133a30 100644
--- a/style.css
+++ b/style.css
@@ -101,7 +101,7 @@ header.active {
 }
 
 .burger.active>span:nth-child(2) {
-    transform: rotate(45deg) translateY(-0.7rem);
+    transform: rotate(45deg) translateY(-1.2rem);
     width: 80%;
 }
 
@@ -136,12 +136,11 @@ header.active {
 
 .main2 {
     width: 100vw;
-    height: 80vh;
     display: flex;
     align-items: center;
     flex-direction: row;
     background-color: white;
-    padding: 0.7em 2.1em;
+    padding: 0.7em 2.3em 2.3em 2.3em;
 }
 
 #header-main2 {
@@ -167,16 +166,108 @@ header.active {
 
 
 /* SECTION 3 */
+#header-main3 {
+    margin: 3rem 3rem 1rem 3rem;
+    display: flex;
+    justify-content: center;
+    color: rgb(0, 0, 0);
+    font-size: 2.3rem;
+    font-weight: bold;
+}
 
-.main3 {
+.projects {
     width: 100vw;
-    height: 100vh;
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
-    background-color: rgb(75, 75, 75);
+    background-color: white;
     padding: 2rem;
 }
 
+.projekt-main3 a {
+    text-decoration: none;
+    color: white;
+}
+
+.projekt-main3 {
+    display: flex;
+    width: 1200px;
+    height: 350px;
+    margin: 2rem;
+    background: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 22px 0 rgba(31, 38, 135, 0.37);
+    backdrop-filter: blur(10.5px);
+    -webkit-backdrop-filter: blur(10.5px);
+}
+
+#div-inside-img {
+    width: 35%;
+    position: relative;
+    overflow: hidden;
+    max-width: 35%;
+    z-index: 1;
+}
+
+#div-inside-img h1 {
+    position: absolute;
+    bottom: 45%;
+    color: white;
+    z-index: 10;
+    left: 35%;
+    cursor: pointer;
+}
+
+#div-inside-img::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #e5e5e5;
+    opacity: 0;
+    transition: .5s ease all;
+}
+
+#div-inside-img img {
+    transition: .5s ease all;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: relative;
+    text-align: center;
+}
+
+#div-inside-img:hover img {
+    transform: scale(1.1);
+}
+
+#div-inside-img:hover::after {
+    opacity: 0.2;
+
+}
+
+
+/* STOPKA */
+
+#project-info {
+    padding: 3rem;
+    width: 65%;
+    color: white;
+    background-color: rgb(44, 44, 44);
+}
+
+#title-project {
+    font-size: 1.7rem;
+    padding-bottom: 1rem;
+}
+
+#description-project {
+    font-size: 1.2rem;
+    text-align: justify;
+}
+
 #main-right-picture {
     width: 35rem;
     height: 35rem;
@@ -216,6 +307,48 @@ header.active {
 }
 
 
+/* CONTACT */
+.contact {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 500px;
+}
+
+.contact .icons {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+}
+
+.contact .icons img {
+    width: 70px;
+    height: 70px;
+    margin: 0.1rem 0.5rem;
+    transition: all 0.3s ease-in-out;
+}
+
+.contact .icons img:hover {
+    transform: scale(1.2);
+}
+
+#contact-infos {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 1.6rem;
+}
+
+.contact-info {
+    font-size: 1.3rem;
+}
+
+.contact-info a {
+    text-decoration: none;
+    color: black;
+}
+
 /* FOOTER */
 
 #stopka {
@@ -296,6 +429,7 @@ header.active {
 
     .header-list li {
         cursor: pointer;
+        list-style-type: none;
     }
 
     .burger {
@@ -323,7 +457,9 @@ header.active {
     }
 
     .main2 {
-        height: 70vh;
+        margin-top: 1rem;
+        padding: 0.7em 2.3em 2.3em 2.3em;
+        /* height: 70vh; */
     }
 }
 
@@ -332,6 +468,9 @@ header.active {
 /* MEDIA QUERIES */
 /* MEDIA QUERIES */
 
+
+
+
 @media only screen and (max-width: 1000px) {
     .main {
         width: 100vw;
@@ -363,8 +502,7 @@ header.active {
     }
 
     .main2 {
-        height: 150vh;
-        padding: 1rem 0.2rem;
+        padding: 1.4rem 0.2rem;
 
     }
 }
@@ -385,6 +523,7 @@ header.active {
         width: 50px;
         height: 50px;
         z-index: 7;
+        bottom: -50px;
     }
 
 }
@@ -393,6 +532,24 @@ header.active {
     #main-right-picture {
         width: 55vw;
     }
+
+    .projekt-main3 {
+        width: 750px;
+    }
+    .projekt-main3  #div-inside-img h1 {
+        left: 25%;
+    }
+    .header-list li {
+        cursor: pointer;
+        list-style-type: none;
+    }
+
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1400px) {
+    .projekt-main3 {
+        width: 1000px;
+    }
 }
 
 @media only screen and (min-width: 300px) and (max-width: 1000px) {
@@ -416,6 +573,34 @@ header.active {
         justify-content: center;
         align-items: center;
     }
+
+    .projekt-main3 {
+        display: flex;
+        flex-direction: column;
+        width: 300px;
+        max-height: 1000px;
+        height: 100%;
+    }
+    #div-inside-img {
+        max-width: 100%;
+        max-height: 100%;
+        width: 100%;
+        height: 100%;
+    }
+    #div-inside-img {
+        background-color: rgb(44, 44,44);
+    }
+    #div-inside-img::after {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    #project-info {
+        width: 100%;
+        height: 100%;
+    }
+    #description-project, #title-project{
+        text-align: center;
+    }
 }
 
 
diff --git a/wallpaper.webp b/wallpaper.webp
new file mode 100644
index 0000000..0110967
Binary files /dev/null and b/wallpaper.webp differ
diff --git a/weatherapi.webp b/weatherapi.webp
new file mode 100644
index 0000000..7408b2a
Binary files /dev/null and b/weatherapi.webp differ
