Oleksii Smirnov
Offer Oleksii work on your next project.
Rating
Portfolio
-
113 USD Adaptation of Photoshop layout to Weblium
Web ProgrammingProject Title:
Adaptation of Photoshop mockup to Weblium with elimination of critical platform limitations
Description:
A full cycle of creating a WEB page in Weblium environment based on a design mockup from Adobe Photoshop has been implemented. During the process, a number of issues related to hiding part of the content due to platform restrictions were identified.
… Challenges:
- Inaccessibility of certain DOM elements after publishing
- Inability to directly edit CSS/JS code in Weblium
- Overflow and height restrictions of blocks that hid content
Solutions:
- Conducted a complete inspection of DOM and styles
- Developed a JavaScript script that:
– Dynamically updates the height of blocks
– Makes hidden elements visible
– Works independently through a Weblium functional block
Format:
Page created with a focus on mobile devices as the key user interaction platform.
Adaptation for desktop devices is possible with project expansion.
Potential expansion — Countdown timer:
It was planned to implement a dynamic countdown timer that works without page reload and updates the DOM in real time.
Currently, the integration is paused at the client’s request, but the technical solution is fully prepared for launch.
Timer functions include:
– Countdown to an event or date
– Responsive DOM updates
– Styling according to the design
– Optimization for mobile devices
Result:
- Stable operation of the page on all mobile devices
- Full compliance with the visual mockup
- All elements accessible, content not hidden
My role:
Analysis, programming, testing, integration — full implementation cycle
-
113 USD EcoGlow — adaptive HTML/CSS template, optimized for WordPress
Web DesignCase Title:
EcoGlow — adaptive HTML/CSS template optimized for WordPress/ACF**
…
---
Context
The client requested the creation of a responsive block template for a future WordPress website. It was important to ensure full compatibility with the ACF structure, clean markup, and easy adaptation for further integration.
---
Technical solution
- Developed an HTML/CSS template with a structure corresponding to typical ACF fields (text, description, repeatable elements, button)
- Concise styles without third-party libraries, considering accessibility and responsiveness
- README.md — with detailed instructions for integration into a WordPress theme
- JSON structure of ACF fields — ready for import
---
Technology stack
| Language/Tool | Usage |
|------------------|----------------------------------|
| HTML5 | Block markup |
| CSS3 | Responsive styles and effects |
| JSON (ACF) | Field structure for WordPress |
| Markdown | Documentation, README case |
---
Visual demonstration
EcoGlow — a block with ecological styling
Call-to-action button with hover effect
Structure with header, description, features, and action
Mobile device adaptation
_Screenshots are attached below or available in the GitHub repository._
---
Result
- Fully adapted block, ready for integration
- Can be used as a template or demo in applications
- Highlights the ability to create structured solutions for CMS without excessive dependence on the environment
---
Links
---
Note
This case demonstrates not only the ability to work with markup but also a deep understanding of CMS environment requirements and integration according to client requests. Even without using WordPress, you show that you can _prepare solutions for it_ — and that is worth noting.