added latest projects

index.html

@@ -587,63 +587,61 @@ <h2 class="section__title">Portfolio</h2>
                 <div class="swiper-wrapper">
                     <!--==================== PORTFOLIO 1====================-->
                     <div class="portfolio__content grid swiper-slide">
-                        <img src="./assets/img/text-app.PNG" alt="" class="portfolio__img">
+                        <img src="./assets/img/portfolios/occa-home.png" alt="" class="portfolio__img">
 
                         <div class="portfolio__data">
                             <h3 class="portfolio__title">Overseas Chitralis Association</h3>
                             <p class="portfolio__description">React JS Application for Supporting Chitralis People in KSA</p>
                             <p class="portfolio__description">Associated with - Bingtechs Solutions</p>
                             <a target="_blank" href="https://overseaschitraliksa.com/"
                                 class="button button--flex button--small portfolio__button">
-                                Demo
+                                Visit Site
                                 <i class="uil uil-arrow-right button__icon"></i>
                             </a>
                         </div>
                     </div>
 
                     <!--==================== PORTFOLIO 2====================-->
                     <div class="portfolio__content grid swiper-slide">
-                        <img src="./assets/img/portfolio1.jpg" alt="" class="portfolio__img">
+                        <img src="./assets/img/portfolios/pre-gems-home.png" alt="" class="portfolio__img">
 
                         <div class="portfolio__data">
-                            <h3 class="portfolio__title">React TODO App</h3>
-                            <p class="portfolio__description">It's a React todo web app in which you can create delete
-                                and update the daily todos.</p>
+                            <h3 class="portfolio__title">Precision - Gems & Minerals</h3>
+                            <p class="portfolio__description">Bootstrap & Javascript base application for gems stone lovers</p>
+                            <p class="portfolio__description">Associated with - Bingtechs Solutions</p>
                             <a target="_blank" href="https://waqasmehmood201138.github.io/Todo-ReactJS/"
                                 class="button button--flex button--small portfolio__button">
-                                Demo
+                                Visit Site
                                 <i class="uil uil-arrow-right button__icon"></i>
                             </a>
                         </div>
                     </div>
                     <!--==================== PORTFOLIO 3====================-->
                     <div class="portfolio__content grid swiper-slide">
-                        <img src="./assets/img/guess game.PNG" alt="" class="portfolio__img">
+                        <img src="./assets/img/portfolios/calaf-home.png" alt="" class="portfolio__img">
 
                         <div class="portfolio__data">
-                            <h3 class="portfolio__title">Number Guessing Game</h3>
-                            <p class="portfolio__description">It's a Number guessing game that build in javascript in
-                                which you can guess the numbers in certain limits </p>
-                            <a target="_blank" href="https://waqasmehmood201138.github.io/Number-Guessing-game-javascript/"
+                            <h3 class="portfolio__title">Calaf - React Landing Page</h3>
+                            <p class="portfolio__description">A Muslim dating app designed to help you find your life partner while staying true to Islamic values </p>
+                            <a target="_blank" href="#"
                                 class="button button--flex button--small portfolio__button">
-                                Demo
+                                Coming Soon
                                 <i class="uil uil-arrow-right button__icon"></i>
                             </a>
                         </div>
                     </div>
 
                     <!--==================== PORTFOLIO 4====================-->
                     <div class="portfolio__content grid swiper-slide">
-                        <img src="./assets/img/news app.PNG" alt="" class="portfolio__img">
+                        <img src="./assets/img/portfolios/sigma-home.PNG" alt="" class="portfolio__img">
 
                         <div class="portfolio__data">
-                            <h3 class="portfolio__title">React News App</h3>
-                            <p class="portfolio__description">It's a React news app in which you can see daily news of
-                                different categories and you can't see this live demo beacuse of API Developer plan.
+                            <h3 class="portfolio__title">Sigma Blend - Shopify Store</h3>
+                            <p class="portfolio__description">Shopify Ecommerce Store which give user a new experience and easy to shop features
                             </p>
-                            <a target="_blank" href="https://github.com/Waqasmehmood201138/newsapp"
+                            <a target="_blank" href="https://sigmablendshop.com/"
                                 class="button button--flex button--small portfolio__button">
-                                Demo
+                                Visit Site
                                 <i class="uil uil-arrow-right button__icon"></i>
                             </a>
                         </div>

style.css

@@ -767,6 +767,8 @@ img {
     width: 265px;
     border-radius: .5rem;
     justify-self: center;
+    border: 2px solid var(--first-color);
+    padding: 2px;
 }
 
 .portfolio__title {