diff --git a/css/styles.css b/css/styles.css index 3063dfa..8d2d83a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,274 +1,306 @@ :root { - /* Tokyo Night Storm Color Palette */ - --bg: #24283b; /* Base background */ - --bg-dark: #1f2335; /* Darker background */ - --bg-soft: #292e42; /* Softer background */ - --surface: #343b58; /* Surface color */ - --text: #c0caf5; /* Primary text */ - --text-dark: #a9b1d6; /* Darker text */ - --accent: #7aa2f7; /* Blue accent */ - --accent2: #9ece6a; /* Green accent */ - --accent3: #bb9af7; /* Purple accent */ -} -body { - background-color: var(--bg); - color: var(--text); -} -.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; + --nord0: #2E3440; + --nord1: #3B4252; + --nord2: #434C5E; + --nord3: #4C566A; + --text-primary: #ECEFF4; + --text-secondary: #D8DEE9; + --accent: #88C0D0; + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + background-color: var(--nord0); + color: var(--text-primary); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + } + + .container { + max-width: 1200px; margin: 0 auto; + padding: 2rem; + } + + header { + background-color: var(--nord1); + padding: 2rem; + text-align: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } + + .header-top { + 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; - 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; -} - -.image-box { - width: 100%; - 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; + gap: 2rem; + flex-wrap: wrap; + margin-top: 1.5rem; + } + + .contact-links a { 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; - 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 { - z-index: 10; -} -header .container { - padding: 0.5rem; + text-decoration: none; display: flex; align-items: center; gap: 0.5rem; -} -header h1 { - 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; -} - -.project-card:nth-child(3) .responsive-container { - width: 100%; - height: 90vh; -} - -.project-card:nth-child(3) .responsive-container img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.project-card:nth-child(4) .flex-col.md\:flex-row { - height: 90vh; -} - -.project-card:nth-child(4) .md\:w-1\/3 img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.project-card:nth-child(6) .responsive-container { - width: 100%; - height: 90vh; -} - -.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; -} - -.container { - max-width: 1400px !important; - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; - margin: 0 auto; -} - -.project-card:nth-child(2) .container { - max-width: 1200px !important; - padding-left: 6rem !important; - padding-right: 6rem !important; - margin: 0 auto; -} - -#slideContainer2 { - -ms-overflow-style: none !important; - scrollbar-width: none !important; -} - -#slideContainer2::-webkit-scrollbar { - display: none !important; -} - -.nav-button.prev { - left: 1rem !important; - z-index: 20 !important; -} -.nav-button.next { - right: 1rem !important; - z-index: 20 !important; -} - -.project-card:nth-child(4) .md\:w-1\/3 { - width: 65% !important; -} - -.project-card:nth-child(2) .slide-description { - font-size: 1.1rem !important; - line-height: 1.25 !important; - max-width: none !important; - margin-bottom: 0 !important; - padding-bottom: 0 !important; -} - -#slideContainer2 .slide-description { - font-size: 1.1rem !important; - margin-bottom: 0 !important; - padding-bottom: 0 !important; -} - -.image-container h3 { - margin-top: 0 !important; - padding-top: 0 !important; -} - -.project-card:nth-child(2) .image-box img { - cursor: pointer !important; -} - -@media (max-width: 1400px) { - .nav-button.prev { left: 1rem !important; } - .nav-button.next { right: 1rem !important; } -} - -#slideContainer7 .slide:last-child .image-container { + transition: color 0.3s ease; + padding: 0.5rem; + border-radius: 4px; + } + + .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; - align-items: center; - height: auto; - padding: 2rem; -} - -#slideContainer7 .slide:last-child .image-box { - width: 100%; - height: 70vh; -} - -#slideContainer7 .slide:last-child img { - width: 100%; - height: 100%; - object-fit: contain; -} - -#slideContainer7 .slide:last-child .slide-description { - margin-top: 1rem; -} \ No newline at end of file + 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; + } + + .education-item p { + margin-bottom: 0.5rem; + } + + .education-item p:last-child { + margin-bottom: 0; + color: var(--text-secondary); + } + + .projects-container { + display: grid; + gap: 2rem; + } + + .project { + background-color: var(--nord2); + border-radius: 6px; + padding: 1.5rem; + margin-bottom: 1.5rem; + transition: transform 0.3s ease; + } + + .project:hover { + transform: translateY(-2px); + } + + .project h3 { + margin-bottom: 1rem; + } + + .project p { + margin-bottom: 1rem; + } + + .project ul { + margin-bottom: 1rem; + } + + .project-links { + margin-top: 1.5rem; + } + + .portfolio-link { + color: var(--accent); + text-decoration: none; + display: inline-block; + padding: 0.5rem 1rem; + border-radius: 4px; + transition: all 0.3s ease; + } + + .portfolio-link:hover { + color: var(--text-primary); + background-color: var(--nord2); + } + + ul { + list-style-position: inside; + } + + ul li { + margin-bottom: 0.5rem; + } + + @media (max-width: 768px) { + .container { + padding: 1rem; + } + + header { + padding: 1rem; + } + + .header-top { + flex-direction: column; + gap: 1rem; + } + + .contact-links { + flex-direction: column; + align-items: center; + gap: 1rem; + } + + .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) { + .section { + padding: 1rem; + } + + .contact-links a { + width: 100%; + justify-content: center; + } + } + \ No newline at end of file