diff --git a/css/styles.css b/css/styles.css index 8d2d83a..27d5f5a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,11 +1,14 @@ :root { - --nord0: #2E3440; - --nord1: #3B4252; - --nord2: #434C5E; - --nord3: #4C566A; - --text-primary: #ECEFF4; - --text-secondary: #D8DEE9; - --accent: #88C0D0; + /* Tokyo Night Storm Color Palette */ + --bg: #24283b; + --bg-dark: #1f2335; + --bg-soft: #292e42; + --surface: #343b58; + --text: #c0caf5; + --text-dark: #a9b1d6; + --accent: #7aa2f7; + --accent2: #9ece6a; + --accent3: #bb9af7; } * { @@ -15,23 +18,41 @@ } body { - background-color: var(--nord0); - color: var(--text-primary); + background-color: var(--bg); + color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; } .container { - max-width: 1200px; + max-width: 1400px; margin: 0 auto; padding: 2rem; } header { - background-color: var(--nord1); + background-color: var(--surface); padding: 2rem; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + z-index: 10; + } + + header .container { + padding: 0.5rem; + 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; } .header-top { @@ -59,19 +80,19 @@ } h1 { - color: var(--text-primary); + color: var(--text); font-size: 2.5rem; margin: 0; } h2 { - color: var(--text-primary); + color: var(--text); font-size: 2rem; margin-bottom: 1.5rem; } h3 { - color: var(--text-primary); + color: var(--text); font-size: 1.5rem; margin-bottom: 1rem; } @@ -96,12 +117,12 @@ } .contact-links a:hover { - color: var(--text-primary); - background-color: var(--nord2); + color: var(--text); + background-color: var(--surface); } .section { - background-color: var(--nord1); + background-color: var(--surface); border-radius: 8px; padding: 2rem; margin-bottom: 2rem; @@ -127,16 +148,16 @@ } .skills-category { - background-color: var(--nord2); + background-color: var(--bg-soft); border-radius: 6px; padding: 1.5rem; } .skills-category h3 { - color: var(--text-primary); + color: var(--text); margin-bottom: 1.5rem; padding-bottom: 0.5rem; - border-bottom: 2px solid var(--nord3); + border-bottom: 2px solid var(--bg-dark); } .skills { @@ -147,7 +168,7 @@ .skill-tag { background-color: var(--accent); - color: var(--nord0); + color: var(--bg); padding: 0.5rem 1rem; border-radius: 4px; display: inline-block; @@ -161,21 +182,21 @@ } .skill-tag.next-semester { - background-color: var(--nord2); - color: var(--text-secondary); - border: 1px solid var(--nord3); + background-color: var(--bg-soft); + color: var(--text-dark); + border: 1px solid var(--bg-dark); } .skill-tag.self-learning { - background-color: var(--nord2); - color: var(--text-secondary); + background-color: var(--bg-soft); + color: var(--text-dark); border: 1px dashed var(--accent); } .education-item { margin-bottom: 2rem; padding: 1.5rem; - background-color: var(--nord2); + background-color: var(--bg-soft); border-radius: 6px; } @@ -189,7 +210,7 @@ .education-item p:last-child { margin-bottom: 0; - color: var(--text-secondary); + color: var(--text-dark); } .projects-container { @@ -198,7 +219,7 @@ } .project { - background-color: var(--nord2); + background-color: var(--bg-soft); border-radius: 6px; padding: 1.5rem; margin-bottom: 1.5rem; @@ -235,8 +256,8 @@ } .portfolio-link:hover { - color: var(--text-primary); - background-color: var(--nord2); + color: var(--text); + background-color: var(--bg-soft); } ul { @@ -247,6 +268,259 @@ margin-bottom: 0.5rem; } + .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); + display: flex; + flex-direction: column; + } + + .source-images { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin-top: 1rem; + } + + .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; + } + + .image-box { + width: 100%; + height: 750px; + background-color: var(--bg-dark); + 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: var(--text); + margin-bottom: 0.5rem; + } + + .thank-you-slide { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 2rem; + height: auto; + } + + .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 .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; + } + + .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; + } + + #slideContainer7 .slide:last-child .image-container { + 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; + } + + @media (max-width: 1400px) { + .nav-button.prev { + left: 1rem !important; + } + .nav-button.next { + right: 1rem !important; + } + } + @media (max-width: 768px) { .container { padding: 1rem; diff --git a/en.html b/en.html index 5b6bc3a..ba94779 100644 --- a/en.html +++ b/en.html @@ -61,8 +61,8 @@ C# Python Kotlin - Rust (self-taught) - Ruby (self-taught) + Rust + Ruby