replaced some links in index.html
473
css/styles.css
|
@ -1,305 +1,274 @@
|
||||||
:root {
|
:root {
|
||||||
--nord0: #2E3440;
|
/* Tokyo Night Storm Color Palette */
|
||||||
--nord1: #3B4252;
|
--bg: #24283b; /* Base background */
|
||||||
--nord2: #434C5E;
|
--bg-dark: #1f2335; /* Darker background */
|
||||||
--nord3: #4C566A;
|
--bg-soft: #292e42; /* Softer background */
|
||||||
--text-primary: #ECEFF4;
|
--surface: #343b58; /* Surface color */
|
||||||
--text-secondary: #D8DEE9;
|
--text: #c0caf5; /* Primary text */
|
||||||
--accent: #88C0D0;
|
--text-dark: #a9b1d6; /* Darker text */
|
||||||
|
--accent: #7aa2f7; /* Blue accent */
|
||||||
|
--accent2: #9ece6a; /* Green accent */
|
||||||
|
--accent3: #bb9af7; /* Purple accent */
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--nord0);
|
background-color: var(--bg);
|
||||||
color: var(--text-primary);
|
color: var(--text);
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
}
|
||||||
line-height: 1.6;
|
.nav-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background-color: var(--surface);
|
||||||
|
color: var(--accent);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
transition: all 0.3s;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
height: 150px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0.2;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.nav-button:hover {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: var(--bg-dark);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.nav-button.prev { left: -50px; }
|
||||||
|
.nav-button.next { right: -50px; }
|
||||||
|
.project-card {
|
||||||
|
background-color: var(--surface);
|
||||||
|
}
|
||||||
|
.source-images {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.nav-button.prev { left: 0; }
|
||||||
|
.nav-button.next { right: 0; }
|
||||||
|
}
|
||||||
|
.responsive-container {
|
||||||
|
max-width: 800px;
|
||||||
|
max-height: 800px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.responsive-container img, .responsive-container video {
|
||||||
|
object-fit: contain;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.slide-description {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.image-box {
|
||||||
max-width: 1200px;
|
width: 100%;
|
||||||
margin: 0 auto;
|
height: 750px;
|
||||||
|
background-color: #3b4252;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.image-box img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.image-container h3 {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
.paragraph-section {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #eceff4;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.thank-you-slide {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
height: auto; /* zmień z 90vh */
|
||||||
|
}
|
||||||
|
|
||||||
|
.thank-you-text {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--text);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
padding-top: 2.5rem;
|
||||||
|
}
|
||||||
|
.project-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background-color: var(--nord1);
|
z-index: 10;
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
}
|
||||||
|
header .container {
|
||||||
.header-top {
|
padding: 0.5rem;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-container {
|
|
||||||
width: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-switch {
|
|
||||||
display: inline-block;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-switch:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.flag-icon {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-links {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 2rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-links a {
|
|
||||||
color: var(--accent);
|
|
||||||
text-decoration: none;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
transition: color 0.3s ease;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
|
header h1 {
|
||||||
.contact-links a:hover {
|
|
||||||
color: var(--text-primary);
|
|
||||||
background-color: var(--nord2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
background-color: var(--nord1);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-category {
|
|
||||||
background-color: var(--nord2);
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-category h3 {
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
border-bottom: 2px solid var(--nord3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-tag {
|
|
||||||
background-color: var(--accent);
|
|
||||||
color: var(--nord0);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-tag:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-tag.next-semester {
|
|
||||||
background-color: var(--nord2);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
border: 1px solid var(--nord3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-tag.self-learning {
|
|
||||||
background-color: var(--nord2);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
border: 1px dashed var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-item {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
background-color: var(--nord2);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.education-item:last-child {
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
header p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
.project-card .flex-col.md\:flex-row {
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
.project-card .md\:w-1\/3 img {
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.education-item p {
|
.project-card:nth-child(3) .responsive-container {
|
||||||
margin-bottom: 0.5rem;
|
width: 100%;
|
||||||
|
height: 90vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.education-item p:last-child {
|
.project-card:nth-child(3) .responsive-container img {
|
||||||
margin-bottom: 0;
|
width: 100%;
|
||||||
color: var(--text-secondary);
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projects-container {
|
.project-card:nth-child(4) .flex-col.md\:flex-row {
|
||||||
display: grid;
|
height: 90vh;
|
||||||
gap: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project {
|
.project-card:nth-child(4) .md\:w-1\/3 img {
|
||||||
background-color: var(--nord2);
|
width: 100%;
|
||||||
border-radius: 6px;
|
height: 100%;
|
||||||
padding: 1.5rem;
|
object-fit: cover;
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project:hover {
|
.project-card:nth-child(6) .responsive-container {
|
||||||
transform: translateY(-2px);
|
width: 100%;
|
||||||
|
height: 90vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project h3 {
|
.project-card:nth-child(6) .responsive-container video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:nth-child(3),
|
||||||
|
.project-card:nth-child(4),
|
||||||
|
.project-card:nth-child(6) {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project p {
|
.container {
|
||||||
margin-bottom: 1rem;
|
max-width: 1400px !important;
|
||||||
|
padding-left: 1.5rem !important;
|
||||||
|
padding-right: 1.5rem !important;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project ul {
|
.project-card:nth-child(2) .container {
|
||||||
margin-bottom: 1rem;
|
max-width: 1200px !important;
|
||||||
|
padding-left: 6rem !important;
|
||||||
|
padding-right: 6rem !important;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-links {
|
#slideContainer2 {
|
||||||
margin-top: 1.5rem;
|
-ms-overflow-style: none !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-link {
|
#slideContainer2::-webkit-scrollbar {
|
||||||
color: var(--accent);
|
display: none !important;
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-link:hover {
|
.nav-button.prev {
|
||||||
color: var(--text-primary);
|
left: 1rem !important;
|
||||||
background-color: var(--nord2);
|
z-index: 20 !important;
|
||||||
|
}
|
||||||
|
.nav-button.next {
|
||||||
|
right: 1rem !important;
|
||||||
|
z-index: 20 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
.project-card:nth-child(4) .md\:w-1\/3 {
|
||||||
list-style-position: inside;
|
width: 65% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
.project-card:nth-child(2) .slide-description {
|
||||||
margin-bottom: 0.5rem;
|
font-size: 1.1rem !important;
|
||||||
|
line-height: 1.25 !important;
|
||||||
|
max-width: none !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
#slideContainer2 .slide-description {
|
||||||
.container {
|
font-size: 1.1rem !important;
|
||||||
padding: 1rem;
|
margin-bottom: 0 !important;
|
||||||
}
|
padding-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
.image-container h3 {
|
||||||
padding: 1rem;
|
margin-top: 0 !important;
|
||||||
}
|
padding-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.header-top {
|
.project-card:nth-child(2) .image-box img {
|
||||||
flex-direction: column;
|
cursor: pointer !important;
|
||||||
gap: 1rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.contact-links {
|
@media (max-width: 1400px) {
|
||||||
|
.nav-button.prev { left: 1rem !important; }
|
||||||
|
.nav-button.next { right: 1rem !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#slideContainer7 .slide:last-child .image-container {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
height: auto;
|
||||||
}
|
padding: 2rem;
|
||||||
|
|
||||||
.skills-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-category {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
#slideContainer7 .slide:last-child .image-box {
|
||||||
.section {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-links a {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
height: 70vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#slideContainer7 .slide:last-child img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slideContainer7 .slide:last-child .slide-description {
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
222
en.html
Normal file
|
@ -0,0 +1,222 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Bartłomiej Piekarski - Computer Science student specializing in game development and mobile applications. Passionate about technology, Linux, and cybersecurity with experience in Unity and C#.">
|
||||||
|
<meta name="keywords" content="Bartłomiej Piekarski, game developer, Unity developer, C#, Python, Linux, cybersecurity, Katowice, game development, mobile applications, IT">
|
||||||
|
<meta name="author" content="Bartłomiej Piekarski">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<title>Bartłomiej Piekarski</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-top">
|
||||||
|
<div class="language-container"></div>
|
||||||
|
<h1>Bartłomiej Piekarski</h1>
|
||||||
|
<div class="language-container">
|
||||||
|
<a href="https://sykorax.eu" class="language-switch" title="Polska Wersja">
|
||||||
|
<img src="img/poland.png" width="32" height="32" class="flag-icon"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Computer Science Student | Major: Game Development and Mobile Applications</p>
|
||||||
|
<div class="contact-links">
|
||||||
|
<a href="mailto:bartek.piekarski@tuta.com">
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
bartek.piekarski@tuta.com
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/in/bartek-piekarski-911206257" target="_blank">
|
||||||
|
<i class="fab fa-linkedin"></i>
|
||||||
|
LinkedIn
|
||||||
|
</a>
|
||||||
|
<a href="https://forgia.sykorax.eu/lheor" target="_blank">
|
||||||
|
<i class="fab fa-forgejo"></i>
|
||||||
|
Forgejo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<section class="section">
|
||||||
|
<h2>About Me</h2>
|
||||||
|
<p>Technology enthusiast from the Katowice area with a strong focus on game development, Linux systems, and cybersecurity.</p>
|
||||||
|
<br>
|
||||||
|
<p>Currently studying Computer Science with a major in game development and mobile applications.</p>
|
||||||
|
<br>
|
||||||
|
<p>Looking for an interesting job opportunity to develop my skills and gain experience in the IT industry.</p>
|
||||||
|
<br>
|
||||||
|
<p>I am open to hybrid work from Kraków and other cities within a similar distance from Katowice.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Skills</h2>
|
||||||
|
<div class="skills-grid">
|
||||||
|
<div class="skills-row">
|
||||||
|
<div class="skills-category">
|
||||||
|
<h3>Programming Languages</h3>
|
||||||
|
<div class="skills">
|
||||||
|
<span class="skill-tag">C#</span>
|
||||||
|
<span class="skill-tag">Python</span>
|
||||||
|
<span class="skill-tag">Kotlin</span>
|
||||||
|
<span class="skill-tag self-learning">Rust (self-taught)</span>
|
||||||
|
<span class="skill-tag self-learning">Ruby (self-taught)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="skills-category">
|
||||||
|
<h3>Technologies & Tools</h3>
|
||||||
|
<div class="skills">
|
||||||
|
<span class="skill-tag">Visual Studio</span>
|
||||||
|
<span class="skill-tag">Unity</span>
|
||||||
|
<span class="skill-tag">MSSQL</span>
|
||||||
|
<span class="skill-tag">Android Studio</span>
|
||||||
|
<span class="skill-tag self-learning">Git (self-taught)</span>
|
||||||
|
<span class="skill-tag self-learning">Docker/Podman (self-taught)</span>
|
||||||
|
<span class="skill-tag self-learning">Nginx (self-taught)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="skills-row">
|
||||||
|
<div class="skills-category">
|
||||||
|
<h3>Operating Systems</h3>
|
||||||
|
<div class="skills">
|
||||||
|
<span class="skill-tag">Windows</span>
|
||||||
|
<span class="skill-tag">Linux (Ubuntu)</span>
|
||||||
|
<span class="skill-tag">Android</span>
|
||||||
|
<span class="skill-tag self-learning">Linux (openSUSE/Arch) (self-taught)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="skills-category">
|
||||||
|
<h3>Creative Software</h3>
|
||||||
|
<div class="skills">
|
||||||
|
<span class="skill-tag">Krita</span>
|
||||||
|
<span class="skill-tag">GIMP</span>
|
||||||
|
<span class="skill-tag">Kdenlive</span>
|
||||||
|
<span class="skill-tag">Blender </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Education</h2>
|
||||||
|
<div class="education-item">
|
||||||
|
<p><strong>Computer Science</strong> - Major: Game Development and Mobile Applications</p>
|
||||||
|
<p>University of Economics in Katowice</p>
|
||||||
|
<p>10.2023 - present</p>
|
||||||
|
</div>
|
||||||
|
<div class="education-item">
|
||||||
|
<p><strong>English Philology</strong> - Major: Translation with Chinese Language</p>
|
||||||
|
<p>University of Silesia in Katowice</p>
|
||||||
|
<p>10.2021 - 02.2023 (discontinued in second year)</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Projects</h2>
|
||||||
|
<div class="projects-container">
|
||||||
|
<div id="programming-projects" class="project-type">
|
||||||
|
<div class="project">
|
||||||
|
<h3>Bookstore Website Project: The Dark Anatheum (in progress)</h3>
|
||||||
|
<p>A project created to learn and apply modern web technologies and backend architecture in Rust.</p>
|
||||||
|
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||||
|
<li>Implementation of the backend in Rust using Actix Web</li>
|
||||||
|
<li>Designing a PostgreSQL database for managing users and orders</li>
|
||||||
|
<li>Creating a dynamic book catalog with filtering and sorting features</li>
|
||||||
|
<li>Adding a user review and rating system for products</li>
|
||||||
|
<li>Integrating a shopping cart with product management options</li>
|
||||||
|
<li>Developing an intuitive user interface with HTML, CSS, and TypeScript</li>
|
||||||
|
<li>Hosting the application on Shuttle.dev for easy deployment and scaling</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="project-links">
|
||||||
|
<a href="https://gitlab.com/zyciorys/#" class="portfolio-link">Check it out on GitLab →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="programming-projects" class="project-type">
|
||||||
|
<div class="project">
|
||||||
|
<h3>Unity 3D Projects</h3>
|
||||||
|
<p>A series of smaller projects aimed at learning and implementing different aspects of game development:</p>
|
||||||
|
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||||
|
<li>Game mechanics scripting in C#</li>
|
||||||
|
<li>Designing and implementing user interfaces</li>
|
||||||
|
<li>Character and object animation systems</li>
|
||||||
|
<li>Basic AI system for NPCs</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="project-links">
|
||||||
|
<a href="https://gitlab.com/zyciorys/ProjektyUnity3D" class="portfolio-link">Check it out on GitLab →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="graphics-projects" class="project-type">
|
||||||
|
<div class="project">
|
||||||
|
<h3>Graphic Project "Iron Oath"</h3>
|
||||||
|
<p>A series of graphic projects focused on an original game concept, including:</p>
|
||||||
|
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||||
|
<li>Creating concept mood boards</li>
|
||||||
|
<li>Logo and visual identity design</li>
|
||||||
|
<li>Photobashing techniques for concept art</li>
|
||||||
|
<li>Character and UI animations</li>
|
||||||
|
<li>Keyframe creation for promotional materials</li>
|
||||||
|
<li>Editing a promotional video</li>
|
||||||
|
</ul>
|
||||||
|
<p>Narzędzia: Krita (grafika), GIMP (obróbka zdjęć), Kdenlive (montaż wideo)</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-links">
|
||||||
|
<a href="https://zyciorys.gitlab.io/portfolio_z_grafiki" class="portfolio-link">Check it out in my portfolio →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Experience</h2>
|
||||||
|
<div class="project">
|
||||||
|
<h3>Security Guard</h3>
|
||||||
|
<p><strong>JUSTUS</strong> | 03.2023 - present</p>
|
||||||
|
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||||
|
<li>Securing commercial facilities</li>
|
||||||
|
<li>Operating CCTV and access control systems</li>
|
||||||
|
<li>Coordinating actions in crisis situations</li>
|
||||||
|
<li>Maintaining documentation and task reports</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3>Cashier</h3>
|
||||||
|
<p><strong>MINIT Polska</strong> | 02.2021 - 01.2022</p>
|
||||||
|
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||||
|
<li>Operating a cash register and payment terminal</li>
|
||||||
|
<li>Managing inventory and stock</li>
|
||||||
|
<li>Customer service and issue resolution</li>
|
||||||
|
<li>Maintaining order and display standards</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<h3>Warehouse Worker</h3>
|
||||||
|
<p><strong>MotoProfil</strong> | 2019-2022 (part-time)</p>
|
||||||
|
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||||
|
<li>Picking and preparing orders for shipment</li>
|
||||||
|
<li>Using WMS and barcode scanners</li>
|
||||||
|
<li>Participating in warehouse inventory audits</li>
|
||||||
|
<li>Ensuring order and safety in the warehouse</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>Interests</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Game Development</li>
|
||||||
|
<li>Cybersecurity</li>
|
||||||
|
<li>Linux and Open Source Technologies</li>
|
||||||
|
<li>Reading</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
1
hellow_world
Submodule
|
@ -0,0 +1 @@
|
||||||
|
Subproject commit 2114c491eeefb40a2b434d837928b4dba265bae6
|
BIN
img/Projekt1.png
Before Width: | Height: | Size: 1.9 MiB |
25
index.html
|
@ -17,7 +17,7 @@
|
||||||
<div class="language-container"></div>
|
<div class="language-container"></div>
|
||||||
<h1>Bartłomiej Piekarski</h1>
|
<h1>Bartłomiej Piekarski</h1>
|
||||||
<div class="language-container">
|
<div class="language-container">
|
||||||
<a href="https://zyciorys.gitlab.io/bartek_piekarski_en" class="language-switch" title="English Version">
|
<a href="https://www.sykorax.eu/en" class="language-switch" title="English Version">
|
||||||
<img src="img/united-kingdom.png" width="32" height="32" class="flag-icon"/>
|
<img src="img/united-kingdom.png" width="32" height="32" class="flag-icon"/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -32,13 +32,9 @@
|
||||||
<i class="fab fa-linkedin"></i>
|
<i class="fab fa-linkedin"></i>
|
||||||
LinkedIn
|
LinkedIn
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/Lheorvine" target="_blank">
|
<a href="https://forgia.sykorax.eu/lheor" target="_blank">
|
||||||
<i class="fab fa-github"></i>
|
<i class="fab fa-forgejo"></i>
|
||||||
GitHub
|
Forgejo
|
||||||
</a>
|
|
||||||
<a href="https://gitlab.com/Lheorvine" target="_blank">
|
|
||||||
<i class="fab fa-gitlab"></i>
|
|
||||||
GitLab
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
@ -77,7 +73,8 @@
|
||||||
<span class="skill-tag">MSSQL</span>
|
<span class="skill-tag">MSSQL</span>
|
||||||
<span class="skill-tag">Android Studio</span>
|
<span class="skill-tag">Android Studio</span>
|
||||||
<span class="skill-tag self-learning">Git (samodzielna nauka)</span>
|
<span class="skill-tag self-learning">Git (samodzielna nauka)</span>
|
||||||
<span class="skill-tag self-learning">Podman/Docker (samodzielna nauka)</span>
|
<span class="skill-tag self-learning">Docker/Podman (samodzielna nauka)</span>
|
||||||
|
<span class="skill-tag self-learning">Nginx (samodzielna nauka)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -88,7 +85,7 @@
|
||||||
<span class="skill-tag">Windows</span>
|
<span class="skill-tag">Windows</span>
|
||||||
<span class="skill-tag">Linux (Ubuntu)</span>
|
<span class="skill-tag">Linux (Ubuntu)</span>
|
||||||
<span class="skill-tag">Android</span>
|
<span class="skill-tag">Android</span>
|
||||||
<span class="skill-tag self-learning">Linux (openSUSE/Arch) (samodzielna nauka)</span>
|
<span class="skill-tag self-learning">Linux (openSUSE) (samodzielna nauka)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="skills-category">
|
<div class="skills-category">
|
||||||
|
@ -123,7 +120,7 @@
|
||||||
<div class="projects-container">
|
<div class="projects-container">
|
||||||
<div id="programming-projects" class="project-type">
|
<div id="programming-projects" class="project-type">
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<h3>Projekt Strony dla Księgarni: The Dark Anatheum (w trakcie)</h3>
|
<h3>Projekt Strony dla Księgarni: The Dark Athenaeum (w trakcie)</h3>
|
||||||
<p>Projekt tworzony w celu nauki i praktycznego zastosowania nowoczesnych technologii webowych oraz architektury backendowej w języku Rust.</p>
|
<p>Projekt tworzony w celu nauki i praktycznego zastosowania nowoczesnych technologii webowych oraz architektury backendowej w języku Rust.</p>
|
||||||
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||||
<li>Implementacja backendu w języku Rust przy użyciu Actix Web</li>
|
<li>Implementacja backendu w języku Rust przy użyciu Actix Web</li>
|
||||||
|
@ -136,7 +133,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-links">
|
<div class="project-links">
|
||||||
<a href="https://gitlab.com/zyciorys/#" class="portfolio-link">Zobacz więcej projektów na GitLab →</a>
|
<a href="https://forgia.sykorax.eu/lheor/athenaeum" class="portfolio-link">Zobacz postęp →</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -152,7 +149,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-links">
|
<div class="project-links">
|
||||||
<a href="https://gitlab.com/zyciorys/ProjektyUnity3D" class="portfolio-link">Zobacz więcej projektów na GitLab →</a>
|
<a href="https://forgia.sykorax.eu/lheor" class="portfolio-link">Pozostałe projekty →</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -171,7 +168,7 @@
|
||||||
<p>Narzędzia: Krita (grafika), GIMP (obróbka zdjęć), Kdenlive (montaż wideo)</p>
|
<p>Narzędzia: Krita (grafika), GIMP (obróbka zdjęć), Kdenlive (montaż wideo)</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-links">
|
<div class="project-links">
|
||||||
<a href="https://zyciorys.gitlab.io/portfolio_z_grafiki" class="portfolio-link">Zobacz więcej prac graficznych w portfolio →</a>
|
<a href="https://archiva.sykorax.eu" class="portfolio-link">Zobacz portfolio →</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
692
portfolio.html
Normal file
|
@ -0,0 +1,692 @@
|
||||||
|
<!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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="en.html" class="flex items-center hover:opacity-80 transition">
|
||||||
|
<img src="img/united-kingdom.png" alt="English version" 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/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)">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>
|
692
portfolio_en.html
Normal file
|
@ -0,0 +1,692 @@
|
||||||
|
<!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>
|
1
portfolio_z_grafiki
Submodule
|
@ -0,0 +1 @@
|
||||||
|
Subproject commit abf3d44cb54d76498d5195619dc8fec206bae8a2
|
BIN
projekty/Bartłomiej Piekarski - Zadanie 2 - inspiracje.pptx
Normal file
BIN
projekty/Iron Oath.avi
Normal file
BIN
projekty/Iron Oath.gif
Normal file
After Width: | Height: | Size: 139 KiB |
BIN
projekty/Iron Oath.kra
Normal file
BIN
projekty/Iron Oath.kra~
Normal file
BIN
projekty/Iron Oath.mp4
Normal file
20
projekty/Iron Oath.mp4.log
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
/app/bin/ffmpeg -hide_banner -y -y -r 24 -start_number 0 -start_number_range 1 -i /home/lheor/Stuff/portfolio/projekty/frame%04d.png -c:v libopenh264 -b:v 5000k /home/lheor/Stuff/portfolio/projekty/Iron Oath.mp4
|
||||||
|
=====================================================
|
||||||
|
Input #0, image2, from '/home/lheor/Stuff/portfolio/projekty/frame%04d.png':
|
||||||
|
Duration: 00:00:01.24, start: 0.000000, bitrate: N/A
|
||||||
|
Stream #0:0: Video: png, rgba(pc, gbr/unknown/unknown), 512x512 [SAR 11811:11811 DAR 1:1], 25 fps, 25 tbr, 25 tbn
|
||||||
|
Stream mapping:
|
||||||
|
Stream #0:0 -> #0:0 (png (native) -> h264 (libopenh264))
|
||||||
|
Press [q] to stop, [?] for help
|
||||||
|
[libopenh264 @ 0x56424aeb0cc0] [OpenH264] this = 0x0x56424aead550, Warning:layerId(0) doesn't support profile(578), change to UNSPECIFIC profile
|
||||||
|
[libopenh264 @ 0x56424aeb0cc0] [OpenH264] this = 0x0x56424aead550, Warning:bEnableFrameSkip = 0,bitrate can't be controlled for RC_QUALITY_MODE,RC_BITRATE_MODE and RC_TIMESTAMP_MODE without enabling skip frame.
|
||||||
|
Output #0, mp4, to '/home/lheor/Stuff/portfolio/projekty/Iron Oath.mp4':
|
||||||
|
Metadata:
|
||||||
|
encoder : Lavf60.16.100
|
||||||
|
Stream #0:0: Video: h264 (avc1 / 0x31637661), yuv420p(tv, progressive), 512x512 [SAR 1:1 DAR 1:1], q=2-31, 5000 kb/s, 24 fps, 12288 tbn
|
||||||
|
Metadata:
|
||||||
|
encoder : Lavc60.31.102 libopenh264
|
||||||
|
Side data:
|
||||||
|
cpb: bitrate max/min/avg: 5000000/0/5000000 buffer size: 0 vbv_delay: N/A
|
||||||
|
frame= 1 fps=0.0 q=-0.0 size= 0kB time=00:00:00.00 bitrate=N/A speed= 0x
[out#0/mp4 @ 0x56424aeadc80] video:176kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.536181%
|
||||||
|
frame= 31 fps=0.0 q=-0.0 Lsize= 177kB time=00:00:01.25 bitrate=1161.6kbits/s speed=10.3x
|
BIN
projekty/Iron Oath.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
projekty/Iron Oath.png~
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
projekty/Iron Oath.webm
Normal file
BIN
projekty/Liuria.png
Normal file
After Width: | Height: | Size: 664 KiB |
BIN
projekty/Liuria.png~
Normal file
After Width: | Height: | Size: 977 KiB |
BIN
projekty/Projekt1.png
Normal file
After Width: | Height: | Size: 2.5 MiB |
BIN
projekty/Scenorys.mp4
Normal file
BIN
projekty/Scenorys/1.png
Normal file
After Width: | Height: | Size: 77 KiB |
BIN
projekty/Scenorys/10.png
Normal file
After Width: | Height: | Size: 87 KiB |
BIN
projekty/Scenorys/11.png
Normal file
After Width: | Height: | Size: 110 KiB |
BIN
projekty/Scenorys/12.png
Normal file
After Width: | Height: | Size: 124 KiB |
BIN
projekty/Scenorys/13.png
Normal file
After Width: | Height: | Size: 132 KiB |
BIN
projekty/Scenorys/14.png
Normal file
After Width: | Height: | Size: 133 KiB |
BIN
projekty/Scenorys/15.png
Normal file
After Width: | Height: | Size: 134 KiB |
BIN
projekty/Scenorys/16.png
Normal file
After Width: | Height: | Size: 113 KiB |
BIN
projekty/Scenorys/17.png
Normal file
After Width: | Height: | Size: 117 KiB |
BIN
projekty/Scenorys/18.png
Normal file
After Width: | Height: | Size: 121 KiB |
BIN
projekty/Scenorys/19.png
Normal file
After Width: | Height: | Size: 190 KiB |
BIN
projekty/Scenorys/2.png
Normal file
After Width: | Height: | Size: 170 KiB |
BIN
projekty/Scenorys/20.png
Normal file
After Width: | Height: | Size: 186 KiB |
BIN
projekty/Scenorys/21.png
Normal file
After Width: | Height: | Size: 110 KiB |
BIN
projekty/Scenorys/22.png
Normal file
After Width: | Height: | Size: 107 KiB |
BIN
projekty/Scenorys/23.png
Normal file
After Width: | Height: | Size: 105 KiB |
BIN
projekty/Scenorys/24.png
Normal file
After Width: | Height: | Size: 104 KiB |
BIN
projekty/Scenorys/25.png
Normal file
After Width: | Height: | Size: 242 KiB |
BIN
projekty/Scenorys/26.png
Normal file
After Width: | Height: | Size: 194 KiB |
BIN
projekty/Scenorys/27.png
Normal file
After Width: | Height: | Size: 118 KiB |
BIN
projekty/Scenorys/28.png
Normal file
After Width: | Height: | Size: 89 KiB |
BIN
projekty/Scenorys/28.png~
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
projekty/Scenorys/29.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
projekty/Scenorys/29.png~
Normal file
After Width: | Height: | Size: 101 KiB |
BIN
projekty/Scenorys/3.png
Normal file
After Width: | Height: | Size: 85 KiB |
BIN
projekty/Scenorys/30.png
Normal file
After Width: | Height: | Size: 158 KiB |
BIN
projekty/Scenorys/4.png
Normal file
After Width: | Height: | Size: 91 KiB |
BIN
projekty/Scenorys/5.png
Normal file
After Width: | Height: | Size: 87 KiB |
BIN
projekty/Scenorys/6.png
Normal file
After Width: | Height: | Size: 126 KiB |
BIN
projekty/Scenorys/7.png
Normal file
After Width: | Height: | Size: 175 KiB |
BIN
projekty/Scenorys/8.png
Normal file
After Width: | Height: | Size: 85 KiB |
BIN
projekty/Scenorys/9.png
Normal file
After Width: | Height: | Size: 90 KiB |
1150
projekty/Scenorys/Scenorys.kdenlive
Normal file
1146
projekty/Scenorys/Scenorys_backup0.kdenlive
Normal file
1150
projekty/Scenorys/Scenorys_backup1.kdenlive
Normal file
BIN
projekty/Scenorys/absolutne_kino.webp
Normal file
After Width: | Height: | Size: 158 KiB |
BIN
projekty/Z1_Piekarski_Bartłomiej.png
Normal file
After Width: | Height: | Size: 2.7 MiB |
BIN
projekty/anor_londo.png
Normal file
After Width: | Height: | Size: 5.5 MiB |
BIN
projekty/ariandel.jpg
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
projekty/bonfire.jpg
Normal file
After Width: | Height: | Size: 2 MiB |
BIN
projekty/dark_souls3.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
projekty/darkness.webp
Normal file
After Width: | Height: | Size: 26 KiB |
BIN
projekty/domek1.png
Normal file
After Width: | Height: | Size: 369 KiB |
BIN
projekty/domek2.png
Normal file
After Width: | Height: | Size: 390 KiB |
BIN
projekty/elden_ring.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
projekty/elden_ring_arena.webp
Normal file
After Width: | Height: | Size: 57 KiB |
BIN
projekty/elden_ring_art.png
Normal file
After Width: | Height: | Size: 1.9 MiB |
BIN
projekty/elden_ring_design.jpg
Normal file
After Width: | Height: | Size: 1.1 MiB |
BIN
projekty/elden_ring_effects.jpg
Normal file
After Width: | Height: | Size: 309 KiB |
BIN
projekty/elden_ring_empty.webp
Normal file
After Width: | Height: | Size: 170 KiB |
BIN
projekty/elden_ring_landscape.jpg
Normal file
After Width: | Height: | Size: 1.1 MiB |
BIN
projekty/elden_ring_tight_spaces.webp
Normal file
After Width: | Height: | Size: 249 KiB |
BIN
projekty/empty_arena.webp
Normal file
After Width: | Height: | Size: 96 KiB |
BIN
projekty/empty_space.jpg
Normal file
After Width: | Height: | Size: 146 KiB |
BIN
projekty/enemy_design.jpg
Normal file
After Width: | Height: | Size: 314 KiB |
BIN
projekty/frame0000.avif
Normal file
After Width: | Height: | Size: 1 KiB |
BIN
projekty/frame0001.avif
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
projekty/frame0002.avif
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
projekty/frame0003.avif
Normal file
After Width: | Height: | Size: 3.1 KiB |
BIN
projekty/frame0004.avif
Normal file
After Width: | Height: | Size: 3.9 KiB |
BIN
projekty/frame0005.avif
Normal file
After Width: | Height: | Size: 5.2 KiB |
BIN
projekty/frame0006.avif
Normal file
After Width: | Height: | Size: 6.5 KiB |
BIN
projekty/frame0007.avif
Normal file
After Width: | Height: | Size: 6.7 KiB |
BIN
projekty/frame0008.avif
Normal file
After Width: | Height: | Size: 6.7 KiB |
BIN
projekty/frame0009.avif
Normal file
After Width: | Height: | Size: 6.8 KiB |
BIN
projekty/frame0010.avif
Normal file
After Width: | Height: | Size: 6.5 KiB |
BIN
projekty/frame0011.avif
Normal file
After Width: | Height: | Size: 7 KiB |
BIN
projekty/frame0012.avif
Normal file
After Width: | Height: | Size: 7.2 KiB |
BIN
projekty/frame0013.avif
Normal file
After Width: | Height: | Size: 7.8 KiB |
BIN
projekty/frame0014.avif
Normal file
After Width: | Height: | Size: 8.1 KiB |
BIN
projekty/frame0015.avif
Normal file
After Width: | Height: | Size: 8.3 KiB |
BIN
projekty/frame0016.avif
Normal file
After Width: | Height: | Size: 8.5 KiB |
BIN
projekty/frame0017.avif
Normal file
After Width: | Height: | Size: 8.8 KiB |
BIN
projekty/frame0018.avif
Normal file
After Width: | Height: | Size: 9.3 KiB |
BIN
projekty/frame0019.avif
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
projekty/frame0020.avif
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
projekty/frame0021.avif
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
projekty/frame0022.avif
Normal file
After Width: | Height: | Size: 14 KiB |