Revision as of 13:42, 1 December 2025

Wojtek's page

Hi, I'm Wojtek. I'm a student of the 1st year of IMD. I'm interested in coding, making music, writing and creating narratives. If you want to get to know me better, look through my works included on this page. Feel free to leave a comment in the feedback page.

This is how I look like, when I'm holding a present

Guide on pronoucing my name:

Full version: Wojciech [Voytsieh]
Short version: Wojtek [Voyteq]
Hard/Friendly version: Wojcieszek [Voytsiesheck]

My works

THEORETICAL FRAMEWORK

@@ Line 23: / Line 23: @@
 *[[User:Wojtek/Others|Others]]
 *[[User:Wojtek/Feedback|Feedback]]
+<html>
+<style>
+  /* layout */
+  .bookcase {
+    position: relative;
+    width: 100%;
+    max-width: 1000px;          /* adjust as needed */
+    margin: 2rem auto;
+    background-image: url('images/web_0007_back2.png'); /* full bookcase photo */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    aspect-ratio: 16 / 9;       /* keep proportions; change to match your photo */
+  }
+  /* each item is an anchor with an image inside */
+  .item {
+    position: absolute;
+    display: inline-block;
+    transform: translate(-50%, -50%); /* center by the top/left % */
+    outline: none;
+    text-decoration: none;
+    width: 12%;
+    height: auto;
+  }
+  .item img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* ensure clicks go to <a> */
+  }
+  .item img.default-img {
+    transition: opacity 0.2s ease;
+    position: relative;
+    z-index: 1;
+  }
+  .item img.hover-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    z-index: 2;
+  }
+  .item:hover img.hover-img {
+    opacity: 1;
+  }
+  .item:hover img.default-img {
+    opacity: 0;
+  }
+  /* Custom heights for specific hover images */
+  .item--foucault img.hover-img {
+    height: 100% !important;
+  }
+  .item--laptop img.hover-img {
+    top: -280% !important;
+    height: 400% !important;
+  }
+  /* visual / focus styles for accessibility */
+  .item:focus,
+  .item:hover {
+    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
+    transform: translate(-50%, -50%) scale(1.03);
+  }
+  /* larger tap target for mobile (invisible) */
+  .item::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    width: 120%;
+    height: 120%;
+    border-radius: 8px;
+    /* background: rgba(0,0,0,0.05);  debugging only */
+    pointer-events: none;
+  }
+  /* Example positions (percent of container) */
+  /* Adjust top/left values to place items correctly relative to background image */
+  .item--foucault { left: 47%; top: 39%; width: 4%; }
+  .item--laptop  { left: 48%; top: 70%; width: 12%; }
+  .item--music { left: 59%; top: 88%; width: 9%; }
+  .item--lamp { left: 60%; top: 39%; width: 7%; }
+  .item--painting { left: 59.5%; top:64%; width: 9%; }
+  .item--casette { left: 47.5%; top: 83.5%; width: 6%; }
+  /* make widths scale with container */
+  .item { height: auto; }
+  /* Hover text label */
+  .item .label {
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    white-space: nowrap;
+    font-size: 14px;
+    color: #000000;
+    -webkit-text-stroke-color: white;
+    -webkit-text-stroke-width: 1px;
+    font-weight: bold;
+    pointer-events: none;
+    z-index: 9999;
+  }
+  .item:hover .label {
+    opacity: 1;
+  }
+  /* small-screen tweaks */
+  @media (max-width: 480px) {
+    .item::after { width: 140%; height: 140%; }
+  }
+</style>
+<div class="bookcase" role="region" aria-label="Bookcase with clickable items">
+  <!-- Each item is a link to another page -->
+    <a class="item item--foucault" href="/lamp-page.html" aria-label="Lamp — open lamp page">
+    <img src="images/web_0002_fucoult_closed.png" alt="" class="default-img" />
+    <img src="images/web_0011_book_open.png" alt="" class="hover-img" />
+    <span class="label">THEORETICAL FRAMEWORK</span>
+  </a>
+  <a class="item item--lamp" href="/lamp-page.html" aria-label="Lamp — open lamp page">
+    <img src="images/web_0000_lamp_off.png" alt="" class="default-img"/>
+    <img src="images/web_0001_lamp_onn.png" alt="" class="hover-img"/>
+    <span class="label">MORPHOLOGY</span>
+  </a>
+  <a class="item item--laptop" href="/laptop-page.html" aria-label="Laptop — open laptop page">
+    <img src="images/web_0004_laptop_closed.png" alt="" class="default-img"/>
+    <img src="images/web_0008_laptop_opem.png" alt="" class="hover-img"/>
+    <span class="label">CREATIVE CODING</span>
+  </a>
+    <a class="item item--painting" href="/painting-page.html" aria-label="Painting — open painting page">
+    <img src="images/web_0003_paining_1.png" alt="" class="default-img" />
+    <img src="images/web_0009_painting_2.png" alt="" class="hover-img" />
+    <span class="label">ART AND IDENTITY</span>
+  </a>
+  <a class="item item--casette" href="/laptop-page.html" aria-label="Laptop — open laptop page">
+    <img src="images/web_0005_casette_1.png" alt="" class="default-img" />
+    <img src="images/web_0010_casette_2.png" alt="" class="hover-img" />
+    <span class="label">VISUAL COMMUNICATION</span>
+  </a>
+  <a class="item item--music" href="/music-page.html" aria-label="Music — open music page">
+    <img src="images/web_0006_music_1.png" alt="" class="default-img" />
+    <img src="images/web_0012_music_2.png" alt="" class="hover-img" />
+    <span class="label">MY MUSIC</span>
+  </a>
+</div>
+</html>
 </p>