Add 3 redesign proposals for eduzen.ar homepage#718
Open
eduzen wants to merge 35 commits into
Open
Conversation
Three self-contained HTML mockups exploring different visual directions: - Proposal A (Philosopher Engineer): serif headlines, warm off-white palette, essay-like spacing, editorial feel. Thoughtful, elegant, memorable. - Proposal B (Modern Systems Portfolio): dark UI, strong grid, code snippets, premium cards, monospace accents. Precise, senior, technical. - Proposal C (Experimental Author Site): broken grid, oversized typography, grain texture, sticky narrative sections. Artistic, bold, niche. Each file can be opened directly in a browser to compare visual directions. https://claude.ai/code/session_01CK4yrmgaGN2mSx1twv367J
Screenshots taken with Playwright (Chromium) at desktop (1440x900), hero crop, and mobile (390x844) viewports. Google Fonts fallback to system fonts since screenshots are rendered offline. https://claude.ai/code/session_01CK4yrmgaGN2mSx1twv367J
Adds /proposals/<filename> URL so proposals can be previewed through the running Django dev server instead of requiring direct filesystem access. https://claude.ai/code/session_01CK4yrmgaGN2mSx1twv367J
…ebsite into claude/redesign-proposals-TvgFU
- Added a field to the Post model for full-text search capabilities. - Implemented a signal to update the search vector on post save. - Updated filters to utilize the new search vector for improved search performance. - Created a migration to add the search vector field and a GIN index for PostgreSQL. - Enhanced pagination templates for better user experience. - Refactored various views and tests to accommodate the new search functionality.
- Updated justfile to include production management commands and internationalization options for message extraction. - Refactored Django forms to use lazy translation for labels, improving localization support. - Removed unnecessary type definitions and cleaned up imports in forms and views. - Deleted unused types.py file to streamline the codebase. - Enhanced the home page with updated content and improved layout for better user experience. - Added new tests for the contact form to ensure proper functionality and validation.
- Updated justfile to include production management commands and internationalization options for message extraction. - Refactored Django forms to use lazy translation for labels, improving localization support. - Removed unnecessary type definitions and cleaned up imports in forms and views. - Deleted unused types.py file to streamline the codebase. - Enhanced the home page with updated content and improved layout for better user experience. - Added new tests for the contact form to ensure proper functionality and validation.
- Updated the translation for "Philosophy graduate turned software engineer" to improve accuracy and readability in Spanish.
Full-page SVG waves (position: fixed) span behind all content including footer for a seamless, unified background. Floating particles with subtle drift animation add visual interest to the hero section. Circular B&W duotone photo with warm sepia tint positioned top-right on desktop and centered below tagline on mobile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reserve min-height: 2.1em on .hero-name to prevent layout shift when the typing animation cycles between one-line (Eduardo/eduzen) and two-line (Eduardo\nEnriquez) states. Fix e2e test for Spanish contact form: the error page redirect loses the language prefix, so the page shows English "something went wrong" instead of Spanish "algo salio mal". Updated regex to match both. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Split waves into 3 independent SVG layers with different drift speeds (45s/35s/28s) and vertical bob animations (12s/9s/14s) for an organic, ocean-like parallax effect. Each layer moves independently creating a dreamy, never-repeating visual rhythm. Fix mobile waves looking like mountains by reducing wave height progressively: 45vh desktop → 20vh tablet → 15vh small phones. Remove unused proposals/ directory. Add .superpowers/ to gitignore. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…es, deduplicate - Consolidate two @media (prefers-reduced-motion) blocks into one with wave, particle, cursor selectors and scroll-behavior: auto - Rename .contact-success → .contact-result (used by both success & error) - Deduplicate error icon markup in error.html (pulled above conditional) - Make dialog title configurable via data-confirm-title attribute - Fix display email dev@ → me@ to match global_data context - Replace hardcoded #f0ece6 with var(--bg-alt) - Remove unnecessary will-change: transform on wave layers - Add explanatory comment on .warm-form reset Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Redesign both pages to match the home/contact warm design: - About: bio section with photo slideshow, colored skill pills, "Beyond code" cards, month-aware age calculation - Classes: topic pills, resource cards, book recommendations grid - Context processor: add birth year/NL move date for accurate age - Simplify AboutView by removing redundant get_context_data - Full Spanish translations for all new content Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- New /mentoring/ page with philosophy-driven content: intro, "What we can work on" cards, step-by-step "How it works", and "Who is this for" audience section - Replace single "Classes" nav link with "Teaching" dropdown (Alpine.js) containing Mentoring and Classes sub-items - Desktop: hover-triggered dropdown with smooth transitions - Mobile: tap-to-expand submenu with left border accent - Full Spanish translations for all new content - CSS for nav dropdown, mentoring page, and responsive layouts - 6 new tests for MentoringView (199 total pass) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add @click.away to nav dropdown so it closes when clicking outside, matching the language dropdown behavior. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The site uses Alpine.js v2.3.0 which doesn't support v3 features: - @click.outside -> use @click.away (v2 syntax) - x-transition:enter="className" -> not supported, removed - x-collapse -> not supported, use x-show only Switched from hover-based to click-based dropdown (same pattern as the language dropdown). Click to open, click away to close. Fixes dropdown staying open when clicking elsewhere on the page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace alpine-ie11.min.js v2.3.0 with Alpine v3 CDN (deferred) - Fixes h.split console errors caused by v2/v3 syntax mismatch - Upgrade @click.away to @click.outside (v3 canonical) - Add x-transition.opacity to dropdowns for smooth fade - Re-enable hover on Teaching dropdown (mouseenter/mouseleave) now that @click.outside works correctly in v3 - 0 console errors, all pages verified via Playwright Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ds, fix bugs
- Remove duplicate assertContains("Bio") in test_about_view
- Use years_since() consistently in context_processor (DRY)
- Replace hardcoded mailto with {{ global_data.email }} in classes CTA
- Remove dead .about-intro and .about-text CSS (no template refs)
- Consolidate .mentoring-audience-card into .about-card--centered modifier
- Guard slideshow interval in about.html to prevent leak on rapid hover
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The [x-show='open'] selector now matches two dropdowns (language + teaching). Use data-testid='language-dropdown' for precise targeting. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Alpine v3 uses fine-grained reactivity — x-bind:href expressions with no reactive dependencies are only evaluated once at init. After HTMX push-state navigation, window.location.pathname changes but Alpine doesn't re-evaluate the binding, causing language switches to navigate to the wrong URL. Switch from :href binding to @click.prevent handler that reads window.location.pathname at click time. Static href attributes provide no-JS fallback. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
send_message() now guards against placeholder tokens ("foo", "", etc.)
and returns a no-op response, preventing E2E tests from hanging on
real HTTP requests to api.telegram.org. Also adds a 10s timeout to
requests.post() to prevent indefinite hangs in production.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The contact form uses a custom HTML <dialog> for confirmation, not window.confirm(). E2E tests must click the dialog's confirm button after submit. Also fix mypy error: dict return uses str "true" to match dict[str, str] annotation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace anonymous /code/.venv volume with named uv-venv volume in docker-compose.yml so the virtualenv persists across docker compose run --rm - Add just up alias as shorthand for just run - Bump ruff-pre-commit to v0.15.12 - Update uv.lock
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three self-contained HTML mockups exploring different visual directions:
Proposal A (Philosopher Engineer): serif headlines, warm off-white palette,
essay-like spacing, editorial feel. Thoughtful, elegant, memorable.
Proposal B (Modern Systems Portfolio): dark UI, strong grid, code snippets,
premium cards, monospace accents. Precise, senior, technical.
Proposal C (Experimental Author Site): broken grid, oversized typography,
grain texture, sticky narrative sections. Artistic, bold, niche.
Each file can be opened directly in a browser to compare visual directions.
https://claude.ai/code/session_01CK4yrmgaGN2mSx1twv367J