4HMARTIN PORTFOLIO

As a part of the ongoing development of my digital presence, I'm proud to present a portfolio designed to my own personal taste, which brings together my experience in the sector and projects that have had a real impact on the ventures of those who have placed their trust in my skills.

This platform aims to build a bridge between my services as a full-stack developer and individuals or organisations seeking freelancers for projects, full-time roles or interesting collaborations.

I invite all visitors to this website to keep up to date with the content, as it will continue to grow alongside my career as a developer.

This is the first of many versions of my online presence.

for_end_users

01.

Single-page home

Hero, About, Projects, Certificates, Skills and Contact sections, using smooth scrolling navigation.

02.

'Cyber brutalism' design

Cyber Brutalism-inspired design in web design as an interface style that blends the raw aesthetic of digital brutalism with the retro-futuristic aesthetic of cyberculture and the early web.

Structure and layout: Exposed grids, very pronounced black or neon borders.

Typography: Monospaced typefaces, heavy-weight industrial typeface families (space-mono, space-grotesk).

Colour and contrast: Neutral or dark backgrounds contrasted with blocks of saturated colours (neon green, cyan, fuchsia pink).

03.

Design fully responsive

Mobile-first design across all breakpoints (320px -> 1536px+).

04.

Image lightbox

with captions, counter and zoom (yet-another-react-lightbox) integrated with next/image.

05.

Scroll animations

Framer Motion 'whileInView' entrance animations on every section.

06.

Light/dark adaptive theme

Selection of the website theme based on the user's system preference, with the option to change it manually using 'next-themes'.

07.

Multiple languages

The website main language is English, with the option to switch to Spanish using the language selector via 'next-intl'.

08.

Animations

Animations with Motion (scroll-triggered fade-ins, flicker effects, scramble text, isometric cubes, crosshair cursor).

09.

Live Bitcoin price widget

Live BTC price widget in the fixed bottom bar (server-side cached API route).

10.

Sticky header

Sticky header with mobile slide-out drawer menu (Shadcn UI).

11.

Custom tooltip component (Shadcn UI)

Dynamic styles in the tooltip component (Shadcn UI) to explain the skills.

12.

Accessibility

Semantic HTML, keyboard navigation, ARIA labels, VisuallyHidden titles on drawers.

13.

Custom 404

Custom 404 page with a themed design.

for_admin

01.

Subdomain for practice projects

Each practice project is published on its own subdomain at '4hmartin.com'.

02.

Detailed project documentation page (/projects/[slug])

Statically generated at build time (SSG), including overview, key features, tech stack, architecture/database/wireframe diagrams, PageSpeed and Search Console reports, screenshots and design inspiration.

03.

Contact form

Contact form with client-side validation (React Hook Form + Zod), Cloudflare Turnstile anti-bot check and server-side email delivery via Nodemailer.

04.

Capture leads

A section dedicated to the contact form for identifying new opportunities.

05.

Analytics & Marketing

SEO through the implementation of Google Analytics 4, Google Search Console and Google Tag Manager.

Cookies management using the 'vanilla-cookieconsent' library.

06.

Legal pages

Legal Notice, Privacy Policy and Cookie Policy.