Sue Doe

Sue is a developer who has two career goals: Direct and Deposit.

She loves writing software almost as much as she loves going home at 5. She's an excellent programmer who's very familiar with the business and users but has grown cynical of corporate culture. When things become illogical (almost daily), she puts it out of her mind and gets back to work.

She finds refuge in code over which she has some control, unlike most people. If only she could write an app that made non-programmers leave her alone! Or at least make sense when they didn't.

She fiercely guards the code and people important to her and pretty much ignores everything else. She's become the unofficial class clown in meetings without even trying. She says what everyone's thinking but is afraid to say themselves. Things like, "What does VSM mean? Value Stream Mapping? Or Very Stupid Management?"

Inspired by:Leslie, Wendy, Terri, Joyce, Jennifer
Primary Motivation:keep working no matter what else is happening
Pet Peeve:corporate idiocy
Catch Phrase:"Take a chill pill. It's only ones and zeroes."
Biggest Accomplishment:building an ecommerce site faster than 12 consultants
Favorite Movie:Thelma and Louise
Favorite book:Softwisdom


How Sue is Drawn

Sue is drawn with 45 rectangles, each with a border and some with rounded corners or slanted angles. These rectangles are described by data stored as arguments that are converted by software into HTML that your browser displays as pictures. Check out this Javascript example of code you can play with to alter my characters or create your own. Here are Sue's arguments:

Line left:89 top:27 width:0 height:100 bdrWth:0 leftWth:2 Angle:00
Sue, Dev
Talk left:0 top:0 width:152 bdrWth:10 font-size:15 bdrClr:mediumaquamarine background:mediumaquamarine text-align:center ClipWth:264
Sue, Dev
Person left:20 top:108 bdrWth:0
Sue, Dev
BackHair1 left:27 top:25 width:76 height:76 bdrWth:6 botWth:0 topLftRad:36 topRgtRad:36 bdrClr:black background:black ClipHgt:45
Sue, Dev
BackHair2 left:12 top:84 width:55 height:55 radius:50% background:black Angle:140 ClipHgt:24
Sue, Dev
BackHair3 left:9 top:73 width:48 height:48 radius:50% background:black Angle:130 ClipHgt:24
Sue, Dev
BackHair4 left:6 top:52 width:48 height:48 radius:50% background:black Angle:120 ClipHgt:24
Sue, Dev
BackHair5 left:73 top:78 width:55 height:55 radius:50% background:black Angle:-130 ClipHgt:24
Sue, Dev
BackHair6 left:84 top:73 width:48 height:48 radius:50% background:black Angle:-130 ClipHgt:24
Sue, Dev
BackHair7 left:84 top:52 width:48 height:48 radius:50% background:black Angle:-130 ClipHgt:24
Sue, Dev
LeftEar left:15 top:63 width:11 height:18 radius:9 background:#fbc994 Angle:-15
Sue, Dev
RightEar left:111 top:63 width:11 height:18 radius:9 background:#fbc994 Angle:15
Sue, Dev
LeftEaring left:16 top:81 width:7 height:7 radius:50% background:mediumblue
Sue, Dev
RightEaring left:113 top:81 width:7 height:7 radius:50% background:mediumblue
Sue, Dev
Torso left:7 top:113 width:120 height:120 radius:45 background:salmon
Sue, Dev
Face left:24 top:35 width:89 height:89 radius:45 background:#fbc994
Sue, Dev
LeftEye left:16 top:31 width:22 height:15 radius:50% background:white overflow:hidden
Sue, Dev
LeftEyelid left:0 top:6 width:951900 height:0 bdrWth:0 topWth:2
Sue, Dev
LeftPupil left:7 top:6 width:9 height:4 topLftRad:0 topRgtRad:0 botLftRad:21 botRgtRad:21 background:darkseagreen
Sue, Dev
LeftMascara left:16 top:31 width:22 height:15 radius:50% background:#fbc994 overflow:hidden ClipWth:9599 ClipHgt:8
Sue, Dev
Eyelash1 left:12 top:33 width:15 height:1 bdrWth:0 topWth:2 Angle:40
Sue, Dev
Eyelash2 left:9 top:34 width:15 height:1 bdrWth:0 topWth:2 Angle:30
Sue, Dev
Eyelash3 left:9 top:36 width:9 height:1 bdrWth:0 topWth:2 Angle:10
Sue, Dev
RightEye left:46 top:31 width:22 height:15 radius:50% background:white overflow:hidden
Sue, Dev
RightEyelid left:0 top:6 width:951900 height:0 bdrWth:0 topWth:2
Sue, Dev
RightPupil left:4 top:6 width:9 height:4 topLftRad:0 topRgtRad:0 botLftRad:21 botRgtRad:21 background:darkseagreen
Sue, Dev
RightMascara left:46 top:31 width:22 height:15 radius:50% background:#fbc994 overflow:hidden ClipWth:9599 ClipHgt:8
Sue, Dev
Eyelash4 left:60 top:33 width:15 height:1 bdrWth:0 topWth:2 Angle:-40
Sue, Dev
Eyelash5 left:63 top:34 width:15 height:1 bdrWth:0 topWth:2 Angle:-30
Sue, Dev
Eyelash6 left:69 top:36 width:9 height:1 bdrWth:0 topWth:2 Angle:-10
Sue, Dev
LeftEyebrow left:22 top:24 width:22 height:15 bdrWth:0 topWth:2 Angle:-20
Sue, Dev
RightEyebrow left:45 top:24 width:22 height:15 bdrWth:0 topWth:2 Angle:20
Sue, Dev
Mouth left:31 top:64 width:27 height:12 topLftRad:21 topRgtRad:21 botLftRad:0 botRgtRad:0 background:lightcoral overflow:hidden
Sue, Dev
Tongue1 left:0 top:3 width:135 height:0 bdrWth:0 topWth:2
Sue, Dev
Tongue2 left:6 top:7 width:12 height:12 radius:50% background:firebrick
Sue, Dev
Teeth left:31 top:64 width:27 height:12 topLftRad:21 topRgtRad:21 botLftRad:0 botRgtRad:0 background:white overflow:hidden ClipWth:9599 ClipHgt:5
Sue, Dev
Nose1 left:40 top:52 width:12 height:1 bdrWth:0 topWth:2 Angle:80
Sue, Dev
Nose2 left:39 top:56 width:9 height:1 bdrWth:0 topWth:2 Angle:20
Sue, Dev
Earpiece left:-4 top:38 width:3 height:9 radius:50% background:black
Sue, Dev
Headset left:1 top:31 width:37 height:37 radius:35% Angle:-140 ClipHgt:11
Sue, Dev
Mike left:22 top:67 width:7 height:3 radius:50% background:black
Sue, Dev
FrontHair1 left:0 top:0 width:58 height:60 radius:50% background:black Angle:140 ClipHgt:15
Sue, Dev
FrontHair2 left:80 top:0 width:58 height:60 radius:50% background:black Angle:-140 ClipHgt:15
Sue, Dev
FrontHair3 left:46 top:6 width:45 height:45 radius:50% background:black Angle:180 ClipHgt:22
Sue, Dev
Name left:43 top:130 bdrWth:0 font-size:13
Sue, Dev

The Resulting HTML:

<div id='Panel1' class='aaa' style='position:relative; width:166px; height:257px; border:2px solid; background-color:mediumaquamarine; color:black; display:inline-block; vertical-align:top; font-family:Ssans-serif,cursive,sans-serif; margin-right:0px; overflow:hidden; margin-bottom:5px; '>

<div id='Line' class='abs2' style='left:89px; top:27px; width:0; height:100px; border-width:0; border-left-width:2px; transform:rotate(00deg); '></div>

<div id='Talk' class='abs2' style='left:0; top:0; width:152px; border-width:10px; font-size:15px; border-color:mediumaquamarine; background:mediumaquamarine; text-align:center; clip:rect(0 264px 9999px 0); font-weight:bold; '> BLAH BLAH BLAH</div>

<div id='Person' class='abs2' style='left:20px; top:108px; border-width:0; '>

<div id='BackHair1' class='abs2' style='left:27px; top:25px; width:76px; height:76px; border-width:6px; border-bottom-width:0; border-top-left-radius:36px; -moz-border-top-left-radius:36px; -webkit-border-top-left-radius:36px; border-top-right-radius:36px; -moz-border-top-right-radius:36px; -webkit-border-top-right-radius:36px; border-color:black; background:black; clip:rect(0 9999px 45px 0); '></div>

<div id='BackHair2' class='abs2' style='left:12px; top:84px; width:55px; height:55px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(140deg); clip:rect(0 9999px 24px 0); '></div>

<div id='BackHair3' class='abs2' style='left:9px; top:73px; width:48px; height:48px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(130deg); clip:rect(0 9999px 24px 0); '></div>

<div id='BackHair4' class='abs2' style='left:6px; top:52px; width:48px; height:48px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(120deg); clip:rect(0 9999px 24px 0); '></div>

<div id='BackHair5' class='abs2' style='left:73px; top:78px; width:55px; height:55px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-130deg); clip:rect(0 9999px 24px 0); '></div>

<div id='BackHair6' class='abs2' style='left:84px; top:73px; width:48px; height:48px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-130deg); clip:rect(0 9999px 24px 0); '></div>

<div id='BackHair7' class='abs2' style='left:84px; top:52px; width:48px; height:48px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-130deg); clip:rect(0 9999px 24px 0); '></div>

<div id='LeftEar' class='abs2' style='left:15px; top:63px; width:11px; height:18px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; background:#fbc994; transform:rotate(-15deg); '></div>

<div id='RightEar' class='abs2' style='left:111px; top:63px; width:11px; height:18px; border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; background:#fbc994; transform:rotate(15deg); '></div>

<div id='LeftEaring' class='abs2' style='left:16px; top:81px; width:7px; height:7px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:mediumblue; '></div>

<div id='RightEaring' class='abs2' style='left:113px; top:81px; width:7px; height:7px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:mediumblue; '></div>

<div id='Torso' class='abs2' style='left:7px; top:113px; width:120px; height:120px; border-radius:45px; -moz-border-radius:45px; -webkit-border-radius:45px; background:salmon; '></div>

<div id='Face' class='abs2' style='left:24px; top:35px; width:89px; height:89px; border-radius:45px; -moz-border-radius:45px; -webkit-border-radius:45px; background:#fbc994; '>

<div id='LeftEye' class='abs2' style='left:16px; top:31px; width:22px; height:15px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:white; overflow:hidden; margin-bottom:5px; '>

<div id='LeftEyelid' class='abs2' style='left:0; top:6px; width:951900px; height:0; border-width:0; border-top-width:2px; '></div>

<div id='LeftPupil' class='abs2' style='left:7px; top:6px; width:9px; height:4px; border-top-left-radius:0; -moz-border-top-left-radius:0; -webkit-border-top-left-radius:0; border-top-right-radius:0; -moz-border-top-right-radius:0; -webkit-border-top-right-radius:0; border-bottom-left-radius:21px; -moz-border-bottom-left-radius:21px; -webkit-border-bottom-left-radius:21px; border-bottom-right-radius:21px; -moz-border-bottom-right-radius:21px; -webkit-border-bottom-right-radius:21px; background:darkseagreen; '></div>

</div> <!close LeftEye>

<div id='LeftMascara' class='abs2' style='left:16px; top:31px; width:22px; height:15px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:#fbc994; overflow:hidden; clip:rect(0 9599px 8px 0); '></div>

<div id='Eyelash1' class='abs2' style='left:12px; top:33px; width:15px; height:2px; border-width:0; border-top-width:2px; transform:rotate(40deg); '></div>

<div id='Eyelash2' class='abs2' style='left:9px; top:34px; width:15px; height:2px; border-width:0; border-top-width:2px; transform:rotate(30deg); '></div>

<div id='Eyelash3' class='abs2' style='left:9px; top:36px; width:9px; height:2px; border-width:0; border-top-width:2px; transform:rotate(10deg); '></div>

<div id='RightEye' class='abs2' style='left:46px; top:31px; width:22px; height:15px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:white; overflow:hidden; margin-bottom:5px; '>

<div id='RightEyelid' class='abs2' style='left:0; top:6px; width:951900px; height:0; border-width:0; border-top-width:2px; '></div>

<div id='RightPupil' class='abs2' style='left:4px; top:6px; width:9px; height:4px; border-top-left-radius:0; -moz-border-top-left-radius:0; -webkit-border-top-left-radius:0; border-top-right-radius:0; -moz-border-top-right-radius:0; -webkit-border-top-right-radius:0; border-bottom-left-radius:21px; -moz-border-bottom-left-radius:21px; -webkit-border-bottom-left-radius:21px; border-bottom-right-radius:21px; -moz-border-bottom-right-radius:21px; -webkit-border-bottom-right-radius:21px; background:darkseagreen; '></div>

</div> <!close RightEye>

<div id='RightMascara' class='abs2' style='left:46px; top:31px; width:22px; height:15px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:#fbc994; overflow:hidden; clip:rect(0 9599px 8px 0); '></div>

<div id='Eyelash4' class='abs2' style='left:60px; top:33px; width:15px; height:2px; border-width:0; border-top-width:2px; transform:rotate(-40deg); '></div>

<div id='Eyelash5' class='abs2' style='left:63px; top:34px; width:15px; height:2px; border-width:0; border-top-width:2px; transform:rotate(-30deg); '></div>

<div id='Eyelash6' class='abs2' style='left:69px; top:36px; width:9px; height:2px; border-width:0; border-top-width:2px; transform:rotate(-10deg); '></div>

<div id='LeftEyebrow' class='abs2' style='left:22px; top:24px; width:22px; height:15px; border-width:0; border-top-width:2px; transform:rotate(-20deg); '></div>

<div id='RightEyebrow' class='abs2' style='left:45px; top:24px; width:22px; height:15px; border-width:0; border-top-width:2px; transform:rotate(20deg); '></div>

<div id='Mouth' class='abs2' style='left:31px; top:64px; width:27px; height:12px; border-top-left-radius:21px; -moz-border-top-left-radius:21px; -webkit-border-top-left-radius:21px; border-top-right-radius:21px; -moz-border-top-right-radius:21px; -webkit-border-top-right-radius:21px; border-bottom-left-radius:0; -moz-border-bottom-left-radius:0; -webkit-border-bottom-left-radius:0; border-bottom-right-radius:0; -moz-border-bottom-right-radius:0; -webkit-border-bottom-right-radius:0; background:lightcoral; overflow:hidden; margin-bottom:5px; '>

<div id='Tongue1' class='abs2' style='left:0; top:3px; width:135px; height:0; border-width:0; border-top-width:2px; '></div>

<div id='Tongue2' class='abs2' style='left:6px; top:7px; width:12px; height:12px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:firebrick; '></div>

</div> <!close Mouth>

<div id='Teeth' class='abs2' style='left:31px; top:64px; width:27px; height:12px; border-top-left-radius:21px; -moz-border-top-left-radius:21px; -webkit-border-top-left-radius:21px; border-top-right-radius:21px; -moz-border-top-right-radius:21px; -webkit-border-top-right-radius:21px; border-bottom-left-radius:0; -moz-border-bottom-left-radius:0; -webkit-border-bottom-left-radius:0; border-bottom-right-radius:0; -moz-border-bottom-right-radius:0; -webkit-border-bottom-right-radius:0; background:white; overflow:hidden; clip:rect(0 9599px 5px 0); '></div>

<div id='Nose1' class='abs2' style='left:40px; top:52px; width:12px; height:2px; border-width:0; border-top-width:2px; transform:rotate(80deg); '></div>

<div id='Nose2' class='abs2' style='left:39px; top:56px; width:9px; height:2px; border-width:0; border-top-width:2px; transform:rotate(20deg); '></div>

<div id='Earpiece' class='abs2' style='left:-4px; top:38px; width:3px; height:9px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; '></div>

<div id='Headset' class='abs2' style='left:2px; top:31px; width:37px; height:37px; border-radius:35%; -moz-border-radius:35%; -webkit-border-radius:35%; transform:rotate(-140deg); clip:rect(0 9999px 11px 0); '></div>

<div id='Mike' class='abs2' style='left:22px; top:67px; width:7px; height:3px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; '></div>

</div> <!close Face>

<div id='FrontHair1' class='abs2' style='left:0; top:0; width:58px; height:60px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(140deg); clip:rect(0 9999px 15px 0); '></div>

<div id='FrontHair2' class='abs2' style='left:80px; top:0; width:58px; height:60px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(-140deg); clip:rect(0 9999px 15px 0); '></div>

<div id='FrontHair3' class='abs2' style='left:46px; top:6px; width:45px; height:45px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:black; transform:rotate(180deg); clip:rect(0 9999px 22px 0); '></div>

<div id='Name' class='abs2' style='left:43px; top:130px; border-width:0; font-size:13px; font-weight:bold; '>,&nbspDev</div>

</div> <!close Person>

</div> <!close Panel1 ()>



All email answered.  edw519 at gmail
Copyright © 2017 Ed Weissman