Skip to content
This repository has been archived by the owner on Aug 14, 2024. It is now read-only.

Commit

Permalink
Merge pull request #35 from ssofiasandoval/main
Browse files Browse the repository at this point in the history
agregar encargo ssofiasandoval
  • Loading branch information
montoyamoraga authored Jun 14, 2024
2 parents 3de814d + 4aad0a2 commit 6153772
Show file tree
Hide file tree
Showing 13 changed files with 430 additions and 2 deletions.
20 changes: 18 additions & 2 deletions bitacoras/ssofiasandoval/encargo-04/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
# encargo-04: 1)Añadir a la pagina web una forma de contactar, agregando instagram. 2)Añadir otra forma de portafolio, para que existan más posibilidades de template.
# encargo-04: 1)Añadir a la pagina web una forma de contactar 2)Añadir otra forma de portafolio, para que existan más posibilidades de template.

Realice diferentes templeate de portafolios, pero que comparten estas principales caracteristicas

* Acerca de mi: Sección pensada en añadir descripción personal, información de estudios, areas de interes y más.
* Portafolio: Sección pensada en añadir proyectos hechos por los cuales quieres que te
contraten a futuro, cosas que sabes hacer y dominas.
* Hablemos: Sección pensada para contactarte.
* iconos: Al cliquear dirige a los website

## opción A:
<img width="958" alt="Captura de pantalla 2024-06-08 a la(s) 1 09 52 a  m" src="https://github.com/ssofiasandoval/fad9100-2024-1/assets/128400293/38a1266c-2ae0-4c48-8dd5-dd450d020bda">

## opción b:
<img width="948" alt="captureb" src="https://github.com/ssofiasandoval/fad9100-2024-1/assets/128400293/1c592ec1-b23c-4de2-a8b2-ad2bbeac2532">

## opción c:
<img width="862" alt="Captura de pantalla 2024-06-09 a la(s) 10 02 33 p  m" src="https://github.com/ssofiasandoval/fad9100-2024-1/assets/128400293/3cf26278-9f54-4911-a4ca-fd2a6377018c">

TODO
Binary file not shown.
58 changes: 58 additions & 0 deletions bitacoras/ssofiasandoval/encargo-04/aportafolio/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sofía Sandoval Labbé - Portafolio</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<h1>Sofía Sandoval Labbé</h1>
<ul>
<li><a href="#acerca-de-mi">Acerca de mí</a></li>
<li><a href="#portafolio">Portafolio</a></li>
<li><a href="#hablemos">Hablemos</a></li>
</ul>
<a href="CV_ssofia.pdf" target="_blank" class="cv-btn">Descargar CV</a>
</div>
<div class="content">
<section id="acerca-de-mi">
<h2>Acerca de mí</h2>
<p>Soy Sofía Sandoval Labbé, una apasionada estudiante de diseño interesada en el mundo digital y especializada en UX/UI. Mi objetivo es crear experiencias de usuario intuitivas y atractivas.</p>
</section>
<section id="portafolio">
<h2>Portafolio</h2>
<div class="carousel">
<div class="carousel-container">
<div class="carousel-item">
<img src="imagen1.jpg" alt="Proyecto 1">
</div>
<div class="carousel-item">
<img src="imagen2.jpg" alt="Proyecto 2">
</div>
<div class="carousel-item">
<img src="imagen3.jpg" alt="Proyecto 3">
</div>
</div>
</div>
</section>
<section id="hablemos">
<h2>Hablemos</h2>
<p>¡Estoy siempre abierta a nuevas oportunidades y colaboraciones! No dudes en ponerte en contacto conmigo.</p>
<div class="contact-icons">
<a href="https://www.instagram.com/ssofia.sandoval/" target="_blank"><img src="https://img.icons8.com/ios-filled/50/000000/instagram-new.png" alt="Instagram"></a>
<a href="https://www.linkedin.com/in/sofía-sandoval-labbé-531b21240/" target="_blank"><img src="https://img.icons8.com/ios-filled/50/000000/linkedin.png" alt="LinkedIn"></a>
</div>
</section>
</div>
</div>
<footer>
<p>&copy; 2024 Sofía Sandoval Labbé</p>
</footer>
</body>
</html>

Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 51 additions & 0 deletions bitacoras/ssofiasandoval/encargo-04/bportafolio/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sofía Sandoval Labbé - Portafolio</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<h1>Hola, soy Sofía</h1>
<p>Estudiante de diseño, interesada en el mundo digital UX/UI</p>
</header>
<nav>
<a href="#sobre-mi">Sobre mí</a>
<a href="#portafolio">Portafolio</a>
<a href="#hablemos">Hablemos</a>
</nav>
<div class="container">
<section id="sobre-mi" class="section">
<h2>Sobre mí</h2>
<p>Soy Sofía Sandoval Labbé, estudiante de diseño con una pasión por el mundo digital y el diseño de experiencias de usuario (UX/UI). Mi objetivo es crear interfaces intuitivas y atractivas que mejoren la interacción de los usuarios con la tecnología.</p>
</section>
<section id="portafolio" class="section">
<h2>Portafolio</h2>
<div class="portfolio-item">
<h3>Proyecto 1</h3>
<p>Descripción del proyecto 1.</p>
</div>
<div class="portfolio-item">
<h3>Proyecto 2</h3>
<p>Descripción del proyecto 2.</p>
</div>
<!-- Agrega más proyectos aquí -->
</section>
<section id="hablemos" class="section">
<h2>Hablemos</h2>
<p>Estoy siempre abierta a nuevas oportunidades y colaboraciones. ¡No dudes en ponerte en contacto conmigo!</p>
<div class="contact-icons">
<a href="CV_ssofia.pdf" target="_blank"><img src="https://img.icons8.com/ios-filled/50/000000/resume.png" alt="CV"></a>
<a href="https://www.linkedin.com/in/sof%C3%ADa-sandoval-labb%C3%A9-531b21240/" target="_blank"><img src="https://img.icons8.com/ios-filled/50/000000/linkedin.png" alt="LinkedIn"></a>
<a href="https://www.instagram.com/ssofia.sandoval/" target="_blank"><img src="https://img.icons8.com/ios-filled/50/000000/instagram.png" alt="Instagram"></a>
</div>
</section>
</div>
<footer>
<p>&copy; 2024 Sofía Sandoval Labbé</p>
</footer>
</body>
</html>
91 changes: 91 additions & 0 deletions bitacoras/ssofiasandoval/encargo-04/bportafolio/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
header {
background-color: #ffffff;
color: #333;
padding: 40px 0;
text-align: center;
border-bottom: 1px solid #ddd;
}
header h1 {
margin: 0;
font-size: 3em;
font-weight: 600;
color: #2C3E50;
}
header p {
margin: 10px 0 0;
font-size: 1.2em;
color: #8e44ad;
}
nav {
background-color: #2C3E50;
padding: 10px 0;
text-align: center;
border-bottom: 1px solid #ddd;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
font-size: 1.1em;
font-weight: 400;
}
nav a:hover {
color: #8e44ad;
}
.container {
padding: 40px 20px;
}
.section {
margin-bottom: 60px;
}
h2 {
border-bottom: 2px solid #8e44ad;
padding-bottom: 10px;
font-size: 2.5em;
color: #2C3E50;
font-weight: 600;
}
footer {
background-color: #ffffff;
color: #333;
text-align: center;
padding: 20px 0;
border-top: 1px solid #ddd;
}
.contact-icons {
margin-top: 20px;
}
.contact-icons a {
margin: 0 15px;
text-decoration: none;
}
.contact-icons img {
width: 40px;
height: 40px;
}
.portfolio-item {
margin-bottom: 40px;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.portfolio-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.portfolio-item h3 {
margin-top: 0;
font-size: 1.5em;
color: #8e44ad;
font-weight: 600;
}
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 71 additions & 0 deletions bitacoras/ssofiasandoval/encargo-04/cportafolio/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sofía Sandoval Labbé - Portafolio</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<header>
<h1>Hola, soy Sofía</h1>
<p>Estudiante de diseño, interesada en el mundo digital UX/UI</p>
</header>
<nav>
<a href="#sobre-mi">Sobre mí</a>
<a href="#portafolio">Portafolio</a>
<a href="#hablemos">Hablemos</a>
</nav>
<div class="container">
<section id="sobre-mi" class="section">
<h2>Sobre mí</h2>
<p>Soy Sofía Sandoval Labbé, estudiante de diseño con una pasión por el mundo digital y el diseño de experiencias de usuario (UX/UI). Mi objetivo es crear interfaces intuitivas y atractivas que mejoren la interacción de los usuarios con la tecnología.</p>
</section>
<section id="portafolio" class="section">
<h2>Portafolio</h2>
<div class="portfolio-item">
<h3>Proyecto 1</h3>
<div class="carousel">
<img src="https://via.placeholder.com/600x400?text=Imagen+1+Proyecto+1" class="active" alt="Imagen 1 Proyecto 1">
<img src="https://via.placeholder.com/600x400?text=Imagen+2+Proyecto+1" alt="Imagen 2 Proyecto 1">
<img src="https://via.placeholder.com/600x400?text=Imagen+3+Proyecto+1" alt="Imagen 3 Proyecto 1">
<div class="carousel-controls">
<button onclick="prevSlide(this)">&#10094;</button>
<button onclick="nextSlide(this)">&#10095;</button>
</div>
</div>
<p>Descripción del proyecto 1.</p>
</div>
<div class="portfolio-item">
<h3>Proyecto 2</h3>
<div class="carousel">
<img src="https://via.placeholder.com/600x400?text=Imagen+1+Proyecto+2" class="active" alt="Imagen 1 Proyecto 2">
<img src="https://via.placeholder.com/600x400?text=Imagen+2+Proyecto+2" alt="Imagen 2 Proyecto 2">
<img src="https://via.placeholder.com/600x400?text=Imagen+3+Proyecto+2" alt="Imagen 3 Proyecto 2">
<div class="carousel-controls">
<button onclick="prevSlide(this)">&#10094;</button>
<button onclick="nextSlide(this)">&#10095;</button>
</div>
</div>
<p>Descripción del proyecto 2.</p>
</div>
<!-- Agrega más proyectos aquí -->
</section>
<section id="hablemos" class="section">
<h2>Hablemos</h2>
<p>Estoy siempre abierta a nuevas oportunidades y colaboraciones. ¡No dudes en ponerte en contacto conmigo!</p>
<div class="contact-icons">
<a href="CV_ssofia.pdf" target="_blank"><img src="https://img.icons8.com/ios-filled/50/000000/resume.png" alt="CV"></a>
<a href="https://www.linkedin.com/in/sof%C3%ADa-sandoval-labb%C3%A9-531b21240/" target="_blank"><img src="https://img.icons8.com/ios-filled/50/000000/linkedin.png" alt="LinkedIn"></a>
<a href="https://www.instagram.com/ssofia.sandoval/" target="_blank"><img src="https://img.icons8.com/ios-filled/50/000000/instagram.png" alt="Instagram"></a>
</div>
</section>
</div>
<footer>
<p>&copy; 2024 Sofía Sandoval Labbé</p>
</footer>

</body>
</html>
17 changes: 17 additions & 0 deletions bitacoras/ssofiasandoval/encargo-04/cportafolio/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
function nextSlide(button) {
const carousel = button.closest('.carousel');
const slides = carousel.querySelectorAll('img');
let currentIndex = Array.from(slides).findIndex(slide => slide.classList.contains('active'));
slides[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % slides.length;
slides[currentIndex].classList.add('active');
}

function prevSlide(button) {
const carousel = button.closest('.carousel');
const slides = carousel.querySelectorAll('img');
let currentIndex = Array.from(slides).findIndex(slide => slide.classList.contains('active'));
slides[currentIndex].classList.remove('active');
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
slides[currentIndex].classList.add('active');
}
Loading

0 comments on commit 6153772

Please sign in to comment.