Modelo de Entrega Do Trabalho - Meu Portfólio - Yngridy Silva

CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER
ESCOLA SUPERIOR POLITÉCNICA

CST ANÁLISE E DESENVOLVIMENTO DE SISTEMAS - DISTÂNCIA
FERRAMENTAS DA PROGRAMAÇÃO WEB
ATIVIDADE PRÁTICA
YNGRIDY PEREIRA SANTOS SILVA, 4424216
SANTOS-SP
2023
1. Estrutura de pastas do projeto
2. COLOCAR NOME DOS ARQUIVOS

Nome do arquivo: index.html
<!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>Portfólio - Yngridy Silva</title>
<link rel="stylesheet" href="style.css">
</head>
<body>


<nav class="navbar">
<ul class="link-group">
<li class="link active"><a href="#">início</a></li>
<li class="link"><a href="#">projetos</a></li>
<li class="link"><a href="#">sobre mim</a></li>
<li class="link"><a href="#">contato</a></li>
</ul>
</nav>

<section class="home-section active">

<h1 class="hero-heading">Hello, i am <br> Yngridy</h1>
<img src="img/início.jpg" class="home-img" alt="">
</section>
1

<section class="project-section ">
<h1 class="project-heading">alguns dos meus projetos</h1>
<div class="project-container">
<div class="project-card">
<img src="img/projeto-1.png" class="project-img" alt="">
<div class="project-content">
<h1 class="project-title">meu portfólio</h1>
<p class="project-info">
Esse é o meu primeiro projeto de programação. Utilizei
HTML, CSS e JavaScript para fazer o meu portfólio.
</p>
<div class="project-btn-grp">
<button class="project-btn github">github repositó-
rio</button>
<a href="https://yngridysilva.000webhostapp.com/"
class="project-btn live">ver projeto</a>
</div>
</div>
</div>
<h1 class="project-title">jogo da velha</h1>
Projeto em andamento, ainda não foi concluído. Estou
fazendo o jogo da velha em C.
</p>
rio</button>
<a href="https://www.exemplo.com" class="project-btn
live">ver projeto</a>
</div>
</div>
</div>
<h1 class="project-title">jogo da memória</h1>
fazendo o jogo da memória em HTML, CSS e JavaScript.
</p>
rio</button>
</div>
</div>
</div>
<h1 class="project-title">calculadora</h1>
fazendo a calculadora em Python.
</p>
rio</button>
</div>
</div>
</div>
</div>
</section>


<section class="about-section">
<div class="about">
<div class="about-img-container">
<img src="img/início.jpg" class="about-img" alt="">
<a href="https://docs.google.com/document/d/1WEOwkOMRH-Gc-
Tscbf4B2MOnM9TR3dXP/edit?usp=sha-
ring&ouid=118318413046123235801&rtpof=true&sd=true" class="download-cv-
btn">download cv</a>
</div>
<p class="about-info">Meu nome é Yngridy Silva e estou cursando
análise e desenvolvimento de sistemas na Uninter. Desde de pequena sempre gos-
tei de tecnologia, adorava saber como as coisas funcionavam, ou seja, eu era
garotinha que sempre estava abrindo carrinhos de controle remoto, aparelhos
queimados etc., só para ver como era por dentro. Com 17 anos, consegui um em-
prego como aprendiz na área de suporte técnico e foi nessa época que realmente
eu sabia que queria seguir a área da TI.
<br>Agora, com 19 anos, continuo apaixonada nessa área! Pre-
tendo trabalhar como estagiária na área de suporte técnico, a área onde come-
çou a minha história com a tecnologia.</p>
</div>


<div class="skill-section">
<h1 class="heading">skills</h1>
<div class="skills-container">
<div class="skill-card">
<img src="img/html.png" class="skill-img" alt="">
<div class="skill-level">50%</div>
<h1 class="skill-name">HTML</h1>
<p class="skill-info">Estou estudando essa linguagem.</p>
</div>
<img src="img/css.png" class="skill-img" alt="">
<h1 class="skill-name">CSS</h1>
</div>
<img src="img/js.png" class="skill-img" alt="">
<h1 class="skill-name">JS</h1>
</div>
</div>
</div>


<div class="timeline">
<h1 class="heading">formação e experiência</h1>
<div class="card">
<div class="card-body">
<h1 class="card-title">2021-2022</h1>
<p class="card-detail">Trabalhei como aprendiz na empresa
SPA(Santos Port Authority) no setor de suporte técnico.</p>
</div>
</div>
<div class="card">
<p class="card-detail">Ensino médio completo. Estudei no
período noturno na E. E. Neves Prado Monteiro.</p>
</div>
</div>
<div class="card">
<p class="card-detail">Comclusão do curso de auxiliar ad-
ministrativo do CAMPS.
<br>
</p>
</div>
</div>
<div class="card">
<p class="card-detail">Faculdade de Análise e Desenvolvi-
mento de Sistemas na Uninter. Duração de 2 anos e 6 meses.
</p>
</div>
</div>
<div class="card">
<h1 class="card-title">2023-...</h1>
<p class="card-detail">Voluntariado em uma ONG, onde auxi-
lio os professores com as crianças.</p>
</div>
</div>
</div>
</section>


<section class="contact-section">
<form class="contact-form">
<input type="text" name="name" id="name" autocomplete="off" pla-
ceholder="name">
<input type="text" name="email" id="email" autocomplete="off" pla-
ceholder="email">
<textarea name="msg" id="msg" placeholder="message" autocom-
plete="off"></textarea>
<button type="submit" class="form-submit-btn">Enviar</button>
</form>

<div class="map">
<iframe src="https://www.google.com/maps/em-
bed?pb=!1m18!1m12!1m3!1d58338.50203561331!2d-46.38587457454149!3d-
23.954909814096755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce034
23c3b1c3b%3A0x584dceedfc63644f!2sSantos%2C%20SP!5e0!3m2!1spt-
BR!2sbr!4v1698084904218!5m2!1spt-BR!2sbr" width="600" height="450" style="bor-
der:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-
downgrade"></iframe>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Nome do arquivo: style.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
max-width: 1400px;
display: block;
margin: auto;
min-height: 100vh;
background: #191919;
font-family: sans-serif;
}
.navbar{
width: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 9;
background: #1a1a1a;
}
.link-group{
list-style: none;
display: flex;
}
.link a{
color: #fff;
opacity: 0.5;
text-decoration: none;
text-transform: capitalize;
padding: 10px 30px;
margin: 0 20px;
line-height: 80px;
transition: .5s;
font-size: 20px;
}
.link a:hover, .link.active a{

opacity: 1;
}
/* seção inicial */
.home-section.active,
.project-section.active,
.about-section.active,
.contact-section.active{
position: relative;
opacity: 1;
z-index: 8;
}
.home-section{
width: 100%;
height: 100vh;
padding: 0 150px;
display: flex;
position: fixed;
top: 0;
opacity: 0;
transition: 1s;
}
.hero-heading{
color: #fff;
font-size: 120px;
font-weight: 300;
}
.home-img{
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: 50%;
object-fit: cover;
opacity: 0.2;
}
/* seção de projetos */
.project-section{
width: 100%;
min-height: 100vh;
padding: 150px 100px 100px;
position: fixed;
top: 0;
transition: 1s;
opacity: 0;
}
.project-heading{
font-size: 100px;
text-align: center;
margin-bottom: 50px;
color: #1a1a1a;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-stroke: 8px transparent;
}
.project-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 100px;
}
.project-card{
height: 400px;
position: relative;
}
.project-img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
transition: .5s;
}
.project-content{
position: relative;
padding: 40px;
color: #fff;
transition: .5s;
opacity: 0;
}
.project-title{
font-size: 50px;
text-align: center;
font-weight: 300;
}
.project-info{
margin: 40px;
font-size: 20px;
line-height: 30px;
text-align: center;
}
.project-btn-grp{
display: grid;
grid-gap: 20px;
}
.project-btn{
height: 40px;
font-size: 18px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
.project-btn.live {
background: none;
color: #fff;
border: 2px solid #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
font-weight: bold;
text-align: center;
}
.project-btn.live:hover {
background: #0056b3;
border: 2px solid #0056b3;
}
.project-card:hover .project-img{
filter: blur(20px);
}
.project-card:hover .project-content{
opacity: 1;
}
/* seção sobre mim */

.about-section{
width: 100%;
min-height: 100vh;
padding: 150px 100px 0;
position: fixed;
top: 0;
opacity: 0;
transition: 1s;
}
.about{
width: 100%;
display: grid;
grid-template-columns: 30% 65%;
grid-gap: 40px;
}
.about-img-container{
position: relative;
}
.about-info{
color: #fff;
opacity: 0.6;
font-size: 20px;
line-height: 40px;
}
.about-img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
.download-cv-btn{
position: absolute;
bottom: 20px;
left: 50%;
transform: translatex(-50%);
padding: 10px 20px;
color: #fff;
border: none;
font-size: 16px;
cursor: pointer;
transition: .5s;
background: rgba(0, 0, 0, 0.5);
}
.download-cv-btn:hover{
background: #000;
}
/* skills */
.skill-section{
position: relative;
margin: 100px 0;
}
.heading{
text-align: center;
font-size: 60px;
color: #fff;
font-weight: 300;
}
.skills-container{
width: 95%;
margin: auto;
display: grid;
grid-gap: 100px;
color: #fff;
}
.skill-card{
position: relative;
}
.skill-img{
display: block;
margin: auto;
height: 200px;
}
.skill-name{
font-size: 30px;
font-weight: 300;
text-align: center;
margin: 30px 0 20px;
}
.skill-info{
text-align: center;
opacity: 0.5;
font-size: 18px;
line-height: 30px;
}
.skill-level{
position: absolute;
top: 80px;
right: 0;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
font-size: 22px;
border-radius: 50%;
border: 10px solid;
}
.skill-card:nth-child(1) .skill-level{
background: #ff4f4f28;
border-color: #ff4f4f;
color: #ff4f4f;
}
background: #3225e028;
border-color: #4fa0ff;
color: #4fa0ff;
}
background: #edf11228;
border-color: #ffed4f;
color: #ffed4f;
}
/* linha do tempo */
.timeline{
display: block;
width: 80%;
margin: 150px auto;
}
.timeline .heading{
}
.card{
width: 45%;
padding: 30px;
color: #fff;
display: block;
margin: -80px 0;
position: relative;
background: #f00;
}
.card:nth-child(even){
margin-left: auto;
}
.card:nth-child(even):before{
content: '';
position: absolute;
left: -15%;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 5px solid #191919;
border-radius: 50%;
}
.card:nth-child(even):after{
content: '';
position: absolute;
left: -8.5%;
top: 50%;
width: 7%;
height: 2px;
background: #fff;
z-index: -1;
}
.card:nth-child(2):before,
.card:nth-child(6):before {
content: '';
position: absolute;
right: -13%;
top: 50%;
width: 20px;
height: 20px;
border: 5px solid #191919;
border-radius: 50%;
}
.card:nth-child(2):after,
.card:nth-child(6):after {
content: '';
position: absolute;
right: -8.5%;
top: 50%;
width: 7%;
height: 2px;
background: #fff;
z-index: -1;
}
.card:nth-child(2):before{
background: #ff4f4f;
}
.card:nth-child(3), .card:nth-child(3):before{
background: #ffb84f;
}
background: #3dca5c;
}
}
background: #4fa0ff;
}
.card:nth-child(even) .card-body:before{
content: '';
position: absolute;
left: -12%;
top: 0;
width: 0px;
height: 100%;
border: 1px dashed #fff;
z-index: -1;
}
.card-title{
font-size: 30px;
font-weight: 300;
}
.contact-section{
position: absolute;
top: 0;
opacity: 0;
transition: 1s;
padding: 100px 150px;
height: 100vh;
display: grid;
grid-gap: 50px;
}
.contact-form input, .contact-form textarea{

width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
color: #fff;
padding: 5px 10px;
}
::placeholder{
color: #fff;
}
#msg{
height: 280px;
resize: none;
font-family: sans-serif;
}
.form-submit-btn{
background: #ff4f4f;
color: #fff;
padding: 15px 40px;
display: block;
margin: auto;
border: none;
cursor: pointer;
}
.map{
width: 100%;
height: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.2);
}
.map inframe{
width: 100%;
height: 100%;
border-radius: 5px;
}
Nome do arquivo: app.js

const links = document.querySelectorAll('.link');
const sections = document.querySelectorAll('section');
let activeLink = 0;
links.forEach((link, i) => {
link.addEventListener('click', () => {
if(activeLink !== i){
links[activeLink].classList.remove('active');
link.classList.add('active');
sections[activeLink].classList.remove('active');
setTimeout(() => {
activeLink = i;
sections[i].classList.add('active');
}, 1000);
}
})
})
3. COLOCAR IMAGEM DO CÓDIGO EM EXECUÇÃO (index)

4. Colocar endereço onde publicou o site
https://yngridysilva.000webhostapp.com/

Modelo de Entrega Do Trabalho - Meu Portfólio - Yngridy Silva

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Modelo de Entrega Do Trabalho - Meu Portfólio - Yngridy Silva

Enviado por

Direitos autorais:

Formatos disponíveis

CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER

ESCOLA SUPERIOR POLITÉCNICA

YNGRIDY PEREIRA SANTOS SILVA, 4424216

2. COLOCAR NOME DOS ARQUIVOS

<section class="home-section active">

Nome do arquivo: style.css

.link a:hover, .link.active a{

/* seção sobre mim */

.contact-form input, .contact-form textarea{

Nome do arquivo: app.js

3. COLOCAR IMAGEM DO CÓDIGO EM EXECUÇÃO (index)

Você também pode gostar