diff --git a/.vscode/settings.json b/.vscode/settings.json index a543624..28a8c9c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,6 +5,9 @@ "[astro]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, "yaml.schemas": { "https://json.schemastore.org/github-workflow.json": "file:///home/jamerrq/dev/astro/jamerrq.dev/.github/workflows/deploy.yml" }, diff --git a/.vscode/tasks.json b/.vscode/tasks.json index aeae38a..ebcd906 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -5,15 +5,15 @@ "type": "npm", "script": "lint", "problemMatcher": [], - "label": "pnpm: lint", + "label": "bun: lint", "detail": "eslint --ext .js,.astro src" }, { "type": "npm", "script": "dev", "problemMatcher": [], - "label": "dev 🖌️", - "detail": "astro dev" + "label": "astro: dev", + "detail": "astro dev --host" }, { "type": "npm", diff --git a/package.json b/package.json index a2e32b7..405fe19 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "typescript": "^5.3.3" }, "scripts": { - "dev": "astro dev", + "dev": "astro dev --host", "start": "astro dev", "build": "astro check && astro build", "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs", diff --git a/public/docs/cv_en.pdf b/public/docs/cv_en.pdf new file mode 100644 index 0000000..38bde2d Binary files /dev/null and b/public/docs/cv_en.pdf differ diff --git a/public/docs/cv_es.pdf b/public/docs/cv_es.pdf new file mode 100644 index 0000000..0d2f606 Binary files /dev/null and b/public/docs/cv_es.pdf differ diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx index b8bcbad..7a12fb1 100644 --- a/src/components/blog/last-entries.tsx +++ b/src/components/blog/last-entries.tsx @@ -38,10 +38,10 @@ export default function LastEntries() { {entries.map((entry, index) => { return ( -
  • +
  • {entry.date}
    • -
  • +
  • {entry.title} / {entry.tĂ­tulo} diff --git a/src/components/featured-and-projects/featured-projects-bento.astro b/src/components/featured-and-projects/featured-projects-bento.astro index b42c5ab..4de4f04 100644 --- a/src/components/featured-and-projects/featured-projects-bento.astro +++ b/src/components/featured-and-projects/featured-projects-bento.astro @@ -13,6 +13,6 @@ const { lang = 'en' }: Props = Astro.props - - + + diff --git a/src/components/featured-and-projects/icons.tsx b/src/components/featured-and-projects/icons.tsx index f9ce31b..03d38cf 100644 --- a/src/components/featured-and-projects/icons.tsx +++ b/src/components/featured-and-projects/icons.tsx @@ -2,7 +2,7 @@ export function WebIcon() { return ( @@ -15,7 +15,7 @@ export function WebIcon() { export function GithubIcon() { return ( - + GitHub @@ -24,6 +24,51 @@ export function GithubIcon() { ) } +export const YoutubeIcon = () => ( + + + +) + +export const TwitchIcon = () => ( + + + + +) + +export const TwitterIcon = () => ( + + + +) + +export const DiscordServerIcon = () => ( + + + +) + export function Left() { return ( - {text === '' ? : } + {title === 'Website' ? ( + + ) : title === 'Repository' ? ( + + ) : title === 'Twitter Account' ? ( + + ) : title === 'Twitch Channel' ? ( + + ) : title === 'Youtube Channel' ? ( + + ) : title === 'Discord Server' ? ( + + ) : ( + + )} ) } diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx index 4a94263..ccc7960 100644 --- a/src/components/featured-and-projects/projects.tsx +++ b/src/components/featured-and-projects/projects.tsx @@ -1,9 +1,9 @@ -import { data, logos } from '@data/projects.json' - -import Link from './link' +import { data } from '@data/projects.json' import { shuffle } from '@utils' +const shuffledData = shuffle(data) + const PROJECT_STYLES: string = [ 'col-span-6', 'row-span-4', @@ -19,7 +19,7 @@ const PROJECT_STYLES: string = [ 'font-bold', 'font-rubik-doodle', 'w-full', - 'h-[300px]', + 'xl:h-[400px] h-[300px]', 'xl:h-full', 'transition-all', 'border-2', @@ -29,28 +29,13 @@ const PROJECT_STYLES: string = [ 'dark:bg-emerald-900', 'responsive-text-xs', 'p-2', - 'pb-5', + 'pb-4', 'relative' ].join(' ') import { signal } from '@preact/signals' const index = signal(0) -interface ResourceProps { - tech: string -} - -function Tech({ tech }: ResourceProps) { - const { name, url, ref } = logos.find((logo) => logo.name === tech)! - return ( -
  • - - {name} - -
    • - ) -} - type ResourcesProps = { n?: number lang?: string @@ -58,6 +43,18 @@ type ResourcesProps = { import { DoubleLeft, DoubleRight } from './icons' +import simpleIcons, { type toExportType } from '@components/icons/simple-icon' + +import { h } from 'preact' + +function SimpleIcon(key: string) { + const Icon = simpleIcons[key as keyof toExportType] + if (typeof Icon === 'function') { + return + } + return h('fragment', {}) +} + const BUTTONS_STYLES = [ 'absolute', 'bg-cyan-300', @@ -97,25 +94,41 @@ export default function Resources({ n = 1, lang = 'en' }: ResourcesProps) { <> {/* */} {Array.from(Array(n).keys()).map((i) => { - const project = shuffle(data).at((i + index.value) % data.length)! + const project = shuffledData.at((i + index.value) % data.length)! return ( diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx index 54208bc..8985e58 100644 --- a/src/components/featured-and-projects/resources.tsx +++ b/src/components/featured-and-projects/resources.tsx @@ -6,7 +6,7 @@ const RESOURCE_STYLES: string = [ 'rounded-sm', 'shadow-[0_0_0.3rem_rgb(8_51_68)]', // rgb(8, 51, 68) 'flex', - 'flex-row', + 'flex-col', 'gap-2', 'items-center', 'justify-center', @@ -22,7 +22,7 @@ const RESOURCE_STYLES: string = [ 'dark:text-cyan-300', 'bg-slate-300', 'dark:bg-slate-900', - 'text-xl', + 'text-base xl:text-2xl', 'p-2', 'relative' ].join(' ') @@ -45,14 +45,19 @@ const BUTTONS_STYLES = [ 'bg-cyan-300', 'rounded-sm', 'flex', + 'flex-wrap', 'items-center', 'justify-center', 'py-1', 'px-0.5' ].join(' ') +import { shuffle } from '@utils' + +const shuffleData = shuffle(data) + const DoubleUpButton = ({ _f }: { _f: () => void }) => ( -
    +
    @@ -60,7 +65,7 @@ const DoubleUpButton = ({ _f }: { _f: () => void }) => ( ) const DoubleDownButton = ({ _f }: { _f: () => void }) => ( -
    +
    @@ -97,16 +102,26 @@ export default function Resources({ n = 3 }: ResourceProps) { {Array.from(Array(n).keys()).map((i) => { // Array.from(Array(n).keys()) - const resource = data.at((i + index.value) % data.length) + const resource = shuffleData.at((i + index.value) % data.length) return ( -
    +
    {i === 0 && } {i === 1 && } {resource?.title} - {resource?.repository && ( - - )} - {resource?.website && } +
    + {resource?.repository && ( + + )} + {resource?.website && ( + + )} + {resource?.links?.map((link, _i) => ( + + ))} +
    {i === 1 && } {i === 2 && }
    diff --git a/src/components/icons/simple-icon.tsx b/src/components/icons/simple-icon.tsx new file mode 100644 index 0000000..6b65996 --- /dev/null +++ b/src/components/icons/simple-icon.tsx @@ -0,0 +1,146 @@ +import { h } from 'preact' +import { + siAstro, + siSupabase, + siNextdotjs, + siTailwindcss, + siTypescript, + siCsharp, + siDotnet, + siExpress, + siSequelize, + siPostgresql, + siReact, + siPython, + siJupyter, + siLatex, + siHtml5, + siJavascript, + siPhp, + siCss3 +} from 'simple-icons' + +export interface SimpleIconProps { + class?: string + __html: string +} + +const TECH_ICON_STYLES = [ + 'w-8', + 'h-8', + 'xl:w-10', + 'xl:h-10', + 'hover:scale-110', + 'transition-all', + 'dark:bg-emerald-300', + 'bg-emerald-900', + 'p-1', + 'rounded-md', + `fill-[#fff] dark:fill-[#000]` +].join(' ') + +function SimpleIcon({ __html }: SimpleIconProps) { + return h('div', { + dangerouslySetInnerHTML: { __html }, + class: TECH_ICON_STYLES + }) +} + +function AstroLogo() { + return SimpleIcon({ __html: siAstro.svg }) +} + +function SupabaseLogo() { + return SimpleIcon({ __html: siSupabase.svg }) +} + +function NextLogo() { + return SimpleIcon({ __html: siNextdotjs.svg }) +} + +function TailwindLogo() { + return SimpleIcon({ + __html: siTailwindcss.svg + }) +} + +function TypeScriptLogo() { + return SimpleIcon({ __html: siTypescript.svg }) +} + +function CSharpLogo() { + return SimpleIcon({ __html: siCsharp.svg }) +} + +function DotnetLogo() { + return SimpleIcon({ __html: siDotnet.svg }) +} + +function ExpressLogo() { + return SimpleIcon({ __html: siExpress.svg }) +} + +function SequelizeLogo() { + return SimpleIcon({ __html: siSequelize.svg }) +} + +function PostgreSQLLogo() { + return SimpleIcon({ __html: siPostgresql.svg }) +} + +function ReactLogo() { + return SimpleIcon({ __html: siReact.svg }) +} + +function PythonLogo() { + return SimpleIcon({ __html: siPython.svg }) +} + +function JupyterLogo() { + return SimpleIcon({ __html: siJupyter.svg }) +} + +function LatexLogo() { + return SimpleIcon({ __html: siLatex.svg }) +} + +function HtmlLogo() { + return SimpleIcon({ __html: siHtml5.svg }) +} + +function JavaScriptLogo() { + return SimpleIcon({ __html: siJavascript.svg }) +} + +function CssLogo() { + return SimpleIcon({ __html: siCss3.svg }) +} + +function PhpLogo() { + return SimpleIcon({ __html: siPhp.svg }) +} + +const toExport = { + Astro: AstroLogo, + Supabase: SupabaseLogo, + 'Next JS': NextLogo, + 'Tailwind CSS': TailwindLogo, + TypeScript: TypeScriptLogo, + 'C#': CSharpLogo, + '.NET': DotnetLogo, + Express: ExpressLogo, + Sequelize: SequelizeLogo, + PostgresSql: PostgreSQLLogo, + Python: PythonLogo, + 'Jupyter Notebook': JupyterLogo, + LaTeX: LatexLogo, + React: ReactLogo, + Html: HtmlLogo, + Css: CssLogo, + Javascript: JavaScriptLogo, + Php: PhpLogo +} + +export type toExportType = typeof toExport + +export default toExport diff --git a/src/components/main/about-me-card.astro b/src/components/main/about-me-card.astro index 4b8cca9..b447a97 100644 --- a/src/components/main/about-me-card.astro +++ b/src/components/main/about-me-card.astro @@ -28,11 +28,11 @@ const ABOUT_ME_STYLES = [ ---
    -

    +

    {lang === 'en' ? 'Get to know me' : 'ConĂłceme'}

    • diff --git a/src/components/main/blog.astro b/src/components/main/blog.astro index c62d855..f42c550 100644 --- a/src/components/main/blog.astro +++ b/src/components/main/blog.astro @@ -10,7 +10,7 @@ const BLOG_STYLES = [ 'flex', 'items-center', 'justify-center', - 'text-4xl', + 'xl:text-4xl text-2xl', 'font-bold', 'text-amber-950', 'dark:text-amber-300', @@ -20,7 +20,6 @@ const BLOG_STYLES = [ 'transition-all', 'duration-200', 'dark:transition-all', - // 'dark:border-emerald-300', 'border-2', 'border-amber-500', 'dark:bg-slate-900', diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro index 2a4bbc0..1be49c9 100644 --- a/src/components/main/buttons.astro +++ b/src/components/main/buttons.astro @@ -47,19 +47,24 @@ import GoBack from '@components/icons/go-back.astro' const BOARD_BUTTON_STYLE = process.env.NODE_ENV !== 'development' ? '' : 'hidden' + +// {SVGS_STYLES} +const SVGS_STYLES = [ + 'w-6', + 'h-6', + 'xl:w-8', + 'xl:h-8', + 'inline-flex', + 'fill-slate-950', + 'dark:fill-emerald-300' +].join(' ') --- diff --git a/src/components/main/container.astro b/src/components/main/container.astro index 651ef5e..cbf8036 100644 --- a/src/components/main/container.astro +++ b/src/components/main/container.astro @@ -1,6 +1,7 @@