LIRI. a creative coder & designer

Designing and building human-centered solutions. With 5+ years of experience in UI/UX and creative front-end, I transform ideas into high-usage products.

View My Work About Me

SMALL DETAILS

Featured Projects

A curated collection of my most impactful work, showcasing my skills in design and development.

Creators Fit (formerly Privi): Monetizing Content for Brazilian Influencers

Creators Fit (Privi)

Platform for Brazilian creators to monetize exclusive content. Supports subscriptions, pay-per-view, and media uploads.

Creators Fit platform interface showing content monetization features

FIAP Startup Challenge: HealthHub

FIAP HealthHub

Mobile-first platform for clinics and patients. 2nd place at FIAP Startup Challenge 2023. Focused on long-term care management.

Nohs Somos: LGBTQ Community Safety App

Nohs Somos

Map-based app for LGBTQ community safety. Find and review safe spaces. Built for Nohs Somos, merged with TODXS.

View All Projects

👋 Hello, this is
Liri Saikoski!

⚙️🎨

Hands-on Creative

My whole life I have always been involved and fascinated with hands-on creative arts, engineering, and understanding people - and I'm delighted to say I make this a full-time profession while shipping successful digital products!

5+ Years of
Experience

As a Product Designer with a solid background in creative front-end development and design systems, I've spent 5+ years crafting impactful products for major organizations like:

Volkswagen Santander CVC Pearson

From educational tech and corporate training to healthcare software and targeted social media platforms with more than 100k active users.

🛼

Off the Clock

Off the clock, I enjoy inline skating, console gaming, and I'm absolutely always involved in handcraft DIY projects. I was also a professional tennis player for over 10 years, which taught me resilience and focus—qualities I bring to every design challenge.

Skating Gaming DIY 🎾 Tennis

🇪🇸

Barcelona Base

Currently based in Barcelona, Spain - with my partner and our amazing family of pets

41.3851° N, 2.1734° E

💪🤓 THE BRIDGE

My strong team collaboration drive and unique blend of skills allows me to bridge the gap between design, product and engineering very efficiently - ensuring every solution is beautiful, feasible and functional.

DESIGN Figma Lottie

ENG. Adv. CSS React Vue Angular

Professional Overview

Download CV (.PDF)

Current Status

Open for new projects

Remote or Hybrid (Barcelona)

Discover More About Me

Click cards to reveal more about my work and passions

0/9 REVEALED

Design System

A system of reusable components and guidelines that ensure design and code consistency across all projects.

System Manifest

Built with Vanilla HTML/JS/CSS • No external libraries

Performance 96

Clean Implementation • Semantic Structure • High Lighthouse Grade

Clean Implementation

This portfolio is built from scratch using plain HTML, CSS, and vanilla JavaScript—no frameworks, no libraries, no dependencies.

✓ Zero dependencies

✓ Semantic HTML5

✓ Modern CSS (Grid, Flexbox, Custom Properties)

✓ ES6+ JavaScript modules

Performance Metrics

Optimized for speed and best practices with industry-leading scores.

Lighthouse Performance

100

Best Practices

Accessibility

100

SEO

Color Palette

--primary-dark

#101111

--primary-light

#FDFDFD

--accent-color

#FF6B00

--secondary-text-dark

#A0A0A0

Typography

Display / Brand

LIRI.

Headlines

H2 / card-title — 1.5rem

H3 / case-study-title — 1.2rem

Body

This is body text demonstrating the primary font (Inter) at the default size. Use this scale for readable paragraphs, microcopy, and annotations.

Components

Buttons

Navigation

Header navigation with organic line animation and sidebar navigation for case study pages with active state indicators.

HEADER NAVIGATION

SIDEBAR NAVIGATION (CASE STUDIES)

Navigation

Project Card (example)

Example Project

Short description of the project. Use this area to state problem, approach and impact.

Tags & Tokens

Icons

Font Awesome Icons

Using Font Awesome 6.4.0 for consistent iconography across the portfolio.

fa-arrow-right

fa-github

fa-linkedin

fa-figma

fa-instagram

SVG Icons

Custom SVG icons for theme toggle and unique interactions.

Sun (Light Mode)

Moon (Dark Mode)

Spacing System

Consistent spacing scale using CSS variables for predictable layouts.

--spacing-xs: 0.25rem (4px)

--spacing-sm: 0.5rem (8px)

--spacing-md: 1rem (16px)

--spacing-lg: 1.5rem (24px)

--spacing-xl: 2rem (32px)

--spacing-2xl: 3rem (48px)

Grid & Layout

Responsive Grid

Flexbox-based grid system with breakpoints for mobile, tablet, and desktop.

Column 1

1/3 width on desktop

Column 2

1/3 width on desktop

Column 3

1/3 width on desktop

grid md:grid-cols-3 gap-4 - Full width on mobile, 3 columns on tablet+

Container Widths

Predefined max-width utilities for content containment.

max-w-3xl - 48rem (768px)

Used for readable text content. This container width provides optimal reading experience for long-form content, preventing lines from becoming too wide.

max-w-xl - 36rem (576px)

Used for forms and narrow content. Perfect for input forms and focused content areas.

max-w-card-demo - 320px

Used for component demos. Standard card width for UI components.

Animations & Interactions

Highlight Text Animation

Animated background sweep effect for emphasized text. Used throughout About section to draw attention to key information.

This is a paragraph with highlighted text that reveals with an animated background effect. The animation uses a pseudo-element with scaleX transform for smooth performance.

CSS Classes:

• .highlight-text - Base style with positioned background

• .auto-reveal - Automatically animates on page load

• .revealed - Triggered by JavaScript on scroll (About page)

Custom Cursor

A custom dual-layer cursor follows mouse movement with smooth transitions. The outer ring expands on hover over interactive elements.

Move your mouse around to see the custom cursor in action

DEFAULT STATE

Normal cursor

HOVER STATE

Hover over me!

TEST AREA

Link

Navigation Hover Animation

SVG path animation draws an organic line beneath navigation links on hover (--transition-slow: 0.5s).

Hover over me

Text + Link States (Static)

Use these as a visual reference for default, hover and focus styles. No JavaScript required.

Default link

Case link example

Primary button

Primary CTA

Outline button

Secondary CTA

Focus ring check (Tab to focus)

Focusable Link

Tip: press Tab to see focus outlines.

Card Hover Transform

Cards translate upward and scale slightly on hover with enhanced shadow (--transform-translate-hover + --transform-scale-hover).

Interactive Card

Hover to see the lift effect

Project Card Flip Interaction

Hovering reveals detailed preview overlay with opacity fade and content transition. The front card fades to 0.15 opacity while preview appears.

See example in Project Card section above

Theme Toggle Transition

Smooth color transitions across all components (--transition-normal: 0.3s). Icon scales on hover with transform: scale(1.1).

Use the theme toggle in the header to see smooth color transitions

SVG Hero Animation

Interactive SVG shapes respond to mouse movement with physics-based repulsion. Circles move away from cursor position using requestAnimationFrame.

See this in action on the Home page hero section

Border Radius

Consistent rounded corners for a cohesive, modern aesthetic.

xs --border-radius-xs: 0.25rem

sm --border-radius-sm: 0.5rem

md --border-radius-md: 1rem

full --border-radius-full: 9999px

Game Card Components

Interactive card components used throughout the portfolio for engaging user interactions.

01. Vertical Card

Centered layout with top/bottom meta and hover animations.

LIVE PREVIEW (Real Data from reveal-game.js)

CODE

<!-- Vertical Card Component -->
<div class="game-card vertical group">

    <!-- Top Meta -->
    <div class="flex justify-between w-full">
        <span class="corner-label text-accent">ID_01</span>
        <span class="corner-label">// SYSTEM</span>
    </div>

    <!-- Main Content -->
    <div class="text-center mt-4">
        <div class="mb-6 opacity-80 group-hover:opacity-100 text-[var(--text-main)]">
            <i class="fa-solid fa-cube text-5xl"></i>
        </div>
        <h2 class="font-display text-4xl mb-2">Modules</h2>
        <div class="w-8 h-0.5 bg-[var(--accent)] mx-auto mb-4"></div>
        <p class="font-mono text-xs text-[var(--text-muted)]">
            Standardized atomic units.
        </p>
    </div>

    <!-- Footer Meta -->
    <div class="flex justify-between w-full items-end">
        <span class="corner-label">EST. 2024</span>
        <i class="fa-solid fa-arrow-right -rotate-45 group-hover:rotate-0 text-accent"></i>
    </div>
</div>

INTERACTIVE PREVIEW (Click to Flip)

CODE

<!-- Flip Wrapper -->
<div class="flip-wrapper">
    <div class="flip-inner">
        <!-- FRONT: Cover -->
        <div class="flip-face cover">
            <div class="flex justify-between">
                <span class="corner-label text-accent pl-2">LOCKED</span>
            </div>
            <div class="flex flex-col items-center justify-center h-full">
                <i class="fa-solid fa-lock text-xl text-gray-500"></i>
                <h3 class="font-display text-2xl tracking-widest text-gray-500">CLASSIFIED</h3>
            </div>
        </div>
        <!-- BACK: Content -->
        <div class="flip-face content">
            <div class="text-center mt-4">
                <i class="fa-solid fa-eye text-5xl"></i>
                <h2 class="font-display text-4xl">Insight</h2>
            </div>
        </div>
    </div>
</div>

03. Real Usage Examples

See how these cards are actually used throughout the portfolio with animations and interactions.

A. Home Page - Card Pile

Animated card pile with mouse avoidance physics. Click any card to navigate.

B. About Page - Reveal Game

Interactive flip cards that reveal content on click. Shows 2 example cards with fade-in animations.

ANIMATION FEATURES

✓ Card Pile: Mouse avoidance physics, stagger reveal, smooth transforms
✓ Flip Cards: 3D rotation (rotateY 180deg), backface-visibility hidden
✓ Hover Effects: Scale transforms, opacity transitions, icon rotations
✓ Sequential Entry: Fade-in with staggered delays (60ms intervals)
✓ Performance: Hardware-accelerated transforms, 60fps animations

Case Study Template Pattern

Standard case study page structure used across all project pages. Includes hero section, meta grid, sticky navigation, content sections, and footer.

Visual Preview (Using Actual Case Study Classes)

CASE STUDY 001

PROJECT
TEMPLATE

A comprehensive case study template showcasing the standard structure and components used across all project pages.

My Role Product Designer

Timeline 3 Weeks (Sprint)

Team 2 Devs, 1 PM, 1 Designer

Recognition Award Winner

01 / THE CONTEXT

Understanding the Problem

Case study content flows here with proper typography, spacing, and hierarchy.

This template demonstrates the standard structure for presenting project work. Multiple paragraphs provide detailed context about the project, problem space, and approach taken.

40%

REDUCTION

In appointment absences

1500+

USERS

Active patients using the system

FIG 1. CAPTION DESCRIBING THE VISUAL

Key Feature

Feature description explaining the solution and its impact on users. Detailed text about implementation and user benefits.

LIRI. a creative coder & designer

Featured Projects

Creators Fit (formerly Privi): Monetizing Content for Brazilian Influencers

Creators Fit (Privi)

FIAP Startup Challenge: HealthHub

FIAP HealthHub

Nohs Somos: LGBTQ Community Safety App

Nohs Somos

👋 Hello, this is Liri Saikoski!

Hands-on Creative

Off the Clock

Barcelona Base

💪🤓 THE BRIDGE

Professional Overview

Current Status

MISSION COMPLETE

ACCESS GRANTED

Projects

Creators Fit (formerly Privi): Monetizing Content for Brazilian Influencers

Creators Fit (Privi)

FIAP Startup Challenge: HealthHub

FIAP HealthHub

Nohs Somos: LGBTQ Community Safety App

Nohs Somos

iLog

iLog

Technologies Used

Design System

Clean Implementation

Performance Metrics

Color Palette

Typography

LIRI.

H2 / card-title — 1.5rem

H3 / case-study-title — 1.2rem

Components

Example Project

Example Project

Icons

Spacing System

Grid & Layout

Animations & Interactions

Interactive Card

Border Radius

Game Card Components

A. Home Page - Card Pile

B. About Page - Reveal Game

Case Study Template Pattern

Understanding the Problem

Key Feature

Let's talk

👋 Hello, this is
Liri Saikoski!