Berat Genç

A multi-page web application that enables brands and individuals to design and manage UGC campaigns. Built with Next.js and uses the SSR for performance. Tailwind CSS and Shadcn UI for responsive and accessible & coherent design language. Recharts used for interactive data visualization. It is built using latest web development practices used in production ready apps. It has intuitive navigation featuress usability, and clear task flows.

Rutin Hero is a Jamstack blog built with Next.js and Strapi CMS. It has a focus on performance, SEO, and modularity practice. It leverages modern rendering strategies e.g. SSG and SSR, integrates a headless CMS for content management. The project uses Shadcn UI for a clean, accessible design and applies page-level SEO optimizations with latest Next.js features e.g. generateMetaData and generateStaticParams to improve search engine rankings.

The Official immersive experience for the Giro d’Italia 2023, blending tradition with innovation through virtual environments, exolorationg of collectables. The project uses Three.js for the 3D rendering and the game is powered by Playcanvas for better control over the scene. It features POV camera, first person controls, collision detection and complex logic. The scene contains items which users can interact with and collect digital jerseys and rewards and trigger the 2D UI built with Next.js and styled-components. I've played the role of the one of the two developers in the development team.

MedicEnglish is an iOS application designed for doctors, nurses, medical students, and healthcare professionals to improve their English communication skills in clinical contexts. It is built with Swift and SwiftUI and uses the latest iOS 17 features. Notifications, SwfitData, Widgets and many more essential APIs are used to build the app. Along with quizzes, flashcards, and interactive exercises, the app's most important feature is the interactive medical reading mode which helps users to improve their reading skills get translations and learn better. Managing the data was particularly complex and challenging to do manually, so I built a custom frontend and data management system, using scripts to apply existing data to new entries efficiently. Translations are handled via the Google Translate API, and audio samples are generated using ElevenLabs’ API. MedicEnglish is available in seven locales, including German, Vietnamese, Japanese, and more.

A portfolio built with Next.js and React, inspired by Webflow-style applications but implemented fully with custom JS code. The project prioritizes user-centered design, smooth interactions and visually engaging animations that enhance user engagement. Features such as a preloader, custom React hooks, and a Zustand state store are combined with Motion-powered animations to create a fluid and responsive interface . Two distinct presentation modes and Lenis smooth scrolling are integrated to support intuitive navigation and a better browsing experience.

A space factions simulator that immerses users in a dynamic 3D environment, making them feel like active participants in a living universe. Built with Next.js and React Context. The 2D elements such as select menus, carousels, and footers complemented by a the 3D scene making them a whole. The design uses deep blue and dark tones to evoke a futuristic, sci-fi aesthetic, while the interface and interactions are designed for an engaging exploration of the scene.

Swap.it is featuring both mobile and desktop interfaces designed in Figma and focused on simplifying the process of changing broadband providers. The application adopts a chat-style form interaction, guiding users step-by-step through the process to change their broadband provider. The design emphasizes responsiveness and ease of use for the user. It offers a chat-like experience for the user.

Explore my insights and reflections from building my projects, where I share the experiments, and lessons learned along the way and and tehcnical implementation details.

A modern, responsive web page for my client, built with Next.js, styled using Tailwind CSS for and consistent and clear design system. It features form integration that sends user submissions to Google Sheets through Google Cloud for reliable data management.

This immersive 3D gallery was created to explore visual and auditory media can be combined in a 3D space along with the overlaying 2D UI. It uses a Scene class to structure rendering and navigation, where users can move fluidly through the environment. A custom music player is written giving visitors intuitive drag-and-click controls that feel natural and and smooth rather than mechanical. Cinematic animations support spatial orientation. Synchronized audio playback connects sound progress with visual feedback which in the end connects every bit of the work together. These elements turn the gallery into an interactive experience where users don’t just view content—they actively navigate and control.

A static landing page written with Next.js

The portfolio for my client was designed to create a smooth and engaging interaction between people and content. It focuses on responsiveness and clarity and is built with Next.js and styled-components. Images are preloaded using a custom class-based XHR approach so that transitions feel immediate and uninterrupted for better user flow. I explored Zustand, which was an emerging state management tool at the time. It was impressiong to see how easy it was to setup comparing to Redux and others tools. Custom hooks tie these elements together so the interface feels simple, predictable, and enjoyable to use in the end.

This 2022 project was one of my early explorations into creating artistic results with code. It takes the form of an interactive HTML Canvas that generates patterns of 1’s and 0’s from random data. The focus wasn’t only on the visual outcome, but also on how code structure—particularly class-based syntax—could separate logic, improve efficiency, and support creative experimentation. The result is both a study in interaction and a reflection on how simple binary symbols can become a visually engaging experience when paired with thoughtful design.

Here you’ll find a selection of my design work, showcasing pieces mostly build with Adobe Illustrator