Skip to content

Commit

Permalink
feat: styles & enhancement
Browse files Browse the repository at this point in the history
  • Loading branch information
jamerrq committed May 7, 2024
1 parent 9ccfbda commit b081b10
Show file tree
Hide file tree
Showing 28 changed files with 436 additions and 214 deletions.
3 changes: 2 additions & 1 deletion astro.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export default defineConfig({
}
},
redirects: {
'/oss': '/oss/0'
'/oss': '/oss/0',
'/opensource': '/oss/0'
}
})
Binary file added lib/snaps/preview-mobile-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 12 additions & 10 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,39 @@

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

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

## What can you learn from this project?
## What can you learn from this project? 🧐

- Astro Server Side Rendering with Deno and Deno Deploy
- Astro View Transitions
- Preact Integration with Astro
- How to use signals with Preact
- CSS Grid & Flexbox Layouts
- PWA Development within an Astro App
- Tailwind Tricks and Plugins
- Styling with Tailwind CSS and Plugins
- GitHub Project Board for managing tasks
- Dark & Light Mode with Tailwind CSS

## Stack 🥞

![Astro](https://img.shields.io/badge/-Astro-000000?style=flat-square&logo=astro&logoColor=orange)
![Tailwind
CSS](https://img.shields.io/badge/-Tailwind%20CSS-lightblue?style=flat-square&logo=tailwind-css&logoColor=blue)
![Preact](https://img.shields.io/badge/-Preact-673AB8?style=flat-square&logo=preact&logoColor=white)
CSS](https://img.shields.io/badge/-Tailwind%20CSS-000?style=flat-square&logo=tailwind-css&logoColor=blue)
![Preact](https://img.shields.io/badge/-Preact-000000?style=flat-square&logo=preact&logoColor=white)
![MDX](https://img.shields.io/badge/-MDX-000000?style=flat-square&logo=markdown&logoColor=white)

## Previews

![Desktop](./lib/snaps/preview-4.png)
![Desktop](./lib/snaps/preview-3.png)
![Mobile](./lib/snaps/preview-mobile-2.png)
![Mobile](./lib/snaps/preview-mobile-3.png)

### Tooling 🛠️

![Bun](https://img.shields.io/badge/-Bun-orange?style=flat-square&logo=bun&logoColor=white)
![Prettier](https://img.shields.io/badge/-Prettier-F7B93E?style=flat-square&logo=prettier&logoColor=black)
![ESLint](https://img.shields.io/badge/-ESLint-4B32C3?style=flat-square&logo=eslint&logoColor=white)
![Bun](https://img.shields.io/badge/-Bun-000?style=flat-square&logo=bun&logoColor=white)
![Prettier](https://img.shields.io/badge/-Prettier-000?style=flat-square&logo=prettier&logoColor=yellow)
![ESLint](https://img.shields.io/badge/-ESLint-000?style=flat-square&logo=eslint&logoColor=indigo)

### CI/CD & Deployment 🚀

Expand All @@ -42,7 +44,7 @@ Deploy](https://img.shields.io/badge/-Deno%20Deploy-000000?style=flat-square&log

## Board 📋

https://github.com/users/jamerrq/projects/1/views/2
[Project Board on GitHub](https://github.com/users/jamerrq/projects/1/views/2)

## Resources 📚

Expand Down
48 changes: 2 additions & 46 deletions src/components/badges/badge.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,10 @@ interface Props {
}
const { props } = Astro
---

<style>
.badge {
--timing: linear(0, 0.3, 0.75, 1);

padding: 0.5rem 1rem;
font-size: 0.9rem;

border-image-source: conic-gradient(
from var(--a),
#8decb4,
#41b06e,
#141e46
);

border-radius: 5px;
border-image-slice: 0.9 1 1 1;
border-image-width: 0.15rem;

animation: move 3.14159s infinite var(--timing);
}

.badge .fill {
border-image-slice: 1 1 1 1 fill;
}

.badge:active {
transform: translate(5px, 5px);
box-shadow: none;
}

@keyframes move {
from {
--a: 0deg;
}
to {
--a: 360deg;
}
}
import './badge.css'
---

@property --a {
syntax: '<angle>';
inherits: true;
initial-value: 0deg;
}
</style>
<div class=`animate-slide-in-top rounded ${props.class}`>
<span class='relative flex overflow-hidden rounded shadow shadow-black'>
<div
Expand Down
43 changes: 43 additions & 0 deletions src/components/badges/badge.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
.badge {
--timing: linear(0, 0.3, 0.75, 1);

padding: 0.5rem 1rem;
font-size: 0.9rem;

border-image-source: conic-gradient(from var(--a),
#8decb4,
#41b06e,
#141e46);

border-radius: 5px;

border-image-slice: 0.9 1 1 1;
border-image-width: 0.15rem;

animation: move 6.28s infinite var(--timing);
}

.badge .fill {
border-image-slice: 1 1 1 1 fill;
}

.badge:active {
transform: translate(5px, 5px);
box-shadow: none;
}

@keyframes move {
from {
--a: 0deg;
}

to {
--a: 360deg;
}
}

@property --a {
syntax: '<angle>';
inherits: true;
initial-value: 0deg;
}
4 changes: 2 additions & 2 deletions src/components/badges/email-badge.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ interface Props {
lang?: string
}
const { lang = 'en' }: Props = Astro.props
import Badge from './badge.astro'
import Badge from './noAnimationBadge.astro'
---

<Badge
class='animate-fade-in group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md font-medium text-neutral-200 duration-500'
class='animate-fade-in group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md font-medium duration-500'
>
<div
class='translate-x-0 opacity-100 transition group-hover:-translate-x-[150%] group-hover:opacity-0 flex'
Expand Down
19 changes: 19 additions & 0 deletions src/components/badges/noAnimationBadge.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
interface Props {
class: string
}
const { props } = Astro
---

<div class=`animate-slide-in-top rounded ${props.class}`>
<span
class='relative flex overflow-hidden rounded shadow shadow-black border-2'
>
<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 dark:text-emerald-300 shadow shadow-black dark:shadow-gray-300'
>
<slot />
</div>
</span>
</div>
2 changes: 1 addition & 1 deletion src/components/main/about-me-card.astro
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const { lang = 'en' }: Props = Astro.props
<OpenToWork lang={lang} />
</header>
<div
class='flex items-center p-3 justify-around w-full font-secondary xl:text-lg text-sm relative'
class='flex items-center p-3 justify-around w-full font-secondary xl:text-base text-sm relative'
>
<ul class='w-full text-center p-2 gap-1.5 flex flex-col [&_p]:text-balance'>
<li>
Expand Down
6 changes: 1 addition & 5 deletions src/components/main/title.astro
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,10 @@ const { lang = 'en' }: Props = Astro.props
-webkit-backdrop-filter: blur(5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);

@media (prefers-color-scheme: light) {
background: rgb(255, 255, 255, 0.25);
}
}
</style>
<div
class='bg-slate-300/80 dark:bg-slate-900/95 row-span-2 xl:col-span-2 title dark:text-emerald-400 text-emerald-900 p-2 rounded w-full h-full flex items-center flex-row animate-blurred-fade-in relative card'
class='bg-slate-300/80 dark:bg-slate-900/95 row-span-2 xl:col-span-2 title dark:text-emerald-400 text-emerald-950 p-2 rounded w-full h-full flex items-center flex-row animate-blurred-fade-in relative card animate-delay-300'
>
<div class='flex flex-col gap-1 animate-fade-in z-10'>
<a href={lang !== 'en' ? '/' : 'es'}>
Expand Down
31 changes: 2 additions & 29 deletions src/components/main/working-on.astro
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ import WorkingOnTsx from './working-on.tsx'

<Box
title="Projects I'm working on"
otherStyles='xl:col-span-2 xl:row-span-4 gap-4'
otherStyles='xl:col-span-2 xl:row-span-4 p-4'
>
<header
class='text-2xl xl:text-3xl flex gap-2 text-emerald-950 dark:text-emerald-300 items-center'
class='text-3xl flex gap-2 text-emerald-950 dark:text-emerald-300 items-center'
>
<p>
<!-- Working on -->
Expand All @@ -30,31 +30,4 @@ import WorkingOnTsx from './working-on.tsx'
/>
</header>
<WorkingOnTsx lang={lang} client:only='preact' />
<!-- <span class='text-center px-3 [&_a]:text-emerald-300'>
{lang === 'en' ? '#HolaMundoDay Workshop' : 'Taller #HolaMundoDay'}
</span>
<span class='text-center'>
{
lang === 'en'
? 'Open Source Contributions for beginners'
: 'Contribuciones al Código Libre para principiantes'
}
</span>
<span class='text-center'>
<a
href='https://holamundo.day/#speakers'
target='_blank'
rel='noopener noreferrer'
class='text-emerald-500 dark:text-emerald-300 bg-gray-600 px-2 py-1 rounded dark:bg-slate-900/80 hover:bg-gray-700 dark:hover:bg-slate-900/70 transition-colors'
>
{
lang === 'en'
? 'More info at holamundo.day/#speakers'
: 'Más información en holamundo.day/#speakers'
}
</a>
</span>
<a href='/board'>
{lang === 'en' ? 'Preview (?)' : 'Vistazo (?)'}
</a> -->
</Box>
20 changes: 11 additions & 9 deletions src/components/main/working-on.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
// get number of days since the project started
const days = Math.floor((Date.now() - date.getTime()) / (1000 * 60 * 60 * 24))
return (
<li class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>*]:rounded-[10px] [&>span]:text-sm [&>span]:xl:text-base'>
<div class='absolute bottom-0 right-2 font-secondary text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90 py-0.5'>
<li class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>span]:text-sm [&>span]:xl:text-base w-full'>
<div class='absolute bottom-0 right-2 font-secondary font-bold text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-200 text-emerald-950 px-1 shadow shadow-black/90 py-0.5 rounded'>
{days}+ {lang === 'en' ? 'days' : 'días'}
</div>
<h1 class='text-sm xl:text-base font-primary dark:text-emerald-100 text-emerald-950 bg-emerald-500 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'>
<h1 class='text-sm font-primary dark:text-emerald-100 text-emerald-950 bg-emerald-500 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90 rounded'>
{lang === 'en' ? project?.title.en : project?.title.es}
</h1>
<section class='bg-transparent w-full flex'>
Expand Down Expand Up @@ -86,13 +86,15 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
>
<svg
key={t}
class='w-7 h-7 xl:w-8 xl:h-8 hover:scale-110 shadow bg-slate-600/80 p-1 rounded'
class='w-7 h-7 xl:w-8 xl:h-8 shadow dark:bg-slate-600/80 bg-slate-200/80 p-1 rounded fill-slate-900 dark:fill-white'
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: a.svg }}
fill={`#fff`}
// fill={`#fff`}
title={t}
/>
<span class='text-xs lowercase'>{t}</span>
<span class='text-xs lowercase'>
{t.toLowerCase().replaceAll(' ', '')}
</span>
</div>
)
})}
Expand All @@ -104,11 +106,11 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
href={project.preview}
target='_blank'
rel='noopener noreferrer'
class=''
class='text-xs'
aria-label={`Preview for ${project.title.en}`}
title={`Preview for ${project.title.en}`}
>
{lang === 'en' ? 'Project Preview' : 'Demo del Proyecto'}
{lang === 'en' ? 'Preview' : 'Demo del Proyecto'}
</a>
) : null}
</span>
Expand All @@ -134,7 +136,7 @@ effect(() => {
export default function WorkingOn({ lang = 'en' }) {
return (
<div class='h-full w-full gap-2' id='working-on-client'>
<ul class='flex gap-2 text-base flex-col justify-around h-full font-secondary font-bold py-2'>
<ul class='flex gap-2 text-base flex-col justify-around h-full font-secondary font-bold py-6'>
{Array.from({ length: 2 }, (_, i) => i + index.value).map((i) => (
<ProjectCard
lang={lang}
Expand Down
24 changes: 24 additions & 0 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,27 @@ import Bento from '@components/main/main-bento.astro'
<Layout title='jamerrq.dev'>
<Bento lang={lang} />
</Layout>
<script>
// add key listener to go to /oss
// typing oss
const oss = ['o', 's', 's']
let ossIndex = 0
let ossTimeout: number | null = null
const ossListener = (e: KeyboardEvent) => {
if (e.key === oss[ossIndex]) {
ossIndex++
if (ossIndex === oss.length) {
window.location.href = '/oss'
}
if (ossTimeout) {
clearTimeout(ossTimeout)
}
ossTimeout = setTimeout(() => {
ossIndex = 0
}, 1000) as unknown as number
} else {
ossIndex = 0
}
}
window.addEventListener('keydown', ossListener)
</script>
25 changes: 24 additions & 1 deletion src/pages/oss/[page].astro
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,32 @@ const { page = 1 } = Astro.params
<main class='w-[85dvw] min-h-[100dvh] grid place-content-center'>
<CurrentPage index={+page} />
<footer
class='absolute bottom-0 left-0 w-full flex opacity-10 hover:opacity-100 transition-opacity duration-200 ease-in-out'
class='absolute bottom-0 left-0 w-full flex opacity-0 hover:opacity-100 transition-opacity duration-200 ease-in-out'
>
<Buttons rounded={false} />
</footer>
</main>
<script is:inline define:vars={{ page }}>
const lastPage = 13
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
const currentPage = +page || 0
const nextPage = currentPage + 1
window.location.href = `/oss/${nextPage}`
}
if (e.key === 'ArrowLeft') {
const currentPage = +page || 0
const prevPage = currentPage - 1
window.location.href = `/oss/${prevPage}`
}
// initial page
if (e.key === 'Home') {
window.location.href = '/oss'
}
// last page
if (e.key === 'End') {
window.location.href = `/oss/${lastPage}`
}
})
</script>
</Layout>
Loading

0 comments on commit b081b10

Please sign in to comment.