Author: Laura Estremera
Capstone Project – Digital Arts University of North Carolina Wilmington
Borinquén is an interactive, hand-coded educational website that explores the displacement of Puerto Rican communities through an immersive digital timeline. Combining web development, historical research, and stylized 3D animation, the project aims to shed light on centuries of colonial violence, forced migration, and socio-political neglect—while honoring Puerto Rico’s rich cultural and ecological identity.
The website is built using HTML, CSS, and JavaScript, with visual storytelling enhanced by Blender-rendered animations and planned data visualizations. It invites users to engage with Puerto Rico’s history through a multimedia timeline and a forthcoming ecological section centered on the endangered coquí frog.
- Homepage: An animated landing page introducing the project’s mission, visual design, and user path to the timeline.
- Interactive Timeline: A scrollable, animated timeline featuring nine key eras of Puerto Rican history—each with hover effects, click-to-expand narratives, and embedded animations.
- Planned Environmental Section (in development): A scroll-driven rainforest experience exploring the coquí’s ecological decline as a metaphor for cultural erasure and environmental injustice.
-
Interactive Timeline Each timeline point contains hover interactions, animated video backgrounds, historical data, and accessible textual content.
-
Blender Animations Nine stylized scenes created in Blender depict historical turning points, including:
- Taíno resistance
- U.S. invasion (1898)
- Mass sterilizations
- Hurricane María and neglect
- 2020s gentrification and cultural resistance
-
Custom Cursor and Loader A personalized UI experience with animated loaders and cursor design matching the project’s aesthetic.
-
Responsive Design Website adapts to various screen sizes using a combination of CSS Flexbox/Grid and media queries.
-
Museum-Style Citations: 'View Sources' buttons reveal expandable annotated bibliographies.
- Main Page Content
- CSS Animations, Page Content Styling and Formatting
- Mini-Page Content and Backgrounds, Loading Page Interative Design
- 3D Animations for Timeline Backgrounds
- Capstone Final Paper
| File | Description |
|---|---|
Loading.html, Loading.css, Loading.js |
Interactive loading animation page. |
index.html, indexStyles.css, indexScript.js |
Main homepage introducing the theme and linking to the timeline. |
timeline.html, timelineStyles.css, timelineScript.js |
Interactive timeline experience with expandable historical mini-pages. |
photos/ |
Visual assets, including background images and timeline media. |
videos/ |
Background videos for each historical timeline point. |
custom-cursor.png |
PNG asset for the custom cursor. |
- Clone GitHub Repository
- Start by opening Loading.html to experience the animated entrance.
- Click the center circle to proceed to index.html (Homepage).
- Navigate to the Interactive Timeline via the provided button.
- Explore each historical point by hovering or clicking on the timeline markers.
- Toggle sources for additional academic references on each event.
A second major section is underway—a vertical-scrolling rainforest that visualizes the decline of coquí populations. It will feature:
- Parallax scrolling to simulate rainforest depth
- Audio transitions from vibrant frog calls to eerie silence
- Data visualizations on species loss and urban expansion
- Ghost frogs and poetry fragments revealing cultural memory
- Glitch animations to represent urban sprawl and biodiversity collapse
- Boswell, David. Creating Applications with Mozilla. O’Reilly Media, 2002.
- Denis, Nelson. War Against All Puerto Ricans. Nation Books, 2015.
- Mozilla Developer Network. Technological tutorials for interactive design.
- Ocasio-Russe, Lizbette. La Generación “Yo No Me Dejo”. PhD thesis, 2021.
- Oller, Martorell, Báez. Puerto Rican Artists and Migration Themes, Journal of PR Art.
This project does not seek to shame but to educate. It calls attention to the long arc of colonial oppression and modern displacement. It is a testimony to Puerto Rican resilience, a multimedia archive of resistance, and a platform for justice-oriented storytelling.
"La patria no es la tierra: los amigos son la patria." — José Martí
| Date | Description |
|---|---|
| Jan – Feb 2025 | Research, proposal, animation planning |
| Feb – Mar 2025 | Initial site development, timeline wireframing |
| Mar – Apr 2025 | Blender animations, interaction debugging, citations |
| Apr 21 – Apr 28 | UI polish, Overleaf finalization |
| May 2025 | Capstone presentation, README, and environmental prototype |
This project was completed as part of my Digital Arts Capstone at UNCW, under the mentorship of Prof. Roberts and Dr. Ebrahimi and MIS technical guidance by Prof. Matthews.
Special thanks to Puerto Rican artists, historians, and activists whose work inspired this project’s development.
This project is intended for educational and non-commercial use.