From e6754bf0e222bc3c7849667c32daeab65cee4409 Mon Sep 17 00:00:00 2001
From: Mike <goldy13_1992@hotmail.co.uk>
Date: Sat, 2 Dec 2023 22:43:40 +0700
Subject: [PATCH] added draft of code orchestration

---
 app/components/code_block/ICodeState.tsx      |   3 +-
 app/components/code_block/code_block.tsx      |  16 +-
 app/components/code_block/code_text.tsx       |   4 +
 app/components/code_block/renderer.tsx        |  71 ++++++---
 .../code_block/states/0_initialCodeBlock.tsx  |   2 +-
 .../code_block/states/1_textNameBold.tsx      |   2 +-
 .../code_block/states/2_textJobItalics.tsx    |   2 +-
 .../code_block/states/3_profilePic.tsx        |   2 +-
 .../code_block/states/4_verticalCenter.tsx    | 122 ++++++++++++++-
 .../code_block/states/5_profilePic_center.tsx | 127 +++++++++++++++-
 .../code_block/states/6_textAlignCenter.tsx   | 135 ++++++++++++++++-
 .../code_block/states/7_fontSizeLarger.tsx    | 139 ++++++++++++++++++
 .../code_block/states/greetingCentered.tsx    |  85 -----------
 .../code_block/states/profile_picture.tsx     |  96 ------------
 14 files changed, 586 insertions(+), 220 deletions(-)
 create mode 100644 app/components/code_block/states/7_fontSizeLarger.tsx
 delete mode 100644 app/components/code_block/states/greetingCentered.tsx
 delete mode 100644 app/components/code_block/states/profile_picture.tsx

diff --git a/app/components/code_block/ICodeState.tsx b/app/components/code_block/ICodeState.tsx
index b0bff02..f8adb41 100644
--- a/app/components/code_block/ICodeState.tsx
+++ b/app/components/code_block/ICodeState.tsx
@@ -12,5 +12,6 @@ export const State = {
     ProfilePic: 4,
     VerticalCenter: 5,
     ProfileCenter: 6,
-    TextCenter: 7
+    TextCenter: 7,
+    FontSizeLarger: 8
   } as const;
\ No newline at end of file
diff --git a/app/components/code_block/code_block.tsx b/app/components/code_block/code_block.tsx
index d0dc16b..0ec3337 100644
--- a/app/components/code_block/code_block.tsx
+++ b/app/components/code_block/code_block.tsx
@@ -2,18 +2,17 @@
 import React, { useState, ReactNode } from "react"
 import MultiTypeWriter from "../typewriter/multi_typewriter"
 import CodeEditorTitleBar from "./header"
-import { ComposableAnnotation, KotlinDefaultText, KotlinKeyword, KotlinMethodName, background, colorScheme, column, comma, composableTag, dot, fillMaxSize, functionClose, functionOpen, materialTheme, methodName, methodSignatureClose, methodSignatureOpen, modifierDeclaration, modifierLower, paramModifier, previewTag, primaryContainer, privateFun, space, tab, tab2, tab3, textFun, textFunClose, paramText, textValue, KotlinFrameworkComposableOrObject, KotlinMethodParam, KotlinField, KotlinString, paramHorizontalAlignment, alignment, centerHorizontally, paramVerticalArrangement, arrangement, center } from "./code_text"
+import { composableTag, functionClose, methodName, methodSignatureClose, methodSignatureOpen, modifierDeclaration, privateFun, textFun, textFunClose, paramText, textValue } from "./code_text"
 import CodeRenderer from "./renderer"
-import { HelloWorldCodeBlock, InitialCodeBlock } from "./states/0_initialCodeBlock"
+import { InitialCodeBlock } from "./states/0_initialCodeBlock"
 import ICodeState from "./ICodeState"
-import HelloWorldCenteredBlock from "./states/greetingCentered"
-import ProfilePictureBlock from "./states/profile_picture"
 import TextNameBold from "./states/1_textNameBold"
 import TextJobItalics from "./states/2_textJobItalics"
 import VerticalCenter from "./states/4_verticalCenter"
 import ProfilePic from "./states/3_profilePic"
 import ProfilePicCenter from "./states/5_profilePic_center"
 import TextAlignCenter from "./states/6_textAlignCenter"
+import FontSizeLarger from "./states/7_fontSizeLarger"
 
 export function ModifierFillMaxSize({onComplete}: {onComplete? : () => void}) {
     const code_blocks = [ ""
@@ -89,9 +88,10 @@ export function TypingOrchestrator(
         (onComp: OnComplete) => (<TextNameBold onComplete={onComp}  />),
         (onComp: OnComplete) => (<TextJobItalics onComplete={onComp}  />),
         (onComp: OnComplete) => (<ProfilePic onComplete={onComp}  />),
-        // (onComp: OnComplete) => (<VerticalCenter onComplete={onComp}  />),
-        // (onComp: OnComplete) => (<ProfilePicCenter onComplete={onComp}  />),
-        // (onComp: OnComplete) => (<TextAlignCenter onComplete={onComp}  />),
+        (onComp: OnComplete) => (<VerticalCenter onComplete={onComp}  />),
+        (onComp: OnComplete) => (<ProfilePicCenter onComplete={onComp}  />),
+        (onComp: OnComplete) => (<TextAlignCenter onComplete={onComp}  />),
+        (onComp: OnComplete) => (<FontSizeLarger onComplete={onComp}  />),
     ]
 
 
@@ -103,7 +103,7 @@ export function TypingOrchestrator(
         let timeout = setTimeout(() => {
             let nextIdx = idx < (states.length - 1) ? idx + 1 : 0
             setCodeState({"currentIndex": nextIdx, "canRender": false})
-            }, 5000)  
+            }, 2000)  
         console.log("on complete returning")
         return () => clearTimeout(timeout); 
     }
diff --git a/app/components/code_block/code_text.tsx b/app/components/code_block/code_text.tsx
index ecda226..e34db5c 100644
--- a/app/components/code_block/code_text.tsx
+++ b/app/components/code_block/code_text.tsx
@@ -47,16 +47,20 @@ export const modifierUpper = "Modifier"
 export const modifierDeclaration = modifierLower + ": " + modifierUpper + " = " + modifierUpper
 export const paramModifier = modifierLower + " = "
 export const paramHorizontalAlignment = "horizontalAlignment = "
+export const paramFontSize = "fontSize ="
 export const paramFontStyle = "fontStyle ="
 export const paramFontWeight = "fontWeight ="
 export const paramStyle = "style ="
+export const paramTextAlign = "textAlign ="
 export const paramVerticalArrangement = "verticalArrangement = "
 export const previewTag = "@Preview"
 export const primaryContainer = "primaryContainer"
 export const privateFun = "private fun"
 export const paramText = "text = "
 export const sizeLower = "size"
+export const sp = "sp"
 export const spanStyle = "SpanStyle"
+export const textAlign = "TextAlign"
 export const textFun = "Text"
 export const textFunClose = tab2 + methodSignatureClose
 export const textValue = "\"Hello world\""
diff --git a/app/components/code_block/renderer.tsx b/app/components/code_block/renderer.tsx
index fb31dcf..cef4bee 100644
--- a/app/components/code_block/renderer.tsx
+++ b/app/components/code_block/renderer.tsx
@@ -49,22 +49,59 @@ export default function CodeRenderer({codeState} : {codeState: ICodeState}) :  R
                     </span>
                 </div>
             )
-        // case State.Center: return (
-        //     <div key={2} className='flex h-full flex-col justify-center'>
-        //     <div className='w-full flex flex-row justify-center'>
-        //         <span className='text-gray-800 dark:text-gray-200'>{initialGreeting}</span>
-        //     </div>
-        // </div>
-        // )
-        // case State.Image: return (
-        //     <div key={2} className='flex h-full flex-col justify-center items-center'>
-        //            <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
-        //     <div className='w-full flex flex-row justify-center'>
-             
-        //         <span className='text-gray-800 dark:text-gray-200'>{initialGreeting}</span>
-        //     </div>
-        // </div>
-        // )
-
+        case State.VerticalCenter:
+            return (
+                <div className='flex h-full flex-col justify-center'>
+                    <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
+                    <span className='text-gray-800 dark:text-gray-200'>
+                        {initialGreetingStart}
+                        <span className='font-bold'>{name}</span>
+                        {initialGreetingMiddle}
+                        <span className='italic'>{job}</span>
+                    </span>
+                </div>
+            )
+        case State.ProfileCenter:
+            return (
+                <div className='flex h-full flex-col justify-center items-center'>
+                    <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
+                    <div className='flex w-full'>
+                        <span className='flex-grow text-gray-800 dark:text-gray-200'>
+                            {initialGreetingStart}
+                            <span className='font-bold'>{name}</span>
+                            {initialGreetingMiddle}
+                            <span className='italic'>{job}</span>
+                        </span>
+                    </div>
+                </div>
+            )
+        case State.TextCenter:
+            return (
+                <div className='flex h-full flex-col justify-center items-center'>
+                    <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
+                    <div className='flex w-full'>
+                        <span className='flex-grow text-center text-gray-800 dark:text-gray-200'>
+                            {initialGreetingStart}
+                            <span className='font-bold'>{name}</span>
+                            {initialGreetingMiddle}
+                            <span className='italic'>{job}</span>
+                        </span>
+                    </div>
+                </div>
+            )
+        case State.FontSizeLarger:
+            return (
+                <div className='flex h-full flex-col justify-center items-center'>
+                    <img src='profile_pic.jpg' className='w-32 h-32 rounded-full border border-white' />
+                    <div className='flex w-full'>
+                        <span className='flex-grow text-center text-2xl text-gray-800 dark:text-gray-200'>
+                            {initialGreetingStart}
+                            <span className='font-bold'>{name}</span>
+                            {initialGreetingMiddle}
+                            <span className='italic'>{job}</span>
+                        </span>
+                    </div>
+                </div>
+            )
     }
 }
\ No newline at end of file
diff --git a/app/components/code_block/states/0_initialCodeBlock.tsx b/app/components/code_block/states/0_initialCodeBlock.tsx
index 2e745fc..e5fd369 100644
--- a/app/components/code_block/states/0_initialCodeBlock.tsx
+++ b/app/components/code_block/states/0_initialCodeBlock.tsx
@@ -25,7 +25,7 @@ export function InitialCodeBlock({onComplete}:
     }
 
     return (
-        <CodeBlock numberOfLines={20} >
+        <CodeBlock numberOfLines={24} >
             <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
             <br/>
             <KotlinKeyword currentText={privateFun} cursorVisible={false} />
diff --git a/app/components/code_block/states/1_textNameBold.tsx b/app/components/code_block/states/1_textNameBold.tsx
index 592ae8d..fe0aa93 100644
--- a/app/components/code_block/states/1_textNameBold.tsx
+++ b/app/components/code_block/states/1_textNameBold.tsx
@@ -43,7 +43,7 @@ export default function TextNameBold({onComplete}:
     }
 
     return (
-        <CodeBlock numberOfLines={20} >
+        <CodeBlock numberOfLines={24} >
             <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
             <br/>
             <KotlinKeyword currentText={privateFun} cursorVisible={false} />
diff --git a/app/components/code_block/states/2_textJobItalics.tsx b/app/components/code_block/states/2_textJobItalics.tsx
index 006b79f..d89a416 100644
--- a/app/components/code_block/states/2_textJobItalics.tsx
+++ b/app/components/code_block/states/2_textJobItalics.tsx
@@ -37,7 +37,7 @@ export default function TextJobItalics({onComplete}:
     }
 
     return (
-        <CodeBlock numberOfLines={20} >
+        <CodeBlock numberOfLines={24} >
             <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
             <br/>
             <KotlinKeyword currentText={privateFun} cursorVisible={false} />
diff --git a/app/components/code_block/states/3_profilePic.tsx b/app/components/code_block/states/3_profilePic.tsx
index 0067f8a..74072b8 100644
--- a/app/components/code_block/states/3_profilePic.tsx
+++ b/app/components/code_block/states/3_profilePic.tsx
@@ -31,7 +31,7 @@ export default function ProfilePic({onComplete}:
     }
 
     return (
-        <CodeBlock numberOfLines={20} >
+        <CodeBlock numberOfLines={24} >
             <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
             <br/>
             <KotlinKeyword currentText={privateFun} cursorVisible={false} />
diff --git a/app/components/code_block/states/4_verticalCenter.tsx b/app/components/code_block/states/4_verticalCenter.tsx
index 05e59cc..3f14215 100644
--- a/app/components/code_block/states/4_verticalCenter.tsx
+++ b/app/components/code_block/states/4_verticalCenter.tsx
@@ -1,7 +1,123 @@
+import MultiTypeWriter from "@/components/typewriter/multi_typewriter"
+import { CodeBlock } from "../code_block"
+import { tab2, name, dot, comma, ComposableAnnotation, composableTag, KotlinKeyword, privateFun, KotlinMethodName, space, methodName, KotlinDefaultText, methodSignatureOpen, tab, modifierDeclaration, methodSignatureClose, functionOpen, KotlinFrameworkComposableOrObject, column, KotlinMethodParam, paramModifier, modifierLower, fillMaxSize, tab3, background, materialTheme, KotlinField, colorScheme, primaryContainer, textFun, paramText, KotlinString, functionClose, buildAnnotatedString, append, initialGreetingStart, tab4, withStyle, paramStyle, spanStyle, paramFontWeight, fontWeight, bold, tab5, initialGreetingMiddle, job, paramFontStyle, fontStyle, italic, profilePictureFunction, modifierUpper, sizeLower, dp, paramVerticalArrangement, arrangement, center } from "../code_text"
 
 export default function VerticalCenter({onComplete}: 
     {
         onComplete? : () => void
-    }) { 
-        return (<></>)
-}
\ No newline at end of file
+    }) {
+    const code_blocks = [
+        tab2 + paramVerticalArrangement,
+        arrangement + dot,
+        center,
+        comma + space
+    ]
+    const [blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
+
+    let showCursorArray : Array<boolean> = []
+    for (let n = 0; n < blocks.length; n++) {
+        showCursorArray.push(cursor_visible && (cursorPosition == n))
+    }
+ 
+    // Fixes server side rendering undefined when the array is empty!
+    if (blocks.length <= 0) {
+        console.log("rendering empty code block")
+        return <CodeBlock numberOfLines={16} >
+            </CodeBlock>
+    }
+
+    return (
+        <CodeBlock numberOfLines={24} >
+            <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
+            <br/>
+            <KotlinKeyword currentText={privateFun} cursorVisible={false} />
+            <KotlinMethodName currentText={space + methodName} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab + modifierDeclaration} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab + column} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramModifier} cursorVisible={false} />
+            <KotlinDefaultText currentText={modifierLower + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={fillMaxSize} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={background} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureOpen + materialTheme + dot} cursorVisible={false} />
+            <KotlinField currentText={colorScheme} cursorVisible={false} />
+            <KotlinDefaultText currentText={dot} cursorVisible={false} />
+            <KotlinField currentText={primaryContainer} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <KotlinKeyword currentText={comma} cursorVisible={false}/>
+            <br />
+            <KotlinMethodParam currentText={blocks[0]} cursorVisible={showCursorArray[0]} />
+            <KotlinDefaultText currentText={blocks[1]} cursorVisible={showCursorArray[1]} />
+            <KotlinField currentText={blocks[2]} cursorVisible={showCursorArray[2]} />
+            <KotlinDefaultText currentText={blocks[3]} cursorVisible={showCursorArray[3]} />
+            <br />
+            <KotlinDefaultText currentText={ tab + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + profilePictureFunction} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + modifierUpper + dot} cursorVisible={false}/>
+            <KotlinMethodName currentText={sizeLower} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false}/>
+            <KotlinMethodParam currentText={"100"} cursorVisible={false}/>
+            <KotlinDefaultText currentText={dot} cursorVisible={false}/>
+            <KotlinField currentText={dp} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureClose + methodSignatureClose} cursorVisible={false}/>
+        
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + textFun} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramText} cursorVisible={false} />
+            <KotlinDefaultText currentText={buildAnnotatedString + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + initialGreetingStart + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontWeight} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontWeight + dot} cursorVisible={false} />
+            <KotlinField currentText={bold} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + name + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={ "\"" + initialGreetingMiddle + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontStyle + dot} cursorVisible={false} />
+            <KotlinField currentText={italic} cursorVisible={false} />
+            <KotlinDefaultText currentText={ methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + job + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+          <br />
+            <KotlinDefaultText currentText={tab + functionClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={functionClose + space} cursorVisible={false} />
+        </CodeBlock>
+    )
+}
diff --git a/app/components/code_block/states/5_profilePic_center.tsx b/app/components/code_block/states/5_profilePic_center.tsx
index 9ebbca2..23d2085 100644
--- a/app/components/code_block/states/5_profilePic_center.tsx
+++ b/app/components/code_block/states/5_profilePic_center.tsx
@@ -1,7 +1,128 @@
+import MultiTypeWriter from "@/components/typewriter/multi_typewriter"
+import { CodeBlock } from "../code_block"
+import { tab2, name, dot, comma, ComposableAnnotation, composableTag, KotlinKeyword, privateFun, KotlinMethodName, space, methodName, KotlinDefaultText, methodSignatureOpen, tab, modifierDeclaration, methodSignatureClose, functionOpen, KotlinFrameworkComposableOrObject, column, KotlinMethodParam, paramModifier, modifierLower, fillMaxSize, tab3, background, materialTheme, KotlinField, colorScheme, primaryContainer, textFun, paramText, KotlinString, functionClose, buildAnnotatedString, append, initialGreetingStart, tab4, withStyle, paramStyle, spanStyle, paramFontWeight, fontWeight, bold, tab5, initialGreetingMiddle, job, paramFontStyle, fontStyle, italic, profilePictureFunction, modifierUpper, sizeLower, dp, paramVerticalArrangement, arrangement, center, paramHorizontalAlignment, alignment, centerHorizontally } from "../code_text"
 
 export default function ProfilePicCenter({onComplete}: 
     {
         onComplete? : () => void
-    }) { 
-        return (<></>)
-}
\ No newline at end of file
+    }) {
+    const code_blocks = [
+        tab2 + paramHorizontalAlignment,
+        alignment + dot,
+        centerHorizontally,
+        comma + space
+    ]
+    const [blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
+
+    let showCursorArray : Array<boolean> = []
+    for (let n = 0; n < blocks.length; n++) {
+        showCursorArray.push(cursor_visible && (cursorPosition == n))
+    }
+ 
+    // Fixes server side rendering undefined when the array is empty!
+    if (blocks.length <= 0) {
+        console.log("rendering empty code block")
+        return <CodeBlock numberOfLines={16} >
+            </CodeBlock>
+    }
+
+    return (
+        <CodeBlock numberOfLines={24} >
+            <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
+            <br/>
+            <KotlinKeyword currentText={privateFun} cursorVisible={false} />
+            <KotlinMethodName currentText={space + methodName} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab + modifierDeclaration} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab + column} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramModifier} cursorVisible={false} />
+            <KotlinDefaultText currentText={modifierLower + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={fillMaxSize} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={background} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureOpen + materialTheme + dot} cursorVisible={false} />
+            <KotlinField currentText={colorScheme} cursorVisible={false} />
+            <KotlinDefaultText currentText={dot} cursorVisible={false} />
+            <KotlinField currentText={primaryContainer} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <KotlinKeyword currentText={comma} cursorVisible={false}/>
+            <br />
+            <KotlinMethodParam currentText={blocks[0]} cursorVisible={showCursorArray[0]} />
+            <KotlinDefaultText currentText={blocks[1]} cursorVisible={showCursorArray[1]} />
+            <KotlinField currentText={blocks[2]} cursorVisible={showCursorArray[2]} />
+            <KotlinDefaultText currentText={blocks[3]} cursorVisible={showCursorArray[3]} />
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramVerticalArrangement} cursorVisible={false} />
+            <KotlinDefaultText currentText={arrangement + dot} cursorVisible={false} />
+            <KotlinField currentText={center} cursorVisible={false} />
+            <KotlinDefaultText currentText={comma} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={ tab + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + profilePictureFunction} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + modifierUpper + dot} cursorVisible={false}/>
+            <KotlinMethodName currentText={sizeLower} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false}/>
+            <KotlinMethodParam currentText={"100"} cursorVisible={false}/>
+            <KotlinDefaultText currentText={dot} cursorVisible={false}/>
+            <KotlinField currentText={dp} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureClose + methodSignatureClose} cursorVisible={false}/>
+        
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + textFun} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramText} cursorVisible={false} />
+            <KotlinDefaultText currentText={buildAnnotatedString + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + initialGreetingStart + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontWeight} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontWeight + dot} cursorVisible={false} />
+            <KotlinField currentText={bold} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + name + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={ "\"" + initialGreetingMiddle + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontStyle + dot} cursorVisible={false} />
+            <KotlinField currentText={italic} cursorVisible={false} />
+            <KotlinDefaultText currentText={ methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + job + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+          <br />
+            <KotlinDefaultText currentText={tab + functionClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={functionClose + space} cursorVisible={false} />
+        </CodeBlock>
+    )
+}
diff --git a/app/components/code_block/states/6_textAlignCenter.tsx b/app/components/code_block/states/6_textAlignCenter.tsx
index 1c4c64c..2911f69 100644
--- a/app/components/code_block/states/6_textAlignCenter.tsx
+++ b/app/components/code_block/states/6_textAlignCenter.tsx
@@ -1,7 +1,136 @@
+import MultiTypeWriter from "@/components/typewriter/multi_typewriter"
+import { CodeBlock } from "../code_block"
+import { tab2, name, dot, comma, ComposableAnnotation, composableTag, KotlinKeyword, privateFun, KotlinMethodName, space, methodName, KotlinDefaultText, methodSignatureOpen, tab, modifierDeclaration, methodSignatureClose, functionOpen, KotlinFrameworkComposableOrObject, column, KotlinMethodParam, paramModifier, modifierLower, fillMaxSize, tab3, background, materialTheme, KotlinField, colorScheme, primaryContainer, textFun, paramText, KotlinString, functionClose, buildAnnotatedString, append, initialGreetingStart, tab4, withStyle, paramStyle, spanStyle, paramFontWeight, fontWeight, bold, tab5, initialGreetingMiddle, job, paramFontStyle, fontStyle, italic, profilePictureFunction, modifierUpper, sizeLower, dp, paramVerticalArrangement, arrangement, center, paramHorizontalAlignment, alignment, centerHorizontally, paramTextAlign, textAlign } from "../code_text"
 
 export default function TextAlignCenter({onComplete}: 
     {
         onComplete? : () => void
-    }) { 
-        return (<></>)
-}
\ No newline at end of file
+    }) {
+    const code_blocks = [
+        paramTextAlign,
+        space + textAlign + dot,
+        center,
+        comma + space
+    ]
+    const [blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
+
+    let showCursorArray : Array<boolean> = []
+    for (let n = 0; n < blocks.length; n++) {
+        showCursorArray.push(cursor_visible && (cursorPosition == n))
+    }
+ 
+    // Fixes server side rendering undefined when the array is empty!
+    if (blocks.length <= 0) {
+        console.log("rendering empty code block")
+        return <CodeBlock numberOfLines={16} >
+            </CodeBlock>
+    }
+
+    return (
+        <CodeBlock numberOfLines={24} >
+            <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
+            <br/>
+            <KotlinKeyword currentText={privateFun} cursorVisible={false} />
+            <KotlinMethodName currentText={space + methodName} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab + modifierDeclaration} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab + column} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramModifier} cursorVisible={false} />
+            <KotlinDefaultText currentText={modifierLower + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={fillMaxSize} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={background} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureOpen + materialTheme + dot} cursorVisible={false} />
+            <KotlinField currentText={colorScheme} cursorVisible={false} />
+            <KotlinDefaultText currentText={dot} cursorVisible={false} />
+            <KotlinField currentText={primaryContainer} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <KotlinKeyword currentText={comma} cursorVisible={false}/>
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramHorizontalAlignment} cursorVisible={false} />
+            <KotlinDefaultText currentText={alignment + dot} cursorVisible={false} />
+            <KotlinField currentText={centerHorizontally} cursorVisible={false} />
+            <KotlinDefaultText currentText={comma} cursorVisible={false} />
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramVerticalArrangement} cursorVisible={false} />
+            <KotlinDefaultText currentText={arrangement + dot} cursorVisible={false} />
+            <KotlinField currentText={center} cursorVisible={false} />
+            <KotlinDefaultText currentText={comma} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={ tab + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + profilePictureFunction} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + modifierUpper + dot} cursorVisible={false}/>
+            <KotlinMethodName currentText={sizeLower} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false}/>
+            <KotlinMethodParam currentText={"100"} cursorVisible={false}/>
+            <KotlinDefaultText currentText={dot} cursorVisible={false}/>
+            <KotlinField currentText={dp} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureClose + methodSignatureClose} cursorVisible={false}/>
+        
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + textFun} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+
+            <KotlinMethodParam currentText={blocks[0]} cursorVisible={showCursorArray[0]}/>
+            <KotlinDefaultText currentText={blocks[1]} cursorVisible={showCursorArray[1]} />
+            <KotlinField currentText={blocks[2]} cursorVisible={showCursorArray[2]} />
+            <KotlinDefaultText currentText={blocks[3]} cursorVisible={showCursorArray[3]} />
+        
+   
+            <br />
+            <KotlinMethodParam currentText={tab3+ paramText} cursorVisible={false} />
+            <KotlinDefaultText currentText={buildAnnotatedString + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + initialGreetingStart + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontWeight} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontWeight + dot} cursorVisible={false} />
+            <KotlinField currentText={bold} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + name + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={ "\"" + initialGreetingMiddle + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontStyle + dot} cursorVisible={false} />
+            <KotlinField currentText={italic} cursorVisible={false} />
+            <KotlinDefaultText currentText={ methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + job + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+          <br />
+            <KotlinDefaultText currentText={tab + functionClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={functionClose + space} cursorVisible={false} />
+        </CodeBlock>
+    )
+}
diff --git a/app/components/code_block/states/7_fontSizeLarger.tsx b/app/components/code_block/states/7_fontSizeLarger.tsx
new file mode 100644
index 0000000..e21a2de
--- /dev/null
+++ b/app/components/code_block/states/7_fontSizeLarger.tsx
@@ -0,0 +1,139 @@
+import MultiTypeWriter from "@/components/typewriter/multi_typewriter"
+import { CodeBlock } from "../code_block"
+import { tab2, name, dot, comma, ComposableAnnotation, composableTag, KotlinKeyword, privateFun, KotlinMethodName, space, methodName, KotlinDefaultText, methodSignatureOpen, tab, modifierDeclaration, methodSignatureClose, functionOpen, KotlinFrameworkComposableOrObject, column, KotlinMethodParam, paramModifier, modifierLower, fillMaxSize, tab3, background, materialTheme, KotlinField, colorScheme, primaryContainer, textFun, paramText, KotlinString, functionClose, buildAnnotatedString, append, initialGreetingStart, tab4, withStyle, paramStyle, spanStyle, paramFontWeight, fontWeight, bold, tab5, initialGreetingMiddle, job, paramFontStyle, fontStyle, italic, profilePictureFunction, modifierUpper, sizeLower, dp, paramVerticalArrangement, arrangement, center, paramHorizontalAlignment, alignment, centerHorizontally, paramTextAlign, textAlign, paramFontSize, sp } from "../code_text"
+
+export default function FontSizeLarger({onComplete}: 
+    {
+        onComplete? : () => void
+    }) {
+    const code_blocks = [
+        tab3 + paramFontSize + space + "20",
+        dot,
+        sp,
+        comma + space
+    ]
+    const [blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
+
+    let showCursorArray : Array<boolean> = []
+    for (let n = 0; n < blocks.length; n++) {
+        showCursorArray.push(cursor_visible && (cursorPosition == n))
+    }
+ 
+    // Fixes server side rendering undefined when the array is empty!
+    if (blocks.length <= 0) {
+        console.log("rendering empty code block")
+        return <CodeBlock numberOfLines={16} >
+            </CodeBlock>
+    }
+
+    return (
+        <CodeBlock numberOfLines={24} >
+            <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
+            <br/>
+            <KotlinKeyword currentText={privateFun} cursorVisible={false} />
+            <KotlinMethodName currentText={space + methodName} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab + modifierDeclaration} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab + column} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramModifier} cursorVisible={false} />
+            <KotlinDefaultText currentText={modifierLower + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={fillMaxSize} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + dot} cursorVisible={false} />
+            <KotlinMethodName currentText={background} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureOpen + materialTheme + dot} cursorVisible={false} />
+            <KotlinField currentText={colorScheme} cursorVisible={false} />
+            <KotlinDefaultText currentText={dot} cursorVisible={false} />
+            <KotlinField currentText={primaryContainer} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <KotlinKeyword currentText={comma} cursorVisible={false}/>
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramHorizontalAlignment} cursorVisible={false} />
+            <KotlinDefaultText currentText={alignment + dot} cursorVisible={false} />
+            <KotlinField currentText={centerHorizontally} cursorVisible={false} />
+            <KotlinDefaultText currentText={comma} cursorVisible={false} />
+            <br />
+            <KotlinMethodParam currentText={tab2 + paramVerticalArrangement} cursorVisible={false} />
+            <KotlinDefaultText currentText={arrangement + dot} cursorVisible={false} />
+            <KotlinField currentText={center} cursorVisible={false} />
+            <KotlinDefaultText currentText={comma} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={ tab + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + profilePictureFunction} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen + modifierUpper + dot} cursorVisible={false}/>
+            <KotlinMethodName currentText={sizeLower} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false}/>
+            <KotlinMethodParam currentText={"100"} cursorVisible={false}/>
+            <KotlinDefaultText currentText={dot} cursorVisible={false}/>
+            <KotlinField currentText={dp} cursorVisible={false}/>
+            <KotlinDefaultText currentText={  methodSignatureClose + methodSignatureClose} cursorVisible={false}/>
+        
+            <br />
+            <KotlinFrameworkComposableOrObject currentText={tab2 + textFun} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+
+            <KotlinMethodParam currentText={paramTextAlign} cursorVisible={false}/>
+            <KotlinDefaultText currentText={space + textAlign + dot} cursorVisible={false} />
+            <KotlinField currentText={center} cursorVisible={false} />
+            <KotlinDefaultText currentText={comma} cursorVisible={false} />
+            <br />
+            <KotlinMethodParam currentText={blocks[0]} cursorVisible={showCursorArray[0]}/>
+            <KotlinDefaultText currentText={blocks[1]} cursorVisible={showCursorArray[1]} />
+            <KotlinField currentText={blocks[2]} cursorVisible={showCursorArray[2]} />
+            <KotlinDefaultText currentText={blocks[3]} cursorVisible={showCursorArray[3]} />
+            <br />
+            <KotlinMethodParam currentText={tab3+ paramText} cursorVisible={false} />
+            <KotlinDefaultText currentText={buildAnnotatedString + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + initialGreetingStart + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontWeight} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontWeight + dot} cursorVisible={false} />
+            <KotlinField currentText={bold} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + name + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+            <br/>
+            <KotlinDefaultText currentText={tab3 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={ "\"" + initialGreetingMiddle + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinMethodName currentText={tab3 + withStyle} cursorVisible={false}/>
+            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + spanStyle + methodSignatureOpen} cursorVisible={false} />
+            <KotlinMethodParam currentText={paramFontStyle} cursorVisible={false} />
+            <KotlinDefaultText currentText={space + fontStyle + dot} cursorVisible={false} />
+            <KotlinField currentText={italic} cursorVisible={false} />
+            <KotlinDefaultText currentText={ methodSignatureClose + methodSignatureClose + space + functionOpen} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab4 + append + methodSignatureOpen} cursorVisible={false} />
+            <KotlinString currentText={"\"" + job + "\""} cursorVisible={false} />
+            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={tab3 + functionClose} cursorVisible={false} />
+          <br />
+            <KotlinDefaultText currentText={tab + functionClose} cursorVisible={false} />
+            <br />
+            <KotlinDefaultText currentText={functionClose + space} cursorVisible={false} />
+        </CodeBlock>
+    )
+}
diff --git a/app/components/code_block/states/greetingCentered.tsx b/app/components/code_block/states/greetingCentered.tsx
deleted file mode 100644
index 5da8305..0000000
--- a/app/components/code_block/states/greetingCentered.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import MultiTypeWriter from "@/components/typewriter/multi_typewriter"
-import { CodeBlock } from "../code_block"
-import { tab2, paramHorizontalAlignment, alignment, dot, centerHorizontally, comma, paramVerticalArrangement, arrangement, center, ComposableAnnotation, composableTag, KotlinKeyword, privateFun, KotlinMethodName, space, methodName, KotlinDefaultText, methodSignatureOpen, tab, modifierDeclaration, methodSignatureClose, functionOpen, KotlinFrameworkComposableOrObject, column, KotlinMethodParam, paramModifier, modifierLower, fillMaxSize, tab3, background, materialTheme, KotlinField, colorScheme, primaryContainer, textFun, paramText, KotlinString, textValue, functionClose, initialGreetingString } from "../code_text"
-
-export default function HelloWorldCenteredBlock({onComplete}: 
-    {
-        onComplete? : () => void
-    }) {
-    const code_blocks = [
-        tab2 + paramHorizontalAlignment,
-        alignment + dot,
-        centerHorizontally,
-        comma,
-        tab2 + paramVerticalArrangement,
-        arrangement + dot,
-        center,
-        comma
-    ]
-    const [blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
-
-    let showCursorArray : Array<boolean> = []
-    for (let n = 0; n < blocks.length; n++) {
-        showCursorArray.push(cursor_visible && (cursorPosition == n))
-    }
- 
-    // Fixes server side rendering undefined when the array is empty!
-    if (blocks.length <= 0) {
-        return <CodeBlock numberOfLines={16} >
-            </CodeBlock>
-    }
-    return (
-        <CodeBlock numberOfLines={16} >
-            <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
-            <br/>
-            <KotlinKeyword currentText={privateFun} cursorVisible={false} />
-            <KotlinMethodName currentText={space + methodName} cursorVisible={false}/>
-            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
-            <br/>
-            <KotlinDefaultText currentText={tab + modifierDeclaration} cursorVisible={false} />
-            <br/>
-            <KotlinDefaultText currentText={methodSignatureClose + space + functionOpen} cursorVisible={false} />
-            <br />
-            <KotlinFrameworkComposableOrObject currentText={tab + column} cursorVisible={false} />
-            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
-            <br />
-            <KotlinMethodParam currentText={ tab2 + paramModifier} cursorVisible={false} />
-            <KotlinDefaultText currentText={modifierLower + dot} cursorVisible={false} />
-            <KotlinMethodName currentText={fillMaxSize} cursorVisible={false}/>
-            <KotlinDefaultText currentText={methodSignatureOpen + methodSignatureClose} cursorVisible={false} />
-            <br />
-            <KotlinDefaultText currentText={tab3 + dot} cursorVisible={false} />
-            <KotlinMethodName currentText={background} cursorVisible={false}/>
-            <KotlinDefaultText currentText={methodSignatureOpen + materialTheme + dot} cursorVisible={false} />
-            <KotlinField currentText={colorScheme} cursorVisible={false} />
-            <KotlinDefaultText currentText={dot} cursorVisible={false} />
-            <KotlinField currentText={primaryContainer} cursorVisible={false} />
-            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
-            <KotlinKeyword currentText={comma} cursorVisible={false}/>
-            <br />
-            <KotlinMethodParam currentText={blocks[0]} cursorVisible={showCursorArray[0]} />
-            <KotlinDefaultText currentText={blocks[1]} cursorVisible={showCursorArray[1]} />
-            <KotlinField currentText={blocks[2]} cursorVisible={showCursorArray[2]} />
-            <KotlinKeyword currentText={blocks[3]} cursorVisible={showCursorArray[3]}/>
-            <br />
-            <KotlinMethodParam currentText={blocks[4]} cursorVisible={showCursorArray[4]} />
-            <KotlinDefaultText currentText={blocks[5]} cursorVisible={showCursorArray[5]} />
-            <KotlinField currentText={blocks[6]} cursorVisible={showCursorArray[6]} />
-            <KotlinKeyword currentText={blocks[7]} cursorVisible={showCursorArray[7]}/>
-            <br />
-            <KotlinDefaultText currentText={ tab + methodSignatureClose + space + functionOpen} cursorVisible={false} />
-            <br />
-            <KotlinFrameworkComposableOrObject currentText={tab2 + textFun} cursorVisible={false}/>
-            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
-            <br />
-            <KotlinMethodParam currentText={tab3 + paramText} cursorVisible={false} />
-            <KotlinString currentText={initialGreetingString} cursorVisible={false} />
-            <br />
-            <KotlinDefaultText currentText={tab2 + methodSignatureClose} cursorVisible={false} />
-            <br />
-            <KotlinDefaultText currentText={tab + functionClose} cursorVisible={false} />
-            <br />
-            <KotlinDefaultText currentText={functionClose + space} cursorVisible={false} />
-        </CodeBlock>
-    )
-}
diff --git a/app/components/code_block/states/profile_picture.tsx b/app/components/code_block/states/profile_picture.tsx
deleted file mode 100644
index 824e18a..0000000
--- a/app/components/code_block/states/profile_picture.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import MultiTypeWriter from "@/components/typewriter/multi_typewriter"
-import { CodeBlock } from "../code_block"
-import { tab2, paramHorizontalAlignment, alignment, dot, centerHorizontally, comma, paramVerticalArrangement, arrangement, center, ComposableAnnotation, composableTag, KotlinKeyword, privateFun, KotlinMethodName, space, methodName, KotlinDefaultText, methodSignatureOpen, tab, modifierDeclaration, methodSignatureClose, functionOpen, KotlinFrameworkComposableOrObject, column, KotlinMethodParam, paramModifier, modifierLower, fillMaxSize, tab3, background, materialTheme, KotlinField, colorScheme, primaryContainer, textFun, paramText, KotlinString, textValue, functionClose, initialGreetingString, profilePictureFunction, modifierUpper, sizeLower, dp } from "../code_text"
-
-export default function ProfilePictureBlock({onComplete}: 
-    {
-        onComplete? : () => void
-    }) {
-    const code_blocks = [
-        tab2 + profilePictureFunction,
-        methodSignatureOpen + modifierUpper + dot,
-        sizeLower,
-        methodSignatureOpen,
-        "100",
-        dot,
-        dp,
-        methodSignatureClose + methodSignatureClose
-    ]
-    const [blocks, cursor_visible, cursorPosition] = MultiTypeWriter(code_blocks, onComplete)
-
-    let showCursorArray : Array<boolean> = []
-    for (let n = 0; n < blocks.length; n++) {
-        showCursorArray.push(cursor_visible && (cursorPosition == n))
-    }
- 
-    // Fixes server side rendering undefined when the array is empty!
-    if (blocks.length <= 0) {
-        return <CodeBlock numberOfLines={16} >
-            </CodeBlock>
-    }
-    return (
-        <CodeBlock numberOfLines={16} >
-            <ComposableAnnotation currentText={composableTag} cursorVisible={false} />
-            <br/>
-            <KotlinKeyword currentText={privateFun} cursorVisible={false} />
-            <KotlinMethodName currentText={space + methodName} cursorVisible={false}/>
-            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
-            <br/>
-            <KotlinDefaultText currentText={tab + modifierDeclaration} cursorVisible={false} />
-            <br/>
-            <KotlinDefaultText currentText={methodSignatureClose + space + functionOpen} cursorVisible={false} />
-            <br />
-            <KotlinFrameworkComposableOrObject currentText={tab + column} cursorVisible={false} />
-            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
-            <br />
-            <KotlinMethodParam currentText={ tab2 + paramModifier} cursorVisible={false} />
-            <KotlinDefaultText currentText={modifierLower + dot} cursorVisible={false} />
-            <KotlinMethodName currentText={fillMaxSize} cursorVisible={false}/>
-            <KotlinDefaultText currentText={methodSignatureOpen + methodSignatureClose} cursorVisible={false} />
-            <br />
-            <KotlinDefaultText currentText={tab3 + dot} cursorVisible={false} />
-            <KotlinMethodName currentText={background} cursorVisible={false}/>
-            <KotlinDefaultText currentText={methodSignatureOpen + materialTheme + dot} cursorVisible={false} />
-            <KotlinField currentText={colorScheme} cursorVisible={false} />
-            <KotlinDefaultText currentText={dot} cursorVisible={false} />
-            <KotlinField currentText={primaryContainer} cursorVisible={false} />
-            <KotlinDefaultText currentText={methodSignatureClose} cursorVisible={false} />
-            <KotlinKeyword currentText={comma} cursorVisible={false}/>
-            <br />
-            <KotlinMethodParam currentText={tab2 + paramHorizontalAlignment} cursorVisible={false} />
-            <KotlinDefaultText currentText={alignment + dot} cursorVisible={false} />
-            <KotlinField currentText={centerHorizontally} cursorVisible={false} />
-            <KotlinKeyword currentText={comma} cursorVisible={false}/>
-            <br />
-            <KotlinMethodParam currentText={tab2 + paramVerticalArrangement} cursorVisible={false} />
-            <KotlinDefaultText currentText={arrangement + dot} cursorVisible={false} />
-            <KotlinField currentText={center} cursorVisible={false} />
-            <KotlinKeyword currentText={comma} cursorVisible={false}/>
-            <br />
-            <KotlinDefaultText currentText={ tab + methodSignatureClose + space + functionOpen} cursorVisible={false} />
-            <br />
-
-            <KotlinFrameworkComposableOrObject currentText={blocks[0]} cursorVisible={showCursorArray[0]}/>
-            <KotlinDefaultText currentText={blocks[1]} cursorVisible={showCursorArray[1]} />
-            <KotlinMethodName currentText={blocks[2]} cursorVisible={showCursorArray[2]}/>
-            <KotlinDefaultText currentText={blocks[3]} cursorVisible={showCursorArray[3]} />
-            <KotlinMethodParam currentText={blocks[4]} cursorVisible={showCursorArray[4]} />
-            <KotlinDefaultText currentText={blocks[5]} cursorVisible={showCursorArray[5]} />
-            <KotlinField currentText={blocks[6]} cursorVisible={showCursorArray[6]} />
-            <KotlinDefaultText currentText={blocks[7]} cursorVisible={showCursorArray[7]} />
-
-            <br />
-            <KotlinFrameworkComposableOrObject currentText={tab2 + textFun} cursorVisible={false}/>
-            <KotlinDefaultText currentText={methodSignatureOpen} cursorVisible={false} />
-            <br />
-            <KotlinMethodParam currentText={tab3 + paramText} cursorVisible={false} />
-            <KotlinString currentText={initialGreetingString} cursorVisible={false} />
-            <br />
-            <KotlinDefaultText currentText={tab2 + methodSignatureClose} cursorVisible={false} />
-            <br />
-            <KotlinDefaultText currentText={tab + functionClose} cursorVisible={false} />
-            <br />
-            <KotlinDefaultText currentText={functionClose + space} cursorVisible={false} />
-        </CodeBlock>
-    )
-}
\ No newline at end of file