Animated-login-page.md

main . 0 errors Privacy Ln1, Col1

## Animated Login Page

const type = "Persoonlijk Project" ;

const year = "2025" ;

const repo = " https://github.com/N-Chidiac/Animated-login-page " ;

### Opdracht in één zin

> Een lichtgewicht, geanimeerde login/registreer-pagina bouwen met pure HTML, CSS en JavaScript, zonder frameworks, met focus op UX.

### Wat ik precies moest doen

// after-school project

Moderne login-form bouwen met een glijdend paneel dat schakelt tussen 'Sign In' en 'Sign Up', responsive design, en placeholders voor social logins.

Screenshot van geanimeerde loginpagina met split-screen ontwerp, sign in en sign up panelen, gradient achtergronden en vloeiende transities

### Mijn aanpak & keuzes

// structuur & animatie

Twee forms in één container-div, CSS transitions met translateX, JavaScript toggle via 'active'-class, geen libraries — alleen native code.

> Designkeuzes: gradients voor modern gevoel, flexbox voor responsiviteit, en focus op snelheid en duidelijkheid — zoals een strak geschilderde muur.

### Geleerd & trots op

const learnings = [

"CSS-animaties smooth afstellen",

"vanilla JS state management",

"responsive breakpoints die écht werken"

];

// performance: Minder dan 5KB, instant load, professionele look zonder overkill.

// persoonlijke noot: Een duidelijke stap van verfkwast naar keyboard.

### Extraatje

> Eerste GitHub-repo met live demo via Pages. Volgende iteratie: form-validatie & dark mode.

> “Een goede login is als een perfecte eerste laag verf: het zet de toon voor alles wat volgt.”