logoEnrique Solis Logo

logoEnrique Solis Logo

Active Projects

A living collection of projects, snippets, and experiments — each built to sharpen a specific skill. Browse by tag to explore CSS tricks, JavaScript techniques, best practices, and the latest trends in modern web development.

Frameshift
Live Demo

Frameshift

A streaming-service-style portfolio app built with a headless WordPress CMS backend and a React + TypeScript frontend. WordPress manages all content via its REST API while the frontend handles genre rows, hover previews, Framer Motion layout animations, and a full detail modal — all with strict TypeScript throughout.

Technologies

React 18TypeScriptVite 5ZustandTanStack Query v5Framer MotionCSS ModulesWordPress REST APIACFNetlify

Key Features

  • Headless WordPress CMS — content updates without frontend rebuilds
  • WordPress REST API + ACF serving all movie data
  • TanStack Query v5 for caching and data synchronization
  • Zustand for lightweight global state management
  • Framer Motion layout animations on detail modal open/close
  • Genre-based horizontal scroll rows with fade-in controls
  • Movie card hover animations with autoplay preview clips
  • AnimatePresence page transitions between views
  • Search filtering by title
  • Strict TypeScript throughout — interfaces for all API shapes

Live Demo

Click below to view the live frameshift in action.

This project is in active development. More features and content are on the way.

Golden Hour
Live Demo

Golden Hour

A personal sunset photography gallery with ambient Spotify audio. Each photo card plays a curated track on hover, revealed by a Dancing Script quote overlay, sun-orange veil, and animated EQ bars. Built with React, TypeScript, and Framer Motion — with a PHP proxy handling Spotify Client Credentials auth on shared hosting.

Technologies

React 18TypeScriptVite 5Framer Motion 11CSS ModulesSpotify iFrame Embed APIPHP (Client Credentials proxy)Hostinger

Key Features

  • CSS masonry gallery — 4 cols desktop, 3 tablet, 2 mobile
  • Hover reveals Dancing Script quote + sun-orange veil + EQ bars
  • Spotify iFrame Embed API for in-page audio playback
  • PHP proxy handles Client Credentials OAuth — no user login required
  • 25-second auto-stop per card to prevent runaway playback
  • Full-bleed hero with stacked Cormorant Garamond italic title
  • Strict TypeScript throughout — all card data typed in sunsets.ts
  • Deployed as static build + PHP proxy on Hostinger shared hosting

Live Demo

Click below to view the live golden hour in action.

React Hooks Lab
Live Demo

React Hooks Lab

An interactive visual reference for all six core React hooks — click a button, watch the relevant lines light up in sequence. Covers useState, useEffect, useRef, useMemo, useContext, and useReducer with animated step-by-step code traces, live demos, and a side-by-side comparison guide for picking the right hook.

Technologies

React 18TypeScriptVite 5Framer MotionCSS ModulesHashRouterGitHub ActionsHostinger

Key Features

  • Step-by-step animated code traces — lines highlight in sequence as you interact
  • Live demos for all 6 core hooks: useState, useEffect, useRef, useMemo, useContext, useReducer
  • useTracer custom hook drives all animation timing — reusable across every page
  • useContext page — ThemeContext Provider with 3 live consumers, no prop drilling
  • useReducer page — task list with ADD / TOGGLE / REMOVE / CLEAR_DONE actions
  • Hook Comparison page — side-by-side table + decision tree for all 6 hooks
  • ExplainGrid reusable component eliminates duplication across all hook pages
  • HashRouter for full static hosting compatibility
  • Auto-deploy via GitHub Actions + lftp to Hostinger on every push

Live Demo

Click below to view the live react hooks lab in action.

✨
Done

Avatar Animation

An interactive scroll-triggered avatar animation featuring floating effects, responsive design, and smooth transitions. Built with React and Styled Components for a seamless user experience.

Technologies

ReactJavaScriptStyled ComponentsCSS AnimationsResponsive Design

Key Features

  • Scroll-triggered animation
  • Smooth floating effect
  • Responsive design
  • CSS keyframe animations
  • Fixed positioning with z-index management

▶ How it Works

Showing 1–4 of 9 projects

Currently working with: React 18 + TypeScript

Let's Build Something Great!!

Have a project in mind or just want to connect? I usually respond within 24 hours.

(323) 393-8751
e_solis83@yahoo.com
© 2026 Enrique Solis — Frontend Engineer
View Active Projects
Enrique Solis Avatar