Skip to content

Commit

Permalink
add talks section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Damian-Zsiros-Prog
Damian-Zsiros-Prog committed Jul 8, 2023
1 parent 7fca586 commit a497abf
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 77 deletions.
48 changes: 24 additions & 24 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const menu: MenuLink[] = [
name: 'Cuenta atras',
anchor: '#countdown',
},
// {
// name: 'Participantes',
// anchor: '#participantes',
// },
{
name: 'Horario y Charlas',
anchor: '#participantes',
},
{
name: 'Genera tu ticket',
anchor: '#ticket',
Expand All @@ -33,7 +33,7 @@ const Navbar = () => {
return (
<>
<nav
id='top'
id="top"
className={
'fixed lg:relative top-0 left-0 right-0 z-40 lg:min-h-0 py-8 lg:bg-opacity-0 lg:backdrop-blur-0' +
(navbarOpen
Expand All @@ -46,31 +46,31 @@ const Navbar = () => {
'container px-4 mx-auto flex flex-wrap items-center justify-between'
}
>
<div className='w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start'>
<div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
<button
className='text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none'
type='button'
className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onClick={handleNav}
>
{navbarOpen ? (
<svg
xmlns='http://www.w3.org/2000/svg'
fill='white'
viewBox='0 0 24 24'
width='24px'
height='24px'
xmlns="http://www.w3.org/2000/svg"
fill="white"
viewBox="0 0 24 24"
width="24px"
height="24px"
>
<path d='M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z' />
<path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" />
</svg>
) : (
<svg
xmlns='http://www.w3.org/2000/svg'
fill='white'
viewBox='0 0 24 24'
width='24px'
height='24px'
xmlns="http://www.w3.org/2000/svg"
fill="white"
viewBox="0 0 24 24"
width="24px"
height="24px"
>
<path d='M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z' />
<path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z" />
</svg>
)}
</button>
Expand All @@ -80,14 +80,14 @@ const Navbar = () => {
'lg:flex flex-grow items-center justify-center h-80 lg:h-0' +
(navbarOpen ? ' flex' : ' hidden')
}
id='example-navbar-danger'
id="example-navbar-danger"
>
<ul className='flex flex-col items-center lg:items-start lg:flex-row font-semibold tracking-tight gap-x-8 text-slate-700 [&>li>a]:border-b-2 [&>li>a]:border-b-transparent [&>li>a]:transition-all gap-y-4'>
<ul className="flex flex-col items-center lg:items-start lg:flex-row font-semibold tracking-tight gap-x-8 text-slate-700 [&>li>a]:border-b-2 [&>li>a]:border-b-transparent [&>li>a]:transition-all gap-y-4">
{menu.map((item, index) => {
return (
<li className='nav-item' key={index}>
<li className="nav-item" key={index}>
<a
className='px-3 py-2 flex items-center text-base uppercase font-bold leading-snug text-white hover:opacity-75 ml-2 hover:underline lg:text-xs'
className="px-3 py-2 flex items-center text-base uppercase font-bold leading-snug text-white hover:opacity-75 ml-2 hover:underline lg:text-xs"
href={item.anchor}
onClick={() => setNavbarOpen(false)}
>
Expand Down
22 changes: 9 additions & 13 deletions src/components/Participantes/Avatar.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,18 @@ const { participant } = Astro.props as { participant: Participant }
---

<article
class="flex lg:flex-row flex-col justify-start lg:gap-20 gap-4 items-center transition-all w-[70%] m-auto"
class="flex lg:flex-row flex-col justify-start lg:gap-20 gap-4 items-center transition-all"
>
<picture class="rounded-full w-32 md:w-32 overflow-hidden p-1 gradient">
<img
src={participant.img}
alt={`Imagen de ${participant.name}`}
class="w-full rounded-full"
/>
</picture>

<div class="text-white flex-1 text-2xl">
<h3 class="font-bold capitalize pb-4 leading-8 lg:text-start">
{participant.name}
{participant.title} | <span class="text-gradient text-2xl"
>{participant.hora}</span
>
</h3>
<p class="text-center text-sm md:text-[20px] lg:text-start">
{participant.descrition}
</p>
<h4
class="text-slate-500 font-bold capitalize pb-4 leading-8 lg:text-start"
>
{participant.name}
</h4>
</div>
</article>
107 changes: 69 additions & 38 deletions src/components/Participantes/Participantes.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,84 @@
import Avatar from './Avatar.astro'
import type { Participant } from '../../types/types'
const participants: Participant[] = [
/*{
name: 'Sandra Code',
descrition:
'Taller practico para dar tus primeros pasos en React.',
title: 'React desde las bases',
type: 'Taller',
{
name: 'José Manuel Ortegar Falcón',
title: 'De Junior a Lider',
img: 'https://www.tuasesordemoda.com/wp-content/uploads/2022/11/cortes-cara-cuadrada-mujer-.jpeg',
hora: '20:00 H',
type: 1,
},
{
name: 'Edgar Mejia Vasquez',
title: 'Mi experiencia como Desarrollador Junior en Latinoamerica ¿Un viaje hacia el exito?',
img: 'https://www.tuasesordemoda.com/wp-content/uploads/2022/11/cortes-cara-cuadrada-mujer-.jpeg',
hora: '20:30 H',
type: 1,
},
{
name: '',
title: 'MESA REDONDA',
img: 'https://www.tuasesordemoda.com/wp-content/uploads/2022/11/cortes-cara-cuadrada-mujer-.jpeg',
hora: '21:00 H',
type: 2,
},
{
name: 'Jack Black',
descrition:
'Peaches peaches peaches peaches peaches.',
title: 'No siempre hay que encajar ',
type: 'Charla',
img: 'https://hips.hearstapps.com/hmg-prod/images/jack-black-gettyimages-1193008127.jpg',
name: 'David Rodriguez - Xerosec',
title: 'El camino menos transitado: Como llegué al sector IT a los 35 añazos',
img: 'https://www.tuasesordemoda.com/wp-content/uploads/2022/11/cortes-cara-cuadrada-mujer-.jpeg',
hora: '21:30 H',
type: 1,
},
{
name: 'Scarlett Dev',
descrition:
'Consejos y trucos para mejorar tu cv y destacar sobre los demas.',
title: 'Tu primer trabajo en Tech',
type: 'Charla',
img: 'https://1.bp.blogspot.com/-wOdU9hEbjyo/Taf949oomiI/AAAAAAAAAZk/CCUIXLqcIsw/s1600/scarlett_johansson400.jpg',
name: 'Anais Fernandez Villar',
title: 'Magicals Girls UI: Los secretos de la animacion en Figma',
img: 'https://www.tuasesordemoda.com/wp-content/uploads/2022/11/cortes-cara-cuadrada-mujer-.jpeg',
hora: '22:00 H',
type: 1,
},
{
name: 'Adam',
descrition:
'¿Realmente existe los desarrolladores fullstack ó son solo un mito?.',
title: 'Fullstack',
type: 'Charla',
img: 'https://www.elnacional.cat/enblau/uploads/s1/18/96/90/12/adam-sandler-grande_1_630x630.jpeg',
},*/
name: '',
title: 'MESA REDONDA',
img: 'https://www.tuasesordemoda.com/wp-content/uploads/2022/11/cortes-cara-cuadrada-mujer-.jpeg',
hora: '22:30 H',
type: 2,
},
{
name: 'David Huertas - Ikurotime',
title: 'Sobrevivir al codigo - Guia para programadores impacientes',
img: 'https://www.tuasesordemoda.com/wp-content/uploads/2022/11/cortes-cara-cuadrada-mujer-.jpeg',
hora: '23:00 H',
type: 1,
},
]
---
<!--
<section class="py-16 flex flex-col text-center gap-24 px-18 p-8">
<h2
id="participantes"
class="font-extrabold text-4xl text-transparent bg-clip-text gradient"
>
Participantes
</h2>
<section class="flex flex-col gap-12 w-full justify-center">

<section class="m-auto max-w-5xl py-16 flex flex-col text-center gap-16 p-8">
<header class="flex justify-between items-center">
<h2
id="participantes"
class="font-extrabold text-4xl text-transparent bg-clip-text gradient"
>
Horarios y Charlas
</h2>
<h2 class="font-extrabold text-xl text-white">
Horario de España Peninsular (CEST)
</h2>
</header>
<section class="flex flex-col gap-8 w-[100%]">
{
participants.map((participant) => (
<Avatar participant={participant} />
))
participants.map((participant) => {
if (participant.type === 1) {
return <Avatar participant={participant} />
}
if (participant.type === 2) {
return (
<h3 class="text-gradient font-bold text-3xl text-center md:text-left">
☆ MESA REDONDA | {participant.hora}
</h3>
)
}
})
}
{
participants.length == 0 && (
Expand All @@ -58,4 +89,4 @@ const participants: Participant[] = [
)
}
</section>
</section> -->
</section>
4 changes: 2 additions & 2 deletions src/types/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export interface Participant {
name: string
type: string
title: string
img: string
descrition: string
hora: string
type: number
}

export interface User {
Expand Down

0 comments on commit a497abf

Please sign in to comment.