Personal Web Antoine

A considered digital presence for global education, international engagement, leadership development, and cross-cultural collaboration.

Important

This repository contains the website source and integration adapters. A local installation requires separately managed Sanity, Resend, and Mailchimp configuration. Credentials and production content are not included.

Overview

Personal Web Antoine is the official profile experience for Antoine Battle, a global education leader focused on international engagement and leadership development. It brings professional context, selected work, media, services, testimonials, writing, and contact paths into one responsive editorial journey.

The product balances an expressive personal identity with practical publishing needs. Structured content lives in Sanity, interactive sections remain focused on the visitor, and email integrations provide direct paths for collaboration and ongoing communication.

Experience At A Glance

Area	Experience
Introduction	Layered portrait hero, professional positioning, social profiles, and primary references
Editorial story	Career highlights and selected narratives presented through responsive visual sections
Global impact	Interactive 3D globe and collaboration statistics spanning institutions and countries
Media	Video and photography galleries with touch-friendly carousel navigation
Services	CMS-managed speaking, consulting, and leadership offerings
Social proof	Rotating testimonials and professional context from collaborators
Publishing	Sanity-powered articles with structured Portable Text content
Connection	Contact delivery through Resend and newsletter subscription through Mailchimp

Experience Model

flowchart LR
    A[Meet Antoine] --> B[Explore his work]
    B --> C[Review global impact]
    C --> D[Browse media and writing]
    D --> E[Choose a service]
    E --> F[Start a conversation]

Loading

The homepage is composed as a continuous narrative rather than a collection of unrelated portfolio blocks. Each section adds evidence, context, or a clear next action while retaining the visual language established by the hero.

Selected Experience

The presentation uses oversized editorial typography, warm earth tones, focused portraiture, and restrained motion to keep Antoine's work as the primary signal. Responsive layouts adapt the composition for touch devices without reducing the content hierarchy to a generic mobile stack.

Key interaction details include:

• Animated hero typography and portrait staging with reduced visual clutter.
• Accessible carousel controls that stop correctly at collection boundaries.
• Progressive loading for the WebGL globe with a stable visual placeholder.
• CMS fallbacks that preserve useful content when a remote collection is empty.
• Contact and newsletter feedback that communicates success and failure states.

Architecture

The application uses the Next.js App Router. Server components retrieve published content, client components own animation and direct interaction, and route handlers isolate third-party email services from the browser.

flowchart TB
    Visitor[Website visitor]
    Next[Next.js 15 application]
    UI[React 19 interface]
    CMS[Sanity CMS]
    Globe[Three.js globe]
    Resend[Resend contact delivery]
    Mailchimp[Mailchimp newsletter]

    Visitor --> Next
    Next --> UI
    Next --> CMS
    UI --> Globe
    Next --> Resend
    Next --> Mailchimp

Loading

Technology Profile

Layer	Technology	Responsibility
Application	Next.js 15, React 19	Routing, rendering, metadata, and interactive composition
Language	TypeScript 5	Component, data, and integration contracts
Styling	Tailwind CSS 4, PostCSS	Responsive layout and visual system
Content	Sanity CMS, GROQ, Portable Text	Articles, services, media, highlights, and testimonials
Motion	Motion, GSAP, Embla Carousel	Entrances, navigation, and paced editorial movement
3D	Three.js, React Three Fiber, Three Globe	Global collaboration visualization
Contact	Resend	Server-side contact notification delivery
Newsletter	Mailchimp Marketing API	Audience subscription workflow
Deployment	Next.js standalone output	Portable production runtime

Engineering Highlights

• Server and client responsibilities are separated around the App Router boundary, keeping CMS retrieval outside interactive presentation code.
• Email credentials remain server-only; browser submissions use local route handlers with validation and normalized responses.
• The contact handler validates input length and escapes visitor-provided text before producing notification markup.
• Social metadata, crawler directives, sitemap generation, and a complete web manifest establish a consistent public identity.
• Security headers disable unnecessary browser capabilities and reduce framing, MIME-sniffing, and referrer exposure risks.
• Keyboard navigation begins with a skip link and continues through labeled carousel, navigation, form, and social controls.

Local Development

Requirements

• Node.js 20 or later
• npm 10 or later
• Optional Sanity, Resend, and Mailchimp projects for connected features

Setup

git clone https://github.com/ibamzjr/Personal-Web-Antoine.git
cd Personal-Web-Antoine
npm install

Create a local configuration file from the safe template:

cp .env.example .env.local

Populate only the services needed for the environment. Do not commit .env.local or any credentials.

Commands

npm run dev
npm run lint
npm run build
npm run start

The development server is available at http://localhost:3000 by default. Sanity Studio is mounted at /studio when its project variables are configured.

Environment Reference

Variable	Purpose	Exposure
NEXT_PUBLIC_SITE_URL	Canonical site and sitemap URL	Public
NEXT_PUBLIC_SANITY_PROJECT_ID	Sanity project identifier	Public
NEXT_PUBLIC_SANITY_DATASET	Published Sanity dataset	Public
RESEND_API_KEY	Contact email API credential	Server only
RESEND_FROM_EMAIL	Verified contact sender	Server only
RESEND_TO_EMAIL	Contact notification recipient	Server only
MAILCHIMP_API_KEY	Newsletter API credential	Server only
MAILCHIMP_API_SERVER	Mailchimp data center prefix	Server only
MAILCHIMP_AUDIENCE_ID	Newsletter audience identifier	Server only

Project Structure

Personal-Web-Antoine/
|-- public/                 # Fonts, portraits, icons, and static media
|-- src/
|   |-- app/                # App Router pages, layouts, metadata, and APIs
|   |-- components/         # Sections, navigation, galleries, forms, and UI
|   |-- data/               # Resilient local presentation data
|   |-- lib/                # Sanity queries, dates, globe data, and utilities
|   `-- sanity/             # Studio configuration and content schemas
|-- docs/assets/            # Repository presentation media
|-- .env.example            # Safe configuration reference
|-- next.config.ts          # Runtime, image, and response configuration
`-- package.json            # Scripts and dependency contract

Content Operations

Sanity schemas cover posts, services, testimonials, photos, videos, and highlights. Editors can manage these collections through Sanity Studio without changing application source. Local data modules provide stable presentation content where the experience requires a deliberate fallback.

Contact submissions require a configured Resend sender and recipient. Newsletter subscriptions require all three Mailchimp variables. Failures return normalized JSON responses and do not expose provider credentials to the client.

Security And Privacy

The repository excludes environment files, provider credentials, deployment state, and CMS authoring access. Before operating a public deployment:

• Configure secrets through the hosting provider, never through committed files.
• Restrict Sanity CORS origins and write access to approved environments.
• Verify Resend sender ownership and use a monitored recipient address.
• Review Mailchimp consent language for the audience's applicable jurisdiction.
• Add platform-level rate limiting and observability to public form endpoints.

Report vulnerabilities privately according to SECURITY.md.

Project Status

The experience is an actively maintained personal website. Content and external service availability depend on the corresponding production accounts. The default branch is the only supported revision.

Maintainers

Developed and maintained by AiFahri and ibamzjr.

The professional identity, editorial content, and likeness presented by the website belong to Antoine Battle. Repository source is provided for review only. See LICENSE.md for the governing terms.