Merge pull request #111 from jbolns/dev

Updated project > LOKAL

Author: jbolns

public/site-logo.svg

@@ -1,6 +1,5 @@
 import { Component } from "react"
 import * as THREE from 'three';
-//import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 // GLOBALS
@@ -11,8 +10,8 @@ class Animation extends Component {
 
     componentDidMount() {
 
-        // Key modes 
-        let size = 4  // Diameter of main (land) layer (used for sizing other objects)
+        // Key modes
+        let size = this.mount.offsetWidth > 1024 ? 4 : this.mount.offsetWidth > 640 ? 3 : 2  // Diameter of main (land) layer (used for sizing other objects)
         const qual = this.props.qual  // Quality of images uploaded'
         const mode = this.props.mode  // Visualisation for the main (land) layer
         const allVisuals = [
@@ -82,10 +81,9 @@ class Animation extends Component {
         controls.target = new THREE.Vector3(0, 0, 0);
         controls.update();
 
-        // ADD LIGHTING
-        const white = "0xffffff"
-        const ambient = new THREE.AmbientLight("0xffffff", 0.1);
-        const hemi = new THREE.HemisphereLight(white, 1);
+        // ADD LIGHTING        
+        const ambient = new THREE.AmbientLight(0xffffff, 0.1);
+        const hemi = new THREE.HemisphereLight(0xffffff, 1);
         hemi.position.set(10, 10, 0);
         scene.add(ambient, hemi)
 
@@ -143,15 +141,16 @@ class Animation extends Component {
 
 
         // FUNCTION TO DO STUFF ON HOVER
-        this.hoverSituation = () => {
-            raycaster.setFromCamera(pointer, cam)
-            const intersects = raycaster.intersectObjects(scene.children)
-            if (intersects.length >= 1) {
-                for (let i = 0; i < intersects.length; i++) {
-                    console.log("function goes here")
-                }
-            }
-        }
+        // Comments are ugly, but I might use this later, so deal with it
+        //this.hoverSituation = () => {
+        //    raycaster.setFromCamera(pointer, cam)
+        //    const intersects = raycaster.intersectObjects(scene.children)
+        //    if (intersects.length >= 1) {
+        //        for (let i = 0; i < intersects.length; i++) {
+        //            null  // Just a placeholder
+        //        }
+        //    }
+        //}
 
         // FUNCTION TO DO STUFF ON CLICK
         this.clickSituation = () => {
@@ -184,7 +183,7 @@ class Animation extends Component {
 
     // FUNCTION TO GET POINTER COORDINATES AS IT MOVES (FOR HOVER)
     onPointerMove(event) {
-        this.hoverSituation()
+        //this.hoverSituation() // Comments are ugly, but I might use this later, so deal with it
         if (this.mount) {
             pointer.x = (event.clientX / this.mount.offsetWidth) * 2 - 1
             pointer.y = - (event.clientY / this.mount.offsetHeight) * 2 + 1

src/components/Animation.jsx

@@ -55,7 +55,7 @@ const AnimationWrapper = ({ locale }: any) => {
         </div>
 
         <p className="absolute mr-2 top-[6em] right-2 text-2sm text-white">
-          {[wrapperStrings.low, wrapperStrings.mid, wrapperStrings.high].map(q => { return (<button onClick={() => { resetQual(q[defaultLang]) }} className={"border border-dotted px-2 hover:bg-yellow-200 " + ((q[defaultLang] === qual) ? "active" : "")}>{q[locale].toUpperCase()} DEF</button>) })}
+          {[wrapperStrings.low, wrapperStrings.mid, wrapperStrings.high].map(q => { return (<button key={q[locale]} onClick={() => { resetQual(q[defaultLang]) }} className={"border border-dotted px-2 hover:bg-yellow-200 " + ((q[defaultLang] === qual) ? "active" : "")}>{q[locale].toUpperCase()} DEF</button>) })}
         </p>
       </>
     )

src/components/AnimationWrapper.tsx

@@ -45,7 +45,7 @@ items = items.concat(
       slug: item.slug,
       collection: item.collection,
       heroImage: item.data.heroImage,
-      pubDate: item.data.pubDate,
+      pubDate: item.data.updateDate,  // Force latest update to top w/o having to add update time to blog schema
     };
   }),
 );

src/components/Latest.astro

@@ -3,19 +3,19 @@ title: "LOKAL transcriptions"
 description: "A user-friendly application to do AI transcriptions locally (i.e. on your own computer)"
 locale: "en"
 pubDate: "May 17 2024"
-updateDate: "Aug 09 2024"
+updateDate: "Jan 13 2025"
 heroImage: "@assets/banner-lokal.webp"
 stack: ["Python", "TTKBootstrap", "AI", "Digital ethics"]
 tags: ["coding"]
 
 ---
 
-LOKAL (transcriptions) is an **open-source AI app** to easily perform **transcriptions** on regular computers, including laptops and personal computers.
+LOKAL is an **open-source AI app** to easily perform **transcriptions** on regular computers, i.e., laptops and personal computers.
 
-Quality is on-par with on-cloud alternatives. Commercial use is possible.
+It emphasises privacy. Instead of sending your audio (and all data contained in it) out, LOKAL loads the model to your computer and performs the transcription there. You can even select between different model providers, so you choose a model that fits you.
 
 ## Benefits
-LOKAL offers high-quality transcriptions, at low cost, and with privacy in mind.
+LOKAL can help you perform high-quality transcriptions, at low cost, and with privacy in mind.
 - **Low cost.** Payment is voluntary.
 - **High quality.** LOKAL uses industry-standard state-of-the-art multilingual models. Quality is on-par with on-cloud alternatives
 - **Privacy-aware.** Since transcription happens in your computer, privacy risks are reduced.[^1]

src/content/portfolio/en/lokal.mdx

@@ -3,16 +3,16 @@ title: "LOKAL"
 description: "Una aplicación para realizar transcripciones de IA localmente (es decir, en computadores personales)"
 locale: "es"
 pubDate: "May 17 2024"
-updateDate: "Aug 09 2024"
+updateDate: "Jan 13 2025"
 heroImage: "@assets/banner-lokal.webp"
 stack: ["Python", "TTKBootstrap", "AI", "Etica"]
 tags: ["digitales"]
 
 ---
 
-LOKAL (transcripciones) es una **aplicación de inteligencia artificial** para realizar **transcripciones** en computadoras comunes, incluidas laptops y computadores personales.
+LOKAL es una **aplicación de inteligencia artificial** para realizar **transcripciones** en computadoras personales.
 
-La calidad es similar a las alternativas en la nube. El uso comercial está permitido.
+El enfasis es la privacidad. En lugar de enviar tu audio (y los datos que contiene) a un provedor externo, LOKAL baja los modelos a tu computadora y realiza la transcripción ahí. ¡Incluso puedes elegir entre 4 provedores de modelos diferentes!
 
 ## Beneficios
 LOKAL ofrece transcripciones de alta calidad, a bajo costo y teniendo en cuenta la privacidad.

src/content/portfolio/es/lokal.mdx

@@ -3,16 +3,16 @@ title: "LOKAL"
 description: "Sovellus AI-transkriptioiden suorittamiseen paikallisesti (eli omalla tietokoneellasi)"
 locale: "fi"
 pubDate: "May 17 2024"
-updateDate: "Aug 09 2024"
+updateDate: "Jan 13 2025"
 heroImage: "@assets/banner-lokal.webp"
 stack: ["Python", "TTKBootstrap", "AI", "Etiikka"]
 tags: ["koodaus"]
 
 ---
 
-LOKAL (transkriptiot) on tekoälysovellus **transkriptioiden** tekemiseen tavallisilla tietokoneilla (kannettavat tietokoneet ja pöytäkoneet).
+LOKAL on tekoälysovellus **transkriptioiden** tekemiseen tavallisilla tietokoneilla (kannettavat tietokoneet ja pöytäkoneet).
 
-Laatu on yhtä hyvä kuin online-vaihtoehdoissa. Kaupallinen käyttö on mahdollista.
+LOKAL korostaa yksityisyyttä. Sen sijaan, että audio lähetettäisiin (ja kaikki sen sisältämä data) ulos, LOKAL lataa mallin tietokoneellesi ja suorittaa transkription siellä. Voit jopa valita eri malleista juuri sinulle sopivan mallin.
 
 ## Edut
 LOKAL tarjoaa korkealaatuisia transkriptioita alhaisin kustannuksin ja yksityisyyttä ajatellen.

src/content/portfolio/fi/lokal.mdx

@@ -6,7 +6,8 @@ import { site } from "@i18n/sections";
 
 // ACTIONS
 // Get props, incl. locale
-const { title, description, locale, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, locale, pubDate, updateDate, heroImage } = Astro.props;
+console.log(updateDate)
 
 ---
 
@@ -19,8 +20,8 @@ const { title, description, locale, pubDate, updatedDate, heroImage } = Astro.pr
 >
 	<article class="post">
 		<div class="-mt-10 mb-10">
-			<FormattedDate date={updatedDate ? updatedDate : pubDate} />
-			{updatedDate ? <span class="text-sm">({locale === "en" ? "update" : ""})</span> : ""}
+			{updateDate ? <span>{locale === "en" ? "Last update" : locale === "es" ? "Última actualización": "Päivitetty"}</span> : ""}
+			<FormattedDate date={updateDate ? updateDate : pubDate} />
 		</div>
 		<slot />
 

src/layouts/BlogPost.astro

@@ -27,7 +27,9 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
       <span class="text-3xl">
         <p class="my-0">
           My name is <strong
-            ><span class="highlight underline md:no-underline md:c1">José A Bolanos</span></strong
+            ><span class="highlight underline md:no-underline md:c1"
+              >José A Bolanos</span
+            ></strong
           >.
         </p>
       </span>
@@ -51,15 +53,15 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
         <p class="text-1xl before:content-['->']">
           I am at my best when coding in <strong>Python</strong>, <strong
             >VBA</strong
-          >, and <strong>JS</strong> (incl. React, GatsbyJS, and Astro). I also really
-          like <strong>SQL</strong>, up to and including analytical functions.
+          >, and <strong>JS</strong> (incl. vanilla-JS, jQuery, React, GatsbyJS,
+          and Astro). I also really like <strong>SQL</strong>, up to and
+          including analytical functions.
         </p>
         <p class="text-1xl before:content-['->']">
-          I believe that considering digital systems' <strong>energy</strong>, <strong
-            >CO2</strong
-          >, <strong>data</strong> (... requirements) is key to long-term success
-          in a digital world: it can lower costs relative to competitors and reduce
-          business risks ( && impacts).
+          I am also particularly good at <strong
+            >combining languages/stacks</strong
+          >. No idea why. I just have a "knack" for it. For instance, this
+          website combines Astro, React, and Three.js.
         </p>
       </span>
     </div>
@@ -77,16 +79,17 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
 
       <span>
         <p class="text-1xl before:content-['->'] md:text-right">
-          I was <strong>previously in academia</strong> (KCL, TU Dresden, LSE) and
-          remain interested in academic debates.
+          I am a <strong>Political Economist</strong> by training and was previously
+          in academia (KCL, TU Dresden, LSE). The background is a huge <strong
+            >advantage in projects with a digital ethics/sustainability
+            component</strong
+          >, and when facing complex regulations.
         </p>
         <p class="text-1xl before:content-['->'] md:text-right">
-          Since I code well, I am also uniquely qualified for linking the <strong
-            >abstract</strong
-          >
-          ideas in these debates with <strong>practical</strong> and <strong
-            >technical</strong
-          > realities on the ground.
+          Additionally, though oft overlooked, the combined skill set shows I love to <strong>continuously learn</strong> new things.
+          I enjoy <strong>figuring things out</strong>, and therefore <strong
+            >excel in situations where the final solution/product is not initially clear</strong
+          >, irrespective of field.
         </p>
       </span>
     </span>

src/pages/en/index.astro

@@ -27,7 +27,9 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
       <span class="text-3xl">
         <p class="my-0">
           Mi nombre es <strong
-            ><span class="highlight underline md:no-underline md:c1">José A Bolanos</span></strong
+            ><span class="highlight underline md:no-underline md:c1"
+              >José A Bolanos</span
+            ></strong
           >.
         </p>
       </span>
@@ -44,26 +46,23 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
       <span class="flex-initial w-[100%] grow text-3xl">
         <h2 class="mb-0 leading-tight">
           <strong
-            ><span class="highlight c3">Me apasiona programar.</span
-            ></strong
+            ><span class="highlight c3">Me apasiona programar.</span></strong
           >
         </h2>
         <h3 class="hidden leading-tight md:block">Me da paz.</h3>
       </span>
       <span class="">
         <p class="text-1xl before:content-['->']">
-          Me va muy bien con <strong>Python</strong>, <strong
-            >VBA</strong
-          >, y <strong>JS</strong> (incluyendo React, GatsbyJS, y Astro). También
-          me gusta mucho el <strong>SQL</strong>, en particular, las
-          funciones analíticas.
+          Me va muy bien con <strong>Python</strong>, <strong>VBA</strong>, y <strong
+            >JS</strong
+          > (incluyendo React, GatsbyJS, y Astro). También me gusta mucho el <strong
+            >SQL</strong
+          >, en particular, las funciones analíticas.
         </p>
         <p class="text-1xl before:content-['->']">
-          Creo que estar al tanto de lo (... requerimientos) de <strong
-            >energía</strong
-          >, <strong>CO2</strong>, y <strong>data</strong> de los sistemas
-          digitales es clave para el éxito en un mundo digital, pues reduce costos
-          relativo a los competidores y minimiza impactos (... riesgos de negocio).
+          Salí bastante bueno <strong>combinando lenguajes/stacks</strong>. Me
+          gusta. Me sale natural. Por ejemplo, este sitio combina Astro, React,
+          y Three.js.
         </p>
       </span>
     </div>
@@ -81,22 +80,32 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
 
       <span>
         <p class="text-1xl before:content-['->'] md:text-right">
-          <strong>Estuve en el mundo académico</strong> (KCL, TU Dresden, LSE) por un tiempo, y me mantengo interesado en los debates académicos.
+          <strong>Fui académico</strong> (KCL, TU Dresden, LSE) por un tiempo, con
+          énfasis en política pública y sostenibilidad. Esto me da una
+          <strong
+            >gran ventaja en proyectos con componente de ética o sostenibilidad
+            digital</strong
+          >.
         </p>
         <p class="text-1xl before:content-['->'] md:text-right">
-          Dado que programo bien, también estoy excepcionalmente bien calificado para relacionar las <strong
-            >abstracciones</strong
-          > que caracterizan estos debates con las realidades <strong>prácticas</strong> y <strong
-            >técnicas</strong
-          >.
+          Adicionalmente, la combinación de habilidades demuestra que <strong
+            >me encanta aprender</strong
+          > de manera continua. Soy muy curioso, por lo que <strong
+            >me destaco en situaciones en las que la solución/producto final no
+            son claros al principio</strong
+          >, independientemente del campo.
         </p>
       </span>
     </span>
     <br />
     <span>
       <p class="intersect"><strong>Sitio hecho con:</strong></p>
       <span class="flex flex-wrap"
-        >{stack.map((item: string) => <LogoRender label={item} locale={locale} />)}</span
+        >{
+          stack.map((item: string) => (
+            <LogoRender label={item} locale={locale} />
+          ))
+        }</span
       >
     </span>
   </section>

src/pages/es/index.astro

@@ -26,7 +26,10 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
     <div class="lg:flex items-baseline gap-2 md:my-7 intersect">
       <span class="text-3xl">
         <p class="my-0">
-          Minä olen <strong><span class="highlight underline md:no-underline md:c1">José</span></strong>.
+          Minä olen <strong
+            ><span class="highlight underline md:no-underline md:c1">José</span
+            ></strong
+          >.
         </p>
       </span>
 
@@ -49,18 +52,16 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
         <p class="text-1xl before:content-['->']">
           Olen parhaimmillani koodatessa <strong>Pythonilla</strong>, <strong
             >VBA:lla</strong
-          > ja <strong>JS:llä</strong> (mukaan lukien React, GatsbyJS ja Astro).
-          Pidän myös todella paljon <strong>SQL:stä</strong>, analyyttisiin
-          toimintoihin asti.
+          > ja <strong>JS:llä</strong> (myös vanilla-JS, jQuery, React, GatsbyJS
+          ja Astro). Pidän myös todella paljon <strong>SQL:stä</strong>,
+          analyyttiset toiminnot mukaan lukien.
         </p>
 
         <p class="text-1xl before:content-['->']">
-          Uskon, että digitaalisten järjestelmien <strong>energia-</strong>, <strong
-            >hiilidioksidi-</strong
-          > ja
-          <strong>datatarpeiden</strong> (...vaatimusten) hallinta on avain menestykseen
-          digitaalisessa maailmassa. Se voi alentaa kustannuksia verrattuna kilpailijoihin
-          ja vähentää liiketoiminnan riskejä.
+          Olen myös erityisen hyvä <strong
+            >yhdistämään ohjelmointikieliä/stacks</strong
+          >. En tiedä miksi. Minulla vain on se taito. Näillä sivuilla
+          esimerkiksi yhdistyy Astro, React ja Three.js.
         </p>
       </span>
     </div>
@@ -78,14 +79,16 @@ const stack = ["astro", "js", "typescript", "mdx", "tailwind", "threejs"];
 
       <span>
         <p class="text-1xl before:content-['->'] md:text-right">
-          Olin <strong>aiemmin yliopistossa</strong> (KCL, TU Dresden, LSE) ja olen
-          edelleen kiinnostunut akateemisista keskusteluista.
+          Olen <strong>poliittinen taloustieteilijä</strong> koulutukseltani ja olin
+          <strong>aiemmin akateemisessa maailmassa</strong> (KCL, TU Dresden, LSE).
+          Tästä taustasta on valtavasti hyötyä projekteissa, joissa on digitaalisen
+          etiikkaan/kestävään kehitykseen liittyvä aspekti ja kun vastassa on monimutkaisia
+          säädöksiä.
         </p>
         <p class="text-1xl before:content-['->'] md:text-right">
-          Koska koodaan hyvin, olen myös <strong>pätevä yhdistämään</strong> näiden
-          keskustelujen <strong
-            >abstraktit ideat käytäntöön ja tekniseen toteutukseen</strong
-          >.
+          Tämän lisäksi, tämä <strong>monipuolinen osaamiseni</strong> tarkoittaa,
+          että rakastan oppia uutta. Tykkään löytää ratkaisuja ja olen parhaimmillani
+          tilanteissa, missä ratkaisua ei vielä alussa tiedä, riippumatta aihealueesta.
         </p>
       </span>
     </span>

src/pages/fi/index.astro

@@ -28,7 +28,6 @@ export async function getStaticPaths() {
 const project: Project = Astro.props;
 const { Content } = await project.render();
 
-
 ---
 
 <BlogPost {...project.data}>