Update Portfolio 2.0

changed divs, added new project and contact sections
nexonyt · Jun 11, 2023 · d6efeeb · d6efeeb
1 parent 6a994ca
commit d6efeeb
Show file tree

Hide file tree

Showing 7 changed files with 262 additions and 25 deletions.
diff --git a/icons8-github-48.svg b/icons8-github-48.svg
diff --git a/icons8-linkedin.svg b/icons8-linkedin.svg
diff --git 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="https://github.com/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>
diff --git 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");
 }))