Felipe UX - Portfolio Template

Editorial High-Performance Portfolio | Minimalist Design System with Premium Animations

A conversion-focused portfolio template built with vanilla HTML/CSS/JS and GSAP animations. Features a sophisticated design system, multi-language support, and SEO/AEO optimization.

🎨 Design System

Color Palette

/* Primary */
--color-orange: #D1510A;        /* Brand accent, CTAs */
--color-black: #0A0A0A;         /* Primary text, dark backgrounds */
--color-white: #FAFAFA;         /* Light backgrounds, inverted text */

/* Neutrals */
--color-gray-100: #E5E5E5;      /* Borders, subtle dividers */
--color-gray-200: #CCCCCC;      /* Muted text */
--color-gray-300: #999999;      /* Secondary text */
--color-gray-400: #666666;      /* Tertiary text */

Typography

Primary Font: Inter (400, 700, 800)

Body text, headings, UI elements
Clean, modern, highly legible

Accent Font: Playfair Display Italic

Editorial emphasis
Used sparingly for sophistication

Type Scale:

--font-size-xs: 0.75rem;    /* 12px - Labels */
--font-size-sm: 0.875rem;   /* 14px - Small text */
--font-size-base: 1rem;     /* 16px - Body */
--font-size-lg: 1.125rem;   /* 18px - Large body */
--font-size-xl: 1.5rem;     /* 24px - Subheadings */
--font-size-2xl: 2rem;      /* 32px - Headings */
--font-size-3xl: 3rem;      /* 48px - Hero */
--font-size-4xl: 4rem;      /* 64px - Display */

Spacing System

--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-24: 6rem;     /* 96px */
--space-32: 8rem;     /* 128px */

📁 Project Structure

felipe-ux/
├── implementation/
│   ├── css/
│   │   ├── global.css          # Design tokens, resets, utilities
│   │   └── components.css      # Component-specific styles
│   ├── index.html              # Homepage
│   ├── about.html              # About page
│   ├── contact.html            # Contact page
│   └── case-study.html         # Project detail template
│
├── animations/
│   └── scripts/
│       └── animations.js       # GSAP animations + i18n system
│
└── README.md                   # This file

🌐 Pages Overview

1. Homepage (`index.html`)

Hero with line-by-line reveal animation
Infinite marquee
Process section (3-step grid)
Apple-style zoom video section
Work grid (3 case studies)
FAQ accordion
Footer with CTA

2. About (`about.html`)

Editorial hero
Sticky narrative section (My Story)
Experience timeline
Visual break (full-width image)

3. Contact (`contact.html`)

Bold hero headline
Reach-out grid (Email, Social, Location)
Inquiry CTA with booking button

4. Case Study (`case-study.html`)

Project hero with metadata
Main project image
Challenge & Solution narrative
Statistics showcase
Gallery section
Next project navigation

🎬 Animations (GSAP)

Key Animation Features

Custom Cursor - Follows mouse, activates on hover
Line-by-Line Hero Reveal - Staggered text animations
Infinite Marquee - Velocity-reactive scroll
Apple-Style Zoom - Video scales from small to fullscreen
Reveal Titles - Skew + fade-in on scroll
Theme Switching - Light/dark mode per section
Accordion FAQ - Smooth expand/collapse
Work Item Reveals - Clip-path image animations
Footer Animations - Staggered fade-in
Nav Scroll Effect - Backdrop blur on scroll

Animation Configuration

// Located in: animations/scripts/animations.js
gsap.registerPlugin(ScrollTrigger);

// Example: Hero reveal
gsap.from('.line-content', {
    y: '100%',
    opacity: 0,
    duration: 1.2,
    ease: 'power4.out',
    stagger: 0.2
});

🌍 Multi-Language Support (i18n)

Supported Languages

EN - English (default)
ES - Spanish
RU - Russian

How It Works

HTML Tagging: Elements use data-i18n attributes

<h1 data-i18n="hero.line1">Hey, I'm (Felipe),</h1>

Translation Dictionary: Located in animations.js

const translations = {
    en: { "hero.line1": "Hey, I'm <span>...</span>" },
    es: { "hero.line1": "Hola, soy <span>...</span>" },
    ru: { "hero.line1": "Привет, я <span>...</span>" }
};

Persistence: Uses localStorage to remember language preference across pages

Adding New Translations

Add data-i18n="key.name" to HTML element
Add translation keys to all 3 languages in animations.js
Reload page - automatic detection

🔍 SEO & AEO Optimization

Meta Tags (All Pages)

Title: Unique, keyword-rich (50-60 chars)
Description: Compelling, action-oriented (150-160 chars)
Keywords: Relevant industry terms
Open Graph: Social media preview cards

Structured Data (Homepage)

{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Felipe",
  "jobTitle": "Senior Product Designer",
  "knowsAbout": ["UI/UX Design", "Webflow Development", "GSAP Animations"]
}

Best Practices Implemented

✅ Semantic HTML5 elements
✅ Unique H1 per page
✅ Descriptive alt text
✅ Fast load times (optimized assets)
✅ Mobile-first responsive design

📱 Responsive Breakpoints

/* Mobile First Approach */

/* Tablet */
@media (max-width: 991px) {
    /* 2-column grids, reduced spacing */
}

/* Mobile */
@media (max-width: 479px) {
    /* Single column, centered text, larger touch targets */
}

Key Responsive Adjustments

Typography: Uses clamp() for fluid scaling
Grids: 4-col → 2-col → 1-col
Spacing: Reduced vertical padding on mobile
Navigation: Hamburger menu with GSAP slide-in

🎯 Component Library

Buttons

<!-- Primary CTA -->
<a href="#" class="button-pill is-orange">
    <span>Get in touch</span>
    <span class="icon-arrow">↳</span>
</a>

Section Headers

<div class="section_header">
    <p class="section_label">MY PROCESS</p>
    <h2 class="reveal-title">How We <span class="italic-serif">Bring Ideas</span> To Life.</h2>
</div>

Narrative Grid (Sticky Title)

<div class="narrative_grid">
    <div class="narrative_sticky_col">
        <h2 class="narrative_title">The <span class="italic-serif">Brief.</span></h2>
    </div>
    <div class="narrative_content_col">
        <div class="narrative_block">
            <p>Content here...</p>
        </div>
    </div>
</div>

🚀 Quick Start

1. Open the Template

cd c:/Users/jniet/OneDrive/Dokumenty/labs/Webflow.engine/templates/felipe-ux/implementation

2. Launch with Live Server

Open index.html in your browser or use a local server:

# Python
python -m http.server 8000

# Node.js (http-server)
npx http-server -p 8000

3. Edit & Iterate

Styles: css/global.css and css/components.css
Content: HTML files in implementation/
Animations: animations/scripts/animations.js

🎨 Design Philosophy

Core Principles

Minimalism: Every element serves a purpose
Hierarchy: Clear visual flow guides the eye
Motion: Animations enhance, never distract
Performance: Fast load times, smooth interactions
Accessibility: High contrast, semantic HTML, keyboard navigation

Inspiration Sources

Apple product pages (zoom animations)
Stripe (clean layouts, subtle motion)
Awwwards winners (editorial typography)
Webflow showcases (component design)

🔧 Customization Guide

Changing Brand Color

Update --color-orange in css/global.css:

--color-orange: #YOUR_COLOR;

All CTAs, accents, and highlights update automatically

Adding a New Page

Duplicate about.html or contact.html
Update <title> and meta tags
Add navigation link to all pages
Add translations to animations.js if needed

Modifying Animations

Edit animations/scripts/animations.js:

// Find the animation you want to change
gsap.from('.element', {
    duration: 1.5,  // ← Adjust timing
    ease: 'power3.out'  // ← Change easing
});

📊 Performance Metrics

Target Scores

Lighthouse Performance: 90+
Accessibility: 95+
Best Practices: 95+
SEO: 100

Optimization Techniques

Preconnect to Google Fonts
Deferred GSAP loading
Optimized image formats (WebP recommended)
Minimal CSS/JS (no frameworks)

🐛 Known Issues & Gotchas

1. GSAP ScrollTrigger on Mobile

Issue: Animations may lag on low-end devices
Fix: Reduce scrub values or disable on mobile

2. Video Autoplay

Issue: Some browsers block autoplay
Fix: Video has muted attribute (required for autoplay)

3. Translation Persistence

Issue: Language resets if localStorage is cleared
Fix: Expected behavior - user can re-select

📚 Resources & References

Documentation

Fonts

Tools Used

Design: Figma (conceptual)
Code Editor: VS Code
Version Control: Git
Browser Testing: Chrome DevTools

📝 Changelog

v1.0.0 - Initial Release

✅ 4 fully responsive pages
✅ 10+ GSAP animations
✅ Multi-language support (EN/ES/RU)
✅ SEO/AEO optimization
✅ Component library
✅ Mobile-first design

🤝 Contributing

This is a template project. To iterate:

Mention the template name: "Work on felipe-ux"
Describe your changes
I'll maintain consistency with the existing design system

📄 License

This template is part of the Webflow.engine project.
Created for portfolio and educational purposes.

👤 Contact

For questions or iterations on this template, simply reference it in conversation:

"I want to add a blog section to felipe-ux"

Last Updated: February 6, 2026
Template Version: 1.0.0
Status: ✅ Production Ready

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
animations		animations
design		design
docs		docs
implementation		implementation
.template-meta.json		.template-meta.json
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

Felipe UX - Portfolio Template

🎨 Design System

Color Palette

Typography

Spacing System

📁 Project Structure

🌐 Pages Overview

1. Homepage (index.html)

2. About (about.html)

3. Contact (contact.html)

4. Case Study (case-study.html)

🎬 Animations (GSAP)

Key Animation Features

Animation Configuration

🌍 Multi-Language Support (i18n)

Supported Languages

How It Works

Adding New Translations

🔍 SEO & AEO Optimization

Meta Tags (All Pages)

Structured Data (Homepage)

Best Practices Implemented

📱 Responsive Breakpoints

Key Responsive Adjustments

🎯 Component Library

Buttons

Section Headers

Narrative Grid (Sticky Title)

🚀 Quick Start

1. Open the Template

2. Launch with Live Server

3. Edit & Iterate

🎨 Design Philosophy

Core Principles

Inspiration Sources

🔧 Customization Guide

Changing Brand Color

Adding a New Page

Modifying Animations

📊 Performance Metrics

Target Scores

Optimization Techniques

🐛 Known Issues & Gotchas

1. GSAP ScrollTrigger on Mobile

2. Video Autoplay

3. Translation Persistence

📚 Resources & References

Documentation

Fonts

Tools Used

📝 Changelog

v1.0.0 - Initial Release

🤝 Contributing

📄 License

👤 Contact

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

1. Homepage (`index.html`)

2. About (`about.html`)

3. Contact (`contact.html`)

4. Case Study (`case-study.html`)

Packages