From dd23e661f76b2639e795ce1e687752e1784113b4 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 2 Oct 2025 06:11:57 +0000 Subject: [PATCH] feat: Add product pages for Darchie and EF Playground Co-authored-by: toni --- src/darchie.html | 145 ++++++++++++++++++ src/ef-playground.html | 142 ++++++++++++++++++ src/images/darchie-deploy.png | 28 ++++ src/images/darchie-environments.png | 44 ++++++ src/images/darchie-monitoring.png | 28 ++++ src/images/darchie-scaling.png | 42 ++++++ src/images/ef-playground-editor.png | 19 +++ src/images/ef-playground-migrations.png | 24 +++ src/images/ef-playground-queries.png | 28 ++++ src/images/ef-playground-share.png | 21 +++ src/index.html | 10 +- src/product.css | 186 ++++++++++++++++++++++++ src/styles.css | 13 ++ 13 files changed, 726 insertions(+), 4 deletions(-) create mode 100644 src/darchie.html create mode 100644 src/ef-playground.html create mode 100644 src/images/darchie-deploy.png create mode 100644 src/images/darchie-environments.png create mode 100644 src/images/darchie-monitoring.png create mode 100644 src/images/darchie-scaling.png create mode 100644 src/images/ef-playground-editor.png create mode 100644 src/images/ef-playground-migrations.png create mode 100644 src/images/ef-playground-queries.png create mode 100644 src/images/ef-playground-share.png create mode 100644 src/product.css diff --git a/src/darchie.html b/src/darchie.html new file mode 100644 index 0000000..aa0e249 --- /dev/null +++ b/src/darchie.html @@ -0,0 +1,145 @@ + + + + + + + + + + + Darchie - Massive Pixel + + + + + + + + + + + + + +
+
+
+ +
+ + +

+ Darchie +

+ +
+

.NET deployments done right

+ +

+ Darchie is the modern deployment platform for .NET applications. + Connect your source code and run your .NET applications in the cloud + with zero configuration. Whether you're building APIs, web apps, or + background services, Darchie handles the infrastructure so you can + focus on writing code. Iterate, extend, and evolve your applications + with no ops required - deploy with a simple git push and let us + handle the rest. +

+ +
+ + Visit Darchie → + +
+ +
+

Key Features

+ +
+
+ One-click deployment +
+
+

Instant Deployment

+

+ Deploy your .NET applications with a single git push. Darchie + automatically detects your project type, builds it with the + right .NET version, and deploys it to production. No + configuration files, no Docker knowledge required - just push + and go. +

+
+
+ +
+
+ Real-time monitoring +
+
+

Real-time Monitoring

+

+ Monitor your application's health, performance, and logs in + real-time. Get instant alerts when something goes wrong, and + use our powerful log search to debug issues quickly. Track + CPU, memory, and request metrics to optimize your app's + performance. +

+
+
+ +
+
+ Auto-scaling +
+
+

Auto-scaling

+

+ Handle traffic spikes effortlessly. Darchie automatically + scales your application up when demand increases and down when + it subsides. Pay only for what you use, with no manual + intervention required. Your app stays fast and responsive + under any load. +

+
+
+ +
+
+ Multiple environments +
+
+

Multiple Environments

+

+ Create separate environments for development, staging, and + production. Each environment has its own database, secrets, and + configuration. Test changes safely in staging before deploying + to production, all managed from a single dashboard. +

+
+
+
+
+ +
+

Vrpoljački put 8D, 22000

+

Šibenik, Croatia/Hrvatska

+

OIB (VAT): HR-31344748314

+
+

Copyright © 2013-2025 Massive Pixel d.o.o. All rights reserved.

+
+
+ + diff --git a/src/ef-playground.html b/src/ef-playground.html new file mode 100644 index 0000000..c5d3333 --- /dev/null +++ b/src/ef-playground.html @@ -0,0 +1,142 @@ + + + + + + + + + + + Entity Framework Playground - Massive Pixel + + + + + + + + + + + + + +
+
+
+ +
+ + +

+ Entity Framework Playground +

+ +
+

Interactive learning experience for Entity Framework Core

+ +

+ The Playground is the best way to experiment with and learn Entity + Framework Core. Whether you're a beginner just starting out or an + experienced developer looking to test new patterns, our interactive + platform provides a safe, powerful environment to explore EF Core's + capabilities. Learn how to write models, explore migrations, and + test queries generated by Entity Framework - all in real-time without + any local setup required. +

+ +
+ + Visit Entity Framework Playground → + +
+ +
+

Key Features

+ +
+
+ Interactive code editor +
+
+

Interactive Code Editor

+

+ Write and edit your Entity Framework models in a powerful + browser-based editor with syntax highlighting and IntelliSense. + See results instantly as you type, making learning and + experimentation fast and intuitive. +

+
+
+ +
+
+ Migration viewer +
+
+

Migration Visualization

+

+ Understand how your model changes translate to database schema + modifications. View generated migration code and see exactly + what SQL commands Entity Framework will execute to update your + database structure. +

+
+
+ +
+
+ Query inspector +
+
+

Query Inspector

+

+ See the actual SQL queries generated by your LINQ expressions. + Learn how Entity Framework translates your C# code into + database queries, helping you write more efficient and + performant data access code. +

+
+
+ +
+
+ Share and collaborate +
+
+

Share & Collaborate

+

+ Save your work and share it with teammates or the community. + Perfect for asking questions, demonstrating issues, or + creating educational content. Every playground gets a unique + URL for easy sharing. +

+
+
+
+
+ +
+

Vrpoljački put 8D, 22000

+

Šibenik, Croatia/Hrvatska

+

OIB (VAT): HR-31344748314

+
+

Copyright © 2013-2025 Massive Pixel d.o.o. All rights reserved.

+
+
+ + diff --git a/src/images/darchie-deploy.png b/src/images/darchie-deploy.png new file mode 100644 index 0000000..8792947 --- /dev/null +++ b/src/images/darchie-deploy.png @@ -0,0 +1,28 @@ + + + + + + + Git Push + $ git push origin main + + + + + + + + + + Deployed + ✓ Build successful + ✓ Tests passed + ✓ Live in 30s + + + + + + Cloud + diff --git a/src/images/darchie-environments.png b/src/images/darchie-environments.png new file mode 100644 index 0000000..5f0a662 --- /dev/null +++ b/src/images/darchie-environments.png @@ -0,0 +1,44 @@ + + + + + + Multiple Environments + + + + Development + + App v1.2.3 + + DB: dev + + Config: dev + + + + + Staging + + App v1.2.0 + + DB: staging + + Config: staging + + + + + Production + + App v1.1.0 + + DB: prod + + Config: prod + + + + + + diff --git a/src/images/darchie-monitoring.png b/src/images/darchie-monitoring.png new file mode 100644 index 0000000..a77b3bc --- /dev/null +++ b/src/images/darchie-monitoring.png @@ -0,0 +1,28 @@ + + + + + + Application Dashboard + + + + CPU + 23% + + + Memory + 512MB + + + Requests + 1.2K/m + + + + Response Time (ms) + + + + diff --git a/src/images/darchie-scaling.png b/src/images/darchie-scaling.png new file mode 100644 index 0000000..9e49f9f --- /dev/null +++ b/src/images/darchie-scaling.png @@ -0,0 +1,42 @@ + + + + + + Auto-Scaling + + + Low Traffic + + App + + + + + Traffic ↑ + + + High Traffic + + App + + + App + + + App + + + + Load Balancer + + + + + + + + + Users + + diff --git a/src/images/ef-playground-editor.png b/src/images/ef-playground-editor.png new file mode 100644 index 0000000..d318f2f --- /dev/null +++ b/src/images/ef-playground-editor.png @@ -0,0 +1,19 @@ + + + + + + + DbContext.cs + + + public class + ApplicationDbContext + { + public + DbSet + } + + + EF + diff --git a/src/images/ef-playground-migrations.png b/src/images/ef-playground-migrations.png new file mode 100644 index 0000000..b501aa1 --- /dev/null +++ b/src/images/ef-playground-migrations.png @@ -0,0 +1,24 @@ + + + + + + Migration: 20250101_InitialCreate + + + + Up() + CreateTable( + name: "Users", + columns: table => new { + Id, Name, Email + + + + Down() + DropTable( + name: "Users"); + + + Apply Migration + diff --git a/src/images/ef-playground-queries.png b/src/images/ef-playground-queries.png new file mode 100644 index 0000000..ddd5529 --- /dev/null +++ b/src/images/ef-playground-queries.png @@ -0,0 +1,28 @@ + + + + + + LINQ Query: + + var + users = context.Users + .Where(u => u.Age > 18) + .OrderBy(u => u.Name); + + + + + + + Generated SQL: + + SELECT + [u].[Id], [u].[Name], [u].[Age] + FROM + [Users] AS [u] + WHERE + [u].[Age] > 18 + ORDER BY + [u].[Name] + diff --git a/src/images/ef-playground-share.png b/src/images/ef-playground-share.png new file mode 100644 index 0000000..80101fa --- /dev/null +++ b/src/images/ef-playground-share.png @@ -0,0 +1,21 @@ + + + + + + + Share Playground + + + + https://efplayground.io/p/abc123 + + + + Copy Link + + + + + + diff --git a/src/index.html b/src/index.html index 765a8eb..2ace582 100644 --- a/src/index.html +++ b/src/index.html @@ -48,9 +48,7 @@

Our projects

- Entity Framework Playground + Entity Framework Playground

@@ -62,11 +60,13 @@

Framework Core. Learn how to write model, explore migrations and test queries generated by Entity Framework.

+ + Learn more →

- Darchie + Darchie

.NET deployments done right

@@ -75,6 +75,8 @@

Connect source code and run your .NET applications in the cloud. Iterate, extend and evolve your applications with no ops required.

+ + Learn more →

diff --git a/src/product.css b/src/product.css new file mode 100644 index 0000000..651631d --- /dev/null +++ b/src/product.css @@ -0,0 +1,186 @@ +/* Product page specific styles */ + +.breadcrumb { + margin-bottom: 2rem; +} + +.breadcrumb a { + color: var(--accent); + text-decoration: none; + font-weight: 600; + transition: opacity 0.2s ease; +} + +.breadcrumb a:hover { + opacity: 0.7; +} + +.product-heading { + margin: 0 0 1rem 0; + display: flex; + flex-direction: row; + align-items: center; + font-size: 2.5rem; +} + +.product-heading .logo { + width: 4rem; + margin-right: 1rem; +} + +.product-details { + max-width: 1200px; +} + +.product-details > h2 { + font-weight: 400; + font-size: 1.5rem; + margin-bottom: 2rem; + color: var(--accent); +} + +.product-description { + font-size: 1.1rem; + line-height: 1.8; + margin-bottom: 2rem; + padding: 2rem; + background-color: rgba(255, 255, 255, 0.9); + border-left: 4px solid var(--accent); + border-radius: 4px; +} + +.product-link { + margin: 3rem 0; + text-align: center; +} + +.cta-button { + display: inline-block; + padding: 1rem 2.5rem; + background-color: var(--accent); + color: white; + text-decoration: none; + font-weight: 700; + font-size: 1.2rem; + border-radius: 8px; + transition: transform 0.2s ease, box-shadow 0.2s ease; + box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2); +} + +.cta-button:active { + transform: translateY(0); + box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); +} + +.features { + margin-top: 4rem; +} + +.features > h2 { + font-size: 2rem; + font-weight: 700; + text-transform: uppercase; + margin-bottom: 3rem; + position: relative; + padding-left: 1rem; +} + +.features > h2::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 0.5rem; + background-color: var(--accent); +} + +.feature { + display: flex; + flex-direction: row; + gap: 2rem; + margin-bottom: 4rem; + background-color: rgba(255, 255, 255, 0.9); + padding: 2rem; + border-radius: 12px; + border: 2px solid var(--accent); + box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); +} + +.feature:nth-child(even) { + flex-direction: row-reverse; +} + +.feature-screenshot { + flex: 1; + min-width: 300px; + display: flex; + align-items: center; + justify-content: center; + background-color: #f5f5f5; + border-radius: 8px; + overflow: hidden; + border: 1px solid #ddd; +} + +.feature-screenshot img { + width: 100%; + height: auto; + display: block; + object-fit: cover; +} + +.feature-description { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +.feature-description h3 { + margin-top: 0; + font-size: 1.5rem; + color: var(--accent); + margin-bottom: 1rem; +} + +.feature-description p { + font-size: 1.05rem; + line-height: 1.7; + margin: 0; +} + +/* Responsive design */ +@media (max-width: 768px) { + .product-heading { + font-size: 1.8rem; + } + + .product-heading .logo { + width: 3rem; + } + + .feature { + flex-direction: column !important; + gap: 1.5rem; + } + + .feature-screenshot { + min-width: 100%; + min-height: 200px; + } + + .product-description { + padding: 1.5rem; + } + + .cta-button { + padding: 0.8rem 2rem; + font-size: 1rem; + } +} diff --git a/src/styles.css b/src/styles.css index 10e3170..85c9d67 100644 --- a/src/styles.css +++ b/src/styles.css @@ -168,3 +168,16 @@ h2#projects::before { .project .title { font-weight: bold; } + +.project .learn-more { + display: inline-block; + margin-top: 1rem; + color: var(--accent); + text-decoration: none; + font-weight: 600; + transition: transform 0.2s ease; +} + +.project .learn-more:hover { + transform: translateX(4px); +}