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.css

@@ -1 +1 @@
-:root{--accent:#9b9bff;--background:white;--onBackground:black;--surface:#f4f4f4;--outline:#e0e0e0;--light:#666666;--link:#0069C2;--icons:none;--inverseIcons:invert();}@media(prefers-color-scheme:dark){:root{--accent:#9b9bff;--background:black;--onBackground:white;--surface:#202020;--outline:#3a3a3a;--light:#AAAAAA;--link:#8CB4FF;--icons:invert();--inverseIcons:none;}.button:hover,.button:active{.icon{filter:var(--inverseIcons);transition:all 0.2s ease;}}}@font-face{font-family:"title";src:url("media/fonts/bricolagegrotesque.woff2")format("woff2");}html{box-sizing:border-box;scroll-behavior:smooth;}*,*::before,*::after{box-sizing:inherit;}body{background-color:var(--background);margin:0;}main{margin-top:6em;margin-bottom:2em;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 18em);}/* TEXT */h1,h2,h3{font-family:'title',sans-serif;font-weight:400;color:var(--onBackground);}h1{ font-size:2.5em;margin-bottom:0.25em;margin-top:0;}h2{ font-size:2em;margin-bottom:0.5em;}h3{font-size:1.6em;margin-bottom:0.5em;}p,ol,ul,li,.bold,.light,.credit,.monospace{font-family:system-ui,sans-serif;font-weight:400;font-size:1em;line-height:1.5em;margin-top:0;color:var(--onBackground);flex-wrap:wrap;}a{color:var(--link);}.bold{font-weight:800;}.italic{font-style:italic;}.light,.credit{color:var(--light);}.credit{font-style:italic;}.monospace{font-family:ui-monospace,monospace;background-color:var(--surface);border:1px solid var(--outline);border-radius:0.5em;padding:0.5em;}li{padding-left:0.5em;}.link_title{text-decoration:underline 4px var(--accent);transition:all 0.2s ease-out;}.link_title:hover{margin-right:0.5em;transition:all 0.2s ease-out;}hr{width:100%;border:none;border-top:solid 2px var(--outline);}.card_title,.card_text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2; line-clamp:2;-webkit-box-orient:vertical;margin-top:0.5em;margin-bottom:0;transition:all 0.2s ease-out;}.card_text{color:var(--light);margin-bottom:1em}/* CONTAINERS */.box,.card,.column{display:flex;flex-direction:column;width:100%;}.box{padding:0 1.25em 0 1.25em;}.row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;height:var(--custom_height);}.card{padding:0;position:relative;bottom:0;left:0;filter:drop-shadow(0 0 0 var(--surface));background-color:var(--surface);border-radius:1.5em;border:1px solid var(--outline);transition:all 0.2s ease-out;}.card:hover,.card:active{bottom:1em;left:1em;filter:drop-shadow(-1em 1em 0 var(--accent));background-color:var(--accent);transition:all 0.2s ease-out;border:none;.card_title,.card_text {color:black;transition:all 0.2s ease-out;}}.spacer{width:var(--size);height:var(--size);}@media(min-width:768px){.box{flex-direction:row;max-width:1240px;}.column{width:var(--custom_width);}.row{flex-wrap:nowrap;}}/* ALIGNMENT */.align_left,.align_horizontal,.align_right{display:flex;flex-direction:column;width:100%}.align_top,.align_vertical,.align_bottom{display:flex;flex-direction:row;height:100%;}.align_left,.align_top{align-items:flex-start;}.align_horizontal,.align_vertical{align-items:center;}.align_right,.align_bottom{align-items:flex-end;}/* MEDIA */#portrait{max-width:min(100%,200px);max-height:200px;border-radius:100%;}.image_custom{max-width:min(var(--custom_size),90%);max-height:var(--custom_size);}.icon{filter:var(--icons);}.icon:hover,.icon:active{opacity:0.75;filter:opacity(0.75);-webkit-filter:opacity(0.75);filter:var(--icons);}.card_image{width:100vw;max-width:100%;aspect-ratio:16/10;border-radius:1.5em 1.5em 0 0;object-fit:cover;}.gallery{max-width:100%;border-radius:1em;}/* HEADER & FOOTER */header,footer{display:flex;flex-direction:column;align-items:center;}#header_box,#footer_box{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:5em;padding:0 1.5em 0 1.5em;}#header_box{gap:1em;margin:1em 3em 0 3em;}#footer_box{margin:0 3em 4em 3em;}#header_title{font-family:'title',sans-serif;font-size:1.8em;font-weight:400;text-decoration:none;color:var(--onBackground);transition:all 0.1s ease;}#header_title:hover,#header_title:active{color:var(--accent);transition:all 0.1s ease;}#header_nav{display:flex;flex-direction:row;justify-content:flex-end;background-color:var(--surface);border:solid var(--outline) 1px;border-radius:5em;padding:0.5em 0.6em 0.5em 0.6em;gap:0.25em;}.nav_button,.nav_button_active,.button,.button_active{display:flex;flex-direction:row;align-items:center;font-family:'title',sans-serif;font-size:1em;font-weight:400;text-decoration:none;color:var(--onBackground);background-color:color-mix(in srgb,var(--onBackground),transparent 100%);padding:0.5em 0.8em 0.5em 0.8em;border-radius:1.5em;transition:all 0.2s ease;}.nav_button_active{color:black;background-color:var(--accent);}.nav_button:hover{background-color:color-mix(in srgb,var(--onBackground),transparent 92%);transition:all 0.2s ease;}.footer_item{display:flex;flex-direction:row;justify-content:center;}@media(min-width:922px){#header_box,#footer_box{flex-diLine truncated
+:root{--accent:#9b9bff;--background:white;--onBackground:black;--surface:#f4f4f4;--outline:#e0e0e0;--light:#666666;--link:#0069C2;--icons:none;--inverseIcons:invert();}@media(prefers-color-scheme:dark){:root{--accent:#9b9bff;--background:black;--onBackground:white;--surface:#202020;--outline:#3a3a3a;--light:#AAAAAA;--link:#8CB4FF;--icons:invert();--inverseIcons:none;}.button:hover,.button:active{.icon{filter:var(--inverseIcons);transition:all 0.2s ease;}}}@font-face{font-family:"title";src:url("media/fonts/bricolagegrotesque.woff2")format("woff2");}html{box-sizing:border-box;scroll-behavior:smooth;}*,*::before,*::after{box-sizing:inherit;}body{background-color:var(--background);margin:0;}main{margin-top:6em;margin-bottom:2em;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 18em);}/* TEXT */h1,h2,h3{font-family:'title',sans-serif;font-weight:400;color:var(--onBackground);}h1{ font-size:2.5em;margin-bottom:0.25em;margin-top:0;}h2{ font-size:2em;margin-bottom:0.5em;}h3{font-size:1.6em;margin-bottom:0.5em;}p,ol,ul,li,.bold,.light,.credit,.monospace{font-family:system-ui,sans-serif;font-weight:400;font-size:1em;line-height:1.5em;margin-top:0;color:var(--onBackground);flex-wrap:wrap;}a{color:var(--link);}.bold{font-weight:800;}.italic{font-style:italic;}.light,.credit{color:var(--light);}.credit{font-style:italic;}.monospace{font-family:ui-monospace,monospace;background-color:var(--surface);border:1px solid var(--outline);border-radius:0.5em;padding:0.5em;}li{padding-left:0.5em;}.link_title{text-decoration:underline 4px var(--accent);transition:all 0.2s ease-out;}.link_title:hover{margin-right:0.5em;transition:all 0.2s ease-out;}hr{width:100%;border:none;border-top:solid 2px var(--outline);}.card_title,.card_text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2; line-clamp:2;-webkit-box-orient:vertical;margin-top:0.5em;margin-bottom:0;transition:all 0.2s ease-out;}.card_text{color:var(--light);margin-bottom:1em}/* CONTAINERS */.box,.card,.column{display:flex;flex-direction:column;width:100%;}.box{padding:0 1.25em 0 1.25em;}.row{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;height:var(--custom_height);}.card{padding:0;position:relative;bottom:0;left:0;filter:drop-shadow(0 0 0 var(--surface));background-color:var(--surface);border-radius:1.5em;border:1px solid var(--outline);transition:all 0.2s ease-out;}.card:hover,.card:active{bottom:1em;left:1em;filter:drop-shadow(-1em 1em 0 var(--accent));background-color:var(--accent);transition:all 0.2s ease-out;border:none;.card_title,.card_text {color:black;transition:all 0.2s ease-out;} .verified {filter:brightness(0);}}.spacer{width:var(--size);height:var(--size);}@media(min-width:768px){.box{flex-direction:row;max-width:1240px;}.column{width:var(--custom_width);}.row{flex-wrap:nowrap;}}/* ALIGNMENT */.align_left,.align_horizontal,.align_right{display:flex;flex-direction:column;width:100%}.align_top,.align_vertical,.align_bottom{display:flex;flex-direction:row;height:100%;}.align_left,.align_top{align-items:flex-start;}.align_horizontal,.align_vertical{align-items:center;}.align_right,.align_bottom{align-items:flex-end;}/* MEDIA */#portrait{max-width:min(100%,200px);max-height:200px;border-radius:100%;}.image_custom{max-width:min(var(--custom_size),90%);max-height:var(--custom_size);}.icon{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);-webkit-filter:opacity(0.75);filter:var(--icons);}.card_image{width:100vw;max-width:100%;aspect-ratio:16/10;border-radius:1.5em 1.5em 0 0;object-fit:cover;}.gallery{max-width:100%;border-radius:1em;}/* HEADER & FOOTER */header,footer{display:flex;flex-direction:column;align-items:center;}#header_box,#footer_box{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:5em;padding:0 1.5em 0 1.5em;}#header_box{gap:1em;margin:1em 3em 0 3em;}#footer_box{margin:0 3em 4em 3em;}#header_title{font-family:'title',sans-serif;font-size:1.8em;font-weight:400;text-decoration:none;color:var(--onBackground);transition:all 0.1s ease;}#header_title:hover,#header_title:active{color:var(--accent);transition:all 0.1s ease;}#header_nav{display:flex;flex-direction:row;justify-content:flex-end;background-color:var(--surface);border:solid var(--outline) 1px;border-radius:5em;padding:0.5em 0.6em 0.5em 0.6em;gap:0.25em;}.nav_button,.nav_button_active,.button,.button_active{display:flex;flex-direction:row;align-items:center;font-family:'title',sans-serif;font-size:1em;font-weight:400;text-decoration:none;color:var(--onBackground);background-color:color-mix(in srgb,var(--onBackground),transparent 100%);padding:0.5em 0.8em 0.5em 0.8em;border-radius:1.5em;transition:all 0.2s ease;}.nav_button_active{color:black;background-color:var(--accent);}.nav_button:hover{background-color:color-mix(in srgb,var(--onBackground),transparent 92%);transitionLine truncated

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);