Mario Programador Portfolio

Personal portfolio for Mario Poblete Ortiz, a frontend developer. The site introduces Mario, showcases selected projects, and provides links to GitHub, LinkedIn, email, and localized resumes.

Production URL configured in the project: https://marioprogramador.vercel.app/.

Features

• English and Spanish pages, with a language switcher and localized resumes.
• Responsive project grid with mobile and desktop screenshot carousels.
• Project descriptions, technology links, source repositories, and live demos.
• Light, dark, and system theme preferences.
• Animated hero and project sections, a header that hides on scroll, and a back-to-top button.
• Localized metadata and social preview images, a sitemap, and robots configuration.
• Vercel Analytics integration.

The featured projects are Sax Sheet, Clientes Carwash, GitHub Devfinder, and Markdown Previewer. Portfolio content is stored in local TypeScript and JSON files; no database or CMS is required.

Technology stack

Area	Technology
Framework	Next.js 16 App Router, React 19
Language	TypeScript
Styling	Tailwind CSS 4, CSS theme variables
UI	shadcn-style components, Radix UI, Lucide icons
Localization	next-intl
Themes	next-themes
Animation	Framer Motion
Carousels	Embla Carousel
Tooling	ESLint, Prettier

See package.json for exact dependency versions and scripts.

Local development

Install Node.js compatible with the pinned Next.js version and npm. No environment variables are required by the current application code.

npm ci
npm run dev

Open http://localhost:3000. Localized homepages are available at /en and /es; English is the default locale. The development server uses Turbopack.

To build and serve the production application:

npm run build
npm start

Project structure

messages/                     English and Spanish translation files
public/
  files/                      Localized resume PDFs
  images/                     Project screenshots and social preview images
src/
  app/
    [locale]/
      layout.tsx              Shared layout, providers, and metadata
      page.tsx                Hero and project grid
      styles.css              Global styles, theme tokens, and animations
      error.tsx               Error boundary
      not-found.tsx           Localized not-found page
      [...rest]/page.tsx      Unmatched localized routes
    robots.ts                 Crawler rules
    sitemap.ts                Localized sitemap entries
  components/
    layout/                   Animated sections and scroll-aware header
    ui/                       Reusable UI primitives
    project-card.tsx          Screenshot tabs, carousels, and project links
    contact-links.tsx         Social, email, and resume links
  i18n/                       Locale routing, navigation, and message loading
  lib/
    constants.ts              Site URL, title, keywords, and social images
    data.ts                   Project entries and technology catalog
    definitions.ts            Project data interfaces
  proxy.ts                    Locale routing request handler

The @/ import alias resolves to src/.

Updating content

Introduction and translations

Edit messages/en.json and messages/es.json. Keep message keys consistent between languages. These files contain the introduction, project descriptions, and interface labels.

Locale settings live in src/i18n/routing.ts. Request configuration loads the matching message file, and src/proxy.ts applies locale routing. The locale layout generates static parameters for both supported languages.

Projects

1. Add mobile and desktop screenshots to public/images/.
2. Add an entry to PROJECTS_DATA in src/lib/data.ts, following the ProjectData interface in src/lib/definitions.ts.
3. Supply a title, description key, screenshot arrays, technology links, repository URL, and live URL. Reference public assets using paths such as /images/example-mobile-01.png.
4. Add the description key under projectDescriptions in both translation files.
5. Add any new technologies to TECHNOLOGIES in src/lib/data.ts.

The homepage renders the exported projects array, which reverses the declaration order of PROJECTS_DATA. Entries added at the end appear first.

Contact details and resumes

Update social and email links in src/components/contact-links.tsx. Resume PDFs live in public/files/; the same component maps each locale to its resume path.

Appearance

Edit src/app/[locale]/styles.css for global styling, light and dark theme colors, sizing tokens, and the rotating border animation. Reusable UI components live in src/components/ui/, and section animations live in src/components/layout/.

Site identity and SEO

Update METADATA_DEFAULT in src/lib/constants.ts for the site title, production URL, keywords, and localized social preview images. The locale layout uses these values for page metadata, Open Graph, and Twitter previews; it also contains the Google verification value.

The sitemap and robots configuration use the same site URL. Header branding is defined separately in src/app/[locale]/layout.tsx.

Development checks

npm run prettier:check
npx tsc --noEmit

npm run prettier:format formats the repository. npm run eslint:fix -- . invokes ESLint with automatic fixes.

The existing npm run lint script invokes next lint; it needs to be updated for the pinned Next.js 16 tooling. ESLint configuration is in eslint.config.mjs. There is currently no automated test suite or test script.

Deployment

Deploy with a hosting provider that supports Next.js, such as Vercel, or run the production build using Node.js with npm run build and npm start.

When using another domain, update METADATA_DEFAULT.url so generated metadata and sitemap URLs point to the correct host. Vercel Analytics is mounted in the shared locale layout.