About this Page
This blog is built using Next.js and Next-Intl for internationalization. It features posts written in both English and Spanish, catering to a diverse audience interested in AI research.
Tech stack
The project's core. I use Next.js deployed on **Vercel**, allowing me to go beyond traditional static site limitations. I leverage hybrid rendering (Server Components + Static Generation) and their Edge Network to deliver an instant, secure, and globally scalable website.
The language connecting everything. I use it for both interface logic and interactive simulations (like genetic algorithms) that run directly in your browser.
The interface library. It allows me to think of the web as reusable LEGO pieces (components). From the navigation bar to the post cards, everything is a modular component managing its own state and logic.
The code repository. It serves as the project's 'source of truth' for version control. Hosting the code here ensures transparency and allows the community to audit, fork, or learn from the source, aligning with Open Science principles.
The infrastructure platform. It connects directly to GitHub to build and deploy the site. It provides the Global Edge Network required for high-performance content delivery and supports the dynamic server-side features of Next.js.
The internationalization layer. It manages dynamic routing (/es, /en) and optimized JSON dictionary loading compatible with Server Components. It enables this blog to be natively bilingual without sacrificing static performance.
CSS on steroids. It allows me to write real CSS styles inside my JavaScript components. It is the key tool managing the theme system (Dark/Light mode) and ensures that one component's styles do not break another's.
The brain behind the text. It is the processor that reads my Markdown files and builds an 'Abstract Syntax Tree' (AST). Basically, it understands the structure of my notes and transforms them into secure HTML using the plugins: remark-gfm, remark-math,remark-toc,remark-html, remark-prism y remark-rehype.
The HTML processor. It is the ecosystem that polishes the final code: **rehype-highlight** adds color to code blocks, **rehype-slug** creates links in headings, **rehype-katex** renders mathematical formulas, and **rehype-sanitize** ensures site security.
The metadata manager. It extracts header information (Frontmatter) from my MDX files, allowing me to organize posts by date, title, and author before the content is processed.
Much more than plain text. MDX allows me to write articles in standard Markdown while embedding interactive React components (charts, simulators) directly between paragraphs. This is what makes this blog 'alive' and not just static text.
The gold standard in academic writing. Thanks to the integration with Remark, I can write complex equations and scientific notation (like $\Sigma$) directly in Markdown. The system renders them as perfect mathematical vectors, essential for explaining papers and algorithms. The rendering is done via KaTeX with the plugin: rehype-katex.
Coreography of the animations. (former Framer-Motion). Is the library responsible for animations. I use it for easy transitions, some bouncing effect ad buttons and boxes, the scroll bar on top of post pages and physic interactivity of buttons, making the UX organic and fluid.
Diagrams as code. An integrated tool that renders flowcharts and complex graphs directly from text within the articles, essential for visually explaining algorithms.
Provides the site's vector iconography (social media, UI indicators). Being SVGs, they look crisp at any resolution and screen size without affecting performance.