Finally!

After almost a year of owning iameric.net, I have finally finished building my personal website to use my domain with! It has been a long road of on-and-off development, but it is now in a state where I am pretty happy with the design and functionality. The purpose of the site is really just to document some of the things I do - mostly related to programming, but there could be some articles about other things in the future too.

I have built it using GatsbyJS, a Javascript static site generator. It comes with a lot of handy features which have made development easy - and I got to learn quite a bit about ReactJS too, since Gatsby is built on top of it. I have tried to keep the design reasonably simple so that it's not too hard to maintain or tweak.

If you would like to know more about the site, take a look at the projects page I have about it.

Thanks for visiting!

The below is just a reference of all the different styles and elements that can be used in articles.

Header 1

Usage: # Big Header, ## Smaller, etc.

Header 2

And...

Header 3

And...

Header 4

Almost there...

Header 5

Thats enough!

Emphasis

Emphasis, aka italics, with 1 asterisk or underscore before and after the content.

Strong emphasis, aka bold, with 2 asterisks or underscores before and after the content.

Combined emphasis with asterisks and underscores.

Strike-through uses two tildes. Scratch this.

Lists

Ordered list... type it as you see it (1., 2., 3.).

1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3

It seems that there needs to be some text in-between different lists - white space is not enough. Even changing from ordered to unordered, it will just think it is all part of the first list. Unordered can be done with -, + and *.

• Hello 1
• Hello 2
• Hello 3
• Hello 4

Tables

Puts it in a standard HTML Table with <table>, <thead>, <tbody>, etc. Alignment is controlled by putting a colon (:) on either (or both) sides of the header splitter in markdown. e.g. :--- is left, :---: is middle and ---: is right. Columns are separated by a vertical bar |.

The following table has no alignment:

Block quotes

These put the text inside a <p> element within a <blockquote> element. Used by prefixing line with >.

Block Quote First line.
Block Quote Second Line. In order for there to be a second line, the first line needs to end with 2 spaces.

Horizontal Rules

These create a <hr> element. 3 hyphens (---), asterisks (***) or underscores (___) can be used to make one.

Nice.

Links

Usage: text goes in [], and link goes in () immediately after.

Here is a link to Google.

Here is a link to the Projects page.

Media

Embedded images use ![Descriptive Text](link to image). Here is a random image from the Unsplash image API:

Embedded videos use the "gatsby-remark-embed-video" plugin. Usage: "youtube: <link>"

Programming and code snippets

Embedding Github Snippets might be nice, but it would require using another Gatsby Markdown package, so I will leave it out for now.

Instead, format code using Prism.js with a custom theme!

function hereIsAJavascriptFunction(param) {
	// Comment
	let thing = 1 + 2;
	var a = 33.3 + thing;
	console.log("Awesome!");
}

func some_function(something: Variant, dict: Dictionary):
  # Comment
  for i in range(5):
    pass
  pass

namespace A.CSharp.Name.Space {
  public class ACSharpClass {
    public static int count = 0;
    public string name { get; set; }

    public static void ACSharpMethod(int testParam)
    {
      /* A Comment */
      Console.WriteLine("Here is some really nice C# code")
      Something.MySpecialClass.print("Hello!")
    }
  }
}

-- A SQL Query
SELECT *
FROM product