Big progress on personal cv from pdf to html
This commit is contained in:
parent
88a86fe2b0
commit
23ade8d085
Binary file not shown.
|
After Width: | Height: | Size: 587 KiB |
|
|
@ -1,6 +1,8 @@
|
||||||
|
<!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
import MediaQuery from 'svelte-media-queries';
|
import MediaQuery from 'svelte-media-queries';
|
||||||
|
export let hideOnPrint: boolean;
|
||||||
|
|
||||||
const footerCollapseThreshold : string = '1000px';
|
const footerCollapseThreshold : string = '1000px';
|
||||||
const headerCollapseThreshold : string = '1000px';
|
const headerCollapseThreshold : string = '1000px';
|
||||||
|
|
@ -12,6 +14,13 @@
|
||||||
function resetNavBar() {
|
function resetNavBar() {
|
||||||
navbarHidden = true;
|
navbarHidden = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
onMount(async () => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
hideOnPrint = params.get('hideOnPrint') === '1';
|
||||||
|
console.log(hideOnPrint);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Detect mobile -->
|
<!-- Detect mobile -->
|
||||||
|
|
@ -19,7 +28,7 @@
|
||||||
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
|
<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
|
||||||
|
|
||||||
<!-- Nav bar -->
|
<!-- Nav bar -->
|
||||||
<header>
|
<header class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||||
<div class="nav-bar">
|
<div class="nav-bar">
|
||||||
{#if !headerCollapse}
|
{#if !headerCollapse}
|
||||||
<div class="desktop">
|
<div class="desktop">
|
||||||
|
|
@ -60,7 +69,7 @@
|
||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
<!-- About footer -->
|
<!-- About footer -->
|
||||||
<footer>
|
<footer class="{hideOnPrint ? 'hide-on-print' : ''}">
|
||||||
<div class="about-container">
|
<div class="about-container">
|
||||||
<div class="credits">
|
<div class="credits">
|
||||||
<span>© 2023-2024</span>
|
<span>© 2023-2024</span>
|
||||||
|
|
@ -225,6 +234,12 @@
|
||||||
a:hover {
|
a:hover {
|
||||||
filter: brightness(130%);
|
filter: brightness(130%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.hide-on-print {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
{#if footerCollapse}
|
{#if footerCollapse}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,17 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
|
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
|
||||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||||
import ZhenAboutMe from "./Comps/AboutMe.svelte"
|
import ZhenInformatikTimeline from "./Comps/ZhenInformatikTimeline.svelte"
|
||||||
|
import AboutMe from "./Comps/AboutMe.svelte"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}>
|
<Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}>
|
||||||
<TopAnimatedBackground/>
|
<TopAnimatedBackground/>
|
||||||
|
|
||||||
<ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
|
<ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
|
||||||
<ZhenAboutMe/>
|
<AboutMe/>
|
||||||
|
</ParallaxLayer>
|
||||||
|
|
||||||
|
<ParallaxLayer rate={0.5} offset={0.8} style="background-color: var(--background);">
|
||||||
|
<ZhenInformatikTimeline/>
|
||||||
</ParallaxLayer>
|
</ParallaxLayer>
|
||||||
</Parallax>
|
</Parallax>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import NamePlate from "./NamePlate.svelte";
|
||||||
|
import selfie from "$lib/zhen/cv-comps/zhenSelfie.jpg"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="nameAndImageContainer">
|
||||||
|
<NamePlate/>
|
||||||
|
<img src={selfie} class="selfie-constraints" alt="nothing"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.nameAndImageContainer {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selfie-constraints{
|
||||||
|
padding-top: 2.5mm;
|
||||||
|
|
||||||
|
max-width: 65%;
|
||||||
|
border-radius: 5mm;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<div class="name-plate-container">
|
||||||
|
<span style="text-align: center;">
|
||||||
|
<b>
|
||||||
|
Zhentao Wei
|
||||||
|
</b><br/>
|
||||||
|
(He/Him)
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.name-plate-container{
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 60%;
|
||||||
|
|
||||||
|
/* Bottom border stripe*/
|
||||||
|
border-bottom: 1mm solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import NameAndImage from "../Comps/NameAndImage.svelte";
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="cv-container-container include-in-print">
|
||||||
|
<div class="cv-container">
|
||||||
|
<div id="left-section">
|
||||||
|
<NameAndImage/>
|
||||||
|
</div>
|
||||||
|
<div id="right-section"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.cv-container-container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-container-container * {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-container {
|
||||||
|
width: 210mm;
|
||||||
|
height: 297mm;
|
||||||
|
|
||||||
|
background-color: #eeeeee;
|
||||||
|
|
||||||
|
overflow: visible;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.include-in-print { &, & * {
|
||||||
|
-webkit-print-color-adjust:exact !important;
|
||||||
|
print-color-adjust:exact !important;
|
||||||
|
}}
|
||||||
|
|
||||||
|
#left-section{
|
||||||
|
background-color: #bdd6ee;
|
||||||
|
width: calc(100% / 3 * 1);
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-section{
|
||||||
|
width: calc(100% / 3 * 2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,67 +1,18 @@
|
||||||
<script lang="ts">
|
<div class="public-cv-container">
|
||||||
import Timeline from "../../../comps/timeline/timeline.svelte";
|
<h1 class="bottom-dotted-line">Public CVs</h1>
|
||||||
import TimelineItem from "../../../comps/timeline/timelineItem.svelte";
|
<div style="padding-left: 0.5vw; margin-top: -1vh;">
|
||||||
</script>
|
<b>Epos: </b><a href="/zhen/CVs/epos?hideOnPrint=1" style="color:lightblue;">EposCV.pdf</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Timeline style="padding: 2rem; padding-left: 3vw; padding-bottom: 5rem;">
|
<style>
|
||||||
<TimelineItem
|
.public-cv-container {
|
||||||
date="3.G 10/3-20234"
|
padding-left: 10vw;
|
||||||
title="Prolog Apple device recommendation"
|
padding-top: 5vh;
|
||||||
desc='Et program lavet med Prolog, som finder en tilpassende Apple enhed baseret på dato udgivet og pris af enheden. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Prolog-Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
|
width: 79vw;
|
||||||
imagePath="/portfolios/sveske/prolog/thumb.png"
|
}
|
||||||
/>
|
|
||||||
<TimelineItem
|
.bottom-dotted-line {
|
||||||
date="3.G 3/12-2023"
|
border-bottom: 4px dotted rgb(178, 178, 178);;
|
||||||
title="Extraordinær menneskelig sans"
|
}
|
||||||
desc='Med brug af en M5StickCPlus og en bevægelses sensor, så skabte benjamin og jeg en ekstra menneskelig sans.<br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/HumanInterface - Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
|
</style>
|
||||||
imagePath="/portfolios/sveske/hmi/thumb.png"
|
|
||||||
/>
|
|
||||||
<TimelineItem
|
|
||||||
date="2.G 16/6-2023"
|
|
||||||
title="Otakians"
|
|
||||||
desc='Dette projekt repræsenterer apogeeen af mine anstrengelser og stræben inden for teknologisk innovation. Det er en avanceret webapplikation konstrueret med en sofistikeret arkitektur, der omfatter HTML, CSS, C#, og javascript som fundamentale byggesten. Indlejret i dets omfangsrige struktur findes et imponerende repertoire af funktioner, herunder en grundig præsentationssektion, en dynamisk chatmodul, en omfattende FAQ-sektion og et stringent, indbygget login-system. Projektets kerneformål er at fungere som et digitalt samlingspunkt for tilhængere af anime, kendt som "weebs", hvor de kan dele, diskutere og opbygge fællesskaber om deres passion for denne japanske popkulturform. Med en sofistikeret integration af komplekse algoritmer og brugercentrerede designprincipper stræber denne hjemmeside mod at skabe en opslidende og meningsfuld oplevelse for sine brugere, og dermed forstærke forbindelserne inden for dette særlige interessefællesskab. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Otakians(1).docx" style="color:lightblue;">Rapport</a>'
|
|
||||||
imagePath="/images/Zhen/Infomatik/Otakians.png"
|
|
||||||
/>
|
|
||||||
<TimelineItem
|
|
||||||
date="2.G 10/3-2023"
|
|
||||||
title="Makey Makey: pressure plate"
|
|
||||||
desc="Ved anvendelse af Makey Makey har vi skabt en innovativ og funktionel trykplade af papir, tape, aluminiumsfolie og selve Makey Makey-enheden. Denne teknologiske opfindelse udgør et paradigmeskift inden for DIY-elektronik og inkorporerer en særegen symbiose af håndværksmæssig finesse og digital innovation. Ved at omfavne en konvergens af analoge og digitale teknologier demonstrerer denne opfindelse et ekstraordinært niveau af teknisk snilde og kreativ tænkning. Gennem en kompleks integration af disse elementer opnår denne trykplade ikke blot funktionalitet, men repræsenterer også en manifestation af menneskelig opfindsomhed og teknologisk fremgang. <br/><br/>Link: <a href='https://www.youtube.com/watch?v=AIUuqfbgKRw' style='color:lightblue;'>Youtube video</a><br/>Link 2: <a href='https://www.youtube.com/watch?v=tJ_N_K_kbjw' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/PressurePlate.pdf' style='color:lightblue;'>Rapport</a>"
|
|
||||||
imagePath="/images/Zhen/Infomatik/PressurePlate.png"
|
|
||||||
/>
|
|
||||||
<TimelineItem
|
|
||||||
date="2.G 11/9-2022"
|
|
||||||
title="Visit copenhagen"
|
|
||||||
desc="Dette projekt inkorporerede en mangefacetteret tilgang med adskillige elementer af gestaltloven, og det udnyttede HTML og CSS til at animere disse aspekter. Den valgte ramme, .NET Blazor, fungerede som fundamentet for implementeringen af disse avancerede visuelle og interaktive komponenter. Gennem en dybdegående anvendelse af komplekse gestaltprincipper blev en symbiotisk syntese opnået, hvilket resulterede i en dynamisk digital oplevelse, der strømlinede brugerinteraktionen og forbedrede æstetikken af det endelige produkt. <br/><br/>Link: <a href='https://youtu.be/S9Rpm12Al0Y' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/VisitCopenhagenRapport(1).docx' style='color:lightblue;'>Rapport</a>"
|
|
||||||
imagePath="/images/Zhen/Infomatik/VisitCopenhagen.png"
|
|
||||||
/>
|
|
||||||
<TimelineItem
|
|
||||||
date="2.G 2022"
|
|
||||||
title="Uncle roger's recipies"
|
|
||||||
desc="Denne sekundære webplatform, udspringende af mine digitale kreationer, udfolder sig som en kyndig panorama over de bedste 5 opskrifter præsenteret af Uncle Rogers. Udformet med pur HTML og anstrøg af CSS, emmer den af enkelhed kombineret med subtil elegance, og inkorporerer diskrete CSS-animationer for at tilføje en dynamisk dimension til brugeroplevelsen. Med en nøje sammensat struktur og en stringent implementering af webteknologier, udforsker den dybden af kulinariske inspirationer fra den anerkendte kogekunstner, alt imens den søger at fremme gastronomisk kreativitet og forfinelse.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/AsiatiskMad.html' style='color:lightblue;'>Rapport</a>"
|
|
||||||
imagePath="/images/Zhen/Infomatik/UncleRogers.png"
|
|
||||||
/>
|
|
||||||
<TimelineItem
|
|
||||||
date="2.G 2022"
|
|
||||||
title="Game rankings website"
|
|
||||||
desc="Denne pionerende webside, skabt med hovedsageligt HTML og et minimængde af CSS, repræsenterer en banebrydende praksis i webudviklingen. Ved at begrænse brugen af CSS til et minimum og ved at undlade JavaScript, demonstrerer den en avantgarde tilgang til design og funktionalitet. Med en fokuseret brug af HTML som kerneelement til opbygning af websiden, fremhæver den vigtigheden af semantisk strukturering og tilgængelighed. Denne minimalistiske tilgang afspejler en dyb forståelse for webudviklingens essentielle principper og skaber samtidig en unik æstetik og brugeroplevelse, der inspirerer til refleksion over konventionelle praksisser inden for digital design.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/SpilHjemmeside.html' style='color:lightblue;'>Rapport</a>"
|
|
||||||
imagePath="/images/Zhen/Infomatik/FirstWebsite.png"
|
|
||||||
/>
|
|
||||||
<TimelineItem
|
|
||||||
date="1.G 2022"
|
|
||||||
title="Quest for grass"
|
|
||||||
desc="Dette avancerede projekt udvikler et dynamisk spil i Unity-miljøet med en sofistikeret integration af en database, der skrupelløst opbevarer og manipulerer brugerens præstationer. Den benyttede database struktureres og drives af den altopslugende Google Firebase-platform, der leverer en robust og skalerbar infrastruktur til håndtering af data. Gennem en sublim kombination af komplekse algoritmer og interaktionelle mekanismer, optimeres brugeroplevelsen, og spillets dybde forøges betragteligt. Dette projekt fremhæver det symbiotiske forhold mellem teknologiske avancer og kreative visioner, idet det udforsker nye horisonter inden for spiludvikling og datamanagement. <br/><br/>Link: <a href='https://youtu.be/Vb_2U2lyVFY' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik1g/DatabaseProjektTouchGrass.docx' style='color:lightblue;'>Rapport</a>"
|
|
||||||
imagePath="/images/Zhen/Infomatik/QuestForGrass.png"
|
|
||||||
/>
|
|
||||||
<TimelineItem
|
|
||||||
date="1.G 2022"
|
|
||||||
desc="Denne applikation, konstrueret i AppLab, agerer som en præcis katalysator, der faciliterer forståelsen af de 13 globale bæredygtighedsmål fastsat af De Forenede Nationer. Med en intuitiv brugergrænseflade og en enestående funktionalitet præsenterer den en omfattende oversigt over disse komplekse mål, hvilket muliggør en dybdegående indsigt i de multidimensionelle aspekter af global udvikling. Med en elegant integration af avancerede algoritmer og interaktive elementer guider denne app brugeren gennem et labyrintisk landskab af komplekse socioøkonomiske og miljømæssige koncepter, hvilket fremmer en dybere forståelse og engagement i bestræbelserne på at opnå en mere bæredygtig planet.<br/><br/>Link: <a href='/portfolios/alex/Informatik1g/AppLabRapport(1).docx' style='color:lightblue;'>Rapport</a>"
|
|
||||||
title="App lab verdensmål"
|
|
||||||
imagePath="/images/Zhen/Infomatik/1.G-App.png"
|
|
||||||
/>
|
|
||||||
<TimelineItem
|
|
||||||
date="1.G 2021"
|
|
||||||
desc='Dette initiativ involverede implementeringen af et avanceret værktøj fra Google kendt som "teachable machine", som blev konfigureret til at identificere en række håndudtryk. Med en kompleks kombination af maskinlæringsteknikker og datadrevne algoritmer blev dette projekt realiseret med ekspertise og præcision. Ved at udnytte avancerede neurale netværk og dybdegående datasæt muliggjorde dette værktøj en dybtgående analyse af de subtile nuancer i håndgester, hvilket resulterede i en imponerende nøjagtighed og pålidelighed i genkendelsen af disse udtryk. Dette projekt repræsenterer et skridt fremad i feltet for computer vision og maskinlæring, og det illustrerer potentialet i at anvende avancerede teknologier til at løse komplekse problemer inden for menneske-maskine-interaktion. <br/><br/>Link: <a href="/portfolios/alex/Informatik1g/MachineLearningRapport.docx" style="color:lightblue;">Rapport</a>'
|
|
||||||
title="Machine learning: gesture recognition"
|
|
||||||
imagePath="/portfolios/sveske/teachable_machine/thumb.png"
|
|
||||||
/>
|
|
||||||
</Timeline>
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Timeline from "../../../comps/timeline/timeline.svelte";
|
||||||
|
import TimelineItem from "../../../comps/timeline/timelineItem.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Timeline style="padding: 2rem; padding-left: 3vw; padding-bottom: 5rem;">
|
||||||
|
<TimelineItem
|
||||||
|
date="3.G 10/3-20234"
|
||||||
|
title="Prolog Apple device recommendation"
|
||||||
|
desc='Et program lavet med Prolog, som finder en tilpassende Apple enhed baseret på dato udgivet og pris af enheden. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Prolog-Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
|
||||||
|
imagePath="/portfolios/sveske/prolog/thumb.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="3.G 3/12-2023"
|
||||||
|
title="Extraordinær menneskelig sans"
|
||||||
|
desc='Med brug af en M5StickCPlus og en bevægelses sensor, så skabte benjamin og jeg en ekstra menneskelig sans.<br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/HumanInterface - Rapport-1.pdf" style="color:lightblue;">Rapport</a>'
|
||||||
|
imagePath="/portfolios/sveske/hmi/thumb.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="2.G 16/6-2023"
|
||||||
|
title="Otakians"
|
||||||
|
desc='Dette projekt repræsenterer apogeeen af mine anstrengelser og stræben inden for teknologisk innovation. Det er en avanceret webapplikation konstrueret med en sofistikeret arkitektur, der omfatter HTML, CSS, C#, og javascript som fundamentale byggesten. Indlejret i dets omfangsrige struktur findes et imponerende repertoire af funktioner, herunder en grundig præsentationssektion, en dynamisk chatmodul, en omfattende FAQ-sektion og et stringent, indbygget login-system. Projektets kerneformål er at fungere som et digitalt samlingspunkt for tilhængere af anime, kendt som "weebs", hvor de kan dele, diskutere og opbygge fællesskaber om deres passion for denne japanske popkulturform. Med en sofistikeret integration af komplekse algoritmer og brugercentrerede designprincipper stræber denne hjemmeside mod at skabe en opslidende og meningsfuld oplevelse for sine brugere, og dermed forstærke forbindelserne inden for dette særlige interessefællesskab. <br/><br/>Link: <a href="/portfolios/alex/Informatik3g2g/Otakians(1).docx" style="color:lightblue;">Rapport</a>'
|
||||||
|
imagePath="/images/Zhen/Infomatik/Otakians.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="2.G 10/3-2023"
|
||||||
|
title="Makey Makey: pressure plate"
|
||||||
|
desc="Ved anvendelse af Makey Makey har vi skabt en innovativ og funktionel trykplade af papir, tape, aluminiumsfolie og selve Makey Makey-enheden. Denne teknologiske opfindelse udgør et paradigmeskift inden for DIY-elektronik og inkorporerer en særegen symbiose af håndværksmæssig finesse og digital innovation. Ved at omfavne en konvergens af analoge og digitale teknologier demonstrerer denne opfindelse et ekstraordinært niveau af teknisk snilde og kreativ tænkning. Gennem en kompleks integration af disse elementer opnår denne trykplade ikke blot funktionalitet, men repræsenterer også en manifestation af menneskelig opfindsomhed og teknologisk fremgang. <br/><br/>Link: <a href='https://www.youtube.com/watch?v=AIUuqfbgKRw' style='color:lightblue;'>Youtube video</a><br/>Link 2: <a href='https://www.youtube.com/watch?v=tJ_N_K_kbjw' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/PressurePlate.pdf' style='color:lightblue;'>Rapport</a>"
|
||||||
|
imagePath="/images/Zhen/Infomatik/PressurePlate.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="2.G 11/9-2022"
|
||||||
|
title="Visit copenhagen"
|
||||||
|
desc="Dette projekt inkorporerede en mangefacetteret tilgang med adskillige elementer af gestaltloven, og det udnyttede HTML og CSS til at animere disse aspekter. Den valgte ramme, .NET Blazor, fungerede som fundamentet for implementeringen af disse avancerede visuelle og interaktive komponenter. Gennem en dybdegående anvendelse af komplekse gestaltprincipper blev en symbiotisk syntese opnået, hvilket resulterede i en dynamisk digital oplevelse, der strømlinede brugerinteraktionen og forbedrede æstetikken af det endelige produkt. <br/><br/>Link: <a href='https://youtu.be/S9Rpm12Al0Y' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/VisitCopenhagenRapport(1).docx' style='color:lightblue;'>Rapport</a>"
|
||||||
|
imagePath="/images/Zhen/Infomatik/VisitCopenhagen.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="2.G 2022"
|
||||||
|
title="Uncle roger's recipies"
|
||||||
|
desc="Denne sekundære webplatform, udspringende af mine digitale kreationer, udfolder sig som en kyndig panorama over de bedste 5 opskrifter præsenteret af Uncle Rogers. Udformet med pur HTML og anstrøg af CSS, emmer den af enkelhed kombineret med subtil elegance, og inkorporerer diskrete CSS-animationer for at tilføje en dynamisk dimension til brugeroplevelsen. Med en nøje sammensat struktur og en stringent implementering af webteknologier, udforsker den dybden af kulinariske inspirationer fra den anerkendte kogekunstner, alt imens den søger at fremme gastronomisk kreativitet og forfinelse.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/AsiatiskMad.html' style='color:lightblue;'>Rapport</a>"
|
||||||
|
imagePath="/images/Zhen/Infomatik/UncleRogers.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="2.G 2022"
|
||||||
|
title="Game rankings website"
|
||||||
|
desc="Denne pionerende webside, skabt med hovedsageligt HTML og et minimængde af CSS, repræsenterer en banebrydende praksis i webudviklingen. Ved at begrænse brugen af CSS til et minimum og ved at undlade JavaScript, demonstrerer den en avantgarde tilgang til design og funktionalitet. Med en fokuseret brug af HTML som kerneelement til opbygning af websiden, fremhæver den vigtigheden af semantisk strukturering og tilgængelighed. Denne minimalistiske tilgang afspejler en dyb forståelse for webudviklingens essentielle principper og skaber samtidig en unik æstetik og brugeroplevelse, der inspirerer til refleksion over konventionelle praksisser inden for digital design.<br/><br/>Link: <a href='/portfolios/alex/Informatik3g2g/SpilHjemmeside.html' style='color:lightblue;'>Rapport</a>"
|
||||||
|
imagePath="/images/Zhen/Infomatik/FirstWebsite.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="1.G 2022"
|
||||||
|
title="Quest for grass"
|
||||||
|
desc="Dette avancerede projekt udvikler et dynamisk spil i Unity-miljøet med en sofistikeret integration af en database, der skrupelløst opbevarer og manipulerer brugerens præstationer. Den benyttede database struktureres og drives af den altopslugende Google Firebase-platform, der leverer en robust og skalerbar infrastruktur til håndtering af data. Gennem en sublim kombination af komplekse algoritmer og interaktionelle mekanismer, optimeres brugeroplevelsen, og spillets dybde forøges betragteligt. Dette projekt fremhæver det symbiotiske forhold mellem teknologiske avancer og kreative visioner, idet det udforsker nye horisonter inden for spiludvikling og datamanagement. <br/><br/>Link: <a href='https://youtu.be/Vb_2U2lyVFY' style='color:lightblue;'>Youtube video</a> <br/><br/>Link: <a href='/portfolios/alex/Informatik1g/DatabaseProjektTouchGrass.docx' style='color:lightblue;'>Rapport</a>"
|
||||||
|
imagePath="/images/Zhen/Infomatik/QuestForGrass.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="1.G 2022"
|
||||||
|
desc="Denne applikation, konstrueret i AppLab, agerer som en præcis katalysator, der faciliterer forståelsen af de 13 globale bæredygtighedsmål fastsat af De Forenede Nationer. Med en intuitiv brugergrænseflade og en enestående funktionalitet præsenterer den en omfattende oversigt over disse komplekse mål, hvilket muliggør en dybdegående indsigt i de multidimensionelle aspekter af global udvikling. Med en elegant integration af avancerede algoritmer og interaktive elementer guider denne app brugeren gennem et labyrintisk landskab af komplekse socioøkonomiske og miljømæssige koncepter, hvilket fremmer en dybere forståelse og engagement i bestræbelserne på at opnå en mere bæredygtig planet.<br/><br/>Link: <a href='/portfolios/alex/Informatik1g/AppLabRapport(1).docx' style='color:lightblue;'>Rapport</a>"
|
||||||
|
title="App lab verdensmål"
|
||||||
|
imagePath="/images/Zhen/Infomatik/1.G-App.png"
|
||||||
|
/>
|
||||||
|
<TimelineItem
|
||||||
|
date="1.G 2021"
|
||||||
|
desc='Dette initiativ involverede implementeringen af et avanceret værktøj fra Google kendt som "teachable machine", som blev konfigureret til at identificere en række håndudtryk. Med en kompleks kombination af maskinlæringsteknikker og datadrevne algoritmer blev dette projekt realiseret med ekspertise og præcision. Ved at udnytte avancerede neurale netværk og dybdegående datasæt muliggjorde dette værktøj en dybtgående analyse af de subtile nuancer i håndgester, hvilket resulterede i en imponerende nøjagtighed og pålidelighed i genkendelsen af disse udtryk. Dette projekt repræsenterer et skridt fremad i feltet for computer vision og maskinlæring, og det illustrerer potentialet i at anvende avancerede teknologier til at løse komplekse problemer inden for menneske-maskine-interaktion. <br/><br/>Link: <a href="/portfolios/alex/Informatik1g/MachineLearningRapport.docx" style="color:lightblue;">Rapport</a>'
|
||||||
|
title="Machine learning: gesture recognition"
|
||||||
|
imagePath="/portfolios/sveske/teachable_machine/thumb.png"
|
||||||
|
/>
|
||||||
|
</Timeline>
|
||||||
|
|
@ -31,3 +31,14 @@ code {
|
||||||
padding: 0 .5rem;
|
padding: 0 .5rem;
|
||||||
background-color: #333333;
|
background-color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Print-specific styles */
|
||||||
|
@media print {
|
||||||
|
.hide-on-print {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue