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.

ON Media

A modern, high-impact digital platform for a top-tier design and printing agency. Built on WordPress with Elementor Pro, it features a dynamic dark/light mode toggle and an immersive portfolio layout designed to flawlessly showcase creative projects 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; } }

ON Media

Creative & Printing Agency

ON Media is a comprehensive creative agency offering end-to-end solutions, from innovative digital design to high-quality printing. The objective of this project was to elevate their digital presence to accurately reflect their status as a top-tier agency, providing an engaging, user-centric portfolio to showcase their extensive capabilities.

The UI/UX design emphasizes modern aesthetics and user accessibility, featuring a seamless dark/light mode toggle integrated directly into the navigation. By pairing high-impact typography with a clean, immersive hero section, the platform instantly captures attention and directs potential clients toward their impressive project gallery.

Your vision, perfectly executed. We handle the entire process from creative design to high-quality printing, ensuring a final product that exceeds your expectations.

Developed on a robust WordPress foundation, the site utilizes Elementor Pro to construct a dynamic, highly customizable frontend. This allowed for the integration of smooth transitions, interactive portfolio grids, and the intuitive theme-switching functionality without compromising on performance.

Strict attention was paid to frontend optimization and cross-device compatibility. Whether browsing on a desktop or a smartphone, the website maintains structural integrity, ensuring that ON Media’s creative portfolio is presented flawlessly to every visitor.

Tech Stack

  • Creative UI/UX Design
  • WordPress Architecture
  • Elementor Pro
  • Dark/Light Mode Toggle
  • Portfolio Integration
  • Fully Responsive