692 lines
46 KiB
HTML
692 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Portfolio Graficzne</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
|
||
<link rel="stylesheet" href="css/styles.css">
|
||
<script src="script/script.js"></script>
|
||
</head>
|
||
<body>
|
||
<header class="shadow-lg" style="background-color: var(--bg-dark)">
|
||
<div class="container mx-auto px-4 py-6 flex items-center justify-between">
|
||
<div class="flex items-center gap-4">
|
||
<a href="https://zyciorys.gitlab.io/bartek_piekarski/" target="_blank" class="text-lg font-semibold text-accent hover:text-accent2 transition">
|
||
Powrót do CV
|
||
</a>
|
||
<div>
|
||
<h1 class="text-4xl font-bold mb-2">Moje Portfolio</h1>
|
||
<p style="color: var(--text-dark)">Projekty Graficzne</p>
|
||
</div>
|
||
</div>
|
||
<a href="https://zyciorys.gitlab.io/portfolio_z_grafiki/" class="flex items-center hover:opacity-80 transition">
|
||
<img src="img/poland.png" alt="Polska wesja" width="32" height="32" class="rounded">
|
||
</a>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container mx-auto px-4 py-8">
|
||
<!-- Projekt 1 -->
|
||
<div class="project-card rounded-lg shadow-md mb-8 overflow-hidden">
|
||
<img src="projekty/Z1_Piekarski_Bartłomiej.png" alt="Projekt 1" class="w-full">
|
||
<div class="p-6">
|
||
<h2 class="text-2xl font-bold mb-2" style="color: var(--accent)">Projekt 1 - Moodboard</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 2 - Prezentacja -->
|
||
<div class="relative">
|
||
<div class="project-card rounded-lg shadow-md mb-8 overflow-hidden">
|
||
<div id="slideContainer2" class="flex overflow-hidden scroll-smooth">
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/dark_souls3.png" alt="Dark Souls 3" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description"><b>Dark Souls 3</b> to gra akcji RPG osadzona w mrocznym, post-apokaliptycznym świecie fantasy. Gracze eksplorują umierający świat, walczą z potężnymi bossami i zbierają ekwipunek, który pomoże im w ich misji. Gra słynie z wysokiego poziomu trudności i nieliniowej fabuły.</p>
|
||
<h3>Dark Souls 3</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.animebooks.com/dasoiiidewoa.html" target="_blank">
|
||
<img src="projekty/enemy_design.jpg" alt="Enemy Design" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">
|
||
1. <b>Detalicznie zaprojektowane postacie i przeciwnicy</b>: Postacie gracza, NPC oraz przeciwnicy w Dark Souls 3 są pełne szczegółów i wyrazistej estetyki, co sprawia, że są kluczowymi elementami przyciągającymi uwagę.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="www.artstation.com/artwork/elDn26" target="_blank">
|
||
<img src="projekty/bonfire.jpg" alt="Bonfire" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">
|
||
2. <b>Ogniska (Bonfires) jako centralne punkty światła</b>: Ogniska to jeden z najbardziej ikonicznych elementów w całej serii Dark Souls, pełniących zarówno funkcję mechaniczną, jak i wizualną.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://wall.alphacoders.com/big.php?i=1347167" target="_blank">
|
||
<img src="projekty/anor_londo.png" alt="Anor Londo" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">
|
||
3. <b>Monumentalne budowle i krajobrazy</b>: Dark Souls 3 jest pełne ogromnych, architektonicznie imponujących struktur, które dominują nad krajobrazem i przyciągają uwagę gracza.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.reddit.com/r/darksouls3/comments/m5sfgs/a_nice_quiet_cleared_out_empty_swamp_why_do_i" target="_blank">
|
||
<img src="projekty/empty_space.jpg" alt="Empty Space" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">
|
||
1. <b>Mroczne, opustoszałe lokacje</b>: W wielu obszarach Dark Souls 3, takich jak ruiny Lothric czy Catacombs of Carthus, ogromne przestrzenie są celowo puste, z minimalną ilością elementów. Te puste przestrzenie tworzą wrażenie samotności, pustki i zagrożenia. Brak przesadnych dekoracji pozwala graczowi poczuć beznadziejność świata, jednocześnie kierując uwagę na odległe, czasem groźnie wyglądające obiekty, np. zamek na wzgórzu czy nadciągającego przeciwnika.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.reddit.com/r/darksouls/comments/1h8xkf6/i_was_having_a_lot_of_fun_until_tomb_of_the_giants" target="_blank">
|
||
<img src="projekty/darkness.webp" alt="Darkness" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">
|
||
2. <b>Ciemność i mgła jako pusta przestrzeń</b>: W grze ogromną rolę odgrywa ciemność oraz mgła, które dominują w wielu lokacjach. Ciemne korytarze, jaskinie czy ogromne, niekończące się przestrzenie podkreślają nieznane zagrożenia, ale również zwiększają kontrast z oświetlonymi obiektami, takimi jak ogniska (bonfires) lub wrogowie, którzy pojawiają się nagle z ciemności.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.reddit.com/r/darksouls3/comments/1e9b6ad/til_that_midirs_arena_is_full_of_corpses_and_bones" target="_blank">
|
||
<img src="projekty/empty_arena.webp" alt="Empty Arena" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">
|
||
3. <b>Wielkie, puste areny bossów</b>: Walka z bossami często odbywa się na olbrzymich, pustych arenach, które są niemal pozbawione dekoracji. Przykładem może być walka z Nameless King lub Slave Knight Gael. Duża, otwarta przestrzeń nie tylko służy funkcji mechanicznej (daje miejsce na manewrowanie), ale również potęguje poczucie grozy i monumentalności walki.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/elden_ring.png" alt="Elden Ring" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description"><b>Elden Ring</b> to gra rozgrywająca się w otwartym świecie zwanym The Lands Between, pełnym tajemnic, starożytnych ruin, potężnych przeciwników i ogromnych, rozległych terenów do eksploracji. Gracz wciela się w rolę Tarnished, który ma na celu odzyskanie Elden Ring, aby zostać władcą tego zniszczonego świata.</p>
|
||
<h3>Elden Ring</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://techcrunch.com/2022/02/23/elden-ring-wonder-and-terror-abound-in-2022s-most-anticipated-game" target="_blank">
|
||
<img src="projekty/elden_ring_landscape.jpg" alt="Elden Ring Landscape" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">1. <b>Bogate, zróżnicowane krajobrazy i monumentalne struktury</b>: Świat w Elden Ring jest ogromny i zróżnicowany, a monumentalne budowle, zamki i starożytne ruiny dominują nad krajobrazem. Na przykład Erdtree – gigantyczne, złociste drzewo, widoczne z niemal każdego miejsca w grze – jest ikonicznym elementem wizualnym.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.reddit.com/r/Eldenring/comments/vxji4p/cinematic_looking_screenshot_from_most_recent" target="_blank">
|
||
<img src="projekty/elden_ring_effects.jpg" alt="Elden Ring Effects" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">2. <b>Magia i efekty specjalne w walce</b>: W Elden Ring efekty wizualne związane z magią, zaklęciami oraz specjalnymi umiejętnościami są niezwykle wyraziste i szczegółowe. Ogniste kule, lodowe ostrza, promienie światła – wszystkie te efekty są dynamiczne i kontrastują z otoczeniem, dodając spektakularności i dramatyzmu do walk.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://eldenring.fandom.com/wiki/Godrick_the_Grafted" target="_blank">
|
||
<img src="projekty/elden_ring_design.jpg" alt="Elden Ring Design" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">3. <b>Detaliczny design przeciwników i postaci</b>: Podobnie jak w innych grach studia FromSoftware, postacie i przeciwnicy w Elden Ring są zaprojektowani z ogromnym naciskiem na szczegóły. Każdy boss, postać NPC czy potwór ma charakterystyczny wygląd, który odzwierciedla ich pochodzenie, moce i rolę w fabule. Detale takie jak skomplikowane zbroje, tekstury skóry i groteskowe kształty przeciwników sprawiają, że stają się one głównymi elementami przyciągającymi uwagę w grze.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://wallpapercave.com/w/wp13646640" target="_blank">
|
||
<img src="projekty/elden_ring_empty.webp" alt="Elden Ring Empty" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">1. <b>Opustoszałe, szerokie przestrzenie</b>: W przeciwieństwie do zapełnionych szczegółami lokacji, wiele obszarów w Elden Ring – jak rozległe, pustynne stepy czy bagna – charakteryzuje się dużą ilością pustej przestrzeni. Te szerokie tereny, mimo swojej skali, są często minimalistyczne w detalach, co tworzy poczucie samotności i zagrożenia, ale także daje graczowi przestrzeń do eksploracji.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.ign.com/wikis/elden-ring/Ainsel_River" target="_blank">
|
||
<img src="projekty/elden_ring_tight_spaces.webp" alt="Elden Ring Tight Spaces" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">2. <b>Ciemne, mroczne zakątki i podziemia</b>: Podobnie jak w poprzednich grach FromSoftware, ciemność odgrywa kluczową rolę w budowaniu klimatu. Wiele podziemi, jaskiń i ukrytych miejsc w Elden Ring jest skąpanych w mroku, co ogranicza widoczność gracza i zwiększa napięcie.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.eurogamer.net/elden-ring-starscourge-radahn-tips-strategy-8042" target="_blank">
|
||
<img src="projekty/elden_ring_arena.webp" alt="Elden Ring Arena" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">3. <b>Pusta przestrzeń wokół ogromnych bossów</b>: Walka z bossami w Elden Ring często odbywa się na dużych, otwartych arenach, podobnie jak w Dark Souls 3. Przestrzeń wokół bossów jest często celowo pusta, co podkreśla ich ogrom i grozę. Te areny, pozbawione zbędnych szczegółów, potęgują wrażenie, że gracz stoi w obliczu czegoś znacznie większego i silniejszego.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="Mortal Shell" target="_blank">
|
||
<img src="projekty/mortal_shell.png" alt="Mortal Shell" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description"><b>Mortal Shell</b> czerpie inspirację z gier typu soulslike, takich jak seria Dark Souls. W grze wcielasz się w tajemniczego wojownika, który nie posiada własnego ciała, ale może przejmować tzw. "powłoki" (Shells) – ciała poległych wojowników, z których każdy ma unikalne umiejętności i styl walki. Rozgrywka koncentruje się na taktycznej walce, eksploracji mrocznego, nieprzyjaznego świata oraz odkrywaniu tajemnic starożytnych ruin.</p>
|
||
<h3>Mortal Shell</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.playstation.com/en-pl/games/mortal-shell" target="_blank">
|
||
<img src="projekty/mortal_shell_eredrim.jpg" alt="Mortal Shell Eredrim" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">1. <b>Detale postaci i pancerzy (shells)</b>: Jednym z najbardziej wyróżniających się elementów Mortal Shell są tytułowe Shells – powłoki, które bohater przejmuje, by uzyskać nowe umiejętności. Każda z tych postaci posiada unikalnie zaprojektowane zbroje, które przyciągają uwagę swoją surową, brutalną estetyką. Również przeciwnicy, w szczególności bossowie, charakteryzują się szczegółowym i groteskowym designem, co czyni ich centralnymi punktami w kompozycji wizualnej gry.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://pl.steelseries.com/blog/should-you-buy-mortal-shell-332" target="_blank">
|
||
<img src="projekty/mortal_shell_darkness.jpg" alt="Mortal Shell Darkness" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">2. <b>Światło i mrok w grze</b>: Gra operuje kontrastem między ciemnością, a punktami światła. W kluczowych momentach światło – jak np. ogniska, pochodnie czy magiczne efekty – pełni rolę pozytywnych aspektów graficznych, prowadząc gracza przez mroczne i ponure otoczenie.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.pcinvasion.com/mortal-shell-technical-review-pc-graphics-performance" target="_blank">
|
||
<img src="projekty/mortal_shell_landscape.webp" alt="Mortal Shell Landscape" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">3. <b>Monumentalne, surowe budowle</b>: Choć świat Mortal Shell jest mniejszy i bardziej klaustrofobiczny niż w grach FromSoftware, to surowe, kamienne budowle i ruiny mają silną, monumentalną obecność. Świątynie, fortece i jaskinie są skąpanych w surowym, minimalistycznym designie, co nadaje im mocny, fizyczny charakter, przyciągając uwagę gracza.
|
||
</p>
|
||
<h3>Pozytywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://store.steampowered.com/app/1110910/Mortal_Shell" target="_blank">
|
||
<img src="projekty/mortal_shell_empty.jpg" alt="Mortal Shell Empty" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">1. <b>Mroczne, puste przestrzenie</b>: Wiele lokacji w Mortal Shell to ciemne, opustoszałe obszary – zarówno na powierzchni, jak i pod ziemią. Te puste, mało szczegółowe przestrzenie wprowadzają poczucie izolacji i niepokoju. Przykładem mogą być niekończące się korytarze i otwarte tereny z niewielką ilością detali, które wzmacniają poczucie zagrożenia i budują mroczny klimat.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://www.altchar.com/game-news/mortal-shell-beta-is-now-live-and-free-to-play-a8SxW3U9NBrD" target="_blank">
|
||
<img src="projekty/mortal_shell_grisha.jpg" alt="Mortal Shell Grisha" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">2. <b>Ciemność i brak widoczności</b>: Podobnie jak w Dark Souls, w Mortal Shell ciemność odgrywa istotną rolę. W wielu miejscach gra celowo ogranicza widoczność, aby stworzyć poczucie niepewności. Mrok i mgła, które przysłaniają szczegóły otoczenia, tworzą negatywną przestrzeń, która kontrastuje z oświetlonymi elementami lub przeciwnikami, nagle wyłaniającymi się z cienia.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<a href="https://rpgamer.com/review/mortal-shell-review" target="_blank">
|
||
<img src="projekty/mortal_shell_arena.jpg" alt="Mortal Shell Arena" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">3. <b>Pusta przestrzeń na arenach bossów</b>: Podczas walk z bossami, podobnie jak w grach FromSoftware, areny są często celowo pozbawione zbędnych elementów, aby skupić uwagę gracza na pojedynku.
|
||
</p>
|
||
<h3>Negatywne Elementy Graficzne</h3>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="thank-you-slide flex flex-col items-center" style="height: 700px !important;">
|
||
<div class="flex flex-row gap-8 w-full max-w-[1800px] mx-auto" style="height: 600px !important;">
|
||
<a href="https://www.reddit.com/r/memes/comments/m35w0c/karate_in_the_garage/" target="_blank" class="w-1/2">
|
||
<img src="/projekty/thank_you1.jpg" alt="Thank you image 1" class="w-full h-full object-contain">
|
||
</a>
|
||
<a href="https://www.reddit.com/r/memes/comments/kwccmg/my_king/" target="_blank" class="w-1/2">
|
||
<img src="/projekty/thank_you2.jpg" alt="Thank you image 2" class="w-full h-full object-contain">
|
||
</a>
|
||
</div>
|
||
<h2 class="thank-you-text text-4xl font-bold mt-4" style="color: var(--accent)">Dziękuję za uwagę.</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button onclick="slide('slideContainer2', 'prev')" class="nav-button prev">←</button>
|
||
<button onclick="slide('slideContainer2', 'next')" class="nav-button next">→</button>
|
||
|
||
<div class="p-6">
|
||
<h2 class="text-2xl font-bold mb-2" style="color: var(--accent)">Projekt 2 - Inspiracje</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 3 - Pojedynczy obrazek -->
|
||
<div class="project-card rounded-lg shadow-md mb-8 overflow-hidden">
|
||
<div class="responsive-container">
|
||
<img src="projekty/Iron Oath.png" alt="Projekt 3">
|
||
</div>
|
||
<div class="p-6">
|
||
<h2 class="text-2xl font-bold mb-2" style="color: var(--accent)">Projekt 3 - Logo</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 4 - Pojedynczy obrazek -->
|
||
<div class="project-card rounded-lg shadow-md mb-8 overflow-hidden">
|
||
<div class="flex flex-col md:flex-row">
|
||
<div class="md:w-1/3">
|
||
<img src="projekty/Liuria.png" alt="Projekt 4" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="md:w-2/3 p-6">
|
||
<h2 class="text-2xl font-bold mb-4" style="color: var(--accent)">Projekt 4 - Postać</h2>
|
||
<h3 class="text-xl font-bold mb-4" style="color: var(--text-dark)">Liuria, Pani Cieni</h3>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Rola w grze:</b> Przewodniczka gracza</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Pochodzenie:</b> Liuria jest członkinią prastarego zakonu Strażników Zmierzchu, istot zawieszonych między życiem a śmiercią. Pamięta czasy, gdy świat kształtowały pierwotne moce, i zna tajemnice mrocznego lore’u świata gry.</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Wzrost:</b> 175 cm</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Ubiór:</b> Jasnoszara, poszarpana peleryna, płytowa zbroja na ramionach, biodrach i nogach, pod nią kolczuga. Kaptur zasłania twarz, nadając jej tajemniczości.</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Osobowość:</b> Spokojna, zagadkowa i powściągliwa; przemawia w przenośniach i szeptach, dając enigmatyczne rady. Jest beznamiętna, lecz pełna ukrytej mądrości.</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Relacje z graczem:</b> Jest przewodniczką o niejednoznacznych intencjach – czasem pomaga, czasem prowadzi do bolesnych wyborów, zachowując dystans i spokój.</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Inspiracje:</b> Dark Souls 3, Elden Ring, ChatGPT</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 5 - Rezultat + źródła -->
|
||
<div class="project-card rounded-lg shadow-md mb-8 overflow-hidden">
|
||
<img src="projekty/photobashing.png" alt="Projekt 5 - Rezultat" class="w-full">
|
||
<div class="p-6">
|
||
<h2 class="text-2xl font-bold mb-2" style="color: var(--accent)">Projekt 5 - Photobashing</h2>
|
||
<p style="color: var(--text-dark)">Źródła (ChatGPT)</p>
|
||
<div class="source-images">
|
||
<img src="projekty/photobashing-p.png" alt="źródło 1" class="rounded">
|
||
<img src="projekty/photobashing-p1.png" alt="źródło 2" class="rounded">
|
||
<img src="projekty/photobashing-p2.png" alt="źródło 3" class="rounded">
|
||
<img src="projekty/domek1.png" alt="źródło 4" class="rounded">
|
||
<img src="projekty/domek2.png" alt="źródło 5" class="rounded">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 6 - GIF -->
|
||
<div class="project-card rounded-lg shadow-md mb-8 overflow-hidden">
|
||
<div class="responsive-container">
|
||
<video controls>
|
||
<source src="projekty/Iron Oath.mp4" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
<div class="p-6">
|
||
<h2 class="text-2xl font-bold mb-2" style="color: var(--accent)">Projekt 6 - Animacja Logo</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 7 - Prezentacja -->
|
||
<div class="relative">
|
||
<div class="project-card rounded-lg shadow-md mb-8 overflow-hidden">
|
||
<div id="slideContainer7" class="flex overflow-hidden scroll-smooth">
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/1.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Wróg</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/2.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">
|
||
Zbliżenie kamery na twarz wroga.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/3.png" alt="Bonfire" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">
|
||
Wróg z mieczem
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/4.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">
|
||
Wróg wykonuje zamach mieczem
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/5.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">
|
||
Wróg atakuje
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/6.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">
|
||
Postać gracza
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/7.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">
|
||
Zbliżenie kamery na twarz postaci gracz
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/8.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Postać gracza z mieczem</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/9.png" alt="Elden Ring Landscape" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Postać gracza wykonuje zamach mieczem
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/10.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Postać gracza atakuje
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/11.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Starcie wroga i postaci gracza
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/12.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Kontynuacja walki
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/13.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Postać gracza zaczyna walczyć na poważnie
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/14.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Ale wróg kontruje atak
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/15.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Wróg przygotowuje specjalny atak</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/16.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Wróg przygotowuje specjalny atak
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/17.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Ale postać gracza blokuje
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/18.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Postać gracza odpiera atak
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/19.png" alt="Mortal Shell Empty" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Postać gracza przygotowuje kontratak
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/20.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Wróg blokuje
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/21.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Tajemnicza trzecia postać obserwuje pojedynek
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/22.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Tajemnicza postać łapie fajkę
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/23.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Tajemnicza postać trzyma fajkę i komentuje pojedynek
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/24.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Tajemnicza postać przygotowuje swój atak
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/30.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Atak tajemniczej postaci powoduje wibracje powietrza</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/25.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Atak tajemniczej postaci przerwał pojedynek wroga i postaci gracza
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/26.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Widać zdziwienie postaci gracza oraz wroga
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/27.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Tajemnicza postać coś mówi by uspokoić postać gracza i wroga
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/28.png" alt="Mortal Shell Empty" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Wróg odpowiada
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-full h-[500px]">
|
||
<img src="projekty/Scenorys/29.png" class="w-full h-full object-contain">
|
||
</div>
|
||
<p class="slide-description">Postać gracza się zgadza z tajemniczą postacią
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="slide flex-none w-full">
|
||
<div class="image-container">
|
||
<div class="image-box w-[full] h-[500px]">
|
||
<a href="https://www.reddit.com/r/Guiltygear/comments/1gznprv/how_elphelt_main_feels_when_the_214spsks/#lightbox" target="_blank" >
|
||
<img src="projekty/Scenorys/absolutne_kino.webp" class="w-[200px] h-[200px] object-contain">
|
||
</a>
|
||
</div>
|
||
<p class="slide-description">Dziękuję za uwagę.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button onclick="slide('slideContainer7', 'prev')" class="nav-button prev">←</button>
|
||
<button onclick="slide('slideContainer7', 'next')" class="nav-button next">→</button>
|
||
|
||
<div class="p-6">
|
||
<h2 class="text-2xl font-bold mb-2" style="color: var(--accent)">Projekt 7 - Klatki</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 8 - Video -->
|
||
<div class="project-card rounded-lg shadow-md mb-8 overflow-hidden">
|
||
<video controls class="w-full">
|
||
<source src="projekty/Scenorys.mp4" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
<div class="p-6">
|
||
<h2 class="text-2xl font-bold mb-2" style="color: var(--accent)">Projekt 8 - Filmik</h2>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer style="background-color: var(--bg-dark)">
|
||
<div class="container mx-auto px-4 py-6 text-center" style="color: var(--text-dark)">
|
||
<p>© 2024 Bartłomiej Piekarski</p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|