From f634e3cc930567f20caad584a30144010c24f2b2 Mon Sep 17 00:00:00 2001 From: clara7227 Date: Thu, 9 May 2024 13:57:46 +0200 Subject: [PATCH] =?UTF-8?q?CURSOS:=20estandarizaci=C3=B3n=20botones=20y=20?= =?UTF-8?q?tags,=20a=C3=B1adido=20degradado.=20PROYECTOS:=20Comienzo=20maq?= =?UTF-8?q?uetaci=C3=B3n=20scss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/courses/page.js | 8 +++---- app/projects/page.js | 2 +- app/sass/partials/_courses.sass | 36 +++++++++++++++++++++++--------- app/sass/partials/_projects.sass | 3 ++- components/projectCard.js | 9 +++++--- constants/courses.js | 14 ++++++++++--- 6 files changed, 50 insertions(+), 22 deletions(-) diff --git a/app/courses/page.js b/app/courses/page.js index f756fa6..dba620d 100644 --- a/app/courses/page.js +++ b/app/courses/page.js @@ -23,11 +23,11 @@ export default function Courses() {

Courses

-
-
courses filter
+
+
- {courses.map(({ date, gradient, title, description, route }) => { + {courses.map(({ date, gradient, edition, title, description, route }) => { return (
{date}
-
Primera edición
+
{edition}
diff --git a/app/projects/page.js b/app/projects/page.js index 92fb660..34b38e0 100644 --- a/app/projects/page.js +++ b/app/projects/page.js @@ -46,7 +46,7 @@ export default function Projects() { ); })}
*/} -
+
diff --git a/app/sass/partials/_courses.sass b/app/sass/partials/_courses.sass index 89fb4da..b99b129 100644 --- a/app/sass/partials/_courses.sass +++ b/app/sass/partials/_courses.sass @@ -30,7 +30,7 @@ $windowWidth: 100vw .year_tag display: flex div - background-color: rgb(0, 0, 0,0.4) + background-color: rgb(0, 0, 0,0.3) display: flex align-items: center padding: 1px 8px @@ -38,8 +38,14 @@ $windowWidth: 100vw border-radius: 4px .course_route border: 1px solid white - border-radius: 4px + border-radius: 24px padding: 0.2rem 0.8rem 0.6rem 0.8rem + transition: 200ms ease-in-out + &:hover + background: white + transition: 200ms ease-in-out + @apply text-blue-950 + a display: flex svg @@ -49,12 +55,13 @@ $windowWidth: 100vw font-size: 1rem margin-left: 0.6rem + @media (min-width: 770px) .course display: flex color: white font-weight: 400 - height: $windowHeight /2.25 + height: $windowHeight /2.5 overflow: hidden .card_container_top height: 32px @@ -85,32 +92,32 @@ $windowWidth: 100vw transition: ease-in-out 300ms opacity: 0 display: none - transform: translateY(64%) + margin-bottom: 0.6em small margin-top:0 display: block - font-size: 0.85em + font-size: 1.1rem line-height: 1.4em font-weight: 400 - max-height:80px + max-height:160px &:hover .course_text_block - transform: translateY(0%) + transition: ease-in-out 300ms .course_description position: relative transition: ease-in-out 300ms opacity: 1 - transform: translateY(0%) + max-height: $windowHeight/5 display: -webkit-box small display: -webkit-box - -webkit-line-clamp: 4 + -webkit-line-clamp: 6 -webkit-box-orient: vertical overflow: hidden text-overflow: ellipsis @@ -144,7 +151,16 @@ $windowWidth: 100vw background: linear-gradient(to top, rgba(83,64,255,0.9) 0%, rgba(83,64,255,0.9) 30%, rgba(196,141,116,0.9) 100%), url($bg-img) background-size: contain background-position: center - + +.bg-yellow-gradient + background: linear-gradient(225deg, rgba(255,127,0,0.8748686974789917)0%, rgba(192,112,168,0.8860731792717087) 100%), url($bg-img) + background-size: contain + background-position: center + &:hover + background: linear-gradient(180deg, rgba(255,127,0,0.8748686974789917) 0%,rgba(133,90,186,0.930891106442577) 70%), url($bg-img) + background-size: contain + background-position: center + .course_main position: relative width: 100% diff --git a/app/sass/partials/_projects.sass b/app/sass/partials/_projects.sass index cf86781..fc9616d 100644 --- a/app/sass/partials/_projects.sass +++ b/app/sass/partials/_projects.sass @@ -4,11 +4,12 @@ .project_cards .filter_options display: flex - button border-radius: 4px border-color: none .project_card + @apply bg-ca_blue-200 + border-radius: 8px .year_and_cta display: flex .date diff --git a/components/projectCard.js b/components/projectCard.js index 6521350..d8f8e56 100644 --- a/components/projectCard.js +++ b/components/projectCard.js @@ -18,16 +18,18 @@ export default function projectCards(props) { } }; return ( -
-
+
+
+
+ {projectCards.map( ({ date, route, title, subtitle, tags, category }, index) => ( -
+
{date}
details @@ -41,5 +43,6 @@ export default function projectCards(props) { ) )}
+
); } diff --git a/constants/courses.js b/constants/courses.js index a606bc8..08c2f08 100644 --- a/constants/courses.js +++ b/constants/courses.js @@ -1,6 +1,7 @@ export const mycourses = [ { "date": "2023", "logo": "/assets/img/courses/fondo-cursos.png", + "edition": "2º edición", "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356", "title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web", "description": "Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas.", @@ -9,6 +10,7 @@ export const mycourses = [ { "date": "2023", "logo": "/assets/img/courses/fondo-cursos.png", + "edition": "2º edición", "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=378", "title": "Desarrollo de aplicaciones con React y React Native", "description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas.", @@ -17,30 +19,34 @@ export const mycourses = [ { "date": "2023", "logo": "/assets/img/courses/fondo-cursos.png", + "edition": "3º edición", "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=361", "title": "Desarrollo de un Proyecto Fullstack con JavaScript", "description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ", - "gradient": "bg-blue-gradient", + "gradient": "bg-purple-gradient", }, { "date": "2021", "logo": "/assets/img/courses/fondo-cursos.png", + "edition": "3º edición", "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=194", "title": "Desarrollo Backend con Node.js, Express y BBDDs", "description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ", - "gradient": "bg-purple-gradient", + "gradient": "bg-yellow-gradient", }, { "date": "2021", "logo": "/assets/img/courses/fondo-cursos.png", + "edition": "11º edición", "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=256", "title": "Desarrollo Frontend con HTML, CSS y JavaScript", "description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ", - "gradient": "bg-blue-gradient", + "gradient": "bg-yellow-gradient", }, { "date": "2021", "logo": "/assets/img/courses/fondo-cursos-png", + "edition": "4º edición", "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=267", "title": "Gestión de proyectos software con Git y GitHub", "description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ", @@ -49,6 +55,7 @@ export const mycourses = [ { "date": "2021", "logo": "/assets/img/courses/fondo-cursos.png", + "edition": "5º edición", "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=264", "title": "Siete habilidades clave en la era digital", "description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ", @@ -57,6 +64,7 @@ export const mycourses = [ { "date": "2018", "logo": "/assets/img/courses/fondo-cursos-png", + "edition": "2º edición", "route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=51", "title": "Introducción a LINUX como entorno de desarrollo de sistemas software", "description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",