this repo has no description

🍱 Add SHS stuff

gwen.works bfc752c8 e76ae927

verified
+1
.gitignore
··· 32 33 test-results/ 34 .netlify/
··· 32 33 test-results/ 34 .netlify/ 35 + src/pages/shs/pomi-documents.zip
+219
src/components/SHSNavigation.astro
···
··· 1 + <script> 2 + function toggleNav({ 3 + currentTarget, 4 + }: MouseEvent & { currentTarget: HTMLButtonElement }) { 5 + const nav = document.getElementById("nav")!; 6 + const closeIcon: SVGElement = currentTarget.querySelector(".icon-close")!; 7 + const openIcon: SVGElement = currentTarget.querySelector(".icon-open")!; 8 + 9 + if (nav.dataset.state === "open") { 10 + // Unlock body scroll 11 + document.body.style.overflow = "auto"; 12 + closeIcon.style.display = "none"; 13 + openIcon.style.display = "block"; 14 + nav.dataset.state = "closed"; 15 + } else { 16 + // Lock body scroll 17 + document.body.style.overflow = "hidden"; 18 + closeIcon.style.display = "block"; 19 + openIcon.style.display = "none"; 20 + nav.dataset.state = "open"; 21 + } 22 + } 23 + 24 + document.getElementById("nav-toggle")!.addEventListener("click", (event) => { 25 + if (!event.currentTarget) return; 26 + if (!(event.currentTarget instanceof HTMLButtonElement)) return; 27 + // @ts-ignore 28 + toggleNav(event); 29 + }); 30 + </script> 31 + 32 + <nav id="nav" data-state="closed"> 33 + <button id="nav-toggle" 34 + ><svg 35 + class="icon icon-open" 36 + width="21" 37 + height="21" 38 + viewBox="0 0 21 21" 39 + fill="none" 40 + version="1.1" 41 + id="svg4" 42 + xmlns="http://www.w3.org/2000/svg" 43 + xmlns:svg="http://www.w3.org/2000/svg" 44 + ><rect 45 + style="fill:currentColor;stroke:none;stroke-width:1.21228" 46 + id="rect267" 47 + width="21.059233" 48 + height="3.8504581" 49 + x="-0.060698148" 50 + y="-0.019991903"></rect> 51 + <rect 52 + style="fill:currentColor;stroke:none;stroke-width:1.21228" 53 + id="rect267-3" 54 + width="21.059233" 55 + height="3.8504581" 56 + x="-0.059473194" 57 + y="8.125473"></rect> 58 + <rect 59 + style="fill:currentColor;stroke:none;stroke-width:1.21228" 60 + id="rect267-3-6" 61 + width="21.059233" 62 + height="3.8504581" 63 + x="-0.058047015" 64 + y="17.126282"></rect></svg 65 + > 66 + <svg 67 + class="icon icon-close" 68 + style="display: none;" 69 + width="21" 70 + height="21" 71 + viewBox="0 0 21 21" 72 + fill="none" 73 + version="1.1" 74 + id="svg4" 75 + xmlns="http://www.w3.org/2000/svg" 76 + xmlns:svg="http://www.w3.org/2000/svg" 77 + ><path 78 + style="fill:none;stroke:currentColor;stroke-width:2.92512;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 79 + d="M 1.1074475,1.058842 19.968611,19.968194" 80 + id="path1195" 81 + sodipodi:nodetypes="cc"></path> 82 + <path 83 + style="fill:none;stroke:currentColor;stroke-width:2.92512;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 84 + d="M 19.930427,1.0451515 1.0692456,19.954514" 85 + id="path1195-6" 86 + sodipodi:nodetypes="cc"></path></svg 87 + ></button 88 + ><ul> 89 + <li> 90 + <a href="/">works</a> 91 + </li><li> 92 + <a href="/shs/career">career</a> 93 + </li><li> 94 + <a href="/shs/course">course</a> 95 + </li><li> 96 + <a href="/shs/engagement">engagement</a> 97 + </li><li> 98 + <a href="/shs/international">international</a> 99 + </li> 100 + </ul> 101 + </nav> 102 + 103 + <style type="text/css"> 104 + #nav-toggle { 105 + font-size: 3rem; 106 + cursor: pointer; 107 + color: var(--primary, black); 108 + } 109 + 110 + nav { 111 + position: fixed; 112 + top: 0; 113 + right: 0; 114 + font-size: 2rem; 115 + z-index: 10; 116 + } 117 + 118 + ul { 119 + display: flex; 120 + flex-direction: column; 121 + flex-wrap: wrap; 122 + justify-content: center; 123 + list-style: none; 124 + padding: 1rem 2rem; 125 + margin: 0; 126 + gap: 0.75rem; 127 + } 128 + 129 + li { 130 + display: block; 131 + text-align: right; 132 + } 133 + 134 + li::before { 135 + content: ""; 136 + } 137 + 138 + a { 139 + font-weight: 600; 140 + text-decoration: none; 141 + opacity: 0.75; 142 + transition: all 0.125s ease; 143 + } 144 + 145 + a:hover, 146 + a:focus-visible { 147 + opacity: 1; 148 + font-weight: 800; 149 + } 150 + 151 + @media (max-width: 800px) { 152 + #nav-toggle { 153 + position: fixed; 154 + bottom: 0; 155 + right: 0; 156 + width: 5rem; 157 + height: 5rem; 158 + z-index: 100; 159 + padding: 0.5rem; 160 + outline: none; 161 + border: none; 162 + background-color: var(--secondary, #fff); 163 + box-shadow: none; 164 + display: flex; 165 + justify-content: center; 166 + align-items: center; 167 + } 168 + 169 + #nav-toggle .icon { 170 + height: 1em; 171 + width: 1em; 172 + color: var(--primary, #000); 173 + } 174 + 175 + nav#nav:not([data-state="open"]) > ul { 176 + display: none; 177 + } 178 + 179 + nav#nav[data-state="open"] { 180 + position: fixed; 181 + top: 0; 182 + right: 0; 183 + bottom: 0; 184 + left: 0; 185 + z-index: 100; 186 + background-color: var(--secondary, #fff); 187 + overflow: auto; 188 + display: flex; 189 + justify-content: end; 190 + } 191 + 192 + nav#nav[data-state="open"] ul a { 193 + font-size: calc(min(12vw, 10vh)); 194 + } 195 + 196 + nav#nav[data-state="open"] ul { 197 + flex-direction: column-reverse; 198 + align-content: center; 199 + justify-content: end; 200 + margin-right: 2rem; 201 + margin-bottom: 5rem; 202 + } 203 + 204 + nav#nav[data-state="open"] ul li { 205 + padding: 0; 206 + text-align: right; 207 + } 208 + } 209 + 210 + @media (min-width: 800px) { 211 + #nav-toggle { 212 + display: none; 213 + } 214 + 215 + main { 216 + padding-top: 5rem; 217 + } 218 + } 219 + </style>
+177
src/layouts/SHS.astro
···
··· 1 + --- 2 + import YAML from "yaml"; 3 + import { getCollection } from "astro:content"; 4 + import Bare from "./Bare.astro"; 5 + import { setCssColors } from "../colors"; 6 + import SHSNavigation from "../components/SHSNavigation.astro"; 7 + 8 + interface Props { 9 + /** 10 + * Colors to use for the layout. 11 + * Sets CSS variables --primary, --secondary, and ---tertiary. 12 + */ 13 + colors?: { primary: string; secondary: string; tertiary: string }; 14 + /** 15 + * Client-side redirect URL. 16 + */ 17 + clientSideRedirect?: string; 18 + } 19 + --- 20 + 21 + <Bare 22 + htmlAttributes={{ 23 + lang: Astro.locals.locale || Astro.locals.lang, 24 + style: setCssColors(Astro.props.colors), 25 + }} 26 + > 27 + { 28 + Astro.props.clientSideRedirect ? ( 29 + <Fragment slot="head"> 30 + <title>Redirecting to {Astro.props.clientSideRedirect}</title> 31 + <meta 32 + http-equiv="refresh" 33 + content={`0; url=${Astro.props.clientSideRedirect}`} 34 + /> 35 + <link rel="canonical" href={Astro.props.clientSideRedirect} /> 36 + </Fragment> 37 + ) : ( 38 + <title slot="head">gwen.works</title> 39 + ) 40 + } 41 + <SHSNavigation /> 42 + <div class="main-wrapper"> 43 + <slot /> 44 + </div> 45 + <footer> 46 + <p> 47 + made with <a href="/ortfo">ortfo/db</a> &amp; <a 48 + href="https://astro.build">astro</a 49 + > 50 + </p> 51 + 52 + <p>&lt;3 Gwenn {new Date().getFullYear()}</p> 53 + 54 + <p>generative ai cannot make art</p> 55 + 56 + <ul> 57 + { 58 + (await getCollection("sites")).map( 59 + ({ data: { name, url, purpose } }) => ( 60 + <> 61 + <li> 62 + <a href={url}>{`/to/${name}`.padEnd(15)}</a> 63 + <span class="purpose">{purpose}</span> 64 + </li> 65 + </> 66 + ), 67 + ) 68 + } 69 + </ul> 70 + 71 + <section class="technical"> 72 + <slot name="technical-pre" /> 73 + { 74 + Astro.locals.buildCommit && ( 75 + <a 76 + href={`https://github.com/gwennlbh/portfolio/commit/${Astro.locals.buildCommit}`} 77 + > 78 + <pre>{Astro.locals.buildCommit?.slice(0, 8)}</pre> 79 + </a> 80 + ) 81 + } 82 + <pre>loc {Astro.locals.locale}</pre> 83 + <pre>lng {Astro.locals.lang}</pre> 84 + <slot name="technical-post" /> 85 + </section> 86 + </footer> 87 + </Bare> 88 + 89 + <style> 90 + footer { 91 + margin-top: 5rem; 92 + display: flex; 93 + flex-direction: column; 94 + /* XXX: same as work pages' main section max-width */ 95 + max-width: 80rem; 96 + gap: 3rem; 97 + padding: 2rem; 98 + font-family: 99 + Victor Mono, 100 + monospace; 101 + } 102 + 103 + footer, 104 + footer :global(a) { 105 + color: var(--tertiary, white); 106 + background-color: var(--primary, black); 107 + } 108 + 109 + footer ul { 110 + display: flex; 111 + flex-direction: column; 112 + gap: 0.5em; 113 + list-style: none; 114 + padding: 0; 115 + } 116 + 117 + footer ul a { 118 + white-space: pre; 119 + } 120 + 121 + footer ul .purpose { 122 + font-style: italic; 123 + opacity: 0.75; 124 + } 125 + 126 + footer .technical { 127 + display: flex; 128 + align-items: center; 129 + flex-wrap: wrap; 130 + gap: 1em; 131 + } 132 + 133 + :global(p, p > *) { 134 + line-height: 1.2; 135 + } 136 + :global(ul, li, h1, h2, p) { 137 + padding: 0; 138 + margin: 0; 139 + } 140 + :global(pre) { 141 + font-family: inherit; 142 + font-size: 1em; 143 + } 144 + :global(a:not(.block-link)) { 145 + color: var(--primary, black); 146 + text-underline-offset: 5px; 147 + text-decoration-thickness: 1.5px; 148 + transition: all 0.125s; 149 + } 150 + :global(a:not(.block-link):hover, a:not(.block-link):focus-visible) { 151 + font-weight: bold; 152 + text-underline-offset: calc(5px - 1px); 153 + text-decoration-thickness: 3px; 154 + } 155 + :global(ul) { 156 + list-style: none; 157 + } 158 + :global(ul li::before) { 159 + content: "— "; 160 + opacity: 0.5; 161 + font-weight: bold; 162 + } 163 + body { 164 + --pad: 2rem; 165 + padding: var(--pad); 166 + width: calc(100% - 2 * var(--pad)); 167 + height: calc(100% - 2 * var(--pad)); 168 + display: flex; 169 + flex-direction: column; 170 + gap: 2rem; 171 + } 172 + .main-wrapper { 173 + font-size: 1.5rem; 174 + line-height: 1.5; 175 + max-width: min(80ch, 100%); 176 + } 177 + </style>
+12
src/pages/shs/career.astro
···
··· 1 + --- 2 + import SHS from "../../layouts/SHS.astro"; 3 + --- 4 + 5 + <SHS> 6 + <main> 7 + <h1>Career development</h1> 8 + <a href="/to/github"> Github profile (social coding platform) </a> 9 + <br> 10 + <a href="/resume"> Resume </a> 11 + </main> 12 + </SHS>
+42
src/pages/shs/course.astro
···
··· 1 + --- 2 + import SHS from "../../layouts/SHS.astro"; 3 + --- 4 + 5 + <SHS> 6 + <main> 7 + <h1>Education</h1> 8 + <section> 9 + <p>2019 to 2022</p> 10 + <h2>Preparatory classes</h2> 11 + <p> 12 + Intensive 2-year program in mathematics and physics, preparing for the 13 + entrance exams to top-ranking French engineering schools. 14 + <a 15 + href="https://fr.wikipedia.org/wiki/Classes_pr%C3%A9paratoires_aux_grandes_%C3%A9coles" 16 + > 17 + Learn more 18 + </a> 19 + </p> 20 + </section> 21 + <section> 22 + <p>2022 to 2023</p> 23 + <h2>ENSEEIHT, first year</h2> 24 + <p> 25 + Computer science major 26 + <a 27 + href="https://www.enseeiht.fr/en/training/full-time-engineering-program/sn.html" 28 + > 29 + Learn more 30 + </a> 31 + </p> 32 + </section> 33 + <section> 34 + <p>2023 to 2024</p> 35 + <h2>ENSEEIHT, second year</h2> 36 + <p> 37 + Networks and architecture minor (first semester), then multimedia and 38 + image minor (second semester) 39 + </p> 40 + </section> 41 + </main> 42 + </SHS>
+38
src/pages/shs/engagement.astro
···
··· 1 + --- 2 + import SHS from "../../layouts/SHS.astro"; 3 + --- 4 + 5 + <SHS> 6 + <main> 7 + <h2>Involvement in student life</h2> 8 + <section> 9 + <img src="https://churros.inpt.fr/storage/groups/n7beats-n7.png" /> 10 + <h3>n7beats</h3> 11 + <p> 12 + Last year, I picked up a club that was dead since a few years, <em 13 + >n7beats</em 14 + >. It's a club that helps students that want to learn or improve their 15 + music-making skills. I really like creating music, and I wanted to share 16 + that with other students. 17 + </p> 18 + <a href="https://n7beats.org"> Visit n7beats </a> 19 + </section> 20 + <section> 21 + <h3>Loca7</h3> 22 + <p> 23 + Last year, I re-built 24 + <em> Loca7 </em> from the ground up, the website that connects landlords 25 + in the area with students of the school. 26 + </p> 27 + <a href="https://loca7.fr"> Visit Loca7 </a> 28 + <a href="https://en.gwen.works/loca7"> Learn more </a> 29 + </section> 30 + <h3>Churros</h3> 31 + <p> 32 + I continue to work on the app that we, at net7, released at the start of 33 + this school year, <em>Churros</em>. It's a web application that powers the 34 + entire student life of the school. 35 + </p> 36 + <a href="https://en.gwen.works/churros"> Learn more </a> 37 + </main> 38 + </SHS>
+51
src/pages/shs/international.astro
···
··· 1 + --- 2 + import SHS from "../../layouts/SHS.astro"; 3 + --- 4 + 5 + <SHS> 6 + <main> 7 + <h1>International mobility</h1> 8 + <h2> 9 + Seven weeks in 10 + <abbr title="Japan">日本</abbr> 11 + <sup> Japan </sup> 12 + </h2> 13 + <p> 14 + I took Japanese as a second language course. I learned to read characters 15 + of both Japanese syllabaries, ひらがな (hiragana) & カタカナ (katakana). I 16 + then actually went there for almost two months! It was a great experience 17 + to discover the culture and daily life in another continent. 18 + </p> 19 + <ul> 20 + <li>Japanese language courses @ 横浜</li> 21 + <li>Internship @ 山中湖</li> 22 + </ul> 23 + <h2> 24 + Two weeks in 25 + <abbr title="Morocco"> المملكة المغربية </abbr><sup>Morocco</sup> 26 + </h2> 27 + <h2>POMI Module</h2> 28 + <dl> 29 + <dt>Interculturality video</dt> 30 + <dd> 31 + <iframe 32 + width="560" 33 + height="315" 34 + src="https://www.youtube.com/embed/6rKUK1bhlOQ?si=KursnTE_a2igbRm8" 35 + title="YouTube video player" 36 + frameborder="0" 37 + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 38 + referrerpolicy="strict-origin-when-cross-origin" 39 + allowfullscreen></iframe> 40 + <br /> 41 + <a href="https://youtu.be/6rKUK1bhlOQ"> on YouTube </a> 42 + </dd> 43 + <dt>Documents</dt> 44 + <dd> 45 + <a href="https://media.gwen.works/pomi-documents.zip" 46 + >download (.zip archive)</a 47 + > 48 + </dd> 49 + </dl> 50 + </main> 51 + </SHS>