feat: adapta portfólio para mobile e melhora suporte a orientação

src/app/layouts/cabecalho/cabecalho.style.css

@@ -1,6 +1,6 @@
 .cabecalho-conteiner {
     display: flex;
-    height: 5vh;
+    height: var(--altura-barra-principal);
     justify-content: center;
     width: 100%;
     align-items: center;

src/app/layouts/pagina/pagina.component.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { useTema } from '../../providers/theme/tema.hook';
 import { CabecalhoComponent } from '../cabecalho/cabecalho.component';
 import { RodapeComponent } from '../rodape/rodape.component';
-import { BotaoVoltarComponent, InterruptorComponent, JanelaComponent, TituloComponent } from '../../../shared/ui';
+import { AvisoOrientacaoComponent, BotaoVoltarComponent, InterruptorComponent, JanelaComponent, TituloComponent } from '../../../shared/ui';
 import './pagina.style.css';
 
 
@@ -19,8 +19,9 @@ const PaginaLayout: React.FC<IPaginaLayoutProps> = ({ children, titulo, subtitul
 
     return (
         <div className='pagina-aplicacao'>
+            <AvisoOrientacaoComponent direcao='vertical' />
             <CabecalhoComponent />
-            <JanelaComponent>
+            <JanelaComponent className={ className }>
                 <div className='pagina-acoes'>
                     { mostrarBotaoVoltar && <BotaoVoltarComponent /> }
                     <InterruptorComponent acao={ alterarTema } marcado={ tema === 'escuro' } />

src/app/layouts/pagina/pagina.style.css

@@ -33,3 +33,17 @@
 @media (prefers-reduced-motion: reduce) {
     .pagina-conteiner { animation: none; }
 }
+
+@media (max-width: 700px) {
+    .pagina-acoes {
+        min-height: 2rem;
+    }
+
+    .pagina-conteiner {
+        gap: 1rem;
+        padding: 1.1rem 0 0;
+    }
+
+    .pagina-acoes .botao-voltar span { display: none; }
+    .pagina-acoes .botao-voltar svg { width: 2rem; height: 2rem; }
+}

src/app/layouts/rodape/rodape.style.css

@@ -1,7 +1,7 @@
 /* Rodape */
 .rodape-container {
     display: flex;
-    height: 5vh;
+    height: var(--altura-barra-principal);
     justify-content: center;
     width: 100%;
     align-items: center;

src/app/styles/global.css

@@ -17,6 +17,7 @@
     --espacamento: 8px;
     --raio-borda: 20px;
     --transicao: 180ms ease;
+    --altura-barra-principal: 5vh;
 }
 
 .tema-escuro {
@@ -73,3 +74,16 @@ img {
 #root {
     min-height: 100vh;
 }
+
+@media (max-width: 700px) {
+    :root { --altura-barra-principal: 5svh; }
+}
+
+.visualmente-oculto {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+}

src/pages/contato/contato.style.css

@@ -29,6 +29,14 @@
 .contato-redes a span { font-size: .28em; vertical-align: middle; }
 
 @media (max-width: 700px) {
-    .contato-conteudo { grid-template-columns: 1fr; }
-    .contato-redes { justify-items: start; }
+    .pagina-contato { gap: 1.25rem; }
+    .contato-conteudo { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
+    .contato-apresentacao { font-size: .86rem; }
+    .contato-apresentacao > p { font-size: .86rem; line-height: 1.4; }
+    .contato-lista { gap: 1.25rem; margin-top: 1.8rem; }
+    .contato-lista a { justify-content: center; gap: .75rem; }
+    .contato-lista strong { font-size: 1.65rem; font-weight: 500; }
+    .contato-lista small { font-size: .9rem; }
+    .contato-redes { justify-items: center; align-self: center; gap: 1rem; padding-bottom: 0; }
+    .contato-redes a { font-size: clamp(2.4rem, 12vw, 3.25rem); }
 }

src/pages/habilidades/habilidades.style.css

@@ -23,6 +23,7 @@
     place-items: center;
     border: 3px solid var(--cor-borda);
     border-radius: 1.8rem;
+    background-color: var(--cor-superficie);
     transition: transform var(--transicao), border-color var(--transicao), background-color var(--transicao);
 }
 
@@ -58,5 +59,26 @@
 }
 
 @media (max-width: 560px) {
-    .habilidades-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .janela-conteiner.pagina-habilidades {
+        height: auto;
+        min-height: calc(100svh - var(--altura-barra-principal) - var(--altura-barra-principal));
+    }
+
+    .janela-conteiner.pagina-habilidades .janela-conteudo {
+        min-height: calc(100svh - var(--altura-barra-principal) - var(--altura-barra-principal));
+    }
+
+    .pagina-habilidades { gap: 1rem; }
+
+    .habilidades-lista {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        align-content: start;
+        gap: 1.45rem 2rem;
+        padding-bottom: 1rem;
+    }
+
+    .habilidade { gap: .35rem; }
+    .habilidade-cartao { width: min(30vw, 7.5rem); border-width: 3px; border-radius: 1.45rem; }
+    .habilidade-marca { width: 3.5rem; height: 3.5rem; }
+    .habilidade h3 { font-size: .82rem; }
 }

src/pages/inicio/inicio.page.tsx

@@ -1,24 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { PaginaLayout } from '../../app/layouts';
 import { Menu } from '../../shared/ui';
 import './inicio.style.css'
 
 
 const InicioPage: React.FC = () => {
+    const [menuAberto, definirMenuAberto] = useState(false);
+
     return (
         <PaginaLayout titulo='Miguel Alves' subtitulo='Programador' className='pagina-inicio'>
             <div className='inicio-conteudo'>
                 <section className='inicio-secao-esquerda'>
-                    <nav aria-label='Navegação principal'>
+                    <button
+                        className={ menuAberto ? 'inicio-botao-menu aberto' : 'inicio-botao-menu' }
+                        type='button'
+                        aria-expanded={ menuAberto }
+                        aria-controls='menu-principal'
+                        onClick={ () => definirMenuAberto((aberto) => !aberto) }
+                    >
+                        <span className='inicio-icone-hamburger' aria-hidden='true'>
+                            <i />
+                            <i />
+                            <i />
+                        </span>
+                        <span className='inicio-icone-fechar' aria-hidden='true'>×</span>
+                        <span className='visualmente-oculto'>{ menuAberto ? 'Fechar menu' : 'Abrir menu' }</span>
+                    </button>
+                    <div id='menu-principal' className={ menuAberto ? 'inicio-menu aberto' : 'inicio-menu' }>
                         <Menu>
                             <Menu.Item texto='Início' link='/' ativo />
                             <Menu.Item texto='Sobre' link='/sobre' />
                             <Menu.Item texto='Habilidades' link='/habilidades' />
                             <Menu.Item texto='Portfólio' link='/portifolio' />
                             <Menu.Item texto='Contato' link='/contato' />
                         </Menu>
-                    </nav>
+                    </div>
                 </section>
 
                 <section className='inicio-secao-direita'>

src/pages/inicio/inicio.style.css

@@ -9,6 +9,8 @@
     width: 45%;
 }
 
+.inicio-botao-menu { display: none; }
+
 .inicio-secao-direita {
     width: 55%;
     display: flex;
@@ -51,17 +53,117 @@
     to { transform: rotate(360deg); }
 }
 
+body.tema-escuro .inicio--imagem-cubo-impossivel path:nth-child(-n + 2) { fill: #f5f5f5; }
+body.tema-escuro .inicio--imagem-cubo-impossivel path:nth-child(3),
+body.tema-escuro .inicio--imagem-cubo-impossivel path:nth-child(4) { fill: #939393; }
+body.tema-escuro .inicio--imagem-cubo-impossivel path:nth-child(n + 5) { fill: #5a5a5a; }
+
 @media (max-width: 700px) {
+    .pagina-inicio {
+        position: relative;
+        justify-content: space-between;
+        padding-top: 0;
+    }
+
+    .pagina-inicio > header {
+        order: 2;
+        margin: auto 0 3.3rem;
+        text-align: center;
+    }
+
+    .pagina-inicio .titulo-principal { font-size: clamp(2rem, 10vw, 2.45rem); }
+
     .inicio-conteudo {
-        flex-direction: column-reverse;
-        align-items: flex-start;
+        position: relative;
+        order: 1;
+        flex: 0 1 auto;
+        min-height: 0;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
     }
 
     .inicio-secao-direita {
         align-self: center;
+        padding-top: 1.25rem;
+    }
+
+    .inicio-secao-esquerda {
+        position: absolute;
+        z-index: 2;
+        top: -1.85rem;
+        left: 0;
+        width: auto;
+    }
+
+    .inicio-secao-direita { width: 100%; }
+
+    .inicio-botao-menu {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 4.15rem;
+        height: 2rem;
+        padding: 0;
+    }
+
+    .inicio-icone-hamburger,
+    .inicio-icone-fechar {
+        position: absolute;
+        display: grid;
+        place-items: center;
+        transition: opacity 180ms ease;
+    }
+
+    .inicio-icone-hamburger {
+        gap: .32rem;
+    }
+
+    .inicio-icone-hamburger i {
+        display: block;
+        width: 2.7rem;
+        height: 3px;
+        border-radius: 999px;
+        background: var(--cor-primaria);
+    }
+
+    .inicio-icone-fechar {
+        color: var(--cor-primaria);
+        font-size: 2.65rem;
+        font-weight: 400;
+        line-height: .7;
+        opacity: 0;
+    }
+
+    .inicio-botao-menu.aberto .inicio-icone-hamburger { opacity: 0; }
+    .inicio-botao-menu.aberto .inicio-icone-fechar { opacity: 1; }
+
+    .inicio-botao-menu:focus-visible {
+        outline: 2px solid var(--cor-destaque);
+        outline-offset: .3rem;
+    }
+
+    .inicio-menu {
+        position: absolute;
+        top: 3rem;
+        left: -.35rem;
+        display: none;
+        width: min(16rem, calc(100vw - 4.5rem));
+        padding: 1.15rem;
+        border: 3px solid var(--cor-borda);
+        border-radius: 1rem;
+        background: var(--cor-superficie);
+        box-shadow: .5rem .5rem 0 color-mix(in srgb, var(--cor-primaria) 18%, transparent);
     }
 
-    .inicio-secao-esquerda, .inicio-secao-direita { width: 100%; }
+    .inicio-menu.aberto { display: block; }
+    .inicio-menu .menu-conteiner ul { gap: .85rem; }
+    .inicio-menu .menu-item-link { gap: .8rem; }
+    .inicio-menu .menu-item-icone { width: .6rem; height: .6rem; }
+    .inicio-menu .menu-item-texto { font-size: 1.3rem; }
 
-    .inicio--imagem-cubo-impossivel { width: 220px; height: auto; }
+    .inicio--imagem-cubo-impossivel { width: min(63vw, 15.5rem); height: auto; }
+    .inicio-link-cubo { transform: translateY(4rem); }
+    .inicio-dica-cubo { display: none; }
 }

src/pages/jogo-da-vida/jogo-da-vida.tsx

@@ -1,6 +1,7 @@
 import React, { FC, PointerEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { RodapeComponent } from '../../app/layouts/rodape/rodape.component';
+import { AvisoOrientacaoComponent } from '../../shared/ui';
 import {
     alternarCelula,
     contarCelulasVivas,
@@ -115,6 +116,7 @@ const JogoDaVida: FC = () => {
 
     return (
         <div className='jogo-da-vida-pagina'>
+            <AvisoOrientacaoComponent direcao='horizontal' />
             <header className='jogo-da-vida-topo'>
                 <p>Jogo da Vida <span>· Conway</span></p>
                 <Link className='jogo-da-vida-marca' to='/' aria-label='Voltar à página inicial' />

src/pages/portifolio/portifolio.style.css

@@ -1 +1,5 @@
 .pagina-portifolio { min-height: 0; }
+
+@media (max-width: 700px) {
+    .pagina-portifolio { gap: 1.25rem; }
+}

src/pages/sobre/sobre.style.css

@@ -51,7 +51,10 @@
 }
 
 @media (max-width: 700px) {
-    .sobre-conteudo {
-        grid-template-columns: 1fr;
-    }
+    .pagina-sobre { gap: .85rem; }
+    .sobre-conteudo { grid-template-columns: 1fr; gap: 1.35rem; }
+    .sobre-foto { order: -1; }
+    .sobre-foto img { width: min(100%, 14.75rem); border-radius: 0; }
+    .sobre-apresentacao { gap: .65rem; font-size: clamp(.75rem, 3.25vw, .87rem); line-height: 1.28; text-align: center; }
+    .sobre-curriculo { align-self: center; min-width: min(100%, 16.5rem); margin-top: .55rem; padding: .8rem 1rem; border: 2px solid var(--cor-borda); border-radius: 1rem; color: var(--cor-primaria); background: transparent; }
 }

src/shared/ui/aviso-orientacao/aviso-orientacao.component.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './aviso-orientacao.style.css';
+
+
+interface IAvisoOrientacao {
+    direcao: 'vertical' | 'horizontal';
+}
+
+
+const AvisoOrientacaoComponent: React.FC<IAvisoOrientacao> = ({ direcao }) => {
+    const orientacaoVertical = direcao === 'vertical';
+
+    return (
+        <aside className={ `aviso-orientacao aviso-orientacao--${direcao}` } role='status'>
+            <div className='aviso-orientacao-ilustracao' aria-hidden='true'>
+                <span className='aviso-orientacao-celular'>
+                    <span className='aviso-orientacao-tela' />
+                    <span className='aviso-orientacao-botao-principal' />
+                </span>
+                <svg className='aviso-orientacao-seta' viewBox='0 0 72 72'>
+                    <path d='M56 36a22 22 0 1 1-12-20' />
+                    <path d='m44 7 2 11-11 2' />
+                </svg>
+            </div>
+            <h1>Gire seu celular</h1>
+            <p>
+                { orientacaoVertical
+                    ? 'Para continuar, volte o aparelho para a posição vertical.'
+                    : 'O Jogo da Vida funciona melhor com o aparelho na horizontal.' }
+            </p>
+        </aside>
+    );
+};
+
+
+export { AvisoOrientacaoComponent };