Look at Me

Short intro

Look at Me is an interactive digital museum experience that invites users to explore artworks through movement, focus, and storytelling.

The project is built as an immersive web interface: users enter the experience through an intro screen, navigate a virtual museum wall, select an artwork, zoom into it, and read both curatorial information and personal interpretations connected to that piece.

---

Technologies

This project was built with:

• React
• TypeScript
• Vite
• React Router DOM
• Tailwind CSS
• GSAP

---

The process

I approached this project as a narrative and interaction-driven frontend experience.

The first step was structuring the application around a simple entry flow. The homepage starts with an intro screen that fades out before loading the main scene. This helped frame the experience as something closer to an exhibition entrance than a traditional landing page.

Then I designed the core interaction around a museum wall scene. Instead of using a standard grid layout, I worked with a fixed visual canvas and positioned each artwork using percentage-based coordinates. This allowed the composition to behave more like a curated wall than a generic gallery.

Once the scene structure was in place, I implemented the main interaction logic:

• selecting an artwork
• smoothly zooming and centering it in the viewport
• dimming the surrounding environment
• opening side panels with information and interpretation

Each artwork includes:

• artist
• title
• year
• technique
• collection or museum information
• a longer description
• multiple personal stories connected to the work

I also added a navigation system for moving through the different stories linked to the same artwork, so the experience could go beyond a single descriptive text and become more layered and dialogic.

Finally, I created an About overlay to provide context for the project, its institutions, and its cultural focus. This made the application feel less like a standalone visual experiment and more like a complete digital storytelling piece.

---

Features

• Intro screen with animated entrance
• Interactive museum wall layout
• Clickable artworks positioned on a fixed visual scene
• Smooth zoom-in animation on selected artwork
• Detail panels with artwork metadata and description
• Client-side routing with React Router

---

Project structure

lookatme-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── AboutOverlay.tsx
│   │   ├── Artwork.tsx
│   │   ├── ArtworkDetail.tsx
│   │   ├── EnterScreen.tsx
│   │   ├── NavigationSlider.tsx
│   │   ├── Scene.tsx
│   │   └── ui/
│   ├── data/
│   │   └── works.ts
│   ├── hooks/
│   ├── lib/
│   ├── pages/
│   │   ├── Index.tsx
│   │   └── NotFound.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── .github/workflows/
├── package.json
├── vite.config.ts
├── vitest.config.ts
└── tailwind.config.ts