Portfolio/index.html at main · LucasPerrone21/Portfolio · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portifolio">
    <meta name="keywords" content="HTML, CSS, JavaScript, Fullstack">
    <meta name="author" content="Lucas Perrone">
    <link rel="shortcut icon" type="imagex/png" href="./Imagens/logoReduzida.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="./css/style.css">
    <title>Lucas Perrone - Fullstack Developer</title>
    <script type="module" src="./js/script.js" defer></script>
</head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-25EFW68HFT"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-25EFW68HFT');
</script>

<body>
    <header class="cabecalhoExterno">
        <nav class="cabecalho">
            <h1 class="logo"> &lt;/Lucas Perrone&gt;</h1>
            <span id="menuBurguer" class="material-symbols-outlined menuBurguer oi">menu</span>
            <ul id="cabecalhoBurguer" class="cabecalhoLista">
                <li><a class="linkCabecalho" href="#quemSouEu">Home</a></li>
                <li><a class="linkCabecalho linkCabecalho-Central" href="#projetos">Projetos</a></li>
                <li><a class="linkCabecalho" href="#contato">Contato</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section alt="Quem sou eu" id="quemSouEu">
            <div class="quemSouEu">
                <div class="descricao">
                    <div class="nomeGradiente">
                        <h2 class="meuNome">Lucas Perrone</h2>
                        <h3 class="meuNome-Cargo" id="cargoAnimation">I'm Fullstack Developer</h3>
                    </div>
                    <p class="minhaDescricao">E aí, curioso visitante do meu cantinho cibernético!👋 Sou um Dev FullStack que trabalha com <strong class="minhaDescricao-Negrito">HTML, CSS, JavaScript, React e Python</strong> nos projetos. Atualmente curso <strong class="minhaDescricao-Negrito">Sistemas de Informação</strong> na Universidade Federal da Bahia e estou estudando <strong class="minhaDescricao-Negrito">Desenvolvimento WEB</strong>
                    </p>
                    <div class="iconesTecnologias-container">
                        <img class="iconesTecnologias" src="Imagens/Icones/html.png" alt="HTML5" data-modal="modalHTML">
                        <img class="iconesTecnologias" src="Imagens/Icones/css-3.png" alt="CSS3" data-modal="modalCSS">
                        <img class="iconesTecnologias" src="Imagens/Icones/js.png" alt="JavaScript" data-modal="modalJS">
                        <img class="iconesTecnologias" src="Imagens/Icones/react.png" alt="ReactJS" data-modal="modalReactJS">
                        <img class="iconesTecnologias" src="Imagens/Icones/python.png" alt="Python" data-modal="modalPython">
                        <a target="_blank" href="https://github.com/LucasPerrone21">
                            <img class="iconesTecnologias links-redes" src="Imagens/Icones/github.png" alt="Github">
                        </a>
                        <a target="_blank" href="https://www.linkedin.com/in/lucasperrone21/">
                            <img class="iconesTecnologias links-redes" src="Imagens/Icones/linkedin.png" alt="LinkedIn">
                        </a>

                    </div>
                </div>
                <div class="minhaFoto-Container">
                    <img class="minhaFoto" src="Imagens/minhaFoto.png" alt="Minha Foto">
                    <div class="circulo1"></div>
                    <div class="circulo2"></div>

                </div>
            </div>
        </section>


        <section class="meusProjetos" id="projetos" alt="Meus Projetos">
            <h2 class="meusProjetos-Titulo">Meus Projetos</h2>
            <ul class="meusProjetos-Itens-Container">
                <li class="meusProjetos-Itens">
                    <img class="meusProjetos-Fotos" src="Imagens/fotoProjetos/perroneAutomobilli.png" alt="Imagem da Perrone Automobilli">
                    <div class="meusProjetos-Descricao">
                        <h3 class="meusProjetos-Subtitulo">Perrone Automobilli</h3>
                        <p class="meusProjetos-Descricao-Paragrafo">Esse foi um projetinho que fiz para testar minhas habilidades com HTML e CSS. Basicamente é uma Landing Page Responsiva de uma preparadora automotiva fictícia. Ela consta com uma página de boas vindas, uma de projetos e uma ultima com contatos.</p>
                        <div class="linksProjetos">
                            <a href="https://github.com/LucasPerrone21/Perrone_Automobilli" target="_blank">
                                <img src="Imagens/Icones/githubRepositório.png" alt="Repositório GitHub" class="linkRepositorio">
                            </a>
                            <a href="https://lucasperrone21.github.io/Perrone_Automobilli/" target="_blank">
                                <img src="Imagens/Icones/sitePublicado.png" alt="Site Publicado" class="linkSitePublicado">
                            </a>
                        </div>
                    </div>
                </li>
                <li class="meusProjetos-Itens meusProjetos-Itens-Central">

                    <div class="meusProjetos-Descricao">
                        <h3 class="meusProjetos-Subtitulo">Space Invaders</h3>
                        <p class="meusProjetos-Descricao-Paragrafo">Esse foi um jogo que fiz com meu grupo para testar minhas habilidades com Python em Orientação a Objetos. O jogo foi construido usando a plataforma de aprendizado TuPy, criada pelo professor <a class="linkRodrigo" href="https://github.com/rodrigorgs" target="_blank">Rodrigo Rocha, da Universidade Federal da Bahia</a>. Utilizamos diversos conceitos de POO, como hereditariedade, polimorfismo, tratamento de erros entre outros.</p>
                        <div class="linksProjetos">
                            <a href="https://github.com/costagguilherme/space-invaders" target="_blank">
                                <img src="Imagens/Icones/githubRepositório.png" alt="Repositório GitHub" class="linkRepositorio">
                            </a>
                        </div>
                    </div>
                    <img class="meusProjetos-Fotos spaceInvaders" src="Imagens/fotoProjetos/spaceInvaders.png" alt="Print do Space Invaders">
                </li>
                <li class="meusProjetos-Itens">
                    <img class="meusProjetos-Fotos" src="Imagens/fotoProjetos/chasingStrawberrys.png" alt="Print do Chasing Strawberrys">
                    <div class="meusProjetos-Descricao">
                        <h3 class="meusProjetos-Subtitulo">Chasing Strawberrys</h3>
                        <p class="meusProjetos-Descricao-Paragrafo">Esse foi um jogo feito por mim e minha equipe para testar os conceitos de Threads em Python. O jogo foi feito usando a biblioteca PyGameZero. Basicamente dois jogadores competem para ver quem pega o maior número de morangos num determinado periodo de tempo</p>
                        <div class="linksProjetos">
                            <a href="https://github.com/LucasPerrone21/Catching-Strawberrys" target="_blank">
                                <img src="Imagens/Icones/githubRepositório.png" alt="Repositório GitHub" class="linkRepositorio">
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </section>


        <section id="contato" class="contatoExterno">
            <h2 class="contato-Titulo">Contate-me</h2>
            <div class="contatoInterno">
                <div class="contatoEsquerda">
                    <p class="contato-Paragrafo">Se você gostou do meu trabalho e quer entrar em contato comigo, pode me mandar um e-mail ou uma mensagem no LinkedIn. Ficarei feliz em responder!</p>
                    <div class="contato-Icones">
                        <a target="_blank" href="https://github.com/LucasPerrone21">
                            <img class="contato-redes" src="Imagens/Icones/github-contato.png" alt="Github">
                        </a>
                        <a target="_blank" href="https://www.linkedin.com/in/lucasperrone21/">
                            <img class="contato-redes" src="Imagens/Icones/linkedin.png" alt="LinkedIn">
                        </a>
                    </div>
                </div>
                <form class="contatoDireita">

                    <input class="entradaInput" type="text" placeholder="Nome" name="nome" id="nome" required>

                    <input class="entradaInput" type="text" placeholder="Empresa" name="empresa" id="empresa" required>

                    <input class="entradaInput" type="email" placeholder="E-mail" name="email" id="email" required>

                    <textarea maxlength="500" class="mensagem entradaInput" name="mensagem" id="mensagem" cols="30" rows="10" required placeholder="Mensagem"></textarea>
                    <button class="enviarBotao" type="submit">Enviar</button>
                </form>
            </div>
        </section>
    </main>

    <footer>
        <p class="direitos">© 2023 Lucas Perrone. Todos os direitos reservados.</p>
    </footer>

    <section class="modalLinguagensContainer modalPython">
        <div class="modalLinguagens">
            <h3 class="modalTitulo">Python</h3>
            <span class="modalBotao">X</span>

            <div class="modalTextoImagem">
                <img class="modalImagem" src="./Imagens/Icones/python.png" alt="Logo da Linguagem Python">
                <p class="modalTexto">Python é uma linguagem de programação de alto nível, destacada por sua sintaxe clara e expressiva, promovendo produtividade e legibilidade, Sendo amplamente utilizada em desenvolvimento web, automação, análise de dados e inteligência artificial.</p>
            </div>
        </div>
    </section>

    <section class="modalLinguagensContainer modalReactJS">
        <div class="modalLinguagens">
            <h3 class="modalTitulo">ReactJS</h3>
            <span class="modalBotao">X</span>

            <div class="modalTextoImagem">
                <img class="modalImagem" src="./Imagens/Icones/react.png" alt="Logo da Biblioteca ReactJS">
                <p class="modalTexto">ReactJS é uma biblioteca JavaScript declarativa, eficiente e flexível para a construção de interfaces de usuário. Com seu modelo de programação baseado em componentes, ReactJS é amplamente utilizado no desenvolvimento de interfaces de usuário interativas e responsivas.</p>
            </div>
        </div>
    </section>

    <section class="modalLinguagensContainer modalHTML">
        <div class="modalLinguagens">
            <h3 class="modalTitulo">HTML5</h3>
            <span class="modalBotao">X</span>

            <div class="modalTextoImagem">
                <img class="modalImagem" src="./Imagens/Icones/html.png" alt="Logo da linguagem HTML5">
                <p class="modalTexto">HTML5 é a quinta versão da linguagem de marcação usada para estruturar conteúdo na web. Introduziu novos elementos e APIs que possibilitam a criação de páginas web mais ricas e interativas.</p>
            </div>
        </div>
    </section>

    <section class="modalLinguagensContainer modalCSS">
        <div class="modalLinguagens">
            <h3 class="modalTitulo">CSS3</h3>
            <span class="modalBotao">X</span>

            <div class="modalTextoImagem">
                <img class="modalImagem" src="./Imagens/Icones/css-3.png" alt="Logo da linguagem CSS3">
                <p class="modalTexto">CSS3 é a terceira versão das Folhas de Estilo em Cascata. Ele adicionou recursos como transições, animações e efeitos visuais, permitindo uma estilização mais avançada e atraente para páginas web.</p>
            </div>
        </div>
    </section>

    <section class="modalLinguagensContainer modalJS">
        <div class="modalLinguagens">
            <h3 class="modalTitulo">JavaScript</h3>
            <span class="modalBotao">X</span>

            <div class="modalTextoImagem">
                <img class="modalImagem" src="./Imagens/Icones/js.png" alt="Logo da linguagem JavaScript">
                <p class="modalTexto">JavaScript é uma linguagem de programação de alto nível, interpretada e orientada a objetos. Amplamente utilizada para adicionar interatividade às páginas web, ela permite a manipulação dinâmica do conteúdo e a criação de experiências do usuário mais dinâmicas.</p>
            </div>
        </div>
    </section>


</body>


</html>