masterbare/index.html at main · JotaMarcos/masterbare · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master Baré | João Marcos</title>
    <meta name="description" content="Analista de TI, Engenheiro de Software Java Full Stack e Professor Universitário.">
    <link rel="shortcut icon" href="./icon/favicon.png" type="image/x-icon">

    <!-- Ícones Profissionais (Font Awesome 6 Atualizado) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Link para o arquivo CSS -->
    <link rel="stylesheet" href="./estilo/style.css" />
</head>
<body>

    <header class="header">
        <canvas id="header-canvas"></canvas>
        <p class="header__subtitle">Domine a Web com um Clique!</p>
        <div class="header__content">
            <h1 class="header__title">Olá, meu nome é João Marcos</h1>
        </div>
    </header>

    <main>
        <!-- Seção Perfil -->
        <section id="perfil" class="profile">

            <!-- Logo tecnológica flutuante -->
            <img class="profile__bg-logo" src="imagens/logo.png" alt="Logo Tecnológica Master Baré" loading="lazy" />

            <div class="profile__container tech-data-bg">
                <div class="profile__avatar-container">
                    <img class="profile__avatar" src="imagens/jotamarcos.png" alt="Foto de perfil de João Marcos"/>
                </div>

                <!-- Resumo Executivo Otimizado -->
                <p class="profile__copy">
                    Atuo estrategicamente como <strong>Analista de TI na AADESAM pelo Projeto Novo TJAM</strong>, liderando frentes de suporte especializado, sustentação evolutiva, testes e homologação de ecossistemas críticos do Poder Judiciário do Amazonas, incluindo plataformas como PROJUDI, PJeCor, Correições, Certidões e Custas. Desenvolvo e gerencio integrações robustas via API REST com os Correios (AR Digital) e barramentos SOAP/MNI junto ao Ministério Público. Especialista no diagnóstico ágil de logs em servidores corporativos, mapeamento de demandas e gestão de fluxos no JIRA, servindo como uma ponte de comunicação assertiva para traduzir necessidades complexas de negócio em requisitos de engenharia de software claros e acionáveis.
                </p>

                <p class="profile__copy">
                    Possuo sólida bagagem como <strong>Desenvolvedor Java Full Stack</strong>. No ecossistema back-end, governo arquiteturas modulares utilizando Spring Boot, Hibernate, JPA, Maven, Tomcat, JUnit e Mockito, integradas a barramentos de microsserviços e APIs REST rigorosamente documentadas sob a especificação Swagger. No front-end, construo interfaces performáticas e responsivas com Angular e TypeScript. Ampla experiência em modelagem e manutenção de dados relacionais e não-relacionais, operando PostgreSQL e Oracle via DBeaver. Especialista na modernização de sistemas legados complexos orientados à refatoração contínua, pilares de Clean Code e aplicação rigorosa de Test-Driven Development (TDD) sob a governança ágil dos frameworks Scrum e Kanban.
                </p>

                <p class="profile__copy">
                    Consolido minha senioridade técnica atuando como <strong>Professor Universitário na Faculdade Senac AM (FATESE)</strong>. Ministro disciplinas de Lógica de Programação, Engenharia de Software, Arquitetura Web, Testes de Qualidade (QA), Governança corporativa de TI, Modelagem de Bancos de Dados, Redes de Computadores e Cyber Security. A vivência acadêmica potencializa minha visão sistêmica de mercado, refinando habilidades analíticas e liderança de times multidisciplinares de alto desempenho.
                </p>

                <!-- Selos de Certificações -->
                <div class="profile__certifications">
                    <span><i class="fas fa-certificate"></i> ITIL® 4 Foundation</span>
                    <span><i class="fas fa-certificate"></i> Scrum Foundation</span>
                    <span><i class="fas fa-certificate"></i> Kanban Foundation</span>
                    <span><i class="fas fa-certificate"></i> DevOps Essentials</span>
                </div>

               <!-- Links e Ícones Sociais Nativos na Área de Destaque -->
                <div class="profile__social-wrapper">
                    <a href="https://www.linkedin.com/in/jotamarcosduarte/" target="_blank" class="social-btn linkedin-btn" aria-label="LinkedIn">
                        <i class="fa-brands fa-linkedin-in"></i> LinkedIn
                    </a>
                    <a href="https://github.com/JotaMarcos" target="_blank" class="social-btn github-btn" aria-label="GitHub">
                        <i class="fa-brands fa-github"></i> GitHub
                    </a>
                    <a href="https://teams.microsoft.com/l/chat/0/0?users=jmarcos_duarte@hotmail.com" target="_blank" class="social-btn teams-btn" aria-label="Microsoft Teams">
                        <i class="fa-brands fa-microsoft"></i> Teams
                    </a>
                    <a href="https://wa.me/5592991766216?text=Olá,%20gostaria%20de%20mais%20informações." target="_blank" class="social-btn whatsapp-btn" aria-label="WhatsApp">
                        <i class="fa-brands fa-whatsapp"></i> WhatsApp
                    </a>
                </div>
            </div>
        </section>

        <!-- Seção Especialidades -->
        <section id="especialidades" class="especialidades tech-education-bg">
            <h2 class="section-title">Minhas Especialidades</h2>

            <div class="especialidades__grid">
                <div class="especialidades__card">
                    <div class="card-icon"><i class="fas fa-laptop-code"></i></div>
                    <h3>Front-End</h3>
                    <ul class="repo-list">
                        <li><a href="https://jotamarcos.github.io/contatosEstruturaHtml5Css3/index.html"><i class="fa-brands fa-github"></i> HTML5, CSS3</a></li>
                        <li><a href="https://barbearia-alura-jotamarcos.bohr.io/"><i class="fa-brands fa-github"></i> HTML5, CSS3, JavaScript</a></li>
                        <li><a href="https://github.com/JotaMarcos/LifeCycleHooks"><i class="fa-brands fa-github"></i> LifeCycleHooks</a></li>
                        <li><a href="https://jotamarcos.github.io/ceepalura/"><i class="fa-brands fa-github"></i> CeePAlura</a></li>
                        <li><a href="https://github.com/JotaMarcos/ProjetoCursoAngular"><i class="fa-brands fa-github"></i> ProjetoCursoAngular</a></li>
                        <li><a href="https://github.com/JotaMarcos/smartweb-hair"><i class="fa-brands fa-github"></i> Smartweb-Hair</a></li>
                        <li><a href="https://github.com/JotaMarcos/DiretivasProject"><i class="fa-brands fa-github"></i> DiretivasProject</a></li>
                    </ul>
                </div>

                <div class="especialidades__card">
                    <div class="card-icon"><i class="fas fa-terminal"></i></div>
                    <h3>Back-End</h3>
                    <ul class="repo-list">
                        <li><a href="https://github.com/JotaMarcos/EstudoJava"><i class="fa-brands fa-github"></i> EstudoJava</a></li>
                        <li><a href="https://github.com/JotaMarcos/DesafioSefaz"><i class="fa-brands fa-github"></i> DesafioSefaz</a></li>
                        <li><a href="https://github.com/JotaMarcos/CadastroPessoasGerarCSV"><i class="fa-brands fa-github"></i> CadastroPessoasGerarCSV</a></li>
                        <li><a href="https://github.com/JotaMarcos/aulaexpress"><i class="fa-brands fa-github"></i> Aula Express</a></li>
                        <li><a href="https://github.com/JotaMarcos/AulaPDV"><i class="fa-brands fa-github"></i> AulaPDV</a></li>
                        <li><a href="https://github.com/JotaMarcos/BoasPraticasCleanCode"><i class="fa-brands fa-github"></i> Boas Práticas de Clean Code</a></li>
                        <li><a href="https://github.com/JotaMarcos/API-Aplicacao-ASP.NET-MVC"><i class="fa-brands fa-github"></i> API-Aplicacao-ASP.NET-MVC</a></li>
                    </ul>
                </div>
            </div>

            <div class="phrase-container">
                <p class="typing-text">O conhecimento transforma a vida!</p>
            </div>
        </section>
    </main>

  <!-- Rodapé Corporativo -->
<footer class="footer">
    <p>&copy; <span id="year"></span> - Todos os direitos são reservados à MasterBaré</p>
    <ul class="footer__social">
        <li><a href="https://www.linkedin.com/in/jotamarcosduarte/" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a></li>
        <li><a href="https://github.com/JotaMarcos" target="_blank" aria-label="GitHub"><i class="fa-brands fa-github"></i></a></li>
        <li><a href="https://teams.microsoft.com/l/chat/0/0?users=jmarcos_duarte@hotmail.com" target="_blank" aria-label="Microsoft Teams"><i class="fa-brands fa-microsoft"></i></a></li>
        <li><a href="https://wa.me/5592991766216?text=Olá,%20gostaria%20de%20mais%20informações." target="_blank" aria-label="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a></li>
    </ul>
</footer>

    <script src="./js/main.js" defer></script>
</body>
</html>