693 lines
46 KiB
HTML
693 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">
|
||
Back to CV
|
||
</a>
|
||
<div>
|
||
<h1 class="text-4xl font-bold mb-2">My Graphic Design Portfolio</h1>
|
||
</div>
|
||
</div>
|
||
<a href="en.html" class="flex items-center hover:opacity-80 transition">
|
||
<img src="img/poland.png" alt="Polska wersja" 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)">Project 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> is an action RPG set in a dark, post-apocalyptic fantasy world. Players explore a dying world, battle powerful bosses, and collect equipment to aid them in their mission. The game is known for its high difficulty level and non-linear storyline.</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>Detailed character and enemy designs</b>: The player characters, NPCs, and enemies in Dark Souls 3 are full of details and distinctive aesthetics, making them key elements that attract attention.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Bonfires as central points of light</b>: Bonfires are one of the most iconic elements in the entire Dark Souls series, serving both mechanical and visual functions.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Monumental buildings and landscapes</b>: Dark Souls 3 is full of enormous, architecturally impressive structures that dominate the landscape and attract the player's attention.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Dark, desolate locations</b>: In many areas of Dark Souls 3, such as the ruins of Lothric or the Catacombs of Carthus, vast spaces are intentionally empty, with minimal elements. These empty spaces create a sense of loneliness, emptiness, and danger. The lack of excessive decorations allows the player to feel the hopelessness of the world while focusing on distant, sometimes menacing objects, such as a castle on a hill or an approaching enemy.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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>Darkness and fog as empty space</b>: Darkness and fog play a significant role in many locations in the game. Dark corridors, caves, or vast, endless spaces emphasize unknown dangers but also increase the contrast with lit objects, such as bonfires or enemies that suddenly appear from the darkness.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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>Large, empty boss arenas</b>: Battles with bosses often take place in huge, empty arenas that are almost devoid of decoration. An example is the fight with the Nameless King or Slave Knight Gael. The large, open space not only serves a mechanical function (providing room for maneuvering) but also enhances the sense of dread and monumentality of the battle.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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> is a game set in an open world called The Lands Between, filled with mysteries, ancient ruins, powerful enemies, and vast, expansive terrains to explore. The player takes on the role of a Tarnished, aiming to restore the Elden Ring to become the ruler of this ruined world.</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>Rich, diverse landscapes and monumental structures</b>: The world in Elden Ring is vast and diverse, with monumental buildings, castles, and ancient ruins dominating the landscape. For example, the Erdtree – a gigantic, golden tree visible from almost anywhere in the game – is an iconic visual element.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Magic and special effects in combat</b>: In Elden Ring, visual effects related to magic, spells, and special abilities are incredibly expressive and detailed. Fireballs, ice blades, beams of light – all these effects are dynamic and contrast with the environment, adding spectacle and drama to battles.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Detailed enemy and character designs</b>: Similar to other FromSoftware games, the characters and enemies in Elden Ring are designed with great attention to detail. Each boss, NPC, or monster has a distinctive appearance that reflects their origin, powers, and role in the story. Details such as complex armor, skin textures, and grotesque enemy shapes make them stand out in the game.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Desolate, wide-open spaces</b>: Unlike detail-filled locations, many areas in Elden Ring – such as vast, barren steppes or swamps – are characterized by large amounts of empty space. These wide terrains, despite their scale, are often minimalistic in detail, creating a sense of loneliness and danger but also giving the player space to explore.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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>Dark, gloomy corners and undergrounds</b>: Similar to previous FromSoftware games, darkness plays a key role in building atmosphere. Many underground areas, caves, and hidden places in Elden Ring are shrouded in darkness, limiting the player's visibility and increasing tension.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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>Empty space around huge bosses</b>: Battles with bosses in Elden Ring often take place in large, open arenas, similar to Dark Souls 3. The space around the bosses is often intentionally empty, emphasizing their size and menace. These arenas, devoid of unnecessary details, enhance the feeling that the player is facing something much larger and stronger.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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> draws inspiration from soulslike games such as the Dark Souls series. In the game, you play as a mysterious warrior who lacks a body but can take over so-called "shells" – the bodies of fallen warriors, each with unique abilities and fighting styles. The gameplay focuses on tactical combat, exploring a dark and hostile world, and uncovering the secrets of ancient ruins.</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>Character and armor (shell) details</b>: One of the most distinctive elements of Mortal Shell is the titular Shells – the bodies the hero takes over to gain new abilities. Each of these characters has uniquely designed armor that attracts attention with its raw, brutal aesthetic. Enemies, especially bosses, are also characterized by detailed and grotesque designs, making them central points in the game's visual composition.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Light and darkness in the game</b>: The game uses the contrast between darkness and points of light. In key moments, light – such as bonfires, torches, or magical effects – serves as a positive graphic element, guiding the player through dark and gloomy surroundings.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Monumental, raw buildings</b>: Although the world of Mortal Shell is smaller and more claustrophobic than in FromSoftware games, the raw, stone buildings and ruins have a strong, monumental presence. Temples, fortresses, and caves are shrouded in a raw, minimalistic design, giving them a powerful, physical character that attracts the player's attention.
|
||
</p>
|
||
<h3>Positive Graphic Elements</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>Dark, empty spaces</b>: Many locations in Mortal Shell are dark, desolate areas – both above and below ground. These empty, minimally detailed spaces create a sense of isolation and unease. Examples include endless corridors and open areas with few details, which enhance the sense of danger and build a dark atmosphere.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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>Darkness and lack of visibility</b>: Similar to Dark Souls, darkness plays a crucial role in Mortal Shell. In many places, the game intentionally limits visibility to create a sense of uncertainty. Darkness and fog, which obscure the details of the surroundings, create a negative space that contrasts with lit elements or enemies suddenly emerging from the shadows.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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>Empty space in boss arenas</b>: During boss fights, similar to FromSoftware games, arenas are often intentionally devoid of unnecessary elements to focus the player's attention on the duel.
|
||
</p>
|
||
<h3>Negative Graphic Elements</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)">Thank you for your attention.</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)">Project 2 - Inspirations</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)">Project 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)">Project 4 - Character</h2>
|
||
<h3 class="text-xl font-bold mb-4" style="color: var(--text-dark)">Liuria, Lady of Shadows</h3>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Role in the game:</b> Player's guide</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Origin:</b> Liuria is a member of the ancient order of the Twilight Guardians, beings suspended between life and death. She remembers the times when the world was shaped by primordial forces and knows the secrets of the game's dark lore.</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Height:</b> 175 cm</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Attire:</b> Light gray, tattered cloak, plate armor on the shoulders, hips, and legs, with chain mail underneath. The hood covers her face, giving her an air of mystery.</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Personality:</b> Calm, enigmatic, and reserved; speaks in metaphors and whispers, giving cryptic advice. She is emotionless yet full of hidden wisdom.</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Relationship with the player:</b> She is a guide with ambiguous intentions – sometimes helpful, sometimes leading to painful choices, maintaining distance and calm.</p>
|
||
<p class="mb-4" style="color: var(--text-dark)"><b>Inspirations:</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)">Project 5 - Photobashing</h2>
|
||
<p style="color: var(--text-dark)">Sources (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/photobashing-p3.webp" 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)">Project 6 - Logo Animation</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">Enemy</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">
|
||
The camera zooms in on the enemy's face
|
||
</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">
|
||
The enemy with a sword
|
||
</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">
|
||
The enemy swings his sword
|
||
</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">
|
||
The enemy attacks
|
||
</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">
|
||
The player character
|
||
</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">
|
||
The camera zooms in on the player's character's face
|
||
</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">The player character with a sword</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">The player character swings his sword
|
||
</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">The player character attacks
|
||
</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">A class between the player and enemy characters
|
||
</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">The fight continues
|
||
</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">The player character is starting to get serious
|
||
</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">But the enemy blocks
|
||
</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">The enemy prepares a special attack</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">The enemy prepares a special attack
|
||
</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">The player character blocks
|
||
</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">The player character deflects the attack
|
||
</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">The player character prepares a counterattack
|
||
</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">The enemy blocks
|
||
</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">The mysterious third figure observes the duel
|
||
</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">The mysterious figure grabs his pipe
|
||
</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">The mysterious figure holds a pipe and comments on the duel
|
||
</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">The mysterious figure prepares their attack
|
||
</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">The mysterious figure's attack causes the air to vibrate</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">The mysterious figure's attack interrupted the duel between the enemy and the player's character
|
||
</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">The surprise of both the player's character and the enemy is visible
|
||
</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">The mysterious figure says something to calm both the player's character and the enemy
|
||
</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">Enemy responds
|
||
</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">The player's character agrees with the mysterious figure
|
||
</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">Thank you for your attention.
|
||
</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)">Project 7 - Frames</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)">Project 8 - Short Video</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>
|