I am Tarek Seliman, a web developer and systems administrator with over a decade of professional experience navigating the complex intersection of backend architecture and frontend design.

Nivra

A visually immersive platform developed for a leading content production agency. Utilizing an advanced Figma-to-WordPress workflow with UiChemy and Elementor Pro, the site delivers a pixel-perfect, media-optimized experience that perfectly showcases their storytelling expertise across all devices.

/* Clean, Minimalist Portfolio Component */ .ts-portfolio-block { background-color: transparent; color: #111; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; max-width: 100%; padding: 20px 0; } .ts-title-wrapper { display: flex; align-items: baseline; gap: 15px; margin-bottom: 25px; border-bottom: 2px solid #c194d1; padding-bottom: 15px; } .ts-project-title { font-size: 2.8rem; font-weight: 800; color: #000; margin: 0; text-transform: uppercase; letter-spacing: -1px; } .ts-project-category { font-size: 1rem; color: #c194d1; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; } .ts-content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; margin-top: 30px; } .ts-main-text { font-size: 1.1rem; line-height: 1.85; color: #333; } .ts-main-text p { margin-bottom: 20px; text-align: justify; } .ts-quote-box { background-color: #fafafa; border-left: 4px solid #c194d1; padding: 25px; margin: 35px 0; font-size: 1.15rem; font-style: italic; color: #444; line-height: 1.7; } .ts-sidebar { background-color: #050505 !important; padding: 35px 30px; border-radius: 12px; height: fit-content; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } .ts-sidebar-title { color: #c194d1 !important; font-size: 1.3rem; margin-bottom: 25px; font-weight: 700; border-bottom: 1px solid #222; padding-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } .ts-tech-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; } .ts-tech-list li { color: #ffffff !important; font-size: 1rem; display: flex; align-items: center; gap: 12px; font-weight: 500; } .ts-tech-list li::before { content: '■'; color: #c194d1 !important; font-size: 0.7rem; } /* Responsive adjustments */ @media (max-width: 992px) { .ts-content-grid { grid-template-columns: 1fr; gap: 30px; } .ts-title-wrapper { flex-direction: column; gap: 5px; } .ts-project-title { font-size: 2.2rem; } }

Nivra

Creative Production Agency

Nivra is a dynamic content creation and production agency dedicated to crafting compelling visual narratives. The platform's primary goal was to establish an immersive digital presence that immediately communicates their core ethos: creating content that tells a unique story.

The UI/UX design takes a highly visual approach, utilizing high-quality media backgrounds to instantly engage visitors. The layout features clean typography, strategic calls-to-action, and an intuitive navigation structure to seamlessly guide users toward their extensive portfolio and direct contact channels.

An immersive, visually driven digital experience meticulously crafted to showcase compelling storytelling and premium content production.

The development of this project relied on an advanced design-to-code workflow. The initial layouts and layers were meticulously structured in Figma, then translated into a high-performing WordPress environment using UiChemy and Elementor Pro. This ensured a pixel-perfect, dynamic frontend that fully realizes the original creative vision.

Due to the heavy reliance on high-resolution visual assets and video content, rigorous media optimization techniques were implemented. The result is a lightning-fast, fully responsive platform that delivers a flawless, engaging viewing experience across all desktop and mobile devices.

Tech Stack

  • Figma UI/UX Design
  • UiChemy Design-to-Code
  • WordPress Architecture
  • Elementor Pro
  • Advanced Media Optimization
  • Fully Responsive