Skip to content

matecode-redesign.md

Latest commit

 

History

History
207 lines (155 loc) · 7.49 KB

matecode-redesign.md

File metadata and controls

207 lines (155 loc) · 7.49 KB
Raw

MateCode Portfolio Redesign Plan

Direction

MateCode will be positioned as a web design and software studio led by Fernando Russo, focused on premium SMBs in Latin America and international clients.

Primary offer:

  • Conversion-focused websites and landing pages.
  • Custom software and operational CRMs.
  • Chatbots, automation, and AI integrations.

Primary CTA: Solicitar una consulta / Request a consultation. Secondary CTA: WhatsApp.

Approved Visual Direction

Use a contemporary Swiss-industrial brutalist identity:

  • Mineral light background.
  • Near-black ink.
  • Mate green as the only accent color.
  • Visible grid, hard rules, precise spacing, and square geometry.
  • Large grotesque typography with technical metadata accents.
  • Real project imagery, operational diagrams, and case-study evidence.
  • No generic AI gradients, glassmorphism, fake dashboards, custom cursor, or decorative motion that hurts performance.

Current Project Diagnosis

The existing Astro project should be rebuilt rather than polished in place.

Known issues:

  • The current site is a retro-pixel prototype, not the approved direction.
  • Most files are modified or untracked.
  • The contact form simulates success but does not actually submit.
  • SEO metadata is incomplete for bilingual routes.
  • Netlify redirects Spanish traffic to /es, but that route does not exist.
  • Some .png files contain SVG content.
  • There are dependency/configuration risks around Astro, Tailwind, and Netlify.
  • There are no visible project case studies, testimonials, or outcome evidence on the current site.

The user approved replacing the prototype without preserving a backup commit.

Technical Architecture

Area Decision
Framework Keep Astro and align dependencies.
Rendering Prefer static generation unless a runtime need appears.
UI Astro components; avoid React unless needed for isolated interactivity.
Styling Modern CSS with tokens, cascade layers, clamp(), and responsive layout patterns.
Content Use structured content for services and case studies.
Localization Spanish default at /, English at /en, with shared templates.
Motion CSS and Astro View Transitions first; GSAP only for one or two high-value moments.
Images Astro image optimization with AVIF/WebP, dimensions reserved, and valid social images.
Forms Real Netlify Forms or equivalent progressive enhancement, with accessible states.
Deployment Static Netlify deployment with reproducible Node/runtime configuration.

Proposed Site Map

Route Purpose
/ and /en Main conversion and authority landing pages.
/proyectos and /en/projects Index of real work.
/proyectos/bls-servicios-audiovisuales Landing/site case study.
/proyectos/bls-crm Main custom CRM/software case study.
/proyectos/rentalled Landing or product case study.
/proyectos/visualiza Design/development case study.
/servicios/sitios-web Websites and landing pages offer.
/servicios/software-a-medida CRM, budgets, clients, staff, operations, and custom tools.
/servicios/chatbots-automatizacion Chatbots, AI assistants, and integrations.
/estudio Studio profile, Fernando's experience, method, and collaborators.
/contacto Qualified consultation form and WhatsApp.
/privacidad Form/privacy policy.
/404 Useful branded not-found page.

Homepage Narrative

  1. Hero with specific value proposition and primary CTA.
  2. Verified client/project proof: BLS, Rentalled, Visualiza.
  3. Featured BLS CRM case study showing operational impact.
  4. Three core capabilities: websites, custom software, AI/chatbots.
  5. Selected case studies with real screenshots and evidence.
  6. Process from diagnosis to launch.
  7. Studio profile: Fernando-led, senior care, collaborators when needed.
  8. Testimonials and verified outcomes.
  9. FAQs written for buyers, SEO, and AI extraction.
  10. Final consultation form and WhatsApp route.

Content and Copy Strategy

Do not invent clients, metrics, testimonials, or seniority claims.

Use real evidence from:

  • BLS Servicios Audiovisuales.
  • Rentalled.
  • Visualiza.
  • BLS CRM for budgets, follow-ups, clients, technicians, notifications, and event operations.

Copy should emphasize:

  • Business clarity over technical jargon.
  • Websites that convert visitors into qualified leads.
  • Software that replaces spreadsheets and fragmented workflows.
  • Automation that reduces response time and operational friction.
  • Direct access to the person leading the work.

SEO and GEO Plan

Implement:

  • Unique titles and descriptions per route and language.
  • Absolute canonical URLs.
  • hreflang for Spanish, English, and x-default.
  • Localized sitemap and robots.txt.
  • Valid Open Graph and Twitter card images.
  • JSON-LD for Organization, Person, WebSite, Service, and project/case-study entities where appropriate.
  • Clear entity links through real GitHub, LinkedIn, client URLs, and sameAs data.
  • Extractable FAQ blocks and service summaries for AI search.
  • llms.txt as an experimental complement, not a replacement for real HTML and schema.

Logo and Brand Assets

Create a geometric MateCode mark:

  • A constructed M based on code chevrons.
  • Negative space subtly referencing a mate container.
  • Professional, scalable, and not literal clipart.

Deliver:

  • Master SVG.
  • Transparent PNG at 1024, 512, and 256 px.
  • Favicon and mask icon.
  • Social preview image at 1200×630.

Motion Plan

Motion must communicate hierarchy and craft, not decoration.

Use:

  • Hero grid assembly and typographic entrance.
  • View transitions between main routes and case studies.
  • One desktop sticky-stack or showcase interaction for selected work.
  • Mask reveals for important project imagery.
  • Fast tactile states for buttons and navigation.

Guardrails:

  • Respect prefers-reduced-motion.
  • Animate transforms, opacity, and carefully chosen masks only.
  • No custom cursor.
  • No scroll hijacking.
  • No animations that hide content before JavaScript runs.

Skills to Add

Install only the non-redundant marketing skills after verifying their current instructions:

  • copywriting from coreyhaines31/marketingskills.
  • seo-audit from coreyhaines31/marketingskills.
  • ai-seo from coreyhaines31/marketingskills.
  • marketing-psychology from coreyhaines31/marketingskills.

Existing local skills already cover frontend design, brutalism, accessibility review, branding, and GSAP.

SDD Execution Plan

Use Gentle AI SDD with:

  • Execution mode: interactive.
  • Artifact store: OpenSpec + Engram.
  • PR strategy: ask before splitting or approving a large exception.
  • Review budget: 400 changed lines.

Change name: matecode-portfolio-redesign.

Phases:

  1. Initialize SDD context if missing.
  2. Explore current project and redesign scope.
  3. Create proposal.
  4. Write specs.
  5. Write technical design.
  6. Break into tasks.
  7. Apply in reviewable work units.
  8. Verify against specs, runtime behavior, SEO, accessibility, and performance.
  9. Archive the completed change.

Quality Gates

Target:

  • Lighthouse mobile scores of 95+ for Performance, Accessibility, Best Practices, and SEO.
  • LCP under 2.5s.
  • INP under 200ms.
  • CLS under 0.1.
  • WCAG 2.2 AA.
  • Fully keyboard-navigable UI.
  • Reduced-motion-safe experience.
  • Working form submission, not simulated success.
  • Valid sitemap, robots, canonical, hreflang, and structured data.
  • Spanish and English content complete and coherent.
  • Tested in Chrome, Safari, and Firefox across mobile and desktop widths.