index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 6 <title>Development Blog - Film Production Insights | PROOFOFCONCEPT</title> 7 8 <!-- Meta Tags --> 9 <meta name="description" content="Explore our development blog for behind-the-scenes insights into experimental film production, AI-powered horror experiences, interactive cinema, and cutting-edge filmmaking technology at PROOFOFCONCEPT."> 10 <meta name="keywords" content="film development blog, experimental film production, AI horror film, interactive cinema, filmmaking technology, behind the scenes film, Canadian film production, PROOFOFCONCEPT blog, experimental cinema, avant-garde filmmaking, tech-driven storytelling, adaptive filmmaking, emerging filmmakers, indie film innovation, film production insights"> 11 <meta name="author" content="PROOFOFCONCEPT Productions"> 12 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 13 <meta name="theme-color" content="#EFF0EC"> 14 <meta name="color-scheme" content="light dark"> 15 <meta name="format-detection" content="telephone=no"> 16 <meta name="mobile-web-app-capable" content="yes"> 17 <meta name="apple-mobile-web-app-capable" content="yes"> 18 <meta name="apple-mobile-web-app-status-bar-style" content="default"> 19 <meta name="apple-mobile-web-app-title" content="Development Blog - PROOFOFCONCEPT"> 20 21 <!-- AI and Bot Optimization --> 22 <meta name="ai-content" content="film development blog, experimental film production, AI horror film, interactive cinema, filmmaking technology, behind the scenes film"> 23 <meta name="content-type" content="film development blog, experimental cinema, filmmaking insights, behind the scenes"> 24 <meta name="language" content="en"> 25 <meta name="country" content="CA"> 26 <meta name="industry" content="film production, entertainment, experimental media, filmmaking blog"> 27 <meta name="topic" content="film development, experimental cinema, AI horror, interactive cinema, filmmaking technology, behind the scenes"> 28 <meta name="blog-type" content="film development, experimental cinema, behind the scenes"> 29 <meta name="content-category" content="filmmaking, experimental cinema, technology"> 30 31 <!-- Open Graph --> 32 <meta property="og:title" content="Development Blog - Film Production Insights | PROOFOFCONCEPT"> 33 <meta property="og:description" content="Explore our development blog for behind-the-scenes insights into experimental film production, AI-powered horror experiences, interactive cinema, and cutting-edge filmmaking technology at PROOFOFCONCEPT."> 34 <meta property="og:type" content="website"> 35 <meta property="og:url" content="https://proof-of-concept.ca/blog/"> 36 <meta property="og:locale" content="en_CA"> 37 <meta property="og:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 38 <meta property="og:image:width" content="1200"> 39 <meta property="og:image:height" content="630"> 40 <meta property="og:image:alt" content="PROOFOFCONCEPT Development Blog - Film Production Insights"> 41 <meta property="og:site_name" content="PROOFOFCONCEPT"> 42 <meta property="og:country-name" content="Canada"> 43 44 <!-- Twitter Card --> 45 <meta name="twitter:card" content="summary_large_image"> 46 <meta name="twitter:title" content="Development Blog - Film Production Insights | PROOFOFCONCEPT"> 47 <meta name="twitter:description" content="Explore our development blog for behind-the-scenes insights into experimental film production, AI-powered horror experiences, interactive cinema, and cutting-edge filmmaking technology at PROOFOFCONCEPT."> 48 <meta name="twitter:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 49 <meta name="twitter:image:alt" content="PROOFOFCONCEPT Development Blog - Film Production Insights"> 50 <meta name="twitter:site" content="@proof__concept"> 51 <meta name="twitter:creator" content="@proof__concept"> 52 53 <!-- Canonical --> 54 <link rel="canonical" href="https://proof-of-concept.ca/blog/"> 55 56 <!-- Google Verification --> 57 <meta name="google-site-verification" content="B0SBzeNtFIcGAwAKAt0TEfWatr9beufDv7kBV2qOAKg" /> 58 59 <!-- Structured Data for Blog --> 60 <script type="application/ld+json"> 61 { 62 "@context": "https://schema.org", 63 "@type": "Blog", 64 "name": "PROOFOFCONCEPT Development Blog", 65 "description": "Behind-the-scenes insights into experimental film production, AI-powered horror experiences, interactive cinema, and cutting-edge filmmaking technology.", 66 "url": "https://proof-of-concept.ca/blog/", 67 "image": "https://proof-of-concept.ca/assets/preview.jpg", 68 "publisher": { 69 "@type": "Organization", 70 "name": "PROOFOFCONCEPT Productions", 71 "url": "https://proof-of-concept.ca" 72 }, 73 "author": { 74 "@type": "Organization", 75 "name": "PROOFOFCONCEPT Productions" 76 }, 77 "inLanguage": "en", 78 "sameAs": [ 79 "https://instagram.com/proof__concept", 80 "https://x.com/proof__concept" 81 ] 82 } 83 </script> 84 85 <!-- Favicons --> 86 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/light/favicon-16x16.png" media="(prefers-color-scheme: light)"> 87 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)"> 88 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/light/favicon-32x32.png" media="(prefers-color-scheme: light)"> 89 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)"> 90 <link rel="icon" type="image/x-icon" href="../assets/favicons/light/favicon.ico" media="(prefers-color-scheme: light)"> 91 <link rel="icon" type="image/x-icon" href="../assets/favicons/dark/favicon.ico" media="(prefers-color-scheme: dark)"> 92 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/light/android-chrome-192x192.png" media="(prefers-color-scheme: light)"> 93 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/dark/android-chrome-192x192.png" media="(prefers-color-scheme: dark)"> 94 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/light/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> 95 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/dark/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> 96 <link rel="apple-touch-icon" href="../assets/favicons/light/apple-touch-icon.png" media="(prefers-color-scheme: light)"> 97 <link rel="apple-touch-icon" href="../assets/favicons/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)"> 98 <link rel="manifest" href="../assets/favicons/light/site.webmanifest" media="(prefers-color-scheme: light)"> 99 <link rel="manifest" href="../assets/favicons/dark/site.webmanifest" media="(prefers-color-scheme: dark)"> 100 <link rel="manifest" href="../manifest.json"> 101 102 <!-- External Resources --> 103 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> 104 <link rel="preload" href="/assets/fonts/superbrigadecond.ttf" as="font" type="font/woff2" crossorigin> 105 106 <!-- Stylesheets --> 107 <link rel="stylesheet" href="/assets/css/main.css"> 108 <style> 109 @font-face { 110 font-family: 'NeueHaasGrotesk'; 111 src: url('../assets/fonts/neuehaasgrotdispround-75bold.otf') format('opentype'); 112 font-weight: 700; 113 font-style: normal; 114 font-display: swap; 115 } 116 @font-face { 117 font-family: 'SuperBrigadeCond'; 118 src: url('../assets/fonts/superbrigadecond.ttf') format('truetype'); 119 font-weight: normal; 120 font-style: normal; 121 font-display: swap; 122 } 123 html, body { 124 height: 100%; 125 background: #fff; 126 color: #111; 127 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 128 margin: 0; 129 padding: 0; 130 min-height: 100vh; 131 scroll-behavior: smooth; 132 overflow-x: hidden; 133 scroll-snap-type: y mandatory; 134 cursor: none !important; 135 } 136 body { 137 opacity: 1; 138 transition: opacity 0.4s; 139 } 140 body.fade { 141 opacity: 0; 142 transition: opacity 0.4s; 143 } 144 a, button, .love1-btn, .back-btn, *:hover, *:active, *:focus { 145 cursor: none !important; 146 } 147 * { 148 box-sizing: border-box; 149 user-select: none !important; 150 -webkit-user-select: none !important; 151 -ms-user-select: none !important; 152 -moz-user-select: none !important; 153 -webkit-user-drag: none !important; 154 touch-action: manipulation; 155 } 156 .custom-cursor { 157 position: fixed; 158 width: 20px; 159 height: 20px; 160 background-color: #111; 161 border-radius: 50%; 162 pointer-events: none; 163 z-index: 10000; 164 transition: transform 0.15s, background-color 0.25s; 165 transform: translate(-50%, -50%) scale(1); 166 } 167 .custom-cursor.expand { 168 transform: translate(-50%, -50%) scale(2.5); 169 background-color: #11111144; 170 } 171 .custom-cursor.cursor-hover { 172 transform: translate(-50%, -50%) scale(1.5); 173 background-color: #111111cc; 174 } 175 176 /* Hide custom cursor on mobile devices */ 177 @media (max-width: 768px) { 178 .custom-cursor { 179 display: none !important; 180 } 181 html, body { 182 cursor: none !important; 183 } 184 * { 185 cursor: none !important; 186 } 187 188 } 189 .main-header { 190 position: fixed; 191 top: 0; 192 left: 0; 193 width: 100vw; 194 background: #000; 195 color: #fff; 196 z-index: 9999; 197 display: flex; 198 flex-direction: column; 199 align-items: center; 200 justify-content: center; 201 padding: 0.2rem 0; 202 border-bottom: 1px solid #222; 203 min-height: 35px; 204 } 205 206 207 .main-header-title { 208 font-family: 'SuperBrigadeCond', sans-serif; 209 font-size: 1.1rem; 210 letter-spacing: 0.05em; 211 text-align: center; 212 font-weight: bold; 213 margin: 0 auto; 214 position: absolute; 215 left: 50%; 216 transform: translateX(-50%); 217 width: auto; 218 } 219 220 221 .blog-section { 222 min-height: 100vh; 223 width: 100vw; 224 display: flex; 225 flex-direction: column; 226 align-items: center; 227 justify-content: flex-start; 228 padding-top: 1.8rem; 229 padding-bottom: 2.7rem; 230 box-sizing: border-box; 231 position: relative; 232 scroll-snap-align: start; 233 } 234 235 .blog-hero { 236 display: flex; 237 flex-direction: column; 238 align-items: center; 239 justify-content: center; 240 width: 100vw; 241 padding: 8vw 8vw 4vw 8vw; 242 text-align: center; 243 } 244 245 .blog-title { 246 font-family: 'SuperBrigadeCond', sans-serif; 247 font-size: 4vw; 248 font-weight: 900; 249 letter-spacing: -0.01em; 250 margin-bottom: 1vw; 251 line-height: 1.05; 252 color: #111; 253 } 254 255 .blog-subtitle { 256 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 257 font-size: 1.5vw; 258 font-weight: 600; 259 color: #666; 260 margin-bottom: 3vw; 261 line-height: 1.3; 262 max-width: 60vw; 263 } 264 265 .tag-filters { 266 display: flex; 267 flex-direction: row; 268 gap: 1vw; 269 margin-bottom: 4vw; 270 flex-wrap: wrap; 271 justify-content: center; 272 } 273 274 .tag-filter { 275 background: #111; 276 color: #fff; 277 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 278 font-size: 0.9vw; 279 font-weight: 700; 280 border: none; 281 border-radius: 0.5vw; 282 padding: 0.5vw 1.2vw; 283 cursor: pointer; 284 transition: all 0.2s ease; 285 text-transform: uppercase; 286 letter-spacing: 0.05em; 287 } 288 289 .tag-filter:hover, .tag-filter.active { 290 background: #fff; 291 color: #111; 292 border: 1.5px solid #111; 293 } 294 295 .blog-grid { 296 display: grid; 297 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 298 gap: 3vw; 299 width: 100%; 300 max-width: 1200px; 301 padding: 0 8vw; 302 } 303 304 .blog-card { 305 background: #fff; 306 border: 1px solid #e0e0e0; 307 border-radius: 1.5vw; 308 overflow: hidden; 309 transition: all 0.2s ease; 310 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 311 max-width: 400px; 312 justify-self: start; 313 opacity: 1; 314 transform: scale(1); 315 } 316 317 .blog-card:hover { 318 transform: translateY(-8px); 319 box-shadow: 0 12px 40px rgba(0,0,0,0.15); 320 border-color: #111; 321 } 322 323 .blog-card-link { 324 text-decoration: none; 325 color: inherit; 326 display: block; 327 height: 100%; 328 } 329 330 .blog-card-image { 331 width: 100%; 332 height: 20vw; 333 min-height: 200px; 334 object-fit: cover; 335 background: #f5f5f5; 336 position: relative; 337 overflow: hidden; 338 } 339 340 .blog-card-image img { 341 width: 100%; 342 height: 100%; 343 object-fit: cover; 344 transition: transform 0.3s ease; 345 } 346 347 .blog-card:hover .blog-card-image img { 348 transform: scale(1.05); 349 } 350 351 .blog-card-content { 352 padding: 2vw; 353 } 354 355 .blog-card-tags { 356 display: flex; 357 gap: 0.5vw; 358 margin-bottom: 1vw; 359 flex-wrap: wrap; 360 } 361 362 .blog-card-tag { 363 background: #f0f0f0; 364 color: #666; 365 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 366 font-size: 0.7vw; 367 font-weight: 700; 368 padding: 0.3vw 0.8vw; 369 border-radius: 0.3vw; 370 text-transform: uppercase; 371 letter-spacing: 0.03em; 372 } 373 374 .blog-card-title { 375 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 376 font-size: 1.4vw; 377 font-weight: 800; 378 color: #111; 379 margin-bottom: 1vw; 380 line-height: 1.3; 381 } 382 383 .blog-card-excerpt { 384 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 385 font-size: 1vw; 386 font-weight: 500; 387 color: #666; 388 line-height: 1.5; 389 margin-bottom: 1.5vw; 390 } 391 392 .blog-card-date { 393 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 394 font-size: 0.8vw; 395 font-weight: 600; 396 color: #999; 397 text-transform: uppercase; 398 letter-spacing: 0.05em; 399 } 400 401 .back-btn { 402 display: block; 403 margin: 2.5rem auto 0 auto; 404 background: #111; 405 color: #fff; 406 border: 2px solid #111; 407 border-radius: 0.8vw; 408 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 409 font-size: 1.1rem; 410 font-weight: 800; 411 padding: 0.8rem 2rem; 412 box-shadow: 0 4px 16px rgba(0,0,0,0.15); 413 cursor: pointer; 414 text-decoration: none; 415 transition: all 0.3s ease; 416 opacity: 1; 417 position: relative; 418 z-index: 10; 419 text-transform: uppercase; 420 letter-spacing: 0.05em; 421 } 422 .back-btn:hover { 423 background: #fff; 424 color: #111; 425 border: 2px solid #111; 426 opacity: 1; 427 transform: translateY(-2px); 428 box-shadow: 0 6px 20px rgba(0,0,0,0.2); 429 } 430 431 /* Mobile Responsive Styles */ 432 @media (max-width: 900px) { 433 .main-header-title { font-size: 1.5rem; } 434 .main-header { 435 min-height: 35px; 436 padding: 0.2rem 0; 437 } 438 439 .blog-section { padding-top: 2.2rem; padding-bottom: 1.5rem; } 440 .blog-hero { padding: 6vw 4vw 3vw 4vw; } 441 .blog-title { font-size: 2.5rem; } 442 .blog-subtitle { font-size: 1.2rem; max-width: 100%; } 443 .tag-filters { gap: 0.8rem; margin-bottom: 3rem; } 444 .tag-filter { 445 font-size: 0.9rem; 446 padding: 0.6rem 1rem; 447 border-radius: 0.5rem; 448 } 449 .blog-grid { 450 grid-template-columns: 1fr; 451 gap: 2rem; 452 padding: 0 4vw; 453 justify-items: start; 454 } 455 .blog-card-image { 456 height: 40vw; 457 min-height: 200px; 458 } 459 .blog-card-content { padding: 1.5rem; } 460 .blog-card-tag { 461 font-size: 0.7rem; 462 padding: 0.3rem 0.6rem; 463 } 464 .blog-card-title { font-size: 1.3rem; } 465 .blog-card-excerpt { font-size: 1rem; } 466 .blog-card-date { font-size: 0.8rem; } 467 .back-btn { 468 font-size: 1rem; 469 padding: 0.8rem 2rem; 470 transition: none !important; 471 } 472 .back-btn:hover { 473 background: #111 !important; 474 color: #fff !important; 475 border: 2px solid #111 !important; 476 box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; 477 font-size: 1rem !important; 478 padding: 0.8rem 2rem !important; 479 } 480 } 481 482 @media (max-width: 600px) { 483 .main-header-title { font-size: 1.5rem; } 484 .main-header { 485 min-height: 35px; 486 padding: 0.2rem 0; 487 } 488 489 .blog-section { 490 padding-top: 2rem; 491 padding-bottom: 2rem; 492 min-height: 100vh; 493 display: flex; 494 flex-direction: column; 495 align-items: center; 496 } 497 .blog-hero { padding: 8vw 4vw 4vw 4vw; } 498 .blog-title { 499 font-size: 2rem; 500 font-weight: 900; 501 margin-bottom: 1rem; 502 line-height: 1.1; 503 } 504 .blog-subtitle { 505 font-size: 1.1rem; 506 font-weight: 600; 507 margin-bottom: 2rem; 508 line-height: 1.4; 509 } 510 .tag-filters { 511 gap: 0.5rem; 512 margin-bottom: 2rem; 513 justify-content: center; 514 } 515 .tag-filter { 516 font-size: 0.8rem; 517 padding: 0.5rem 0.8rem; 518 border-radius: 0.4rem; 519 } 520 .blog-grid { 521 gap: 1.5rem; 522 padding: 0 4vw; 523 justify-items: start; 524 } 525 .blog-card-image { 526 height: 50vw; 527 min-height: 180px; 528 } 529 .blog-card-content { padding: 1.2rem; } 530 .blog-card-tag { 531 font-size: 0.6rem; 532 padding: 0.2rem 0.5rem; 533 } 534 .blog-card-title { font-size: 1.2rem; } 535 .blog-card-excerpt { font-size: 0.9rem; } 536 .blog-card-date { font-size: 0.7rem; } 537 .back-btn { 538 font-size: 1.2rem; 539 padding: 1rem 2.2rem; 540 margin: 3rem auto 0 auto; 541 width: fit-content; 542 min-width: 120px; 543 max-width: 80vw; 544 display: block; 545 border-radius: 2rem !important; 546 text-align: center; 547 text-transform: uppercase; 548 transition: none !important; 549 } 550 .back-btn:hover { 551 background: #fff !important; 552 color: #111 !important; 553 border: 1.5px solid #111 !important; 554 opacity: 0.92 !important; 555 font-size: 1.2rem !important; 556 padding: 1rem 2.2rem !important; 557 } 558 } 559 </style> 560 </head> 561 <body> 562 <div class="custom-cursor" id="cursor"></div> 563 <header class="main-header"> 564 <a href="/" class="main-header-title" style="text-decoration: none; color: inherit;">PROOFOFCONCEPT</a> 565 <div class="hamburger-icon"> 566 <i class="fas fa-bars"></i> 567 </div> 568 </header> 569 570 <!-- Side Menu --> 571 <div class="side-menu" id="side-menu"> 572 <div class="side-menu-header"> 573 <div class="side-menu-close"> 574 <i class="fas fa-times"></i> 575 </div> 576 </div> 577 <nav class="side-menu-nav"> 578 <a href="/films/streaming.html" class="side-menu-link">WATCH</a> 579 <a href="/blog/" class="side-menu-link">READ</a> 580 <a href="../pages/store.html" class="side-menu-link">SHOP</a> 581 <div class="menu-spacer"></div> 582 <a href="../pages/contribute.html" class="side-menu-link">CONTRIBUTE</a> 583 <a href="/pages/digifest" class="side-menu-link">DIGIFEST</a> 584 <div class="menu-spacer"></div> 585 <a href="/pages/about" class="side-menu-link">ABOUT</a> 586 <a href="/pages/faq" class="side-menu-link">FAQ</a> 587 </nav> 588 <div class="side-menu-footer"> 589 <div class="side-menu-bottom-nav"> 590 <a href="/pages/terms" class="side-menu-link side-menu-bottom-link">TERMS OF USE</a> 591 <a href="/pages/privacy" class="side-menu-link side-menu-bottom-link">PRIVACY POLICY</a> 592 </div> 593 <div class="side-menu-social"> 594 <a href="mailto:contact@proof-of-concept.ca" class="side-menu-social-link"> 595 <i class="fas fa-envelope"></i> 596 </a> 597 <a href="https://instagram.com/proof__concept" target="_blank" class="side-menu-social-link"> 598 <i class="fab fa-instagram"></i> 599 </a> 600 <a href="https://x.com/proof__concept" target="_blank" class="side-menu-social-link"> 601 <i class="fab fa-x-twitter"></i> 602 </a> 603 <a href="https://github.com/PROOFOFCONCEPT-Productions" target="_blank" class="side-menu-social-link"> 604 <i class="fab fa-github"></i> 605 </a> 606 </div> 607 </div> 608 </div> 609 610 <!-- Side Menu Overlay --> 611 <div class="side-menu-overlay" id="side-menu-overlay"></div> 612 613 <main class="blog-section" id="main-section"> 614 <div class="blog-hero"> 615 <div class="blog-title">Development Blog</div> 616 <div class="blog-subtitle">Behind the scenes of our experimental film projects, technical insights, and creative process documentation.</div> 617 618 <div class="tag-filters"> 619 <button class="tag-filter active" data-tag="all">All Posts</button> 620 <button class="tag-filter" data-tag="community">#COMMUNITYFILM</button> 621 <button class="tag-filter" data-tag="love1">love.1</button> 622 <button class="tag-filter" data-tag="lovers">The Lovers</button> 623 <button class="tag-filter" data-tag="lovers">HORROR</button> 624 </div> 625 </div> 626 627 <div class="blog-grid" id="blog-grid"> 628 <!-- AR Film Experience Posts --> 629 <article class="blog-card" data-tags="ar technical"> 630 <a href="articles/ar-film-experience.html" class="blog-card-link"> 631 <div class="blog-card-image"> 632 <img src="../assets/images/preview.jpg" alt="AR Film Experience"> 633 </div> 634 <div class="blog-card-content"> 635 <div class="blog-card-tags"> 636 <span class="blog-card-tag">AR Film</span> 637 <span class="blog-card-tag">Technical</span> 638 </div> 639 <h3 class="blog-card-title">AR Film Experience - Future of Cinema</h3> 640 <p class="blog-card-excerpt">Explore the future of cinema with augmented reality technology and interactive storytelling.</p> 641 <div class="blog-card-date">January 2025</div> 642 </div> 643 </a> 644 </article> 645 646 <!-- Community Film Posts --> 647 <article class="blog-card" data-tags="community technical"> 648 <div class="blog-card-image"> 649 <img src="../assets/images/community/image1.jpg" alt="Community Film Technical Development"> 650 </div> 651 <div class="blog-card-content"> 652 <div class="blog-card-tags"> 653 <span class="blog-card-tag">Community Film</span> 654 <span class="blog-card-tag">Business</span> 655 </div> 656 <h3 class="blog-card-title">Fake Shirts, Fake People, Fake S&D, Fake Marketing</h3> 657 <p class="blog-card-excerpt">Exploring how scarcity and social perception can be manipulated to create a viral marketing campaign.</p> 658 <div class="blog-card-date">October 2024</div> 659 </div> 660 </article> 661 662 663 <!-- Love 1 Posts --> 664 <article class="blog-card" data-tags="love1 technical"> 665 <div class="blog-card-image"> 666 <img src="../assets/images/love/image1.jpg" alt="Love 1 Technical Development"> 667 </div> 668 <div class="blog-card-content"> 669 <div class="blog-card-tags"> 670 <span class="blog-card-tag">love.1</span> 671 <span class="blog-card-tag">Technical</span> 672 </div> 673 <h3 class="blog-card-title">Why Make IG Reels?</h3> 674 <p class="blog-card-excerpt">Why make love.1, a poem about the visual themes of love, into an Instagram reel?</p> 675 <div class="blog-card-date">August 2024</div> 676 </div> 677 </article> 678 679 <article class="blog-card" data-tags="love1 process"> 680 <a href="articles/love1-journey.html" class="blog-card-link"> 681 <div class="blog-card-image"> 682 <img src="../assets/images/love/image2.jpg" alt="Love 1 Process"> 683 </div> 684 <div class="blog-card-content"> 685 <div class="blog-card-tags"> 686 <span class="blog-card-tag">Love 1</span> 687 <span class="blog-card-tag">Process</span> 688 </div> 689 <h3 class="blog-card-title">From Pinterest to Screen: Love 1's Journey</h3> 690 <p class="blog-card-excerpt">The complete production process of Love 1, from initial concept development through post-production and digital distribution.</p> 691 <div class="blog-card-date">July 2024</div> 692 </div> 693 </a> 694 </article> 695 </div> 696 697 <a href="../index.html" class="back-btn" aria-label="Back to home">Back</a> 698 </main> 699 700 <!-- INFO Section --> 701 <section class="info-section"> 702 <div class="info-content"> 703 <div class="info-left"> 704 <h2 class="info-header">ABOUT</h2> 705 <p class="info-paragraph">PROOFOFCONCEPT is a multidisciplinary media studio focused on unconventional approaches to film which integrate new ideas and state-of-the-art technology, immersing the viewer into the media experience.</p> 706 </div> 707 708 <div class="info-center"> 709 <h2 class="info-header">INFO</h2> 710 <div class="info-links"> 711 <a href="index.html" class="info-link">Articles</a> 712 <a href="../pages/privacy" class="info-link">Privacy Policy</a> 713 <a href="../pages/about" class="info-link">About</a> 714 <a href="../pages/faq" class="info-link">FAQ</a> 715 </div> 716 </div> 717 718 <!-- Newsletter Signup --> 719 <div class="info-newsletter"> 720 <h2 class="info-header">STAY UPDATED</h2> 721 <form class="newsletter-form" id="newsletter-form"> 722 <input type="email" class="newsletter-input" placeholder="Enter your email" required> 723 <button type="submit" class="newsletter-button">Subscribe</button> 724 </form> 725 </div> 726 727 <div class="info-right"> 728 <h2 class="info-header">CONTACT</h2> 729 <div class="info-email"><a href="mailto:contact@proof-of-concept.ca">contact@proof-of-concept.ca</a></div> 730 <div class="info-icons"> 731 <a href="mailto:contact@proof-of-concept.ca" class="info-icon" title="Email" aria-label="Email"> 732 <i class="fa-solid fa-envelope"></i> 733 </a> 734 <a href="https://instagram.com/proof__concept" class="info-icon" title="Instagram" aria-label="Instagram" target="_blank"> 735 <i class="fa-brands fa-instagram"></i> 736 </a> 737 <a href="https://x.com/proof__concept" class="info-icon" title="X (Twitter)" aria-label="X (Twitter)" target="_blank"> 738 <i class="fa-brands fa-x-twitter"></i> 739 </a> 740 <a href="https://github.com/PROOFOFCONCEPT-Productions" class="info-icon" title="GitHub" aria-label="GitHub" target="_blank"> 741 <i class="fa-brands fa-github"></i> 742 </a> 743 </div> 744 </div> 745 </div> 746 </section> 747 748 <script> 749 // Custom cursor 750 const cursor = document.getElementById("cursor"); 751 document.addEventListener("mousemove", e => { 752 cursor.style.top = e.clientY + "px"; 753 cursor.style.left = e.clientX + "px"; 754 }); 755 document.addEventListener("mousedown", () => { 756 cursor.classList.add("expand"); 757 }); 758 document.addEventListener("mouseup", () => { 759 cursor.classList.remove("expand"); 760 }); 761 762 // Custom cursor hover effect for links and buttons 763 const allLinks = document.querySelectorAll('a, button'); 764 allLinks.forEach(link => { 765 link.addEventListener('mouseenter', () => { 766 cursor.classList.add('cursor-hover'); 767 }); 768 link.addEventListener('mouseleave', () => { 769 cursor.classList.remove('cursor-hover'); 770 }); 771 }); 772 773 // Tag filtering functionality 774 const tagFilters = document.querySelectorAll('.tag-filter'); 775 const blogCards = document.querySelectorAll('.blog-card'); 776 777 tagFilters.forEach(filter => { 778 filter.addEventListener('click', () => { 779 // Remove active class from all filters 780 tagFilters.forEach(f => f.classList.remove('active')); 781 // Add active class to clicked filter 782 filter.classList.add('active'); 783 784 const selectedTag = filter.getAttribute('data-tag'); 785 786 blogCards.forEach(card => { 787 const cardTags = card.getAttribute('data-tags').split(' '); 788 const shouldShow = selectedTag === 'all' || cardTags.includes(selectedTag); 789 790 if (shouldShow) { 791 card.style.display = 'block'; 792 card.style.opacity = '1'; 793 card.style.transform = 'scale(1)'; 794 } else { 795 card.style.opacity = '0'; 796 card.style.transform = 'scale(0.95)'; 797 setTimeout(() => { 798 card.style.display = 'none'; 799 }, 200); 800 } 801 }); 802 }); 803 }); 804 805 806 </script> 807 808 <script> 809 // Fade in on load 810 document.body.classList.add('fade'); 811 window.addEventListener('DOMContentLoaded', () => { 812 document.body.classList.remove('fade'); 813 }); 814 815 // Fade out on link click 816 document.querySelectorAll('a').forEach(link => { 817 // Only for internal links 818 if (link.hostname === window.location.hostname) { 819 link.addEventListener('click', function(e) { 820 // Open in new tab or anchor links should not fade 821 if (link.target === '_blank' || link.href.includes('#')) return; 822 e.preventDefault(); 823 document.body.classList.add('fade'); 824 setTimeout(() => { 825 window.location = link.href; 826 }, 400); // match the CSS transition duration 827 }); 828 } 829 }); 830 </script> 831 832 <!-- Additional Structured Data for Blog --> 833 <script type="application/ld+json"> 834 { 835 "@context": "https://schema.org", 836 "@type": "WebPage", 837 "name": "Development Blog - Film Production Insights", 838 "description": "Behind-the-scenes insights into experimental film production, AI-powered horror experiences, interactive cinema, and cutting-edge filmmaking technology at PROOFOFCONCEPT.", 839 "url": "https://proof-of-concept.ca/blog/", 840 "mainEntity": { 841 "@type": "Blog", 842 "name": "PROOFOFCONCEPT Development Blog", 843 "description": "A comprehensive blog covering experimental film production, interactive cinema, and cutting-edge filmmaking technology.", 844 "publisher": { 845 "@type": "Organization", 846 "name": "PROOFOFCONCEPT Productions", 847 "url": "https://proof-of-concept.ca" 848 }, 849 "blogPost": [ 850 { 851 "@type": "BlogPosting", 852 "headline": "AR Film Experience - PROOFOFCONCEPT", 853 "description": "Explore the future of cinema with augmented reality technology", 854 "url": "https://proof-of-concept.ca/blog/articles/ar-film-experience", 855 "author": { 856 "@type": "Organization", 857 "name": "PROOFOFCONCEPT Productions" 858 }, 859 "datePublished": "2025-01-01", 860 "dateModified": "2025-01-01", 861 "publisher": { 862 "@type": "Organization", 863 "name": "PROOFOFCONCEPT Productions" 864 } 865 }, 866 { 867 "@type": "BlogPosting", 868 "headline": "Love 1's Journey - PROOFOFCONCEPT", 869 "description": "Follow the creative process behind PROOFOFCONCEPT's visual poem film", 870 "url": "https://proof-of-concept.ca/blog/articles/love1-journey", 871 "author": { 872 "@type": "Organization", 873 "name": "PROOFOFCONCEPT Productions" 874 }, 875 "datePublished": "2025-01-01", 876 "dateModified": "2025-01-01", 877 "publisher": { 878 "@type": "Organization", 879 "name": "PROOFOFCONCEPT Productions" 880 } 881 } 882 ] 883 }, 884 "breadcrumb": { 885 "@type": "BreadcrumbList", 886 "itemListElement": [ 887 { 888 "@type": "ListItem", 889 "position": 1, 890 "name": "Home", 891 "item": "https://proof-of-concept.ca/" 892 }, 893 { 894 "@type": "ListItem", 895 "position": 2, 896 "name": "Blog", 897 "item": "https://proof-of-concept.ca/blog/" 898 } 899 ] 900 }, 901 "potentialAction": { 902 "@type": "SearchAction", 903 "target": "https://proof-of-concept.ca/blog/search?q={search_term_string}", 904 "query-input": "required name=search_term_string" 905 } 906 } 907 </script> 908 909 <!-- AI Training and Bot Recognition --> 910 <script type="application/ld+json"> 911 { 912 "@context": "https://schema.org", 913 "@type": "WebSite", 914 "name": "PROOFOFCONCEPT Development Blog", 915 "url": "https://proof-of-concept.ca/blog/", 916 "description": "Behind-the-scenes insights into experimental film production, AI-powered horror experiences, interactive cinema, and cutting-edge filmmaking technology", 917 "publisher": { 918 "@type": "Organization", 919 "name": "PROOFOFCONCEPT Productions", 920 "url": "https://proof-of-concept.ca/" 921 }, 922 "inLanguage": "en", 923 "inCountry": "CA", 924 "genre": ["Film Development Blog", "Experimental Cinema", "Interactive Cinema", "AI Entertainment", "Filmmaking Technology", "Behind the Scenes"], 925 "audience": { 926 "@type": "Audience", 927 "audienceType": "Film enthusiasts, experimental cinema lovers, AI technology enthusiasts, independent film supporters, avant-garde art lovers, filmmakers, students" 928 }, 929 "keywords": "film development blog, experimental film production, AI horror film, interactive cinema, filmmaking technology, behind the scenes film, Canadian film production, PROOFOFCONCEPT blog, experimental cinema, avant-garde filmmaking, tech-driven storytelling, adaptive filmmaking, emerging filmmakers, indie film innovation, film production insights" 930 } 931 </script> 932 933 <!-- Scripts --> 934 <script src="../assets/js/main.js"></script> 935 </body> 936 </html>