From 0293a5fa9db9970c64efeb0ab4982b576995f194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Henrique?= Date: Thu, 28 Aug 2025 17:41:49 -0300 Subject: [PATCH] improving responsiviness --- .gitea/workflows/matrix.yaml | 85 ------------------------------------ css/button.css | 21 +++++++++ css/main.css | 59 ++++++++++++++++++++++++- css/sections/hero.css | 59 +++++++++++++++++++++++-- css/sections/homelab.css | 47 ++++++++++++++++++++ css/sections/profile.css | 59 +++++++++++++++++++++++-- css/sections/projects.css | 70 ++++++++++++++++++++++++++++- index.html | 8 +++- js/matrix.js | 23 +++++++++- 9 files changed, 332 insertions(+), 99 deletions(-) delete mode 100644 .gitea/workflows/matrix.yaml diff --git a/.gitea/workflows/matrix.yaml b/.gitea/workflows/matrix.yaml deleted file mode 100644 index 7971922..0000000 --- a/.gitea/workflows/matrix.yaml +++ /dev/null @@ -1,85 +0,0 @@ -name: (Matrix) Homepage Build and Deploy - -on: - push: - workflow_dispatch: - -env: - REGISTRY_HOST: git.ivanch.me - REGISTRY_USERNAME: ivanch - IMAGE_NAME: ${{ env.REGISTRY_HOST }}/ivanch/mainpage - -jobs: - build: - strategy: - matrix: - include: - - platform: linux/amd64 - runner: ubuntu-slim - arch: amd64 - - platform: linux/arm64 - runner: ubuntu-arm64 # Your ARM64 runner label - arch: arm64 - runs-on: ${{ matrix.runner }} - name: Build Homepage Image (${{ matrix.arch }}) - - steps: - - name: Check out repository - uses: actions/checkout@v2 - - - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v3 - - - name: Log in to Container Registry - run: | - echo "${{ secrets.REGISTRY_PASSWORD }}" \ - | docker login "${{ env.REGISTRY_HOST }}" \ - -u "${{ env.REGISTRY_USERNAME }}" \ - --password-stdin - - - name: Build and Push Multi-Arch Image - uses: docker/build-push-action@v6 - with: - push: true - context: . - platforms: ${{ matrix.platform }} - tags: | - ${{ env.IMAGE_NAME }}:${{ matrix.arch }} - cache-from: type=gha - cache-to: type=gha,mode=max - - create-manifest: - needs: build - runs-on: ubuntu-latest - steps: - - name: Log in to Container Registry - run: | - echo "${{ secrets.REGISTRY_PASSWORD }}" \ - | docker login "${{ env.REGISTRY_HOST }}" \ - -u "${{ env.REGISTRY_USERNAME }}" \ - --password-stdin - - - name: Create and push manifest - run: | - docker manifest create ${{ env.IMAGE_NAME }}:latest \ - ${{ env.IMAGE_NAME }}:amd64 \ - ${{ env.IMAGE_NAME }}:arm64 - - docker manifest push ${{ env.IMAGE_NAME }}:latest - - deploy_ivanch_me: - name: Deploy Homepage - runs-on: ubuntu-amd64 - needs: build_ivanch_me - steps: - - name: Recreate Container - uses: appleboy/ssh-action@v0.1.7 - with: - host: ${{ secrets.HOST }} - username: ${{ secrets.USERNAME }} - key: ${{ secrets.KEY }} - port: ${{ secrets.PORT }} - script: | - cd ${{ secrets.DIR }} - docker compose pull - docker compose up -d --force-recreate \ No newline at end of file diff --git a/css/button.css b/css/button.css index d235356..2f47921 100644 --- a/css/button.css +++ b/css/button.css @@ -12,10 +12,31 @@ transition: all 0.3s ease; position: relative; overflow: hidden; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; /* Minimum touch target size for mobile */ + text-align: center; } .btn:hover { background: var(--button-hover-gradient); transform: translateY(-1px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1); +} + +/* Mobile button improvements */ +@media (max-width: 768px) { + .btn { + min-height: 48px; + padding: 12px 20px; + font-size: 14px; + } +} + +@media (max-width: 480px) { + .btn { + padding: 10px 16px; + font-size: 13px; + } } \ No newline at end of file diff --git a/css/main.css b/css/main.css index 320fc36..cd59dc8 100644 --- a/css/main.css +++ b/css/main.css @@ -13,6 +13,12 @@ body { min-height: 100vh; overflow-x: hidden; position: relative; + /* Improve text rendering on mobile */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + /* Prevent text size adjust on orientation change */ + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } h1, @@ -119,9 +125,26 @@ img { max-width: 26rem; } -@media (max-width: 768px) { +/* Mobile responsive content */ +@media (max-width: 1024px) { + .content { + min-width: unset; + max-width: unset; + width: 100%; + padding: 24px 20px; + } + .main-container { - padding: 0 15px; + position: relative; + top: auto; + left: auto; + transform: none; + padding: 20px 15px; + min-height: 100vh; + display: flex; + align-items: flex-start; + padding-top: 40px; + padding-bottom: 40px; } } @@ -129,6 +152,19 @@ img { body { font-size: 14px; } + + .main-container { + padding: 15px 10px; + padding-top: 30px; + padding-bottom: 30px; + } + + .content { + padding: 20px 16px; + min-width: unset; + max-width: unset; + width: 100%; + } } /* Accessibility: disable animated shadows for users who prefer reduced motion */ @@ -136,4 +172,23 @@ img { .glass { animation: none !important; } +} + +/* High DPI display optimizations */ +@media only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min--moz-device-pixel-ratio: 2), + only screen and (-o-min-device-pixel-ratio: 2/1), + only screen and (min-device-pixel-ratio: 2), + only screen and (min-resolution: 192dpi), + only screen and (min-resolution: 2dppx) { + .glass { + /* Enhanced blur for high DPI screens */ + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + } + + .content { + backdrop-filter: blur(40px) saturate(180%) brightness(1.1); + -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.1); + } } \ No newline at end of file diff --git a/css/sections/hero.css b/css/sections/hero.css index 013fd1c..3325ff7 100644 --- a/css/sections/hero.css +++ b/css/sections/hero.css @@ -57,8 +57,6 @@ display: flex; flex-direction: column; gap: 24px; - flex: 1 1 0; - min-width: 0; } .hero-card { @@ -92,6 +90,8 @@ display: flex; gap: 16px; flex-wrap: wrap; + justify-content: center; + align-items: center; } .social-link { display: inline-flex; @@ -99,13 +99,37 @@ gap: 8px; } -@media (max-width: 900px) { +/* Responsive Design - Mobile First Approach */ +@media (max-width: 1024px) { .hero-details { flex-direction: column; gap: 24px; } + .hero-card { grid-template-columns: 1fr; + text-align: center; + } +} + +/* Ensure hero main column and its boxes fill available width on tablet/mobile */ +@media (max-width: 1024px) { + .hero-main-column { + width: 100%; + align-items: stretch; + } + + /* Override .content fixed min/max so it can expand to the container */ + .content { + min-width: unset; + max-width: unset; + width: 100%; + } + + .homelab-section { + min-width: unset; + max-width: unset; + width: 100%; } } @@ -123,10 +147,12 @@ .description { font-size: 1.1rem; + margin-bottom: 24px; } .social-links { justify-content: center; + gap: 14px; } } @@ -138,13 +164,38 @@ .name { font-size: 1.8rem; } + + .description { + font-size: 1rem; + margin-bottom: 20px; + } .social-links { gap: 12px; + flex-wrap: wrap; } .social-link { - padding: 10px 16px; + padding: 10px 14px; font-size: 13px; + min-width: 0; + flex: 1; + max-width: calc(50% - 6px); + justify-content: center; + } + + .social-link span { + display: none; + } + + .social-link i { + font-size: 16px; + } +} + +@media (max-width: 380px) { + .social-link { + max-width: calc(100% / 2 - 6px); + padding: 12px; } } \ No newline at end of file diff --git a/css/sections/homelab.css b/css/sections/homelab.css index 62233a5..6858ca4 100644 --- a/css/sections/homelab.css +++ b/css/sections/homelab.css @@ -14,6 +14,53 @@ gap: 18px; position: relative; overflow: hidden; + text-align: center; +} + +/* Mobile responsive homelab section */ +@media (max-width: 768px) { + .homelab-section { + min-width: unset; + max-width: unset; + width: 100%; + padding: 28px 20px; + } + + .homelab-title { + font-size: 1.3rem; + text-align: center; + } + + .homelab-buttons { + justify-content: center; + } +} + +@media (max-width: 480px) { + .homelab-section { + padding: 24px 16px; + gap: 16px; + min-width: unset; + max-width: unset; + width: 100%; + } + + .homelab-title { + font-size: 1.2rem; + } + + .homelab-buttons { + gap: 12px; + flex-direction: column; + align-items: center; + } + + .homelab-btn { + width: 100%; + max-width: 200px; + text-align: center; + justify-content: center; + } } .homelab-background { diff --git a/css/sections/profile.css b/css/sections/profile.css index 2a50c0d..5bcb95c 100644 --- a/css/sections/profile.css +++ b/css/sections/profile.css @@ -10,6 +10,7 @@ .profile-info-item { display: flex; + flex-direction: row; align-items: center; gap: 0.6rem; font-size: 0.95rem; @@ -76,19 +77,71 @@ border-radius: var(--border-radius-large); } -@media (max-width: 768px) { +@media (max-width: 1024px) { + .profile-info { + align-items: center; + margin-top: 1.5rem; + } + + .avatar { + width: 140px; + height: 140px; + margin: 0 auto; + } +} + +@media (max-width: 768px) { + .profile-container { + text-align: center; + } + + .profile-info { + align-items: center; + margin-top: 1.5rem; + } + + .profile-info-item { + justify-content: center; + text-align: center; + } + .avatar { width: 140px; height: 140px; margin: 0 auto; - font-size: 40px; } } @media (max-width: 480px) { + .profile-info { + gap: 0.8rem; + margin-top: 1.2rem; + } + + .profile-info-item { + font-size: 0.9rem; + flex-direction: row; + gap: 0.4rem; + } + + .profile-info-item i { + font-size: 1.2rem; + margin-right: 0.2rem; + } + .avatar { width: 120px; height: 120px; - font-size: 32px; + } +} + +@media (max-width: 380px) { + .avatar { + width: 100px; + height: 100px; + } + + .profile-info-item { + font-size: 0.85rem; } } \ No newline at end of file diff --git a/css/sections/projects.css b/css/sections/projects.css index 257a184..0168df9 100644 --- a/css/sections/projects.css +++ b/css/sections/projects.css @@ -66,12 +66,24 @@ display: flex; align-items: center; justify-content: space-between; + gap: 8px; } .project-icons { display: flex; gap: 8px; align-items: center; + flex: 0 0 auto; + flex-wrap: nowrap; +} + +/* Ensure long titles don't push icons to a new line */ +.project-title > span:first-child { + flex: 1 1 auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .project-icon-link { @@ -94,12 +106,66 @@ } -@media (max-width: 900px) { +@media (max-width: 1024px) { .projects-section { flex: unset; max-width: 100%; margin-left: 0; margin-top: 24px; - max-width: 100%; + min-width: unset; + } +} + +@media (max-width: 768px) { + .projects-section { + padding: 28px 20px; + gap: 16px; + } + + .projects-title { + font-size: 1.5rem; + text-align: center; + margin-bottom: 12px; + } +} + +@media (max-width: 480px) { + .projects-section { + padding: 24px 16px; + gap: 14px; + } + + .projects-title { + font-size: 1.4rem; + } + + .project { + padding: 16px 14px; + } + + .project-title { + font-size: 1.1rem; + } + + .project-desc { + font-size: 0.95rem; + } + + .project-icons { + gap: 6px; + } +} + +@media (max-width: 380px) { + .project { + padding: 14px 12px; + } + + .project-title { + font-size: 1.05rem; + /* Keep a single row layout even on very small screens */ + flex-direction: row; + align-items: center; + gap: 8px; } } \ No newline at end of file diff --git a/index.html b/index.html index 6fd9e56..b50f809 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,15 @@ - + + + + + + + diff --git a/js/matrix.js b/js/matrix.js index 668e5ef..d279b71 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -5,11 +5,11 @@ class MatrixBackground { this.dots = []; this.connections = []; this.config = { - dotCount: 50, + dotCount: this.getMobileDotCount(), dotSpeed: 0.2, connectionDuration: { min: 2000, max: 6000 }, connectionChance: 0.0002, - maxConnections: 8, + maxConnections: this.getMobileMaxConnections(), dotSize: 3, colors: { dotDefault: 'rgba(255, 255, 255, 0.8)', @@ -27,6 +27,20 @@ class MatrixBackground { this.init(); } + getMobileDotCount() { + // Reduce dot count on mobile devices for better performance + if (window.innerWidth <= 480) return 25; + if (window.innerWidth <= 768) return 35; + return 50; + } + + getMobileMaxConnections() { + // Reduce max connections on mobile devices + if (window.innerWidth <= 480) return 4; + if (window.innerWidth <= 768) return 6; + return 8; + } + init() { this.handleResize(); this.animate(); @@ -36,6 +50,11 @@ class MatrixBackground { handleResize() { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; + + // Update mobile-specific configurations + this.config.dotCount = this.getMobileDotCount(); + this.config.maxConnections = this.getMobileMaxConnections(); + this.createDots(); }