About my website
This site is my personal site for my interests. It is non-commercial and has no advertising, cookies, etc.. The subsites were originally contained in the original “Kosmonavtka” (Russian for “lady cosmonaut”) site at Yahoo! Geocities free hosting, but they grew, as sites seem to do! It has grown organically and its structure reflects this.
New pages are added to the site only occasionally, and others removed if they lose relevance. My Journal is the most active section.
Site history
I only began using the Internet in 2001, aged 30. During that year I was writing some International Space Station-related fiction stories for myself and gathered a lot of material and links during my research, and thought that I could put this together in the form of a website. After teaching myself some basic HTML from a children’s book borrowed from my local library, the “Kosmonavtka” site was first created at Yahoo! Geocities under the URL http://au.geocities.com/kosmonavtka2/, and first uploaded on 21 September 2003. (That URL is now inactive – see an old version of the site at Archive.org.) “Kosmonavtka,” Космонавтка, is Russian for “lady cosmonaut”; I could not think of a site name so that was the best I could come up with. It was intended to to provide information about the Russian space program that I felt was interesting and (hopefully) useful. In 2010 I renamed it to “RuSpace” (Russian Spaceflight).
The site kept growing so it branched into separate sites. I created the Sergei Krikalyov site at http://au.geocities.com/krikalyov/ on 6 October 2004 and a couple of others (now defunct). I deleted these after opening suzymchale.com on 8 September 2005. (Sadly, Yahoo! closed Geocities sites in October 2009, deleting a lot of the Web’s amateur user history – “GeoCities was the largest self-created folk-art collection in the history of the world,” Jason Scott – though some sites were saved by others.)
I chose the domain name because it seemed the logical choice (I am no good at inventing imaginative site names) and, though not a commercial site, the .com ending is easy to remember. An alternate choice was kosmonavtka.com, but I would be forever having to explain to people what a “kosmonavtka” was, so suzymchale.com was the more practical choice (and seeing as my spaceflight interest waned in later years, a wise one!).
(♥ Grateful thanks to George R. Kasica for hosting my site! ♥)
Site gallery
In this section are some captures of the front pages of my site over the years. I only have tiny versions of most of the early ones as I wasn’t thinking to archive my site’s appearance then. I am not the most original at web design, but feel my sites have been reasonably neat and non-offensive. I have always written my own HTML and CSS code, as opposed to using a template.
2003
Just starting out, and one site about Russian spaceflight at Yahoo! Geocities (http://au.geocities.com/kosmonavtka2/). After reading a beginner’s guide to HTML (one aimed at children!), I created a simple table layout with a starry background. I do miss Geocities now – it was basic but free, and I could upload my own HTML without interference. I detest site builders!
2004
Redesigns (still using a table layout, and learning some CSS) and added a site about then-active Russian cosmonaut Sergei Krikalyov on another Yahoo domain (http://au.geocities.com/krikalyov/).
2005
Added another Geocities site (http://au.geocities.com/suzymchale/) for my personal information. I was going through a Russia-obsessive phase (if it isn’t obvious!). I still like the colored by CSS scrollbars – unfortunately browsers disallow them now :-(
2006
I now had my own domain name, so I had a main portal page and 4 sub-sites (“Kosmonavtka,” “MKS” – about the International Space Station, a journal and Sergei Krikalyov). I was transitioning toward using CSS for layout rather than outdated tables.
2007
My themes were more harmonized. I merged the “MKS” site back into the “Kosmonavtka” one after its screenshot here. The sites looked much like this, with only minor design tweakings, for the next few years.
This personal site (no longer online) was done for a family friend. I still quite like the color scheme and design. Bill bought the domain name http://www.wjwaters.com/. It is long since defunct; the main page has been preserved at Archive.org. (I have merged the pages onto one page here.)
2013
Doing full CSS layouts now, and the site design hadn’t changed much in a few years. “Star Warrior” worldbuilding site added; “Kosmonavtka” renamed to “RuSpace” (Russian Spaceflight).
2014
A moderate site redesign (somewhat imitating a “flat design” look) and down to 3 sub-sites now; “Sergei Krikalyov” site deleted (but archived on my computer). I also have quite a few external sites (social networks, blogs, etc), though these aren’t often updated.
Some minor tweakings.
More journal redesigns.
2015
Still working with HTML and CSS only. I was aware of the latest web design fads and technologies, but found them a bit daunting to contemplate learning and preferred a relatively simple site that just sat on the screen quietly. As my site was quite large by now – a few hundred hand-coded pages – I periodically considered moving to a CMS such as Wordpress, but the thought of trying to convert all those pages was also daunting, and a CMS would add complexity and dependence upon more programs just to view and edit my site.
A redesign which I only kept for 3 days, though nothing very radical. I won’t include the other sections as layout was the same. Accent colors: Main – #9575cd; Journal – #ff9700; RuSpace – #6699ff; Star Warrior – #3fb87d.
A following redesign which also lasted less than a week! This was based on the Dokuwiki default template current at the time. I may reuse it sometime, though.
And another design, with a wider header and footer, and navigation at the bottom, but I went back to the more conventional layout a week or so later.
Screenshot, 30 July 2015. Colors for sections: #9575cd / rgb(149,117,205), #f06292 / rgb(240,98,146), #f57d00 / rgb(245,125,0), #6699ff / rgb(102,153,255), #3fb87d / rgb(63,184,125); grey colors: #131313 / rgb(19,19,19), #595959 / rgb(89,89,89), #a0a0a0 / rgb(160,160,160), #e7e7e7 / rgb(231,231,231)
2016
Screenshot, 23 November 2016; a simplified design. Colors for sections are the same as the previous image.
2017
Screenshot, 9 March 2017; still much the same design. Also on the right is a shot of how it appears in Internet Explorer 8 – some of the CSS styles don’t work due to the age of that browser version (and same for earlier versions), but the site is still readable (“progressive enhancement”).
2022
Screenshot, 2 September 2022; changed the background of each site section to its color theme. Colors for sections are the same as the previous image.
2023
Screenshot, 12 May 2023; simplified a bit more. Colors for subdirectories changed slightly to “web-safe” versions: #96c (purple), #f69 (pink), #f60 (orange), #69f (blue), #096 (green). Grey colors: #131313, #595959, #a0a0a0, #e7e7e7.
2024
1/11/2024
Site design still the same, but decided to change the hue of the colors to the web-safe versions of the classic iMac G3 fruit flavors! (See my 1/11/2024 Journal entry.) So now they are: #669 (Grape), #c06 (Strawberry), #f93 (Tangerine), #09c (Blueberry), #093 (Lime); #036 (Indigo) or #666 (Graphite); #099 (Bondi Blue). Grey: #ccc.
Screenshot of my website as displayed in the CERN 2019 WorldWideWeb Rebuild emulator of its original 1990 web browser – still visible and navigable (though no images as these were not in the original HTML specification back then)!
Screenshot of my website as displayed in the text-only Lynx browser; still accessible!
Design notes
The HTML markup and CSS are all handmade by myself in a variety of website editors – no templates are used on my site. I have always written my own markup. (My CSS file can be viewed here.)
I have deliberately kept the site design simple to make maintenance easier, hopefully future-proof it and to load fast. I want to be able to read it offline without need of a server for my own archival purposes (setting up a local server is a complex and finicky process), so main navigation is via the hierarchical “breadcrumbs” at the top and bottom of each page. I put all .html files of a particular subsite in the one directory as I find this easier to maintain, compared to dividing them up into many topical subdirectories.
I have tried to make my site reasonably accessible by using structured semantic HTML markup (eg. h1, h2, etc. for headers, p for paragraphs, etc.). I use the alt attribute for images. The site is readable in a text-only browser such as Lynx, and with images and style sheets disabled, using the philosophy of progressive enhancement or graceful degradation.
One aspect of website layout I have some trouble deciding upon is navigation! I vary between having conventional links at the top of the page, to a minimalist approach with only the most basic links (a top hierarchical “breadcrumb” trail for navigating up levels, and links to the site map and home at the bottom of each page). The latter option is preferable for my own offline local use as the top global navigation bar needs a server to be included on each page (server-side includes), and setting up a server on my own computer has proven to be a difficult and involved task which I gave up on. So expect the navigation to change depending upon my mood! It currently only uses the breadcrumbs, and links to the Home and Site Map pages at the bottom; I have found these adequate.
I use a somewhat random mixture of American and British spelling and punctuation. Some examples:
- Spelling: I tend to use American-style (eg. color rather than colour, program rather than programme), for the pragmatic reason that there are fewer letters!
- I use American double quotes (“”) rather than British single quotes (‘’) for conversations, etc.; I find the British style irritating. It also makes search-and-replace more difficult as the right single quote and apostrophe are the same.
- However I do use a British-style lower case letter after a colon (:).
The ASCII text-based emoticons I might use (some reference websites: Common Text Emoticons; List of emoticons). Hover your mouse pointer over these little “faces” for a descriptive tooltip. For accessibility, I wrap them in <abbr></abbr> tags and give them a title. (I might also just use a word surrounded by asterisks – eg. *shrug*, *grin*, *smile* – an asterisk action.)
| Symbol | Meaning |
|---|---|
| >:-( | Angry, annoyed |
| :'-( | Crying, upset |
| :-*) | Embarrassed, blushing |
| 8-| | Eyeroll |
| >:-) | Evil/wicked grin |
| X= | Crossed fingers (hoping for good luck) |
| :-D | Grin |
| <3 | Heart (broken heart: </3) |
| :-) | Smile, happy |
| :-O | Shocked, surprised |
| :-P | Poke/stick out tongue |
| :-( | Sad, unhappy |
| :-S | Sarcasm |
| :-> | Smirk |
| :O= | Vomit; nauseous (literally or figuratively) |
| :-/ | Whatever, indifferent |
| ;-) | Wink |
I also use named HTML entities for some symbols.
HTML test section
Below are the HTML tags I use most often, as styled for my website.
Heading 1
Heading 2
Heading 3; link
Heading 4
Heading 5
Heading 6
Paragraph
- Definition List Title
- This is a definition list division.
- Unordered list
- Unordered list
- Ordered (numbered) list
- Ordered (numbered) list
A blockquote.
Nested blockquotes.
Nested blockquotes × 2.
Nested blockquotes × 3.
Horizontal rule:
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Links: External (to this page on my external website), local (this page), local anchor link (this page).
Strong is used to indicate strong importance.
This text has added emphasis.
The b element is stylistically different text from normal text, without any special importance.
The i element is text that is offset from the normal text.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deleted and This text is inserted.
This text has a strikethrough.
Superscript ©.
Subscript for things like H2O.
This small text is small for fine print, etc.
Abbreviation: HTML
This text is a short inline quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
Keyboard input: Cmd
Inline code: <div>code</div>
Sample output: This is sample output from a computer program.
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Thursday, 9 April 2026 at 11:15:00 am