Jeff Kubik: Interactive Writer

$main[<div class="center-text">$linkStyle[(link: "Scene samples")[(goto: "screenplaySamples")] [(link: "Branching narrative")[(goto: "branchingChoices")]] [(link: "Lore")[(goto: "loreExamples")]] [(link: "Micro fiction")[(goto: "microFiction")]]]</div></div>]

(hide:?sidebar)\ (if: (passage:)'s name is not "bioPage")[(set: $bioArrayPos to it +1)(if: $bioArrayPos > $bioArray's length)[(set: $bioArrayPos to 1)]]\ (font: "VT323")[==\ (display: "headerName")\ (display: "headerNav")\ <link rel="icon" type="image/x-icon" href="\favicon.ico">

{\ (set: $defaultSize to 2)\ (set: $defaultTextSize to (css: "font-size: "+(string:$defaultSize)+"vw;"))\ (set: $smallLinkSize to $defaultSize*1)\ (set: $smallLinkTextSize to (css: "font-size: "+(string:$smallLinkSize)+"vw;"))\ (set: $linkSize to $defaultSize*2)\ (set: $linkTextSize to (css: "font-size: "+(string:$linkSize)+"vw;"))\ (set: $headerSize to $defaultSize*2)\ (set: $headerTextSize to (css: "font-size: "+(string:$headerSize)+"vw;"))\ (set: $bodyText to (text-color: "white")+$defaultTextSize)\ \\ \ (set: $linkColor to (hsl: 51, 1, 0.5))\ (set: $smallLinkStyle to $smallLinkTextSize+(text-color: $linkColor))\ (set: $linkDivider to [$smallLinkTextSize[•]])\  (set: $linkStyle to (text-color: $linkColor))\ \\ \ (set: $headerStyle to (text-color: $linkColor))\ (set: $lineHeight to (css: "line-height: 100%)"))\ (set: $bio to (display: "bio"))\ \\ \ (set: $main to (float-box: "==XXXXXXX=", "=YYYYYYYY="))\ \ (set: $popupBox to (opacity: 0.9)+(corner-radius: 6)+(float-box: "=XXX=", "=YYYYYY=")+(border: "dotted")+(border-color: $linkColor)))\ \\ \ (display: "moreLink")\ (display: "bioArray")\ (set: $bioArrayPos to 0)\ (set: $menuItemStyle to (css:"margin-left:35%; text-indent: 0;")+(css:"line-height: 120%;")+$linkStyle)\ (set: $CTA to "general")\ }

$main[<div class="center-text">$linkStyle[(link-rerun:"You want a dark fantasy TV show")[(replace: ?popup)[(display: "slPopup")]]</div> [(link-rerun:"You want a violent, vulgar high school action-comedy")[(replace: ?popup)[(display: "wfbPopup")]]]]] []<popup|

$main[<div class="center-text">$linkStyle[(link-rerun:"You want to meet what waits in the darkness")[(replace: ?popup)[(display: "monsterGardenPopup")]]] $linkStyle[(link-rerun:"You want to make Edgar Allen Poe roll in his grave")[(replace: ?popup)[(display: "quothPopup")]]]] []<popup|

$main[<div class="center-text">$linkStyle[(link-rerun:"You want to generate objects of power")[(replace: ?popup)[(display: "relicPopup")]] [(link-rerun:"You want to know where you'll live after the end of the world")[(replace: ?popup)[(display: "redoubtPopup")]]]]] []<popup|</div>

$main[<div class="center-text">$linkStyle[(link-rerun:"You want to get a //little// scared")[(replace: ?popup)[(display: "sowPopup")]]]</div>] []<popup|

$popupBox[ |= (display: "closePopup") =||= $linkTextSize[<div class="popupHeader">Shades of Weird</div>]\ =| |==| <center>$defaultTextSize[<div class="popupBody">Horrifying micro-fiction inspired by random hex colors.</div>] <center><a href="/sow" target="blank" id="mailToLink">Read now</a>\ ]

$smallLinkTextSize[<div class="button">(link-rerun: "close")[(replace: ?popup)[]]</div>]

$popupBox[== |= (display: "closePopup") =||= <div class="popupHeader">**The Slumbering Lands**</div> =| |==| [<div class="popupSubhead">Sleeping Beauty + Stalker `//` Elden Ring + S.T.A.L.K.E.R.</div> (css: "justify-content: center;")[<div class="popupBody">//His fingers cast long, blade-like shadows against the forest. The oily substance of the relic spreads through the shadows, cleaving trees and Dreamers in half.//</div>] <center><a href="/screenplay/Slumbering Lands - sample.pdf" id="mailToLink">Download PDF</a></center>\ ]

$popupBox[== |= (display: "closePopup") =||= <div class="popupHeader">**Weird Fight Boy**</div> =| |==| [<div class="popupSubhead">Fight Club + Booksmart `//` Double Dragon + Rock Band</div> <div class="popupBody justify"><div class="center"><div id="character">//WILL//</div></div> //It's been years since I saw someone just go fucking apeshit like that! You maybe crippled a guy. In front of his **kids**!// //His hand's already up for the high five.//</div> <center><a href="/screenplay/WFB - sample.pdf" id="mailToLink">Download PDF</a>]

$popupBox[ |= (display: "closePopup") =||= $linkTextSize[<div class="popupHeader">Quoth</div>]\ =| |==| <center>$defaultTextSize[<div class="popupBody">Can you escape eternal ennui in this interactive version of "The Raven"?</div>] <a href="/quoth" target="blank">Play now</a> ]

$popupBox[ |= (display: "closePopup") =||= $linkTextSize[<div class="popupHeader">Relic Generator</div>]\ =| |==| <center>$defaultTextSize[<div class="popupBody">A land caught in a nightmare holds powerful, unlikely relics and effects.</div>] <a href="/objects" target="blank" id="mailToLink">Start generating</a>\ ]

$popupBox[ |= (display: "closePopup") =||= $linkTextSize[<div class="popupHeader">The Redoubt</div>]\ =| |==| <center>$defaultTextSize[<div class="popupBody">Endless conflicts have left the world a graveyard of magic and technology. There's only one place left to call home.</div>] <center><a href="/redoubt" target="blank" id="mailToLink">Learn more</a>\ ]

(set: $moreLink to [$defaultTextSize+(text-color:(hsl: 51, 1, 0.75))[[Go on, ask me about it.|More]]])

(float-box: "=======XXX","========YY")[<div class="mail-link"><a href="mailto:jeff@jeffkubik.com" id="mailToLink">jeff@jeffkubik.com</a></div>]

(float-box:"XXXX================", "YYYY=")[\ (css: "transform: scale(1, 1.15);")+(css: "font-size: "+(string:$defaultSize*2.75)+"vw;")+(text-rotate:-2)+(text-style: "outline")[\ (if: (passage:)'s name is "Splash")[<center><div class="scale headline">Jeff Kubik</div></center>\ ]\ (else:)[<center><div class="scale headline">(linkrerun: "Jeff Kubik")[(goto: "Splash")\ ]\ ]\ ]\ (if: (passage:)'s name is not "bioPage")[<center><div class="CTAbody">$bio</div></center>]]

(float-box: "===XX", "====Y")[(display: "footerMail")]

(set: $bioArray to (a: "I've written great stuff with creative teams for 20 years.", "I like group projects. Really.","I write like a great dungeon master: with spreadsheets.", "I built everything on this site (and this site!) with Twine."))\ (display: "bioCTAs")

(print: $bioArray's ($bioArrayPos))(set: $bioLink to $bioCTAs's ($bioArrayPos)) $bioLink

$main[<div class="justify-text">(if: $CTA is "general" or "20Years")[(display: "generalCTA")]\ (else-if: $CTA is "dungeonMaster")[(display: "dungeonMasterCTA")]\ (else-if: $CTA is "builtEverything")[(display: "builtEverythingCTA")]\ (else-if: $CTA is "groupProjects")[(display: "groupProjectsCTA")]\ (display: "linkedInCV")</div>]\ []<logoSplash|

(set: $bioCTAs to (a: [(link: "Which teams?")[(set: $CTA to "20Years")(goto: "bioPage")]], [(link: "Really?")[(set: $CTA to "groupProjects")(goto: "bioPage")]], [(link: "How do you roll?")[(set: $CTA to "dungeonMaster")(goto: "bioPage")]], [(link: "Why, though?")[(set: $CTA to "builtEverything")(goto: "bioPage")]]))

As a writer, I’ve spent 20 years sharpening vague ideas into vivid text for brands like Apple, AT&T, and Clorox. Because even the most effective creative teams need to put their vision into words. I love group projects (really!), and the best way I’ve found to help teams work together is by strengthening creative direction with creative definition. I’m good for a lot of things, but mostly I’m the guy who writes the thing when the thing won’t write itself.

I love absorbing reams of information, then synthesizing it into something that’s readable at a glance. In short: I work best with novelty and //rules//. I’ve spent 20 years sharpening vague ideas into vivid text for brands like Apple, AT&T, and Clorox, so I know there’s no guide to either fantastical or creative territories. But with robust content management systems and consistent internal taxonomy, I know that the real adventure will be the spreadsheets we made along the way. Right?

It's kind of just what I do! The curiosity that compelled me to learn Twine has given me a multidisciplinary resume: I’ve been a journalist, playwright, editor, comedian, and puppeteer. And it's those experiences that help me draw the most interesting connections. For most of my career, I’ve been a copywriter for brands like Apple, AT&T, and Clorox. That’s how I know that even the most curious, effective creative teams need their vision put into words. So even though I’m good at a lot of things, and interested in a lot more, I'm most useful when the creative direction needs creative definition. (And all the fun weirdness along the way, natch.)

Really! The work I’m happiest with was always made with other people. From communications and marketing agencies to video and theatrical productions, I’m at my best when I’m leaning on creative partners as we shape the idea and I find the words. Words literally define the work. Because once good ideas are defined, they’re shareable. They’re doable. They strengthen creative direction with creative definition. And as a copywriter, that’s what I’ve been doing for 20 years with major brands like Apple, AT&T, and Clorox.

(display: "logoArray")\ (set: $logoPos to 0)\ (float-box: "===X===","===YYY===")+(bg: white)+(corner-radius: 12)+(css: "display: flex; justify-content: center; align-items: center;")[(display: "logoLive")]\

(set: $verticalCenter to (css: "margin-top: 25%; margin-bottom: 25%"))\ (set: $logoArray to (a: [<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\1 Apple_logo_black.svg">], [<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\2 AT&T_logo_2016.svg">], [<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\3 Infiniti_logo_2023.svg">],[<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\4 Nissan_2020_logo.svg">],[<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\5 Clorox_Brand_Logo_2019.png">],[<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\6 Glad_logo.svg">],[<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\7 Citibank.svg">],[<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\8 UCLA_Health_logo.svg">], [<img src="D:\Dropbox\_Writing\jjkubik.com\deploy\logos\9 Blue_Cross_Blue_Shield_Association_logo.svg">]))

(live: 0.75s)[(set: $logoPos to it + 1)(if: $logoPos > $logoArray's length)[(stop:)(replace: ?logoSplash)[]]\ (else:)[(set: $logo to $logoArray's ($logoPos))]\ $logo]

Just noting it's here and not anything to worry about!

Not actually sure what this is for!

(float-box:"==XXX=", "Y=========")[<nav role="navigation" aria-label="main menu"><div id="headerNav">\ (if: (passage:)'s name is not "screenplaySamples")[(link: "Scenes")[(goto: "screenplaySamples")]](else:)[(text-color: white)[Scenes]] \ $linkDivider \ (if: (passage:)'s name is not "branchingChoices")[(link: "Branches")[(goto: "branchingChoices")]](else:)[(text-color: white)[Branches]] \ $linkDivider \ (if: (passage:)'s name is not "loreExamples")[(link: "Lore")[(goto: "loreExamples")]](else:)[(text-color: white)[Lore]] \ $linkDivider \ (if: (passage:)'s name is not "microFiction")[(link: "Micro-fiction")[(goto: "microFiction")]](else:)[(text-color: white)[Micro-fiction]] \ $linkDivider \ (if: (passage:)'s name is not "bioPage")[(link: "About")[(set: $CTA to "general")(goto: "bioPage")]](else:)[(text-color: white)[About]]\ </nav>]

<title>Jeff Kubik writes</title>$main[<div class="center-text">$linkStyle[(link-rerun:"You want a dark fantasy TV show")[(replace: ?popup)[(display: "slPopup")]]</div> [(link-rerun:"You want a violent, vulgar high school action-comedy")[(replace: ?popup)[(display: "wfbPopup")]]] [(link: "You want something else")[(goto: "Splash")]]]] []<popup|

(css: "padding-top: 2.5%;")+(float-box:"==XXX=", "Y=========")+(css: "text-align: center;")[$smallLinkStyle[(link: "Scenes")[(goto: "screenplaySamples")]] \ $linkDivider $smallLinkStyle[(link: "Branches")[(goto: "branchingChoices")]] \ $linkDivider \ $smallLinkStyle[(link: "Lore")[(goto: "loreExamples")]] \ $linkDivider \ $smallLinkStyle[(link: "Micro-fiction")[(goto: "microFiction")]] \ $linkDivider \ $smallLinkStyle[(link: "About")[(set: $CTA to "general")(goto: "bioPage")]]]

<a href="/character-sheet/Jeff-Kubik-character-sheet.pdf" target="blank">Character sheet</a> <a href="/CV" target="blank">CV</a> <a href="https://www.linkedin.com/in/jeff-kubik/" target="blank">LinkedIn</a>

$popupBox[ |= (display: "closePopup") =||= $linkTextSize[<center>Monster Garden]\ =| |==| <center>$defaultTextSize[The world's over. You've just been exiled. What else could go wrong?] $smallLinkStyle[<a href="/monster-garden" target="blank">Play now</a>] ]