diff --git a/public/svg/EntGamers.svg b/public/svg/EntGamers.svg new file mode 100644 index 0000000..a5a3b17 --- /dev/null +++ b/public/svg/EntGamers.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/svg/bsky.svg b/public/svg/bsky.svg new file mode 100644 index 0000000..b60d51c --- /dev/null +++ b/public/svg/bsky.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/svg/comment-text.svg b/public/svg/comment-text.svg new file mode 100644 index 0000000..debcbf5 --- /dev/null +++ b/public/svg/comment-text.svg @@ -0,0 +1,37 @@ + + + + + + + diff --git a/public/svg/twitch.svg b/public/svg/twitch.svg new file mode 100644 index 0000000..2d3d5d4 --- /dev/null +++ b/public/svg/twitch.svg @@ -0,0 +1,37 @@ + + + + + + + diff --git a/public/svg/twitter.svg b/public/svg/twitter.svg new file mode 100644 index 0000000..060e2ee --- /dev/null +++ b/public/svg/twitter.svg @@ -0,0 +1,37 @@ + + + + + + + diff --git a/public/svg/youtube.svg b/public/svg/youtube.svg new file mode 100644 index 0000000..503da80 --- /dev/null +++ b/public/svg/youtube.svg @@ -0,0 +1,37 @@ + + + + + + + diff --git a/src/components/SrJuggernautLogo.astro b/src/components/SrJuggernautLogo.astro new file mode 100644 index 0000000..3ceab93 --- /dev/null +++ b/src/components/SrJuggernautLogo.astro @@ -0,0 +1,73 @@ +--- +export interface Props { + width?: number + height?: number + className?: string +} + +const { width = 600, height = 600, className } = Astro.props +--- + + + SrJuggernaut Logo + + + + + + + + + + + + diff --git a/src/components/layout/Landing.astro b/src/components/layout/Landing.astro new file mode 100644 index 0000000..486590a --- /dev/null +++ b/src/components/layout/Landing.astro @@ -0,0 +1,41 @@ +--- +export interface Props { + title?: string + description?: string + imageUrl?: string +} + +const { title, description, imageUrl } = Astro.props +const permalink = new URL(Astro.url.pathname, Astro.site).href +const seoTitle = + title === undefined ? 'Juggernaut Plays' : `${title} | Juggernaut Plays` +const seoDescription = + description === undefined + ? 'Oops, parece que no hay descripción.' + : description +const seoImage = + imageUrl === undefined ? 'https://srjuggernaut.dev/DefaultOG.png' : imageUrl +--- + + + + + + + + + + {seoTitle} + + + + + + + + + + +
+ + diff --git a/src/components/pages/Home/Hero.astro b/src/components/pages/Home/Hero.astro new file mode 100644 index 0000000..6afde78 --- /dev/null +++ b/src/components/pages/Home/Hero.astro @@ -0,0 +1,55 @@ +--- +import { css } from '@styled-system/css' +import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro' + +const heroSectionClass = css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + minHeight: '50vh', + background: + 'linear-gradient(172deg, {colors.neutral.3} 0%, {colors.neutral.1} 78%)' +}) + +const heroContainerClass = css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: 'sm' +}) + +const heroLogoClass = css({ + fill: 'neutral.12', + width: { + base: '100%', + sm: 'breakpoint-sm' + }, + height: '100%' +}) + +const heroTitleClass = css({ + fontFamily: 'orbitron', + fontSize: 'calc(2rem + 2vw)', + textAlign: 'center', + fontWeight: '900', + color: 'neutral.12' +}) + +const heroDescriptionClass = css({ + color: 'neutral.11', + textAlign: 'center', + fontSize: 'large' +}) +--- + +
+
+ +

Juggernaut Plays

+

+ A veces hago cosas en internet, luego hablo de ellas. +

+
+
diff --git a/src/components/pages/Home/Links.astro b/src/components/pages/Home/Links.astro new file mode 100644 index 0000000..24efdbd --- /dev/null +++ b/src/components/pages/Home/Links.astro @@ -0,0 +1,213 @@ +--- +import { css, cx } from '@styled-system/css' +import { flex } from '@styled-system/patterns' +import { button, details } from '@styled-system/recipes' +import { srOnlyClass } from '@/styles/srOnly' + +const linksSectionClass = css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: 'md', + padding: 'md', + minHeight: '35vh' +}) + +const linksContainerClass = css({ + margin: '0 auto', + width: { + base: '100%', + sm: 'breakpoint-sm', + md: 'breakpoint-md', + lg: 'breakpoint-lg', + xl: 'breakpoint-xl', + '2xl': 'breakpoint-2xl' + } +}) + +const linksCollectionClass = flex({ flexDirection: 'column', gap: 'md' }) + +const linksGridClass = css({ + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', + gap: 'md' +}) + +const detailsClasses = details({ color: 'neutral' }) + +const detailsDetailsClass = cx( + detailsClasses.details, + css({ + '&:is([open])': { + '& summary': { + flexDirection: 'column', + alignItems: 'center', + '& img': { + width: '75px' + }, + '& a': { + opacity: 0, + display: 'none' + } + } + }, + '&:not([open])': { + '& summary': { + flexDirection: 'row', + alignItems: 'center', + '& img': { + width: '1.75em' + }, + '& a': { + opacity: 1, + display: 'inline-block' + } + } + } + }) +) + +const detailsTitleClass = css({ + textAlign: 'center' +}) + +const detailsSummaryClass = cx( + css({ + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + gap: 'sm', + transitionProperty: 'all', + transitionDuration: 'fast', + transitionTimingFunction: 'easeOutQuint', + transitionBehavior: 'allow-discrete', + '& img': { + width: '1.75em', + transitionProperty: 'width, height', + transitionDuration: 'normal', + transitionTimingFunction: 'easeOutQuint', + transitionBehavior: 'allow-discrete' + }, + '& a': { + transitionProperty: 'display, opacity', + transitionDuration: '0', + transitionTimingFunction: 'easeOutQuint', + transitionBehavior: 'allow-discrete' + }, + '& h3': { + transitionProperty: 'all', + transitionDuration: 'normal', + transitionTimingFunction: 'easeOutQuint', + transitionBehavior: 'allow-discrete' + } + }), + detailsClasses.summary +) + +interface Link { + linkIconUrl?: string + label: string + url: string + description: string +} + +interface LinkCollection { + title: string + links: Link[] +} + +const links: LinkCollection[] = [ + { + title: 'Proyectos', + links: [ + { + label: 'Blog', + url: 'https://blog.juggernautplays.com', + description: + 'Me gusta escribir sobre las cosa con las que "juego", hablo sobre herramientas para creación de contenido y recientemente sobre IA.', + linkIconUrl: '/favicon.svg' + }, + { + label: 'EntGamers', + url: 'https://entgamers.pro', + description: 'Comunidad de Gamers para Gamers.', + linkIconUrl: '/svg/EntGamers.svg' + } + ] + }, + { + title: 'Redes Sociales', + links: [ + { + label: 'Twitch', + url: 'https://www.twitch.tv/juggernautplays', + description: + 'Mi Canal de Twitch. Hago Streamings de Juegos sobre todo.', + linkIconUrl: '/svg/twitch.svg' + }, + { + label: 'YouTube', + url: 'https://www.youtube.com/JuggernautPlays', + description: + 'Mi Canal de YouTube. Si les soy sincero, ha visto tiempos mejores. Ahora no estoy muy activo, pero me gustaría seguir creando contenido.', + linkIconUrl: '/svg/youtube.svg' + }, + { + linkIconUrl: '/svg/bsky.svg', + label: 'BlueSky', + url: 'https://bsky.app/profile/jugger.srjuggernaut.dev', + description: + 'Mi Perfil en BlueSky. No publico mucho, pero puedes encontrarme ahí.' + }, + { + label: 'Twitter', + url: 'https://twitter.com/juggernautplays', + description: + 'Mi cuenta de Twitter. Hago Streamings de Juegos sobre todo.', + linkIconUrl: '/svg/twitter.svg' + } + ] + } +] +--- + +
+
+

Links

+ {links.map((linkCollection) => ( +
+

{linkCollection.title}

+
+ {linkCollection.links.map((link) => ( +
+ + {(link.linkIconUrl !== undefined && link.linkIconUrl !== '') && {link.label}} +

+ {link.label} +

+ + + + Visitar + + + +
+

+ {link.description} +

+
+ + Visitar + +
+
+
+ ))} +
+
+ ))} +
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index c23d6ea..444d079 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,18 +5,15 @@ import '@fontsource/orbitron/900.css' import '@fortawesome/fontawesome-free/css/fontawesome.min.css' import '@fortawesome/fontawesome-free/css/solid.min.css' import '@fortawesome/fontawesome-free/css/brands.min.css' +import Landing from '@/components/layout/Landing.astro' +import Hero from '@/components/pages/Home/Hero.astro' +import Links from '@/components/pages/Home/Links.astro' --- - - - - - - - - Astro - - -

Astro

- - + + + +