|
|
|
|
|
|
|
A high-performance web platform for a construction firm specializing in ETICS insulation. Built to bridge modern frontend development with real-world business needs, focusing on SEO and lead generation.
A real website for a real business — currently live and operating.
A professional ETICS insulation firm needed a complete digital presence. No logo, no social media, and no website. I took total ownership of their digital identity, delivering a "0 to 1" solution:
- Brand Identity: Created a professional logo and visual style from scratch
- Social Strategy: Launched their Facebook page and optimized their Instagram presence
- The Platform: Developed a clean, SEO-optimized React site to bridge the gap between their craftsmanship and modern web standards
Built with React and JavaScript, styled using Tailwind CSS and Shadcn UI components. The project follows a professional development workflow with GitHub Pages as a staging/test environment and Netlify for production deployment. Unit and component testing is handled with Vitest to ensure code reliability.
A frontend-focused website leveraging Netlify Forms for contact handling, eliminating the need for a complex backend infrastructure since there's no heavy business logic or database requirements involved.
Optimized for performance and SEO to maximize the company's online visibility. Fully responsive design ensuring a seamless experience across all devices.
| Category | Technology |
|---|---|
| Framework | React |
| Language | JavaScript |
| Styling | Tailwind CSS |
| UI Components | Shadcn UI |
| Testing | Vitest |
| Code Quality | SonarQube Cloud |
| Staging | GitHub Pages |
| Production | Netlify |
| Forms | Netlify Forms |
- Node.js (v24 or higher recommended)
- npm or yarn
# Clone the repository
git clone https://github.com/fernandotonacoder/chrisert.git
# Navigate to the project directory
cd chrisert
# Install dependencies
npm install
# Start the development server
npm run dev# Run development server
npm run dev
# Run dev server accessible from other devices (e.g., mobile)
npm run dev -- --host
# Build for production
npm run build
# Run tests
npm run test
# Run tests with coverage report
npm run test:coverage
# Preview production build
npm run preview- Production: https://chrisert.pt
- Staging: https://fernandotonacoder.github.io/chrisert/
| Branch | Environment | Checks |
|---|---|---|
dev |
GitHub Pages (Staging) | Tests, Lint, Build |
main |
Netlify (Production) | Tests, Lint, Security Audit, Build |
- Branch Protection: Both
mainanddevare protected with linear history required; all changes must go through PRs - Automated Testing: Vitest runs on every PR to
devandmain - Security Audits: Weekly dependency audits + on every PR
- Deployments: Automatic on push to respective branches
- Auto-Sync: After each push to
main, changes are automatically rebased ontodevto keep branches in sync
- Manual Triggers: Both GitHub Pages and Netlify workflows can also be triggered manually via Actions → Run workflow
- Environment Protection: Both staging (GitHub Pages) and production (Netlify) deployments require manual approval from configured reviewers before proceeding
chrisert/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ ├── assets/ # Images, fonts, etc.
│ └── ...
├── public/ # Static assets
├── tests/ # Test setup
└── ...
- 📱 Fully responsive design
- 🔍 SEO optimized
- ⚡ Performance optimized
- 📝 Contact form with Netlify Forms integration
- 🎨 Modern UI with Shadcn components
The source code of this project is licensed under the MIT License.
Note: All branding, logos, images, and business-specific content are proprietary and belong to the client. Feel free to use this codebase as a learning resource or as inspiration for your own projects!
Fernando Tona
- GitHub: @fernandotonacoder
Built with ❤️ for real-world business needs