PROJECT 01 · LIVE WEBSITE
ScarlisLabsPortfolio and online tools
This project documents the site you are browsing: its structure, its tools and an alternative approach for future improvements.
Overview
A site for using and documenting projects
I bring browser tools and programming projects together in one site. The homepage lets visitors find a utility, open its page and browse the portfolio. This is a screenshot of the published homepage, not a mockup.
Architecture
How it is built
WordPress manages pages, projects and images. The ScarLabs Dark theme uses PHP to generate views and HTML and CSS to present them. JavaScript runs the tools in the browser. The site is hosted on Hostinger.
Usage example
From a form to an Excel file
In Easy Excel, you choose a template, add rows using labelled fields and download an XLSX copy. This screenshot uses sample data: income of 1,500 and an expense of 350, leaving 1,150. JavaScript processes the workbook locally and ExcelJS generates the file.
Interface and languages
Find and open a tool
The catalogue includes name search and category filters. Each tool has its own page with instructions and frequently asked questions in Spanish and English. EN / ES switches the homepage language. CSS adapts the layout to the screen width.
Proposed alternative
Another way to build the same page
An alternative would be to build the homepage with WordPress blocks and move the tools into a custom plugin. Text and layout could be edited in the admin, and the tools could remain available when changing themes. This approach requires maintaining the design and logic separately. It is a proposal, not the current implementation.
Use the arrows, keyboard, or swipe on the image. The tour does not advance automatically. Screenshots show the Spanish interface.
DEVELOPMENT DECISIONS
What each part does
- Custom theme
- PHP templates generate the homepage, catalogue and tool pages. CSS defines the dark design and adapts it to different widths.
- Local processing
- Tools process files in the browser. Easy Excel uses ExcelJS; image converters use browser image capabilities. WordPress serves the interface and does not receive these files.
- Pages and languages
- Tools have their own Spanish and English URLs, titles, instructions and FAQs. Projects are managed in the WordPress Projects section.