Where Design
Meets Interaction
and Imagination

UX/UI Designer & Front-End Developer

I create beautiful, interactive digital experiences that blend creativity with functionality. Specialized in modern web design, 3D modeling, and user-centered interfaces.

View My Work Get In Touch
Doctor Demand App
Book Management System
Senior Guide App Design
API Quiz Game

About Me

Creative developer passionate about bringing ideas to life

Maria Paula Salazar

Hello! 👋

I'm Maria Paula Salazar, a creative developer and designer currently studying at Fontys ICT. I specialize in building interactive web experiences using HTML, CSS, and JavaScript, with expertise in mobile app development using Flutter and Android.

My work spans across web development, mobile applications, and UI/UX design. I've worked on collaborative projects including healthcare apps, Progressive Web Apps, IoT solutions with Arduino, and gamification platforms. I'm passionate about creating user-friendly interfaces that solve real-world problems.

Beyond coding, I enjoy 3D modeling in Blender, graphic design with Photoshop and Illustrator, and prototyping in Figma. I'm always excited to learn new technologies and take on creative challenges.

15+ Projects Created
6 Team Collaborations
Fontys ICT Student

Personal Projects

Explore my latest work in design, development, and 3D modeling

3D Modeling Project
↗

3D Modeling

Product Design • Blender

Creating miniature island environments in 3D to enhance modeling, texturing, and lighting skills.

View Project
Design Project
↗

Design

Product Design • Branding

Professional design work using Photoshop and Illustrator for branding and visual identity.

View Projects
Coding Project
↗

Coding

Web Development • Interactive

Interactive web experiences built with HTML, CSS, and JavaScript, including creative designs.

View Projects
App Applications
↗

App Applications

Mobile & Web Apps • UX Design

Mobile app projects including HealthWave healthcare solution and Shift social matching app built with Flutter and Firebase.

View Projects

Skills

I specialize in front-end development, leveraging technologies like JavaScript, HTML, and CSS to build dynamic and engaging web applications. With experience in Flutter for mobile development, Arduino for IoT projects, and tools like VSCode, Figma, Photoshop, and Git, I create interactive and responsive designs. My work includes Progressive Web Apps, Node.js backend development, and UI/UX design tailored to user needs.

JavaScript
HTML
CSS
React
VSCode
Figma
Plugins
JavaScript
JavaScript

Collaborative Projects

Team projects and group work - collaborating with others to build amazing products

Case Studies
↗

Case Studies

UX Research • App Design • Web Development

Explore detailed case studies and collaborative projects including Pixel Paranoia game design, McDonald's Falling Shakes game, Festival Discounts platform, Con-Quest PWA, and more team-based projects showcasing design process, problem-solving, and collaboration.

View All Projects

Let's Work Together

I'm currently available for internship opportunities and freelance projects. Let's create something amazing together!

Email Me GitHub

Html-CSS-Javascript

×

Kirby Design

Web Development

"Bringing Kirby to life with pure CSS and HTML! This project demonstrates my creativity and technical skills through animated designs and responsive layouts."

×

Kirby

Challenges:

"I wanted to recreate Kirby using pure CSS and HTML while focusing on smooth animations and responsive design. The goal was to demonstrate my mastery of front-end development without relying on external frameworks or libraries."

Kirby Character
Kirby Character

Solutions:

"By combining precise CSS properties like keyframes for animations and box-shadow for depth, I built Kirby's iconic look from scratch. The design is fully responsive, and the background features dynamic animations for an engaging effect."

Outcomes:

"The result is a fully animated Kirby figure with expressive details and a lively backdrop. This project showcases my ability to blend creativity with technical skills to create interactive, visually appealing designs."

Kirby Eyes Close-up

API Integration

×

Pokemon API

API Integration

"Web application that integrates with the Pokemon API to display information about different Pokemon. This project demonstrates my ability to work with external APIs and present data in a user-friendly interface."

×

Pokemon API

Challenges:

"The main challenge was to create a user-friendly interface that could effectively display Pokemon data from an external API. I needed to handle API rate limits, loading states, and error handling while ensuring the application remained responsive and intuitive."

Pokemon API Screenshot
Pokemon API Screenshot

Solutions:

"I implemented asynchronous API calls with proper error handling and loading states. The interface was designed with CSS Grid for responsive layouts, and I used JavaScript to create interactive elements like the Pokemon selection and detailed stat displays."

Outcomes:

"The final application allows users to browse and compare different Pokemon with a clean, intuitive interface. This project demonstrates my ability to work with external APIs, handle asynchronous operations, and create responsive web applications."

Pokemon API Close-up

Interactive Animation

×

Falling Shake Demo

Interactive Animation

"Interactive animation demo created with JavaScript and CSS animations. This project showcases my ability to create engaging visual effects and interactive elements using pure front-end technologies."

×

Falling Shake Demo

Challenges:

"The main challenge was to create realistic physics-based animations using only CSS and JavaScript. I needed to simulate gravity, collision detection, and natural movement patterns without relying on external libraries or frameworks."

Falling Shake Demo Screenshot
Falling Shake Demo Screenshot

Solutions:

"I implemented custom JavaScript functions to calculate physics-based movements and used CSS animations for smooth visual effects. The project uses requestAnimationFrame for optimal performance and includes responsive design principles to work across different screen sizes."

Outcomes:

"The result is an engaging interactive animation that responds to user input and simulates realistic physics. This project demonstrates my ability to create complex animations and interactive experiences using fundamental web technologies."

Falling Shake Demo Close-up

HTML-CSS-Javascript

×

American Horror Story: Hotel Intro

Horror Animation Recreation

Recreation of the AHS: Hotel intro sequence featuring 70+ horror scenes with CSS animations, blood drip effects, film grain filters, and screen glitch effects. Built entirely from scratch using vanilla HTML, CSS, and JavaScript—no frameworks or libraries.

×

American Horror Story: Hotel Intro Recreation

Challenges:

"The main challenge was recreating the dark, cinematic aesthetic of the original AHS: Hotel intro with over 70 horror scenes. I needed to implement complex CSS animations including flickering effects, blood drips, film grain, scanlines, vignettes, and screen glitches—all synchronized with background music via the Web Audio API. The project requirement was strict: vanilla web technologies only, no frameworks or libraries permitted."

Solutions:

"I built a custom animation system using CSS @keyframes for multiple simultaneous effects—zoom, fade, flicker, and drip animations. I used CSS variables for dynamic theming and created layered visual effects with pseudo-elements for film grain and scanlines. The scene transitions were controlled with JavaScript setInterval() and setTimeout(), while the Web Audio API handled background music playback. I implemented keyboard event listeners for interactive controls (R to reset, Space to start), and used DOM manipulation to toggle CSS classes for different animation states."

Outcomes:

"The result is a fully functional horror animation sequence that captures the eerie atmosphere of American Horror Story. The project demonstrates mastery of advanced CSS animation techniques, JavaScript timing control, and Web Audio API integration. With 70+ smoothly transitioning scenes, synchronized audio, and interactive controls, this project showcases my ability to create complex, cinematic web experiences using fundamental web technologies. The organized file structure (separate CSS, JavaScript, images, and audio directories) and clean code demonstrate professional development practices."

×

Design

Digital Illustration

"This digital illustration showcases my skills in digital painting and composition. I used various brushes and layering techniques to create depth and visual interest. The project demonstrates my ability to create compelling digital artwork with attention to detail."

Digital Illustration
×

Digital Illustration

Digital Art

Challenges:

"The main challenge was to create a visually striking digital illustration that conveyed emotion and depth. I needed to balance various elements like color, composition, and lighting while maintaining a cohesive overall look."

Digital Illustration
Digital Illustration

Solutions:

"I used advanced digital painting techniques in Photoshop, working with multiple layers to build depth and dimension. I focused on creating a strong focal point and used color theory principles to guide the viewer's eye through the composition."

Outcomes:

"The final illustration effectively communicates the intended mood and showcases my digital painting skills. This project demonstrates my ability to create compelling visual narratives through digital art techniques and thoughtful composition."

×

Design

UI/UX Design

"This UI/UX design project showcases my skills in creating user-friendly interfaces for web and mobile applications. I focused on creating intuitive navigation, clear visual hierarchy, and engaging interactions to enhance the overall user experience."

UI/UX Design
×

UI/UX Design

Interface Design

Challenges:

"The main challenge was to create an intuitive and visually appealing interface that would enhance user experience across different devices. I needed to balance aesthetics with functionality while ensuring the design remained accessible and user-friendly."

UI/UX Design
UI/UX Design

Solutions:

"I conducted thorough user research and created detailed wireframes and prototypes. Using Figma, I designed a cohesive interface system with consistent components, clear navigation patterns, and responsive layouts that work seamlessly across devices."

Outcomes:

"The final design successfully balances visual appeal with usability, resulting in an interface that users find both attractive and easy to navigate. This project demonstrates my ability to create user-centered designs that solve real-world problems."

×

Design

Project Design

"This poster showcases my Photoshop skills in blending layers and creating impactful visuals. I used tools like masks, brushes, and blending modes to bring the design to life. It reflects my ability to turn creative ideas into striking designs."

Freddy Krueger Poster
×

Movie Poster

Nightmare on Elm Street

Challenges:

"I aimed to design a movie poster that captured the essence of horror and suspense, reflecting the chilling theme of 'Nightmare on Elm Street'. The challenge was to combine multiple visual elements while maintaining balance and cohesion to create a visually impactful design."

Freddy Krueger Poster
Freddy Krueger Poster

Solutions:

"Using Photoshop, I carefully blended imagery, enhanced details, and incorporated eerie textures. I applied advanced editing techniques, such as layering and shadow manipulation, to achieve a dark and immersive aesthetic that aligns with the horror genre."

Outcomes:

"The final poster effectively captures the unsettling tone of the movie, showcasing my expertise in visual storytelling and Photoshop design. It highlights my ability to transform concepts into compelling visuals that resonate with the intended audience."

Blender Mini Island - Video

×

Mini Island in Blender

This video showcases the process of creating a mini island in Blender, demonstrating various techniques for modeling, texturing, and lighting to achieve the final result.

Created with: Blender 3.0
Duration: 2:45
Techniques: Modeling, Texturing, Lighting