add checkmarks for recruiters

projects.html

@@ -39,6 +39,15 @@
         </div>
         <!-- Tags -->
         <div class="spacer" style="--size: 1em;"></div>
+        <!-- <div class="spacer" style="--size: 0.5em;"></div>
+        <div class="box">
+            <div class="column" style="width: 100%; background-color: var(--accent); border-radius: 1em; padding: 1em 1em 0 1em;">
+                <h3 style="color: black; margin-top: 0; margin-bottom: 0.5em">Are you a recruiter?</h3>
+                <p style="color: black;">If you wish to see case studies and other previous works, <a href="#" class="bold" style="color: black; text-decoration: underline dotted; text-decoration-thickness: 2px;">click here</a>. 
+                    The projects you might find interesting on this page are marked with a  <img class="verified" style="filter: brightness(0); top: 0.35em;" src="media/icons/verified.png" />
+            </div>
+        </div>
+        <div class="spacer" style="--size: 1.5em;"></div> -->
         <div class="box">
             <div class="row" style="gap: 0.75em;">
                 <a href="#animation" class="button">Animation</a>
@@ -55,19 +64,6 @@
                 <div class="spacer" style="--size: 2em;"></div>
                 <h2 id="animation">Animation</h2>
                 <div class="row" style="gap: 2em">
-                    <!-- <div class="column" style="--custom_width: 33%; gap: 1em">
-                        <a href="projects/patatotapopata/index.html" class="card" style="text-decoration: none;">
-                            <img src="projects/patatotapopata/thumb_makingof.png" alt="The Making Of Patatotapopata" title="The Making Of Patatotapopata" class="card_image"/>
-                            <div class="box">
-                                <div class="column" style="width: 100%;">
-                                    <h3 class="card_title" style="-webkit-line-clamp: 1; line-clamp: 1;">The Making Of Patatotapo pata</h3>
-                                    <p class="card_text">
-                                        All the steps of the making of Patatotapopata from the storyboard to the final cut. 
-                                    </p>
-                                </div>
-                            </div>
-                        </a>
-                    </div> -->
                     <div class="column" style="--custom_width: 33%; gap: 1em">
                         <a href="projects/rickroll/index.html" class="card" style="text-decoration: none;">
                             <img src="projects/rickroll/thumb.png" alt="Never Gonna Give You Up (Splatoon version)" title="Never Gonna Give You Up (Splatoon version)" class="card_image"/>
@@ -86,7 +82,7 @@
                             <img src="projects/kaya/thumb.png" alt="Kaya sur la banquise" title="Kaya sur la banquise" class="card_image"/>
                             <div class="box">
                                 <div class="column" style="width: 100%;">
-                                    <h3 class="card_title">Kaya sur la banquise</h3>
+                                    <h3 class="card_title">Kaya sur la banquise <img class="verified" src="media/icons/verified.png" /></h3>
                                     <p class="card_text">
                                         A puppet show telling the story of Kaya, a young inuit girl who seeks a magic flower.
                                     </p>
@@ -99,7 +95,7 @@
                             <img src="projects/patatotapopata/thumb.png" alt="Patatotapopata" title="Patatotapopata" class="card_image"/>
                             <div class="box">
                                 <div class="column" style="width: 100%;">
-                                    <h3 class="card_title">Patatotapopata</h3>
+                                    <h3 class="card_title">Patatotapopata <img class="verified" src="media/icons/verified.png" /></h3>
                                     <p class="card_text">
                                         A 30 seconds 3D animated short film about choice, freedom and death.
                                     </p>
@@ -122,7 +118,7 @@
                             <img src="projects/moxxy/thumb.png" alt="Moxxy" title="Moxxy" class="card_image"/>
                             <div class="box">
                                 <div class="column" style="width: 100%;">
-                                    <h3 class="card_title">Moxxy</h3>
+                                    <h3 class="card_title">Moxxy <img class="verified" src="media/icons/verified.png" /></h3>
                                     <p class="card_text">
                                         A modern open source XMPP client for Android written in Flutter.
                                     </p>
@@ -143,19 +139,6 @@
                             </div>
                         </a>
                     </div>
-                    <!-- <div class="column" style="--custom_width: 33%; gap: 1em">
-                        <a href="projects/yeepme_download/index.html" class="card" style="text-decoration: none;">
-                            <img src="projects/yeepme_download/thumb.png" alt="YEEP.ME Download Center" title="YEEP.ME Download Center" class="card_image"/>
-                            <div class="box">
-                                <div class="column" style="width: 100%;">
-                                    <h3 class="card_title">Brand Download Center</h3>
-                                    <p class="card_text">
-                                        Redesign and simplified management for a website listing product manuals and documents.
-                                    </p>
-                                </div>
-                            </div>
-                        </a>
-                    </div> -->
                     <div class="column" style="--custom_width: 33%; gap: 1em"></div>
                 </div>
             </div>
@@ -172,7 +155,7 @@
                             <img src="projects/gang/thumb.png" alt="Gang" title="Gang" class="card_image"/>
                             <div class="box">
                                 <div class="column" style="width: 100%;">
-                                    <h3 class="card_title">Gang</h3>
+                                    <h3 class="card_title">Gang <img class="verified" src="media/icons/verified.png" /></h3>
                                     <p class="card_text">
                                         A complete redesign of the famous card game "Gang of Four" in my own style, with a focus on being clean and accessible to colorblind people. 
                                     </p>

style_expanded.css

@@ -193,6 +193,7 @@ hr {
     border: none;
 
     .card_title, .card_text {color: black; transition: all 0.2s ease-out;}
+    .verified {filter: brightness(0);}
 }
 
 .spacer {
@@ -256,6 +257,15 @@ hr {
     filter: var(--icons);
 }
 
+.verified {
+    filter: var(--icons);
+    position: relative;
+    top: 0.15em;
+    overflow: visible;
+    margin-top: -99em;
+    height: 24px;
+}
+
 .icon:hover, .icon:active {
     opacity: 0.75;
     filter: opacity(0.75);