diff --git a/Desarrollo web/WebPersonal/doc/documentation.txt b/Desarrollo web/WebPersonal/doc/documentation.txt new file mode 100644 index 0000000..41ebc57 --- /dev/null +++ b/Desarrollo web/WebPersonal/doc/documentation.txt @@ -0,0 +1,72 @@ +⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝ + +¡Hola ValenWerle! + +Espero que no te incomode que haya realizado algunas modificaciones en el proyecto. +Mi objetivo es que esta guía te sirva para tu propio trabajo. + +He redactado esta documentación para explicarte de manera clara los motivos detrás +de los cambios, para que puedas decidir si deseas implementarlos o no. +Siéntete libre de considerar o pasar por alto estas modificaciones según +tu criterio; mi intención es simplemente contribuir a tu proyecto. + +Todavía hay varios aspectos que se pueden mejorar, y seguiré trabajando en ello. + +Quiero aclarar que he colaborado en tu repositorio únicamente para aprender y crecer +como desarrollador, sin esperar nada a cambio. + +Espero que mi colaboración te resulte útil. + +⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝⚝ + + +Documentación de Cambios Realizados + + + +Mejora de la Presentación + +⚝ Favicon agregado: Se añadió un icono distintivo para mejorar la presentación del sitio web. +⚝ Reemplazo de ' - +
+
+
+

+ + | +

+

A software developer from Argentina

+ + My Resume + +
+
-
-
-

About me

-
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque repellat impedit, odio cupiditate velit hic dolorem voluptatibus doloribus quos, eveniet possimus. Neque, ducimus ipsum? Harum id consectetur similique itaque fuga. +

+
+

About Me

+
+
+

+ I am a engineering student, currently midway through my degree, and a tech content creator about + expanding my skills. I work at a company that specializes in developing solutions for the + carpentry industry. Through Twitch programming streams I aim to inspire others as a technology + communicator, showing my learning process.

-
-
- Valentina Werle +
+
+
+ Valentina Werle +
- + - +
- +
- + -
-

Stack

-
-

Languages

-
+
+

My Stack

+
+
+

Languages

+
+
+
+

Technologies

+
+
-
-

Other tools and technologies

-
-
-
-
-

Contact Me

-
-
- + + + +
- - - + + +
+ - \ No newline at end of file + + diff --git a/Desarrollo web/WebPersonal/main.js b/Desarrollo web/WebPersonal/main.js index 45b6534..39c2146 100644 --- a/Desarrollo web/WebPersonal/main.js +++ b/Desarrollo web/WebPersonal/main.js @@ -1,113 +1,13 @@ +import { createStackItems } from "./src/functionality/create-stack-items/index.js"; +import { submitFormData } from "./src/functionality/send-form/index.js"; +import { typewriterEffect } from "./src/functionality/typewriter-effect/index.js"; +import { tools } from "./src/constants/tools.js"; +import { languages } from "./src/constants/languages.js"; -// Stack data -const languages = [ - { name: 'Python', icon: 'https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg' }, - { name: 'Java', icon: 'https://img.icons8.com/?size=100&id=13679&format=png&color=000000' }, - { name: 'C', icon: 'https://img.icons8.com/?size=512&id=40670&format=png' }, - { name: 'TypeScript', icon: 'https://img.icons8.com/?size=100&id=wpZmKzk11AzJ&format=png&color=000000' }, - { name: 'JavaScript', icon: 'https://img.icons8.com/?size=100&id=108784&format=png&color=000000' }, - { name: 'HTML', icon: 'https://img.icons8.com/?size=100&id=20909&format=png&color=000000' }, - { name: 'CSS', icon: 'https://img.icons8.com/?size=100&id=21278&format=png&color=000000' }, - { name: 'Arduino', icon: 'https://img.icons8.com/?size=100&id=13444&format=png&color=000000' }, -]; - -const tools = [ - { name: 'Jira', icon: 'https://cdn-icons-png.flaticon.com/512/5968/5968875.png' }, - { name: 'Linux', icon: 'https://img.icons8.com/?size=100&id=17842&format=png&color=000000' }, - { name: 'Figma', icon: 'https://img.icons8.com/?size=100&id=W0YEwBDDfTeu&format=png&color=000000' }, - { name: 'Postman', icon: 'https://cdn.iconscout.com/icon/free/png-256/free-cartero-3628992-3030217.png?f=webp' }, - { name: 'GitHub', icon: 'https://img.icons8.com/m_sharp/200/FFFFFF/github.png' }, - { name: 'VS Code', icon: 'https://img.icons8.com/?size=100&id=9OGIyU8hrxW5&format=png&color=000000' }, - { name: 'Notion', icon: 'https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png' }, - { name: 'SQL', icon: 'https://img.icons8.com/?size=100&id=qGUfLiYi1bRN&format=png&color=000000' }, -]; - -// Function to create stack items -function createStackItems(items, containerId) { - const container = document.getElementById(containerId); - items.forEach(item => { - const div = document.createElement('div'); - div.className = 'stack-item'; - div.innerHTML = ` - ${item.name} - ${item.name} - `; - container.appendChild(div); - }); -} - -// Initialize stack items document.addEventListener('DOMContentLoaded', () => { + typewriterEffect(); createStackItems(languages, 'languages'); createStackItems(tools, 'tools'); - - // Contact form handling - const contactForm = document.getElementById('contactForm'); - contactForm.addEventListener('submit', function(e) { - e.preventDefault(); - const formData = { - fullName: this.fullName.value, - email: this.email.value, - userType: this.userType.value, - message: this.message.value - }; - console.log('Form submitted:', formData); - // Aquí iría la lógica para enviar el formulario - alert('Formulario enviado con éxito!'); - this.reset(); - }); + submitFormData('contactForm'); }); - - - - - - - - - - - - - - - - - - - - - - - - -// document.getElementById('miFormulario').addEventListener('submit', function(event) { -// event.preventDefault(); - -// // Recoger los datos del formulario -// const formData = { -// nombre: document.getElementById('nombre').value, -// correo: document.getElementById('correo').value, -// tipo: document.getElementById('tipo').value, -// mensaje: document.getElementById('mensaje').value -// }; - -// // Enviar los datos a la API -// fetch('https://magicloops.dev/api/loop/run/14eb826b-7d85-4fee-b321-6048b3da8f33', { -// method: 'POST', -// headers: { -// 'Content-Type': 'application/json' -// }, -// body: JSON.stringify(formData) -// }) -// .then(response => response.json()) -// .then(data => { -// console.log('Éxito:', data); -// alert('Datos enviados correctamente.'); -// }) -// .catch((error) => { -// console.error('Error:', error); -// alert('Ocurrió un error al enviar los datos.'); -// }); -// }); diff --git a/Desarrollo web/WebPersonal/public/favicon.ico b/Desarrollo web/WebPersonal/public/favicon.ico new file mode 100644 index 0000000..85ec713 Binary files /dev/null and b/Desarrollo web/WebPersonal/public/favicon.ico differ diff --git a/Desarrollo web/WebPersonal/src/assets/documets/my-resume.pdf b/Desarrollo web/WebPersonal/src/assets/documets/my-resume.pdf new file mode 100644 index 0000000..e69de29 diff --git a/Desarrollo web/WebPersonal/src/assets/icons/languages/arduino.png b/Desarrollo web/WebPersonal/src/assets/icons/languages/arduino.png new file mode 100644 index 0000000..a14f1a0 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/languages/arduino.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/languages/c.png b/Desarrollo web/WebPersonal/src/assets/icons/languages/c.png new file mode 100644 index 0000000..d239f93 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/languages/c.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/languages/css.png b/Desarrollo web/WebPersonal/src/assets/icons/languages/css.png new file mode 100644 index 0000000..a4e729a Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/languages/css.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/languages/html.png b/Desarrollo web/WebPersonal/src/assets/icons/languages/html.png new file mode 100644 index 0000000..c928792 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/languages/html.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/languages/java-script.png b/Desarrollo web/WebPersonal/src/assets/icons/languages/java-script.png new file mode 100644 index 0000000..e567622 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/languages/java-script.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/languages/java.png b/Desarrollo web/WebPersonal/src/assets/icons/languages/java.png new file mode 100644 index 0000000..31c1cc4 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/languages/java.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/languages/python.png b/Desarrollo web/WebPersonal/src/assets/icons/languages/python.png new file mode 100644 index 0000000..bb54ba7 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/languages/python.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/languages/type-script.png b/Desarrollo web/WebPersonal/src/assets/icons/languages/type-script.png new file mode 100644 index 0000000..8b332c9 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/languages/type-script.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/social-networking/github.svg b/Desarrollo web/WebPersonal/src/assets/icons/social-networking/github.svg new file mode 100644 index 0000000..69f6ecc --- /dev/null +++ b/Desarrollo web/WebPersonal/src/assets/icons/social-networking/github.svg @@ -0,0 +1,6 @@ + diff --git a/Desarrollo web/WebPersonal/src/assets/icons/social-networking/linkedin.svg b/Desarrollo web/WebPersonal/src/assets/icons/social-networking/linkedin.svg new file mode 100644 index 0000000..82584ac --- /dev/null +++ b/Desarrollo web/WebPersonal/src/assets/icons/social-networking/linkedin.svg @@ -0,0 +1,7 @@ + diff --git a/Desarrollo web/WebPersonal/src/assets/icons/tools/figma.png b/Desarrollo web/WebPersonal/src/assets/icons/tools/figma.png new file mode 100644 index 0000000..4944797 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/tools/figma.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/tools/github.png b/Desarrollo web/WebPersonal/src/assets/icons/tools/github.png new file mode 100644 index 0000000..7d0f114 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/tools/github.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/tools/jira.png b/Desarrollo web/WebPersonal/src/assets/icons/tools/jira.png new file mode 100644 index 0000000..eb3b3fd Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/tools/jira.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/tools/linux.png b/Desarrollo web/WebPersonal/src/assets/icons/tools/linux.png new file mode 100644 index 0000000..906ce80 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/tools/linux.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/tools/notion.png b/Desarrollo web/WebPersonal/src/assets/icons/tools/notion.png new file mode 100644 index 0000000..7ef1446 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/tools/notion.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/tools/postman.png b/Desarrollo web/WebPersonal/src/assets/icons/tools/postman.png new file mode 100644 index 0000000..5009fb0 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/tools/postman.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/tools/sql.png b/Desarrollo web/WebPersonal/src/assets/icons/tools/sql.png new file mode 100644 index 0000000..0ee7342 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/tools/sql.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/icons/tools/vscode.png b/Desarrollo web/WebPersonal/src/assets/icons/tools/vscode.png new file mode 100644 index 0000000..ecacfd8 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/icons/tools/vscode.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/images/my-photo-removebg.png b/Desarrollo web/WebPersonal/src/assets/images/my-photo-removebg.png new file mode 100644 index 0000000..e592c48 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/images/my-photo-removebg.png differ diff --git a/Desarrollo web/WebPersonal/src/assets/images/my-photo.jpg b/Desarrollo web/WebPersonal/src/assets/images/my-photo.jpg new file mode 100644 index 0000000..29c3f88 Binary files /dev/null and b/Desarrollo web/WebPersonal/src/assets/images/my-photo.jpg differ diff --git a/Desarrollo web/WebPersonal/particles.json b/Desarrollo web/WebPersonal/src/assets/json/particles.json similarity index 100% rename from Desarrollo web/WebPersonal/particles.json rename to Desarrollo web/WebPersonal/src/assets/json/particles.json diff --git a/Desarrollo web/WebPersonal/src/constants/languages.js b/Desarrollo web/WebPersonal/src/constants/languages.js new file mode 100644 index 0000000..a17972c --- /dev/null +++ b/Desarrollo web/WebPersonal/src/constants/languages.js @@ -0,0 +1,12 @@ +const languages = [ + { name: 'Python', icon: './src/assets/icons/languages/python.png' }, + { name: 'Java', icon: './src/assets/icons/languages/java.png' }, + { name: 'TypeScript', icon: './src/assets/icons/languages/type-script.png' }, + { name: 'JavaScript', icon: './src/assets/icons/languages/java-script.png' }, + { name: 'HTML', icon: './src/assets/icons/languages/html.png' }, + { name: 'CSS', icon: './src/assets/icons/languages/css.png' }, + { name: 'Arduino', icon: './src/assets/icons/languages/arduino.png' }, + { name: 'C', icon: './src/assets/icons/languages/c.png' }, +]; + +export { languages }; diff --git a/Desarrollo web/WebPersonal/src/constants/tools.js b/Desarrollo web/WebPersonal/src/constants/tools.js new file mode 100644 index 0000000..8d38217 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/constants/tools.js @@ -0,0 +1,12 @@ +const tools = [ + { name: 'Jira', icon: './src/assets/icons/tools/jira.png' }, + { name: 'Linux', icon: './src/assets/icons/tools/linux.png' }, + { name: 'Figma', icon: './src/assets/icons/tools/figma.png' }, + { name: 'Postman', icon: './src/assets/icons/tools/postman.png' }, + { name: 'VS Code', icon: './src/assets/icons/tools/vscode.png' }, + { name: 'GitHub', icon: './src/assets/icons/tools/github.png' }, + { name: 'SQL', icon: './src/assets/icons/tools/sql.png' }, + { name: 'Notion', icon: './src/assets/icons/tools/notion.png' }, +]; + +export { tools }; diff --git a/Desarrollo web/WebPersonal/src/functionality/create-stack-items/index.js b/Desarrollo web/WebPersonal/src/functionality/create-stack-items/index.js new file mode 100644 index 0000000..3c26877 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/functionality/create-stack-items/index.js @@ -0,0 +1,20 @@ +function createStackItems(items, containerId) { + const container = document.getElementById(containerId); + + items.forEach(item => { + const div = document.createElement('div'); + + div.className = 'stack-skill'; + div.innerHTML = ( + ` +
+ ${item.name} +
+ ${item.name} + ` + ); + container.appendChild(div); + }); +} + +export { createStackItems }; diff --git a/Desarrollo web/WebPersonal/app.js b/Desarrollo web/WebPersonal/src/functionality/particles/app.js similarity index 96% rename from Desarrollo web/WebPersonal/app.js rename to Desarrollo web/WebPersonal/src/functionality/particles/app.js index 67fe495..4f79d06 100644 --- a/Desarrollo web/WebPersonal/app.js +++ b/Desarrollo web/WebPersonal/src/functionality/particles/app.js @@ -5,7 +5,7 @@ /* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */ /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ -particlesJS.load('particles-js', 'particles.json', function() { +particlesJS.load('particles-js', '../../src/assets/json/particles.json', function () { console.log('callback - particles.js config loaded'); }); @@ -13,7 +13,7 @@ particlesJS.load('particles-js', 'particles.json', function() { /* Otherwise just put the config content (json): */ particlesJS('particles-js', - + { "particles": { "number": { @@ -131,4 +131,4 @@ particlesJS('particles-js', } } -); \ No newline at end of file +); diff --git a/Desarrollo web/WebPersonal/particles.js b/Desarrollo web/WebPersonal/src/functionality/particles/particles.js similarity index 100% rename from Desarrollo web/WebPersonal/particles.js rename to Desarrollo web/WebPersonal/src/functionality/particles/particles.js diff --git a/Desarrollo web/WebPersonal/src/functionality/send-form/index.js b/Desarrollo web/WebPersonal/src/functionality/send-form/index.js new file mode 100644 index 0000000..98a8d6b --- /dev/null +++ b/Desarrollo web/WebPersonal/src/functionality/send-form/index.js @@ -0,0 +1,22 @@ +function submitFormData(formId) { + const contactForm = document.getElementById(formId); + + contactForm.addEventListener('submit', function (e) { + e.preventDefault(); + + const formData = { + fullName: this.fullName.value, + email: this.email.value, + userType: this.userType.value, + message: this.message.value + }; + + console.log('Form submitted:', formData); + alert('Formulario enviado con éxito!'); + + this.reset(); + }); +} + + +export { submitFormData }; diff --git a/Desarrollo web/WebPersonal/src/functionality/typewriter-effect/index.js b/Desarrollo web/WebPersonal/src/functionality/typewriter-effect/index.js new file mode 100644 index 0000000..0556a62 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/functionality/typewriter-effect/index.js @@ -0,0 +1,16 @@ +const typewriter = document.getElementById("typewriter-text"); + +const text = "Hi! I'm Valentina Werle"; +const speed = 90; + +let index = 0; + +function typewriterEffect() { + if (index < text.length) { + typewriter.textContent += text.charAt(index); + index++; + setTimeout(() => requestAnimationFrame(typewriterEffect), speed); + } +} + +export { typewriterEffect }; diff --git a/Desarrollo web/WebPersonal/src/styles/animations/typing.css b/Desarrollo web/WebPersonal/src/styles/animations/typing.css new file mode 100644 index 0000000..f676c04 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/animations/typing.css @@ -0,0 +1,13 @@ +@keyframes blink { + 0% { + opacity: 1; + } + + 50% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} diff --git a/Desarrollo web/WebPersonal/src/styles/components/footer/footer.css b/Desarrollo web/WebPersonal/src/styles/components/footer/footer.css new file mode 100644 index 0000000..25e34ac --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/components/footer/footer.css @@ -0,0 +1,20 @@ +@import url("./form-contact.css"); + + +footer { + section:last-child { + display: flex; + justify-content: center; + gap: calc(var(--gap-uniform) * 2); + padding: calc(var(--padding-uniform) * 4); + + a { + text-decoration: none; + + i { + font-size: 2rem; + text-decoration: none; + } + } + } +} diff --git a/Desarrollo web/WebPersonal/src/styles/components/footer/form-contact.css b/Desarrollo web/WebPersonal/src/styles/components/footer/form-contact.css new file mode 100644 index 0000000..197e36c --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/components/footer/form-contact.css @@ -0,0 +1,64 @@ +.form-contact { + max-width: 600px; + margin: auto; + display: flex; + flex-direction: column; + gap: calc(var(--gap-uniform) * 2); + padding: var(--padding-uniform); + background-color: #1a1e28; + transition: box-shadow var(--transition-seconds-uniform); + box-shadow: 0 6px 12px #000000b3, 0 4px 8px #00000080; + + div { + display: flex; + flex-direction: column; + gap: var(--gap-uniform); + } + + + input, + select, + textarea, + button { + width: 100%; + padding: var(--padding-uniform); + background-color: #2a3343; + border: 1px solid #3a4458; + border-radius: var(--border-radius-uniform); + color: #ffffff; + transition: + border-color var(--transition-seconds-uniform) linear, + background-color var(--transition-seconds-uniform) linear; + } + + textarea { + resize: vertical; + } + + button { + background-color: #2c2f3a; + border: solid 1px #F797FC; + color: #fff; + padding: 0.75rem; + font-weight: 600; + text-transform: uppercase; + cursor: pointer; + } + + button:hover { + background-color: #3a3e4d; + } + + input:focus, + select:focus, + textarea:focus { + border-color: #f797fc; + background-color: #333b4d; + outline: none; + } + +} + +.form-contact:hover { + box-shadow: 0 8px 16px #000000cc, 0 6px 12px #00000099; +} diff --git a/Desarrollo web/WebPersonal/src/styles/components/header/header.css b/Desarrollo web/WebPersonal/src/styles/components/header/header.css new file mode 100644 index 0000000..f816aa0 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/components/header/header.css @@ -0,0 +1,23 @@ +@import url("./typewriter.css"); + +header { + height: 100vh; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + section { + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + gap: calc(var(--gap-uniform) * 3); + + h2 { + color: #9ca3af; + padding: 0; + } + } +} diff --git a/Desarrollo web/WebPersonal/src/styles/components/header/typewriter.css b/Desarrollo web/WebPersonal/src/styles/components/header/typewriter.css new file mode 100644 index 0000000..10274c3 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/components/header/typewriter.css @@ -0,0 +1,9 @@ +.typewriter-text { + user-select: none; +} + +.typewriter-cursor { + background-color: #f797fc; + color: #f797fc; + animation: blink 0.8s infinite; +} diff --git a/Desarrollo web/WebPersonal/src/styles/components/main/about.css b/Desarrollo web/WebPersonal/src/styles/components/main/about.css new file mode 100644 index 0000000..6e077c8 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/components/main/about.css @@ -0,0 +1,31 @@ +.about__div { + display: flex; + gap: calc(var(--gap-uniform) * 4); +} + +.about-text__section { + p { + max-width: 380px; + min-height: 380px; + text-wrap: pretty; + border: 1px solid #f797fc; + padding: var(--padding-uniform); + border-radius: var(--border-radius-uniform); + } +} + +.about-image__section { + display: flex; + flex-direction: column; + gap: var(--gap-uniform); + + .image { + margin: auto; + } + + .social-links { + display: flex; + justify-content: center; + gap: var(--gap-uniform); + } +} diff --git a/Desarrollo web/WebPersonal/src/styles/components/main/main.css b/Desarrollo web/WebPersonal/src/styles/components/main/main.css new file mode 100644 index 0000000..ece91a5 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/components/main/main.css @@ -0,0 +1,17 @@ +@import url("./about.css"); +@import url("./stack.css"); + + +main { + article { + display: flex; + flex-direction: column; + align-items: center; + } +} + +@media (width < 800px) { + .main-article__div { + flex-direction: column; + } +} diff --git a/Desarrollo web/WebPersonal/src/styles/components/main/stack.css b/Desarrollo web/WebPersonal/src/styles/components/main/stack.css new file mode 100644 index 0000000..6e40d33 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/components/main/stack.css @@ -0,0 +1,37 @@ +.stack__div { + display: flex; + flex-direction: column; + gap: calc(var(--gap-uniform) * 2); + + h3 { + padding-bottom: calc(var(--padding-uniform) * 3); + } +} + +.stack__div--skills { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--gap-uniform); +} + + +.stack-skill { + display: flex; + flex-direction: column; + gap: var(--gap-uniform); + + span { + text-align: center; + color: transparent; + transition: color var(--transition-seconds-uniform) linear; + } +} + + +.stack-skill:hover { + span { + text-align: center; + color: #ffffff; + } +} diff --git a/Desarrollo web/WebPersonal/src/styles/shared/hyperlink-button.css b/Desarrollo web/WebPersonal/src/styles/shared/hyperlink-button.css new file mode 100644 index 0000000..24b0705 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/shared/hyperlink-button.css @@ -0,0 +1,14 @@ +.hyperlink-button--download { + color: white; + border: solid 1px #F797FC; + font-size: 1.5rem; + background-color: #202430; + padding: var(--padding-uniform); + border-radius: var(--border-radius-uniform); + text-decoration: none; + transition: filter var(--transition-seconds-uniform) linear; +} + +.hyperlink-button--download:hover { + filter: brightness(1.2); +} diff --git a/Desarrollo web/WebPersonal/src/styles/shared/icon.css b/Desarrollo web/WebPersonal/src/styles/shared/icon.css new file mode 100644 index 0000000..ed94609 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/shared/icon.css @@ -0,0 +1,37 @@ +.icon { + transition: transform var(--transition-seconds-uniform) linear; + + svg, + img, + i { + width: 100%; + height: 100%; + display: block; + } + + i { + display: flex; + justify-content: center; + align-items: center; + } +} + +.icon:hover { + transform: scale3d(1.2, 1.2, 1.2); +} + +.icon--social-networking { + width: 35px; + height: 35px; + color: #f797fc; +} + +.icon--social-networking:hover { + color: #f797fccc; +} + +.icon-stack { + max-width: 6vw; + min-width: 65px; + height: auto; +} diff --git a/Desarrollo web/WebPersonal/src/styles/shared/image.css b/Desarrollo web/WebPersonal/src/styles/shared/image.css new file mode 100644 index 0000000..4dbab2e --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/shared/image.css @@ -0,0 +1,45 @@ +.image { + img { + display: block; + width: 100%; + height: 100%; + } + + user-select: none; +} + +.image__img--my-photo { + width: 380px; + height: 380px; + + img { + + border-radius: var(--border-radius-uniform) var(--border-radius-uniform) 0 0; + + /* + + background-color: #63748d; Blue Gray + background-color: #ffb6c1; Light Pink + background-color: #e6e6fa; Lavender + background-color: #87ceeb; Sky Blue + background-color: #f5f5dc; Beige + + */ + + background-color: #ffb6c1; + + + object-fit: scale-down; + + mask-image: linear-gradient(#ffffff 20%, transparent); + } +} + + + +@media (width < 800px) { + .image__img--my-photo { + width: 320px; + height: 320px; + } +} diff --git a/Desarrollo web/WebPersonal/src/styles/shared/paragraph.css b/Desarrollo web/WebPersonal/src/styles/shared/paragraph.css new file mode 100644 index 0000000..c3f1545 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/shared/paragraph.css @@ -0,0 +1,5 @@ +.paragraph { + font-size: 1.3rem; + line-height: 1.5; + text-wrap: pretty; +} diff --git a/Desarrollo web/WebPersonal/src/styles/shared/particles.css b/Desarrollo web/WebPersonal/src/styles/shared/particles.css new file mode 100644 index 0000000..d229658 --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/shared/particles.css @@ -0,0 +1,8 @@ +#particles-js { + position: absolute; + width: 100%; + height: 100%; + background-color: #202430; + background-size: cover; + background-repeat: no-repeat; +} diff --git a/Desarrollo web/WebPersonal/src/styles/shared/titles.css b/Desarrollo web/WebPersonal/src/styles/shared/titles.css new file mode 100644 index 0000000..1891d0d --- /dev/null +++ b/Desarrollo web/WebPersonal/src/styles/shared/titles.css @@ -0,0 +1,33 @@ +h1 { + font-size: 5.5rem; + font-family: "Pixelify Sans", sans-serif; +} + +h2 { + font-size: 3rem; +} + +h3 { + font-size: 2.5rem; +} + +h1, +h2, +h3 { + text-align: center; + text-wrap: balance; +} + +@media (width < 600px) { + h1 { + font-size: 4rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.8rem; + } +} diff --git a/Desarrollo web/WebPersonal/style.css b/Desarrollo web/WebPersonal/style.css index 2877811..961c9ce 100644 --- a/Desarrollo web/WebPersonal/style.css +++ b/Desarrollo web/WebPersonal/style.css @@ -1,493 +1,40 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -textarea { - resize: vertical; -} - -html { - scroll-snap-type: y mandatory; -} - -.section { - height: 100vh; - scroll-snap-align: start; - scroll-snap-stop: always; -} +@import url("./src/styles/components/header/header.css"); +@import url("./src/styles/components/main/main.css"); -body { - font-family: sans-serif; - line-height: 1.6; - color: #ffffff; - background-color: #202430; -} +@import url("./src/styles/components/footer/footer.css"); -/* Para mantener el footer en el fondo de la ventana cuando hay poco contenido */ -body, html { - min-height: 100%; - display: flex; - flex-direction: column; -} +@import url("./src/styles/shared/hyperlink-button.css"); +@import url("./src/styles/shared/icon.css"); +@import url("./src/styles/shared/image.css"); +@import url("./src/styles/shared/particles.css"); +@import url("./src/styles/shared/titles.css"); +@import url("./src/styles/shared/paragraph.css"); -main { - flex: 1; /* Para que el contenido principal ocupe el espacio disponible */ -} - -.container { - max-width: 1024px; - margin: 0 auto; - padding: 2rem 1rem; -} - -/* Canvas */ -canvas { - display: block; - vertical-align: bottom; -} - -/* Particles.js container */ -#particles-js { - width: 100%; - height: 100%; - background-color: #202430; - background-size: cover; - background-position: 50% 50%; - background-repeat: no-repeat; - position: absolute; - z-index: -1; -} - -/* Headings */ -h1, h2, h3 { - margin-bottom: 1rem; -} - -h1 { - font-size: 5vw; /* Ajusta el tamaño según el ancho de la pantalla */ - font-family: "Pixelify Sans", sans-serif; - font-weight: 400; - letter-spacing: 2px; - padding-bottom: 20px; - text-shadow: 4px 4px 6px #0008; -} - -@media (max-width: 768px) { - .typewriter{ - width: 90%; /*Agregas un de ancho al contenedor para movil*/ - } - h1 { - font-size: 3rem; /* Un poco más pequeño en pantallas medianas */ - padding-bottom: 10px; - letter-spacing: normal; - max-width: 300px; - } -} - -@media (max-width: 480px) { - h1 { - font-size: 1.7rem; /* Más pequeño para pantallas pequeñas */ - letter-spacing: normal; - } -} - - -.typewriter h1 { - overflow: hidden; - border-right: 0.15em solid #F797FC; - white-space: nowrap; - margin: 0 auto; - animation: - typing 3.5s steps(40, end), - blink-caret 0.75s step-end infinite; -} - -/* Typing effect */ -@keyframes typing { - from { width: 0; } - to { width: 100%; } -} - -@keyframes blink-caret { - from, to { border-color: transparent; } - 50% { border-color: #F797FC; } -} +@import url("./src/styles/animations/typing.css"); -h2 { - font-size: 4rem; - text-align: center; - padding-bottom: 30px; - text-shadow: 4px 4px 6px #0008; +:root { + --padding-uniform: 20px; + --gap-uniform: 20px; + --border-radius-uniform: 10px; + --transition-seconds-uniform: 0.3s; } -h3 { - font-size: 1.8rem; - padding: 30px 30px; -} - -/* Header */ -header { - text-align: center; - margin-bottom: 3rem; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -header p { - color: #9ca3af; - margin-bottom: 1rem; - padding: 20px 20px; - font-size: 2rem; - text-shadow: 4px 4px 6px #0008; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -/* Resume Button */ -#resume-btn { +body { + font-family: sans-serif; + color: #ffffff; background-color: #202430; - color: white; - border-color: #F797FC; - padding: 1rem 2rem; - font-size: 2rem; - cursor: pointer; - border-radius: 0.5rem; - transition: 0.3s; - text-shadow: 4px 4px 6px #0005; -} - -#resume-btn:hover { - transform: scale(1.1); -} - -/* Responsive styles */ -@media (max-width: 768px) { - .container { - padding: 1.5rem; - } - - h1 { - /* font-size: 4.0rem; */ - padding-bottom: 10px; - } - - h2 { - font-size: 3rem; - padding-bottom: 20px; - } - - h3 { - font-size: 1.5rem; - padding: 20px 20px; - } - - header p { - font-size: 1.5rem; - } - - #resume-btn { - padding: 0.8rem 1.5rem; - font-size: 1.5rem; - } -} - -@media (max-width: 480px) { - h1 { - /* font-size: 3.2rem; */ - } + width: 95%; + margin: auto; h2 { - font-size: 1.7rem; - } - - h3{ - font-size: 1.5rem; + padding-top: calc(var(--padding-uniform) * 10); + padding-bottom: calc(var(--padding-uniform) * 8); } - - header p { - font-size: 1.2rem; - } - - #resume-btn { - font-size: 1.2rem; - padding: 0.6rem 1rem; - } -} - - -/* About section */ -#about { - text-align: center; - margin-bottom: 3rem; - width: 100%; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-shadow: 4px 4px 6px #0008; -} - -.about-content { - display: flex; - flex-direction: column; - align-items: center; -} - -.about-text { - border: 1px solid #F797FC; - border-radius: 0.5rem; - padding: 1rem; - margin-bottom: 1rem; - font-size: 1.5rem; - max-width: 600px; /* Limita el ancho en pantallas grandes */ -} - -/* Imagen */ -.about-image img { - width: 12rem; - height: 12rem; - border-radius: 50%; - margin-bottom: 1rem; -} - -/* Enlaces Sociales */ -.social-links { - display: flex; - justify-content: center; - gap: 1rem; -} - -.social-icon { - color: #9ca3af; -} - -.social-icon:hover { - color: #ffffff; -} - -/* Responsive styles */ -@media (max-width: 768px) { - .about-text { - font-size: 1.2rem; /* Reduce el tamaño de fuente */ - padding: 0.8rem; - } - - .about-image img { - width: 10rem; - height: 10rem; /* Ajusta el tamaño de la imagen */ - } -} - -@media (max-width: 480px) { - .about-text { - font-size: 1rem; /* Fuente aún más pequeña en pantallas pequeñas */ - padding: 0.6rem; - } - - .about-image img { - width: 8rem; - height: 8rem; /* Imagen más pequeña en dispositivos pequeños */ - } - - .social-links { - gap: 0.5rem; /* Reduce el espacio entre iconos sociales */ - } -} - - -/* Stack section */ -#stack { - text-align: center; - margin-bottom: 3rem; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.h2-stack { - border-bottom: 1px solid #fff; -} - -.stack-section { - margin-bottom: 2rem; -} - -.stack-grid { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - gap: 2rem; - color: #202430; -} - -.stack-item { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - transition: 0.3s; -} - -.stack-item:hover { - transform: scale(1.2); - color: #fff; -} - -.stack-item img { - width: 6rem; - height: 6rem; - margin-bottom: 0.5rem; -} - -/* Responsive styles */ -@media (max-width: 768px) { - .stack-item img { - width: 5rem; /* Ajusta el tamaño de las imágenes */ - height: 5rem; - } - - .h2-stack { - font-size: 2rem; /* Ajusta el tamaño del texto para pantallas medianas */ - } -} - -@media (max-width: 480px) { - .stack-item img { - width: 4rem; /* Más pequeño para pantallas pequeñas */ - height: 4rem; - } - - .h2-stack { - font-size: 1.5rem; /* Ajuste adicional para pantallas pequeñas */ - } - - .stack-grid { - grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* Cambia el tamaño mínimo de la cuadrícula */ - } -} - - -/* Contact form */ -#contact { - flex-direction: column; - display: flex; - justify-content: center; - align-items: center; - padding: 2rem 0; - height: 90vh; -} - -#contactForm { - width: 100%; - max-width: 60rem; - background-color: #1a1e28; - padding: 2rem; - border-radius: 0.75rem; - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.5); - transition: box-shadow 0.3s; -} - -#contactForm:hover { - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8), 0 6px 12px rgba(0, 0, 0, 0.6); -} - -.form-group { - margin-bottom: 1.25rem; -} - -label { - display: block; - margin-bottom: 0.5rem; - font-size: 0.9rem; - color: #f0f0f0; - font-weight: 600; -} - -input, select, textarea { - width: 100%; - padding: 0.75rem; - background-color: #2a3343; - border: 1px solid #3a4458; - border-radius: 0.375rem; - color: #ffffff; - font-size: 0.95rem; - transition: border-color 0.3s, background-color 0.3s; -} - -input:focus, select:focus, textarea:focus { - border-color: #F797FC; - background-color: #333b4d; - outline: none; -} - -button[type="submit"] { - width: 100%; - background-color: #2c2f3a; - border: solid 1px #F797FC; - color: #fff; - padding: 0.75rem; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - border-radius: 0.375rem; - transition: background-color 0.3s, transform 0.3s; -} - -button[type="submit"]:hover { - background-color: #3a3e4d; - transform: scale(1.03); -} - -/* Responsive design */ -@media (min-width: 768px) { - .about-content { - flex-direction: row; - justify-content: space-between; - } - - .about-text { - width: 60%; - margin-bottom: 0; - margin-right: 2rem; - } - - .about-image { - width: 40%; - } -} - -/* Estilos generales para el footer */ -#footer { - background-color: transparent; - padding: 1.5rem 0; - text-align: center; - height: 100vh; - position: relative; - bottom: 0; - width: 100%; -} - -.social-icons { - display: flex; - justify-content: center; - gap: 2rem; -} - -.social-icons a { - color: #F797FC; - font-size: 2rem; - transition: transform 0.3s, color 0.3s; -} - -.social-icons a:hover { - color: #fff; - transform: scale(1.1); }