formatted code

card and moved things around

assets/css/style.css

@@ -111,9 +111,12 @@ h6 {
 }
 
 .prevent-select {
-  -webkit-user-select: none; /* Safari */
+    -webkit-user-select: none;
-  -ms-user-select: none; /* IE 10 and IE 11 */
+    /* Safari */
-  user-select: none; /* Standard syntax */
+    -ms-user-select: none;
+    /* IE 10 and IE 11 */
+    user-select: none;
+    /* Standard syntax */
 }
 
 /*--------------------------------------------------------------
@@ -759,7 +762,6 @@ section {
 # My Skills
 --------------------------------------------------------------*/
 .skills #skills-filters {
-
     list-style: none;
     margin-bottom: 20px;
     overflow-x: auto;
@@ -1009,31 +1011,44 @@ section {
     z-index: 3;
     right: 15px;
     transition: all ease-in-out 0.3s;
-  background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.7);
     padding: 10px 15px;
 }
 
 .portfolio .portfolio-item .portfolio-info h4 {
     font-size: 18px;
-  color: var(--background);
+    color: var(--text-color-alt);
     font-weight: 600;
-  color: var(--background);
     margin-bottom: 0px;
 }
 
 .portfolio .portfolio-item .portfolio-info p {
-  color: rgba(255, 255, 255, 0.8);
+    color: var(--text-color-alt);
     font-size: 14px;
     margin-bottom: 0;
 }
 
+.portfolio .portfolio-item .portfolio-info div {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.portfolio .portfolio-item .portfolio-info div a {
+    display: flex;
+    align-items: center;
+}
+
+.portfolio .portfolio-item .portfolio-info div p .br {
+    display: block;
+    margin-bottom: 0.5em;
+}
+
 .portfolio .portfolio-item .portfolio-info .preview-link,
 .portfolio .portfolio-item .portfolio-info .details-link {
-  position: absolute;
-  right: 40px;
     font-size: 24px;
-  top: calc(50% - 18px);
+    color: var(--text-color-alt);
-  color: var(--background);
     transition: 0.3s;
 }
 
@@ -1042,10 +1057,6 @@ section {
     color: #ffc041;
 }
 
-.portfolio .portfolio-item .portfolio-info .details-link {
-  right: 10px;
-}
-
 .portfolio .portfolio-item:hover .portfolio-img img {
     transform: scale(1.2);
 }

index.html

@@ -115,7 +115,8 @@
                             </div>
                             <div class="col-lg-6">
                                 <ul>
-                                    <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span id="age">23</span>
+                                    <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span
+                                            id="age">23</span>
                                     </li>
                                     <!-- <li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master in -->
                                     <!-- Software and Data Engineering </span> -->
@@ -225,7 +226,7 @@
                                     quality
                                     assurance, data modeling, and decision support.</p>
                             </div>
-                            <div class="resume-item" data-aos="fade-up">
+                            <div class="resume-item">
                                 <h4>Bachelor in Informatics</h4>
                                 <h5>2020 - 2023</h5>
                                 <p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: 9.21/10</em></p>
@@ -268,8 +269,8 @@
                                 </p>
                             </div>
                         </div>
-                        <div>
+                        <div data-aos="fade-up">
-                            <div class="resume-item" data-aos="fade-up">
+                            <div class="resume-item">
                                 <h4>Teacher assistant</h4>
                                 <h5>2022 - present</h5>
                                 <p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p>
@@ -280,17 +281,19 @@
                                     sparkles in their eyes when they learned about concepts I taught them.
                                 </p>
                             </div>
-                            <div class="resume-item secondary" data-aos="fade-up">
+                            <div class="resume-item secondary">
                                 <h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4>
                                 <h5>Spring 2023 & 2024</h5>
                                 <p><em>9 ECTS - Prof. Matthias Hauswirth</em></p>
                                 <ul>
-                                    <li>One of the most important courses of the bachelor as it teaches first year students to write code in Java</li>
+                                    <li>One of the most important courses of the bachelor as it teaches first year
-                                    <li>Took care of students with special needs along the semester and during the exams</li>
+                                        students to write code in Java</li>
+                                    <li>Took care of students with special needs along the semester and during the exams
+                                    </li>
                                     <li>Mentored and lead small groups of students in their end-of-semester project</li>
                                 </ul>
                             </div>
-                            <div class="resume-item secondary" data-aos="fade-up">
+                            <div class="resume-item secondary">
                                 <h4 style="font-weight: normal">TA - Systems Programming</h4>
                                 <h5>Autumn 2022</h5>
                                 <p><em>6 ECTS - Prof. Antonio Carzaniga</em></p>
@@ -343,7 +346,7 @@
                 </div>
 
             </div>
-            <a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-up">Download my CV </a>
+            <a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-in">Download my CV </a>
         </section><!-- End My Resume Section -->
 
         <!-- ======= My Skills Section ======= -->
@@ -358,16 +361,69 @@
                 <ul id="skills-filters" class="d-flex justify-content-lg-center" data-aos="fade-up">
                     <li data-filter="*" class="filter-active">All</li>
                     <li data-filter=".filter-prod">Productivity</li>
-                    <li data-filter=".filter-lang">Languages</li>
-                    <li data-filter=".filter-frame">Frameworks</li>
                     <li data-filter=".filter-web">Web</li>
                     <li data-filter=".filter-hobby">Hobbies</li>
-                    <li data-filter=".filter-other">Other</li>
                 </ul>
 
                 <!-- TODO: check the filter & link of each thing (normally the first
                     line should be good) -->
                 <div class="skills-container" data-aos="fade-up">
+                    <div class="row">
+
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby">
+                            <div class="icon-box">
+                                <div class="icon"><i class="fa fa-masks-theater"></i></div>
+                                <h4 class="title"><a>Theater</a></h4>
+                                <p class="description">
+                                    For seven years, I've been part of a theater group focusing on physical theater,
+                                    telling stories through movement and dance instead of spoken words. This experience
+                                    has significantly sharpened my non-verbal communication skills and deepened my
+                                    understanding of storytelling.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby">
+                            <div class="icon-box">
+                                <div class="icon"><i class="fa fa-basketball"></i></div>
+                                <h4 class="title"><a>Basketball</a></h4>
+                                <p class="description">
+                                    I began my journey as a Table Official in basketball after frequently attending a
+                                    friend's matches, which led to my involvement with the SFT Lugano Tigers. Following
+                                    a brief training, I assumed the role, contributing to the game by managing scores
+                                    and timekeeping, blending my passion with responsibility.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby">
+                            <div class="icon-box">
+                                <div class="icon"><i class="fa fa-chess"></i></div>
+                                <h4 class="title"><a>Chess</a></h4>
+                                <p class="description">
+                                    Early in 2023, a friend introduced me to chess, sparking a passion that has grown
+                                    ever since. While I'm aware that I'm not the best player, I enjoy playing regularly
+                                    and am dedicated to improving my skills.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-web filter-prod filter-hobby">
+                            <div class="icon-box">
+                                <div class="icon"><i class="bx bx-server"></i></div>
+                                <h4 class="title"><a>Server Management</a></h4>
+                                <p class="description">
+                                    Since 2018, I've been diving into the world of server administration, experimenting
+                                    with various hardware setups. It's been an enriching journey that's expanded my
+                                    technical horizons. I've come to appreciate the art of keeping servers running
+                                    smoothly and securely. Additionally, delving into DevOps activities has allowed me
+                                    to bridge the gap between development and operations, streamlining processes and
+                                    improving overall efficiency.
+                                </p>
+                            </div>
+                        </div>
+
+                    </div>
                     <div class="row">
                         <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
                             <div class="icon-box">
@@ -390,18 +446,17 @@
                                     <img src="assets/img/arch.png" alt="arch-linux-logo" />
                                 </div>
                                 <h4 class="title"><a href="https://archlinux.org">Arch Linux</a></h4>
-                                <p class="description">Arch Linux is a minimalist, user-centric operating system that
+                                <p class="description">
-                                    I've
+                                    Arch Linux is a minimalist, user-centric operating system that I've come to
-                                    come to appreciate. It's not for everyone, but if you value control and enjoy
+                                    appreciate. It's not for everyone, but if you value control and enjoy crafting your
-                                    crafting
+                                    system to suit your needs, it's a solid choice. With a rolling release model and a
-                                    your system to suit your needs, it's a solid choice. With a rolling release model
-                                    and a
                                     wealth of user-contributed packages, Arch Linux offers a clean slate to build your
-                                    computing environment.</p>
+                                    computing environment.
+                                </p>
                             </div>
                         </div>
 
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
+                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod filter-web">
                             <div class="icon-box">
                                 <div class="icon">
                                     <img src="assets/img/docker.png" alt="docker-logo" />
@@ -414,68 +469,15 @@
                                 </p>
                             </div>
                         </div>
-
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-web filter-prod filter-hobby">
-                            <div class="icon-box">
-                                <div class="icon"><i class="bx bx-server"></i></div>
-                                <h4 class="title"><a>Server Management</a></h4>
-                                <p class="description">Since 2018, I've been diving into the world of server
-                                    administration,
-                                    experimenting with various hardware setups. It's been an enriching journey that's
-                                    expanded my technical horizons. I've come to appreciate the art of keeping servers
-                                    running smoothly and securely. Additionally, delving into DevOps activities has
-                                    allowed
-                                    me to bridge the gap between development and operations, streamlining processes and
-                                    improving overall efficiency.</p>
                     </div>
                 </div>
-
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby">
-                            <div class="icon-box">
-                                <div class="icon"><i class="fa fa-masks-theater"></i></div>
-                                <h4 class="title"><a>Theater</a></h4>
-                                <p class="description">
-                                        For seven years, I've been part of a theater group focusing on physical theater, telling stories through movement and
-                                        dance instead of spoken words. This experience has significantly sharpened my non-verbal communication skills and
-                                        deepened my understanding of storytelling.
-                                </p>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-lang filter-web">
-                            <div class="icon-box">
-                                <div class="icon">
-                                    <img src="assets/img/tsjs.png" alt="typescript-logo" />
-                                </div>
-                                <h4 class="title"><a href="https://www.typescriptlang.org">Javascript / Typescript</a></h4>
-                                <p class="description">
-                                        Through university courses and internships, I've developed a strong proficiency in TypeScript, an essential tool for
-                                        modern web development. Its ability to enhance JavaScript with type safety and clearer code structure has made my
-                                        projects more robust and maintainable, positioning me as a skilled developer in this area.
-                                </p>
-                            </div>
-                        </div>
-
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby">
-                            <div class="icon-box">
-                                <div class="icon"><i class="fa fa-basketball"></i></div>
-                                <h4 class="title"><a>Basketball</a></h4>
-                                <p class="description">
-                                    I began my journey as a Table Official in basketball after frequently attending a friend's matches, which led to my
-                                    involvement with the SFT Lugano Tigers. Following a brief training, I assumed the role, contributing to the game by
-                                    managing scores and timekeeping, blending my passion with responsibility.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
         </section><!-- End My Services Section -->
 
         <!-- ======= Testimonials Section ======= -->
         <section id="testimonials" class="testimonials">
             <div class="container position-relative">
 
-                <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
+                <div class="testimonials-slider swiper" data-aos="fade-in">
                     <div class="swiper-wrapper">
 
                         <div class="swiper-slide">
@@ -502,12 +504,14 @@
                                 <h4>Associate Professor - USI</h4>
                                 <p>
                                     <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                                        I had the pleasure of meeting Arnaud when he enrolled in my computer graphics course. He was a very bright, diligent,
+                                    I had the pleasure of meeting Arnaud when he enrolled in my computer graphics
-                                        and active student who always showed a desire to learn. In the summer of 2023, Arnaud worked with me on a research
+                                    course. He was a very bright, diligent, and active student who always showed a
-                                        project related to neuromorphic cameras. Despite being a relatively new topic for him, Arnaud's skills in programming
+                                    desire to learn. In the summer of 2023, Arnaud worked with me on a research project
-                                        and his ability to grasp new concepts in the visual computing field were impressive. He quickly became a valuable
+                                    related to neuromorphic cameras. Despite being a relatively new topic for him,
-                                        contributor to the project. Collaborating with him on this project was truly enjoyable, and I always appreciated his
+                                    Arnaud's skills in programming and his ability to grasp new concepts in the visual
-                                        presence in my classes.
+                                    computing field were impressive. He quickly became a valuable contributor to the
+                                    project. Collaborating with him on this project was truly enjoyable, and I always
+                                    appreciated his presence in my classes.
                                     <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                                 </p>
                             </div>
@@ -520,12 +524,14 @@
                                 <h4>CFO - Zucchetti Switzerland</h4>
                                 <p>
                                     <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                                        The student demonstrated an excellent basic preparation, a great interest in the technologies used, a high degree of
+                                    The student demonstrated an excellent basic preparation, a great interest in the
-                                        autonomy in organizing work schedules and in the ability to acquire the necessary information, and a commendable ability
+                                    technologies used, a high degree of autonomy in organizing work schedules and in the
-                                        to complete the assigned project in an excellent manner within the allotted time.
+                                    ability to acquire the necessary information, and a commendable ability to complete
+                                    the assigned project in an excellent manner within the allotted time.
 
-                                        We also note the student's active participation in periodic meetings of the business team for planning activities, which
+                                    We also note the student's active participation in periodic meetings of the business
-                                        also enabled him to acquire field skills in project management strategies, particularly the SCRUM approach.
+                                    team for planning activities, which also enabled him to acquire field skills in
+                                    project management strategies, particularly the SCRUM approach.
                                     <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                                 </p>
                             </div>
@@ -546,7 +552,7 @@
                 <div class="section-title">
                     <span class="prevent-select">My Portfolio</span>
                     <h2>My Portfolio</h2>
-                    <p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
+                    <p>The building blocks of my career</p>
                 </div>
 
                 <ul id="portfolio-flters" class="d-flex justify-content-center">
@@ -558,121 +564,95 @@
 
                 <div class="row portfolio-container">
 
+                    <!-- TODO: move this section right after the about me section -->
+
                     <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid"
+                        <div class="portfolio-img"><img src="assets/img/portfolio/flying-balls2.png" class="img-fluid"
                                 alt=""></div>
                         <div class="portfolio-info">
-                            <h4>App 1</h4>
+                            <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding
-                            <p>App</p>
+                                    Polygons</a></h4>
-                            <a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery"
+                            <div>
-                                class="portfolio-lightbox preview-link" title="App 1"><i class="bx bx-plus"></i></a>
+                                <p>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
+                                    An extension of a physics engine to simulate polygons,
-                                    class="bx bx-link"></i></a>
+                                    focusing on collision detection and effects in
+                                    real-time, ensuring smooth
+                                    animations.<span class="br"></span>
+                                    Language: C++
+                                </p>
+                                <a href="https://github.com/karma-riuk/flying-balls" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
                         </div>
                     </div>
 
                     <div class="col-lg-4 col-md-6 portfolio-item filter-web">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid"
+                        <div class="portfolio-img"><img src="assets/img/portfolio/esim.jpg" class="img-fluid" alt="">
-                                alt=""></div>
+                        </div>
                         <div class="portfolio-info">
-                            <h4>Web 3</h4>
+                            <h4><a href="https://github.com/karma-riuk/flying-balls">HDR ESIM</a></h4>
-                            <p>Web</p>
+                            <div>
-                            <a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery"
+                                <p>
-                                class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
+                                    Extended a the simulation of an event camera in order to generate HDR
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
+                                    frames.<span class="br"></span>
-                                    class="bx bx-link"></i></a>
+                                    Language: C++
+                                </p>
+                                <a href="https://github.com/karma-riuk/hdr_esim" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
                         </div>
                     </div>
 
                     <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid"
+                        <div class="portfolio-img"><img src="assets/img/portfolio/aoc.jpeg" class="img-fluid" alt="">
-                                alt=""></div>
+                        </div>
                         <div class="portfolio-info">
-                            <h4>App 2</h4>
+                            <h4><a href="https://github.com/karma-riuk/advent-of-code">Advent of Code</a></h4>
-                            <p>App</p>
+                            <div>
-                            <a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery"
+                                <p>
-                                class="portfolio-lightbox preview-link" title="App 2"><i class="bx bx-plus"></i></a>
+                                    Fun coding challenges during christmas.<span class="br"></span>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
+                                    Languages: C++, Go, Python
-                                    class="bx bx-link"></i></a>
+                                </p>
+                                <a href="https://github.com/karma-riuk/advent-of-code" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
                         </div>
                     </div>
 
                     <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid"
+                        <div class="portfolio-img"><img src="assets/img/portfolio/paper-mosaik.png" class="img-fluid"
                                 alt=""></div>
                         <div class="portfolio-info">
-                            <h4>Card 2</h4>
+                            <h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4>
-                            <p>Card</p>
+                            <!-- TODO: makea good readme fo this project -->
-                            <a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery"
+                            <div>
-                                class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a>
+                                <p>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
+                                    A visualization tool to represent reasearchers in terms of their papers
-                                    class="bx bx-link"></i></a>
+                                    and their relationships to other
+                                    researchers.<span class="br"></span>
+                                    Language: Smalltalk (Pharo)
+                                </p>
+                                <a href="https://github.com/karma-riuk/PaperMosaik" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
                             </div>
                         </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-web">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Web 2</h4>
-                            <p>Web</p>
-                            <a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Web 2"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>App 3</h4>
-                            <p>App</p>
-                            <a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="App 3"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
                     </div>
 
                     <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid"
+                        <div class="portfolio-img"><img src="assets/img/portfolio/maze-solver.gif" class="img-fluid"
                                 alt=""></div>
                         <div class="portfolio-info">
-                            <h4>Card 1</h4>
+                            <h4><a href="https://github.com/karma-riuk/maze-sovler-go">Maze Solver</a></h4>
-                            <p>Card</p>
+                            <div>
-                            <a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery"
+                                <p>
-                                class="portfolio-lightbox preview-link" title="Card 1"><i class="bx bx-plus"></i></a>
+                                    A simple maze solver that takes in various types of maze as input and
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
+                                    outputs the solution.<span class="br"></span>
-                                    class="bx bx-link"></i></a>
+                                    Language: Go
+                                </p>
+                                <a href="https://github.com/karma-riuk/maze-sovler-go" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
                             </div>
                         </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Card 3</h4>
-                            <p>Card</p>
-                            <a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Card 3"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-web">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Web 3</h4>
-                            <p>Web</p>
-                            <a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
                     </div>
 
                 </div>