{"id":483,"date":"2025-05-30T14:25:36","date_gmt":"2025-05-30T14:25:36","guid":{"rendered":"https:\/\/mityjohn.com\/?p=483"},"modified":"2025-05-30T15:27:36","modified_gmt":"2025-05-30T15:27:36","slug":"typix-personality-assessments-meet-vibe-coding","status":"publish","type":"post","link":"https:\/\/mityjohn.com\/?p=483","title":{"rendered":"Typix: Personality Assessments Meet Vibe Coding"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">&#8220;It was a public holiday (Ascension Day), and instead of doing absolutely nothing, I decided to build something\u2026 just for the fun of it.&#8221;<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Meet <strong><a href=\"http:\/\/typix.mityjohn.com\" data-type=\"link\" data-id=\"typix.mityjohn.com\">Typix<\/a><\/strong> \u2014 a playful yet functional experiment in building a free personality assessment tool, powered by AI-driven development, curiosity, and a healthy disregard for overpriced quiz platforms.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1007\" height=\"1024\" src=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-9-1007x1024.png\" alt=\"\" class=\"wp-image-490\" srcset=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-9-1007x1024.png 1007w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-9-295x300.png 295w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-9-768x781.png 768w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-9.png 1256w\" sizes=\"auto, (max-width: 1007px) 100vw, 1007px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019ve always been fascinated by personality assessments. They&#8217;re part psychology, part storytelling \u2014 and always a good catalyst for conversation. I wanted to do one with the family, but every option I found felt\u2026 wrong. Too commercial, too scattered, or just way too expensive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>So I built my own.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typix was born in a few hours thanks to the latest wave of AI tooling. Think of it as \u201cvibe coding\u201d: a mix of exploration, iteration, and interaction with AI agents.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bolt.DIY: Your AI Pair (and Sometimes Solo) Programmer<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To bring Typix to life, I used <strong>Bolt.DIY<\/strong>, an experimental AI coding companion powered by <strong>Claude Sonnet 4<\/strong>. Think of it as a supercharged project starter that builds full applications from natural language prompts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"434\" src=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-4-1024x434.png\" alt=\"\" class=\"wp-image-484\" srcset=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-4-1024x434.png 1024w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-4-300x127.png 300w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-4-768x326.png 768w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-4-1536x652.png 1536w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-4-2048x869.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You tell Bolt what you want \u2014 the stack, the features, maybe even the aesthetic \u2014 and it scaffolds the whole project for you. Not just a single file or function, but actual working apps with components, routes, state management, and deployment support.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some key things Bolt.DIY handled in Typix:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vue 3 + Vite project setup with routing<\/li>\n\n\n\n<li>Internationalization scaffolding<\/li>\n\n\n\n<li>Dynamic question forms and data flow<\/li>\n\n\n\n<li>Integration of Tailwind for styling<\/li>\n\n\n\n<li>GitHub Pages deployment support<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s not always perfect. Sometimes you wait. Sometimes you need to nudge it back on track. But when you batch requests and define your stack clearly upfront, it flies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pro tip: ask for things like &#8220;add mobile responsiveness, enable Vue I18n, set up routing with nested views, and make the layout playful and responsive&#8221; \u2014 in one go.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Typix: Under the Hood<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">While Bolt handled scaffolding, I brought in <strong>GPT-4o<\/strong> (using chatGPT) to generate high-quality questions for each of the assessments. These questions are lightweight, intuitive, and designed to provide insight without needing a PhD in psychometrics.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typix currently supports three models:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>DISC<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The classic 4-quadrant model that categorizes people into:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dominance<\/strong>: results-driven, assertive<\/li>\n\n\n\n<li><strong>Influence<\/strong>: persuasive, social<\/li>\n\n\n\n<li><strong>Steadiness<\/strong>: calm, supportive<\/li>\n\n\n\n<li><strong>Conscientiousness<\/strong>: analytical, precise<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"866\" height=\"1004\" src=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-8.png\" alt=\"\" class=\"wp-image-489\" srcset=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-8.png 866w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-8-259x300.png 259w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-8-768x890.png 768w\" sizes=\"auto, (max-width: 866px) 100vw, 866px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>Typix Discovery<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Based on the <strong>personality theory of Carl Gustav Jung<\/strong>, a Swiss psychiatrist and psychologist. Jung introduced the concept of <strong>psychological preferences<\/strong>, describing how individuals perceive the world and make decisions. He identified four primary functions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Thinking<\/strong><\/li>\n\n\n\n<li><strong>Feeling<\/strong><\/li>\n\n\n\n<li><strong>Sensing <\/strong><\/li>\n\n\n\n<li><strong>Intuition<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Combined with the attitudes <strong>introversion<\/strong> and <strong>extraversion<\/strong>, these lead to <strong>eight psychological types<\/strong>.<br>Typix Discovery visualizes this on a circular chart, showing the dynamic balance of cognitive preferences in color-coded energy levels. It&#8217;s inspired by Jung\u2019s framework, not affiliated with any commercial system.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"1024\" src=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-6-667x1024.png\" alt=\"\" class=\"wp-image-487\" srcset=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-6-667x1024.png 667w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-6-195x300.png 195w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-6.png 718w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. <strong>Enneagram<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A model that describes nine distinct personality types, each with its own set of motivations, fears, and growth paths. The Enneagram is particularly useful for understanding internal drivers and emotional patterns.<br>The types include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Reformer<\/li>\n\n\n\n<li>The Helper<\/li>\n\n\n\n<li>The Achiever<\/li>\n\n\n\n<li>The Individualist<\/li>\n\n\n\n<li>The Investigator<\/li>\n\n\n\n<li>The Loyalist<\/li>\n\n\n\n<li>The Enthusiast<\/li>\n\n\n\n<li>The Challenger<\/li>\n\n\n\n<li>The Peacemaker<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Typix provides a simplified questionnaire and results breakdown to help users recognize their dominant type and core traits.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"942\" src=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-10.png\" alt=\"\" class=\"wp-image-492\" srcset=\"https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-10.png 664w, https:\/\/mityjohn.com\/wp-content\/uploads\/2025\/05\/image-10-211x300.png 211w\" sizes=\"auto, (max-width: 664px) 100vw, 664px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Vibe Coding in Practice<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The process was fluid and creative. I bounced between Copilot\u2019s <strong>agent mode<\/strong> and <strong>edit mode<\/strong>, depending on whether I needed help structuring a Vue component or just nudging some styles. Meanwhile, GPT-4.1 (while using Copilot within Visual Studio code) helped me write dynamic SVG-based visualizations \u2014 the Typix Discovery circle and the Enneagram spider chart were both AI-assisted, handcrafted renderings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And yes, during slower agent moments in Bolt, I flipped back to VS Code to tweak logic, add transitions, or just learn more about Jungian archetypes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Reflections: The Future of Development<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Typix isn\u2019t just a side project. It\u2019s a sign of a new era in how we build software.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019re not just writing code anymore. We\u2019re designing ideas and shaping interactions with the help of intelligent collaborators. As developers and designers, our roles are becoming more expressive, more conceptual \u2014 and strangely, more human.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What This Means for Developers and Designers<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Developers become orchestrators<\/strong>: You still need to understand architecture and flow \u2014 but the hands-on keyboard work is increasingly done through conversations with tools.<\/li>\n\n\n\n<li><strong>Designers become builders<\/strong>: With the right language, visual thinkers can bring layouts, animations, and interaction flows directly to life.<\/li>\n\n\n\n<li><strong>It\u2019s not about coding faster \u2014 it\u2019s about imagining better<\/strong>: The real value lies in what you ask the system to build, and how you adapt and refine the result.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Typix was built on a quiet Thursday in May. No deadline. No pressure. Just the joy of building something that didn&#8217;t exist that morning. With the tools we now have, coding can feel like jamming \u2014 fluid, imperfect, and unexpectedly beautiful.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check it out, remix it, or better yet: build your own.<br><a href=\"https:\/\/janvanwassenhove.github.io\/Typix\/#\/\">Typix on GitHub Pages (typix.mityjohn.com)<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>References<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bolt.DIY <a href=\"https:\/\/github.com\/stackblitz-labs\/bolt.diy\">https:\/\/github.com\/stackblitz-labs\/bolt.diy<\/a><\/li>\n\n\n\n<li>Github repo <a href=\"https:\/\/github.com\/janvanwassenhove\/typix\">https:\/\/github.com\/janvanwassenhove\/typix<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;It was a public holiday (Ascension Day), and instead of doing absolutely nothing, I decided to build something\u2026 just for the fun of it.&#8221; Meet Typix \u2014 a playful yet functional experiment in building a free personality assessment tool, powered by AI-driven development, curiosity, and a healthy disregard for overpriced quiz platforms. I\u2019ve always been [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":496,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,7,25],"tags":[8,20,30,10,28],"class_list":["post-483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-development","category-fun","tag-development","tag-generative-ai","tag-personality","tag-programming","tag-vuejs"],"_links":{"self":[{"href":"https:\/\/mityjohn.com\/index.php?rest_route=\/wp\/v2\/posts\/483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mityjohn.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mityjohn.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mityjohn.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mityjohn.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=483"}],"version-history":[{"count":5,"href":"https:\/\/mityjohn.com\/index.php?rest_route=\/wp\/v2\/posts\/483\/revisions"}],"predecessor-version":[{"id":509,"href":"https:\/\/mityjohn.com\/index.php?rest_route=\/wp\/v2\/posts\/483\/revisions\/509"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mityjohn.com\/index.php?rest_route=\/wp\/v2\/media\/496"}],"wp:attachment":[{"href":"https:\/\/mityjohn.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mityjohn.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mityjohn.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}