Restructure README layout to match design requirements

This commit is contained in:
2025-12-28 01:19:46 +11:00
parent c448b183c8
commit 541f451f15

View File

@@ -1,19 +1,20 @@
# Web Page Performance Test # Web Page Performance Test
![Desktop Results](docs/images/desktop_results.png) <div align="center">
### Premium Real-Time Website Audit & Metrics Tool
[![Live Demo](https://img.shields.io/badge/🚀_RUN_TEST_LIVE-web--page--performance--test.beyondcloud.technology-7209b7?style=for-the-badge&logo=rocket&logoColor=white)](https://web-page-performance-test.beyondcloud.technology/)
A modern, high-performance web analytics tool that allows users to run Google Lighthouse audits on any website. Built with Node.js, Express, and a custom-tuned Chrome instance for accurate, reproducible results. A modern, high-performance web analytics tool that allows users to run Google Lighthouse audits on any website. Built with Node.js, Express, and a custom-tuned Chrome instance for accurate, reproducible results.
## 🚀 LIVE DEMO: [web-page-performance-test.beyondcloud.technology](https://web-page-performance-test.beyondcloud.technology/) ![NodeJS](https://img.shields.io/badge/Node.js-20+-339933?style=flat-square&logo=nodedotjs&logoColor=white)
![Express](https://img.shields.io/badge/Express-4.18+-000000?style=flat-square&logo=express&logoColor=white)
![PostgreSQL](https://img.shields.io/badge/PostgreSQL-15+-4169E1?style=flat-square&logo=postgresql&logoColor=white)
![Lighthouse](https://img.shields.io/badge/Lighthouse-13.0+-F44B21?style=flat-square&logo=lighthouse&logoColor=white)
--- [Features](#-essential-features) • [Visual Tour](#-visual-tour) • [Getting Started](#-getting-started) • [Deployment](#-deployment)
## 📱 Mobile Friendly & Responsive
Designed with a mobile-first approach, ensuring a seamless experience across all devices.
<div align="center">
<img src="docs/images/mobile_dashboard.png" width="375" alt="Mobile Dashboard View">
</div> </div>
--- ---
@@ -32,13 +33,17 @@ Designed with a mobile-first approach, ensuring a seamless experience across all
* **📊 Detailed Reports**: Generates full HTML Lighthouse reports and JSON summaries. * **📊 Detailed Reports**: Generates full HTML Lighthouse reports and JSON summaries.
* **📸 Visual Filmstrip**: Captures frame-by-frame screenshots of the page load experience. * **📸 Visual Filmstrip**: Captures frame-by-frame screenshots of the page load experience.
## 🛠️ Tech Stack ## 📸 Visual Tour
* **Frontend**: Vanilla HTML/CSS/JS (No framework overhead). <div align="center">
* **Backend**: Node.js, Express. <h3>Desktop Analysis Results</h3>
* **Engine**: Google Lighthouse, Chrome Launcher, Puppeteer. <img src="docs/images/desktop_results.png" alt="Desktop Results" width="100%">
* **Database**: PostgreSQL.
* **Deployment**: Automated GitHub Actions-style deployment via SSH. <br><br>
<h3>Mobile Responsive Dashboard</h3>
<img src="docs/images/mobile_dashboard.png" alt="Mobile Dashboard View" width="375">
</div>
## 🚀 Getting Started ## 🚀 Getting Started
@@ -60,11 +65,26 @@ Designed with a mobile-first approach, ensuring a seamless experience across all
npm install npm install
``` ```
3. Start the server: 3. Apply Permissions (Optional):
```bash
chmod +x config-fix.sh
```
4. Start the server:
```bash ```bash
npm start npm start
``` ```
The application will run on `http://localhost:3000`. The application will run on `http://localhost:3000`.
## 🛠️ Deployment
This project includes automated deployment scripts for Proxmox/Linux environments.
* **Automated Sync**: `auto-sync-robust.sh` handles pulling changes and restarting services only when necessary.
* **Crednetial Safety**: `deploy-config.json` and `.env` files are strictly git-ignored.
* **License**: Distributed under the **GPL-3.0** License.
--- ---
*Developed and maintained by Beyond Cloud Technology.* <div align="center">
<sub>Developed and maintained by Beyond Cloud Technology.</sub>
</div>