Skip to content

Commit

Permalink
feat: styles & enhancement
Browse files Browse the repository at this point in the history
  • Loading branch information
jamerrq committed Mar 22, 2024
1 parent 18db15a commit 489ad02
Show file tree
Hide file tree
Showing 42 changed files with 518 additions and 906 deletions.
Binary file not shown.
Binary file removed public/fonts/rubik-patched.woff2
Binary file not shown.
Binary file added public/img/gif/noise.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion readme.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# jamerrq.dev

Source code for my personal website, [jamerrq.dev](https://jamerrq.dev).
Source code for my personal website, [jamerrq.dev](https://jamerrq.dev)

![](https://img.shields.io/badge/Made%20with-Astro%20💙-orange?style=for-the-badge&logo=astro&logoColor=orange)

Expand Down
6 changes: 4 additions & 2 deletions src/components/badges/badge.astro
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<div class='xl:absolute top-2 right-2 animate-slide-in-top'>
<span class='relative flex overflow-hidden rounded p-[1.25px]'>
<span
class='relative flex overflow-hidden rounded p-[1.25px] shadow shadow-black'
>
<div
class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 bg-emerald-500 backdrop-blur-3xl'
class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 bg-emerald-500 backdrop-blur-3xl shadow shadow-black'
>
<slot />
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/blog/last-entries.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const LAST_ENTRIES_STYLES = [
'col-span-6',
'row-span-5',
'bg-slate-300',
'bg-slate-300/80',
'dark:bg-slate-900',
'dark:text-slate-300',
'rounded-sm',
Expand Down Expand Up @@ -87,7 +87,7 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
<h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-4xl text-center'>
- {lang === 'en' ? 'Last Entries' : 'Últimas Entradas'} -
</h1>
<ul class='grid grid-cols-[1fr_5fr] gap-3 w-full p-2 responsive-text-sm'>
<ul class='grid grid-cols-[1fr_5fr] gap-3 w-full h-full p-2 responsive-text-sm'>
<li />
<li class='dark:text-cyan-400 text-cyan-950 text-xl' />
{entries
Expand All @@ -105,7 +105,7 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
<li class='font-merriweather text-sm xl:text-base text-center'>
{entry.date}
</li>
<li class='font-merriweather text-sm xl:text-base py-1 px-2 rounded-sm cursor-pointer hover:scale-[1.02] transition-all ease-in-out flex flex-col gap-2'>
<li class='font-merriweather text-sm xl:text-base py-1 px-2 rounded-sm cursor-pointer hover:border-2 transition-all ease-in-out flex flex-col gap-2'>
<a href={`${lang === 'en' ? entry.href : entry.hrefEs}`}>
<div class='flex flex-col xl:flex-row gap-4'>
<span>{lang === 'en' ? entry.title : entry.titleEs}</span>
Expand Down
19 changes: 19 additions & 0 deletions src/components/boxes/box.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
interface Props {
ncols?: number
nrows?: number
animated?: boolean
delay?: number
title: string
otherStyles?: string
}
const { props }: { props: Props } = Astro
---

<article
data-animated={props.animated}
class=`bg-slate-300/70 dark:bg-slate-900/95 rounded-sm flex items-center justify-center font-bold dark:text-slate-300 font-rubik-doodle w-full h-full flex-col text-base py-3 px-2 relative data-[animated]:animate-blurred-fade-in data-[animated]:animate-delay-${(props.delay ?? 0) * 100} ${props?.otherStyles}`
>
<slot />
</article>
23 changes: 23 additions & 0 deletions src/components/boxes/hbox.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
interface Props {
ncols?: number
nrows?: number
animated?: boolean
delay?: number
title: string
href: string
otherStyles?: string
}
const { props }: { props: Props } = Astro
const { href, title } = props
---

<a
href={href}
title={title}
data-animated={props.animated}
class=`bg-slate-300/70 dark:bg-slate-900/95 rounded-sm flex items-center justify-center font-bold dark:text-slate-300 font-rubik-doodle w-full h-full text-base py-3 px-2 relative hover:border-2 hover:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
>
<slot />
</a>
2 changes: 1 addition & 1 deletion src/components/featured-and-projects/about.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const ABOUT_STYLES = [
'col-span-1 xl:col-span-4',
'row-span-1',
'bg-slate-300/70',
'dark:bg-slate-900',
'dark:bg-slate-900/90',
'dark:text-slate-300',
'rounded-sm',
'flex',
Expand Down
8 changes: 2 additions & 6 deletions src/components/featured-and-projects/projects.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@ const concatedData = featured.concat(notFeatured)
const PROJECT_STYLES: string = [
'col-span-6',
'row-span-4',
'bg-emerald-300',
'bg-emerald-300/80',
'rounded-sm',
'shadow-[0_0_0.3rem_rgb(0_0_0)]', // rgb(69, 26, 3)
'dark:shadow-[0_0_0.1rem_rgb(255_255_255)]', // rgb(253, 230, 138)
'flex',
'flex-col',
'gap-3',
Expand All @@ -27,11 +25,9 @@ const PROJECT_STYLES: string = [
'xl:h-[400px] h-[300px]',
'xl:h-full',
'transition-all',
// 'border-2',
// 'border-emerald-500',
'text-emerald-950',
'dark:text-emerald-300',
'dark:bg-emerald-900',
'dark:bg-emerald-900/95',
'responsive-text-xs',
'p-2',
'pb-4',
Expand Down
7 changes: 2 additions & 5 deletions src/components/featured-and-projects/resources.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,10 @@ const RESOURCE_STYLES: string = [
'w-full',
'h-full',
'transition-all',
// 'border-2',
// 'border-cyan-950',
// 'dark:border-cyan-500',
'text-cyan-950',
'dark:text-cyan-300',
'bg-slate-300',
'dark:bg-slate-900',
'bg-slate-300/70',
'dark:bg-slate-900/90',
'text-base xl:text-2xl',
'p-2',
'relative'
Expand Down
118 changes: 118 additions & 0 deletions src/components/head/scripts.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
---
interface Props {
lang?: string
}
const { lang = 'en' } = Astro.props
---

<script defer is:inline define:vars={{ lang }}>
// Theme switch
function setTheme() {
const darkIcon = document.getElementById('theme-toggle-dark-icon')
const lightIcon = document.getElementById('theme-toggle-light-icon')

// Cambia los iconos dentro del botón en función de la configuración anterior
if (
localStorage.getItem('color-theme') === 'dark' ||
!('color-theme' in localStorage)
) {
lightIcon.classList.remove('hidden')
// en caso que se haya configurado previamente
document.documentElement.classList.add('dark')
// remover la clase light si está presente
document.documentElement.classList.remove('light')
} else {
darkIcon.classList.remove('hidden')
// en caso que se haya configurado previamente
document.documentElement.classList.add('light')
// remover la clase dark si está presente
document.documentElement.classList.remove('dark')
}

const themeToggleBtn = document.getElementById('theme-toggle')

themeToggleBtn.addEventListener('click', () => {
darkIcon.classList.toggle('hidden')
lightIcon.classList.toggle('hidden')

// se comprueba si se ha configurado previamente
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark')
// remover la clase light si está presente
document.documentElement.classList.remove('light')
localStorage.setItem('color-theme', 'dark')
} else {
document.documentElement.classList.remove('dark')
// remover la clase dark si está presente
localStorage.setItem('color-theme', 'light')
}

// se comprueba si el sistema operativo tiene configurado el tema oscuro
} else if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark')
document.documentElement.classList.add('light')
localStorage.setItem('color-theme', 'light')
} else {
document.documentElement.classList.add('dark')
document.documentElement.classList.remove('light')
localStorage.setItem('color-theme', 'dark')
}
})
}

setTheme()
document.addEventListener('astro:after-preparation', setTheme)
document.addEventListener('astro:after-swap', setTheme)

// Home & Random Place buttons
const setHomeRandomButton = () => {
const homeButton = document.getElementById('home-button')
const randomPlaceButton = document.getElementById('random-place-button')

// Show home button only if not in home
// Otherwise show random place button
if (
window.location.pathname === '/' ||
window.location.pathname === '/es'
) {
homeButton.classList.add('hidden')
randomPlaceButton.classList.remove('hidden')
} else {
homeButton.classList.remove('hidden')
randomPlaceButton.classList.add('hidden')
}

// Add click event to home button
homeButton.addEventListener('click', () => {
// window.location.href = '/'
lang === 'es'
? (window.location.href = '/es')
: (window.location.href = '/')
})

randomPlaceButton.addEventListener('click', () => {
const places = ['/blog', '/tech-stack', '/featured']
window.location.href = places[Math.floor(Math.random() * places.length)]
})
}

setHomeRandomButton()
document.addEventListener('astro:after-preparation', setHomeRandomButton)
document.addEventListener('astro:after-swap', setHomeRandomButton)
</script>

<script>
import { toast } from 'wc-toast'
const copyMailButton = document.getElementById('copyMailButton')
copyMailButton?.addEventListener('click', () => {
navigator.clipboard.writeText('[email protected]')
toast('email shipped into your clipboard 📬', {
duration: 2000,
theme: {
type: 'light'
}
})
})
</script>
24 changes: 24 additions & 0 deletions src/components/head/seo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,30 @@
import { SEO } from 'astro-seo'
---

<meta charset='UTF-8' />
<meta name='description' content='jamerrq.dev' />
<meta name='viewport' content='width=device-width' />
<link rel='icon' type='image/png' href='/favicon.png' />
<meta name='generator' content={Astro.generator} />
<!-- Open Graph -->
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:site' content='@jamerrq' />
<meta name='twitter:title' content='jamerrq.dev' />
<meta name='twitter:description' content='Software Development' />
<meta name='twitter:image' content='https://jamerrq.deno.dev/og-image2.png' />
<meta property='og:title' content='jamerrq.dev' />
<meta property='og:type' content='personal website' />
<meta property='og:url' content='https://jamerrq.deno.dev' />
<meta property='og:image' content='https://jamerrq.deno.dev/og-image2.png' />
<meta property='og:description' content='Software Development' />
<meta property='og:site_name' content='jamerrq.dev' />
<meta name='theme-color' content='#10B981' />
<!-- Robots -->
<meta name='robots' content='index, follow' />
<meta name='googlebot' content='index, follow' />
<meta name='google' content='notranslate' />
<link rel='sitemap' href='/sitemap-index.xml' />

<!-- PWA Support --><!-- Favicons. --><!-- 16 -->
<link
rel='icon'
Expand Down
34 changes: 34 additions & 0 deletions src/components/icons/icon.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
interface Props {
svg: string
hex?: string
href?: string
title?: string
}
const { svg, hex = '#000', href = '', title = 'Generic Icon' } = Astro.props
---

{
href ? (
<a
href={href}
target='_blank'
rel='noopener noreferrer'
class='hover:scale-110'
title={title}
>
<svg
class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300 drop-shadow-black drop-shadow-2xl'
set:html={svg}
fill={hex}
/>
</a>
) : (
<svg
class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
set:html={svg}
fill={hex}
/>
)
}
Loading

0 comments on commit 489ad02

Please sign in to comment.