diff --git a/about.html b/about.html new file mode 100644 index 000000000..85c438b68 --- /dev/null +++ b/about.html @@ -0,0 +1,54 @@ + + + + + Personal Website | About + + + + + + + + +
+

About

+ + Nkiru + +
+

+ Hi, I am Nkiru. +

+ +

+ Foodie. Explorer. Gardener. Music Lover. Aspiring software developer. +

+ +

+ Currently on a quest to become a code slayer at Ada Developers Academy. +

+ +

+ Mantra: Live Purely. Be quiet. Do your work with mastery. Like the moon, come out from behind the clouds! Shine! +

+
+ +
+ + + + diff --git a/hobby-blog.html b/hobby-blog.html new file mode 100644 index 000000000..73948b248 --- /dev/null +++ b/hobby-blog.html @@ -0,0 +1,120 @@ + + + + + Personal Website | Blog + + + + + + + + +
+ +
+

Blog Posts

+

+ The musicals that leave us kind of staggering on our feet are the ones that really reach for a lot. ----Lin-Manuel Miranda +

+
+ +
+
+

Sound of Music

+

September 16, 2017

+ + Sound of Music + +
+

+ One of the most uplifting sound tracks till date. Rogers and Hammerstein were well known for musicals in the 60s. "I have confidence in sunshine, I have confidence in rain. I have confidence that they will put me to the test and believe it or not I have confidence in me." If that isn’t a pep talk relevant to now, I don’t know what is. Maria singing to herself on her way to her first job. + + The ability to set such beautiful music against the backdrop of a tragic time in history is commendable. +

+
+
+ +
+

My Fair Lady

+

September 16, 2017

+ + My Fair Lady + +
+

+ A very funny story on class, manners and how we are judged by our accents and backgrounds. It is also a story of personal branding and a lack of identity. +

+

+ A man able to clean up a guttersnipe and present her months later to the society by changing her accent and dresscode. How many such guttersnipes (impostors) do we have in society today… I could have danced all night..beautiful!. +

+
+
+ +
+

The King and I

+

September 16, 2017

+ + The King and I + +
+

+ Subtle yet exciting film on slavery, colonization and gender politics. A king with 100 wives and concubines has to seek council of a ‘lowly’ woman to manage strained relationships with the English. She does not fit the preferred role of sex object. How much has changed..? +

+ +

+ Yet again, another Rogers and Hammerstein collaboration. The lyrics of the songs are so clever, its hard not to smile when singing. "Whenever I am afraid, I strike a careless pose and no one ever knows I am afraid. Make believe your’re brave and the trick will take you far. You will be as brave as you make believe you are.” Anna informing her son of how to maneuver palace life and politics on the boat to Siam /Thailand. +

+
+
+ +
+

Sister Act

+

September 16, 2017

+ + Sister Act + +
+

+ Genius! Setting classic Motown to a modern musical. Soundtrack is hard to get hold of on cd and itunes! Actually if Fraulein Maria was born in the 1960s she would be Dolores. +

+
+
+ +
+

Carmen Jones

+

September 16, 2017

+ + Carmen Jones + +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+ +
+
+ + + + + diff --git a/images/Dreamgirls.jpg b/images/Dreamgirls.jpg new file mode 100644 index 000000000..30f0e28c7 Binary files /dev/null and b/images/Dreamgirls.jpg differ diff --git a/images/Moulinrouge.jpg b/images/Moulinrouge.jpg new file mode 100644 index 000000000..4b8af3868 Binary files /dev/null and b/images/Moulinrouge.jpg differ diff --git a/images/annie.jpg b/images/annie.jpg new file mode 100644 index 000000000..8faf381f8 Binary files /dev/null and b/images/annie.jpg differ diff --git a/images/bedknobsandbroomsticks.jpg b/images/bedknobsandbroomsticks.jpg new file mode 100644 index 000000000..e3f7f1286 Binary files /dev/null and b/images/bedknobsandbroomsticks.jpg differ diff --git a/images/bug.jpg b/images/bug.jpg new file mode 100644 index 000000000..1a99d0e70 Binary files /dev/null and b/images/bug.jpg differ diff --git a/images/carmenjones.jpg b/images/carmenjones.jpg new file mode 100644 index 000000000..da19ed1ab Binary files /dev/null and b/images/carmenjones.jpg differ diff --git a/images/carmenjones2.jpg b/images/carmenjones2.jpg new file mode 100644 index 000000000..a2ff5cb99 Binary files /dev/null and b/images/carmenjones2.jpg differ diff --git a/images/chicago.png b/images/chicago.png new file mode 100644 index 000000000..212135e04 Binary files /dev/null and b/images/chicago.png differ diff --git a/images/chittychitty.jpg b/images/chittychitty.jpg new file mode 100644 index 000000000..207da529b Binary files /dev/null and b/images/chittychitty.jpg differ diff --git a/images/grease.jpg b/images/grease.jpg new file mode 100644 index 000000000..30269c62c Binary files /dev/null and b/images/grease.jpg differ diff --git a/images/marypoppins.jpg b/images/marypoppins.jpg new file mode 100644 index 000000000..bed1e48fe Binary files /dev/null and b/images/marypoppins.jpg differ diff --git a/images/myfairlady.jpg b/images/myfairlady.jpg new file mode 100644 index 000000000..b15e0ef91 Binary files /dev/null and b/images/myfairlady.jpg differ diff --git a/images/myfairlady2.jpg b/images/myfairlady2.jpg new file mode 100644 index 000000000..47bf48083 Binary files /dev/null and b/images/myfairlady2.jpg differ diff --git a/images/nevada.jpg b/images/nevada.jpg new file mode 100644 index 000000000..9524405b3 Binary files /dev/null and b/images/nevada.jpg differ diff --git a/images/pap.jpg b/images/pap.jpg new file mode 100644 index 000000000..7a95f9f19 Binary files /dev/null and b/images/pap.jpg differ diff --git a/images/porgyandbess.jpg b/images/porgyandbess.jpg new file mode 100644 index 000000000..ccf0c0228 Binary files /dev/null and b/images/porgyandbess.jpg differ diff --git a/images/profile.jpg b/images/profile.jpg new file mode 100755 index 000000000..a9271bd60 Binary files /dev/null and b/images/profile.jpg differ diff --git a/images/ray.jpg b/images/ray.jpg new file mode 100644 index 000000000..12aeb3ca7 Binary files /dev/null and b/images/ray.jpg differ diff --git a/images/seven.jpg b/images/seven.jpg new file mode 100644 index 000000000..1d71f73ed Binary files /dev/null and b/images/seven.jpg differ diff --git a/images/sisteract.jpg b/images/sisteract.jpg new file mode 100644 index 000000000..70426594b Binary files /dev/null and b/images/sisteract.jpg differ diff --git a/images/sliced.jpg b/images/sliced.jpg new file mode 100644 index 000000000..fef41a337 Binary files /dev/null and b/images/sliced.jpg differ diff --git a/images/soundofmusic.jpg b/images/soundofmusic.jpg new file mode 100644 index 000000000..887b86f3f Binary files /dev/null and b/images/soundofmusic.jpg differ diff --git a/images/stones.jpg b/images/stones.jpg new file mode 100644 index 000000000..7d2c39d26 Binary files /dev/null and b/images/stones.jpg differ diff --git a/images/thekingandi.jpg b/images/thekingandi.jpg new file mode 100644 index 000000000..689bff784 Binary files /dev/null and b/images/thekingandi.jpg differ diff --git a/images/thewiz.jpg b/images/thewiz.jpg new file mode 100644 index 000000000..7c6a23ab5 Binary files /dev/null and b/images/thewiz.jpg differ diff --git a/images/turntable.jpg b/images/turntable.jpg new file mode 100644 index 000000000..9e76b4a53 Binary files /dev/null and b/images/turntable.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..44849d1fa --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + Personal Website | Welcome + + + + + + + + +
+

Howdy!

+ Enter +
+ + + + + + + diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..459cf6eca --- /dev/null +++ b/portfolio.html @@ -0,0 +1,44 @@ + + + + + Portfolio + + + + + + + + + +
+

Portfolio

+

+ I am currently training to be a full stack software developer. Over the last six weeks I have learned ruby, html and css. Check out my recent work. +

+ + +
+ + + + diff --git a/styles/about.css b/styles/about.css new file mode 100644 index 000000000..fbadb8a8f --- /dev/null +++ b/styles/about.css @@ -0,0 +1,36 @@ +section h2 { + color: white; + margin-left: 20px; +} + +section img { + float:left; + width: 250px; + height: 265px; + border-radius: 100%; + border: solid 4px gray; + margin-left: 50px; +} + +#content p { + color: white; + padding: 10px; + font-size: 20px; + margin-top: 1px; + margin-right: 60px; + padding:2px; +} + + +.clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} +.clearfix { display: inline-block; } +/* start commented backslash hack \*/ +* html .clearfix { height: 1%; } +.clearfix { display: block; } diff --git a/styles/blog.css b/styles/blog.css new file mode 100644 index 000000000..22f1fc656 --- /dev/null +++ b/styles/blog.css @@ -0,0 +1,56 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans'); + + +/*body { + font-size: 16px; + font-family: helvetica; +}*/ + +/*hr { + border-color: orange; +}*/ + +.title h2 { + color: white; + text-align: center; + font-size: 30px; +} + +.title p { + color: gray; + text-align: center; +} + +article h3, article h4 { + text-align: center; + color: #ff6633; +} + +article p { + line-height: 150%; +} + +article img { + /*margin: auto;*/ + width: 250px; + height: 350px; +} + +article { + vertical-align: top; + display: inline-block; + width: 25%; + /*top, right, bottom, left*/ + /*margin: 0 1%;*/ + margin right: 20px; + margin-left: 50px; + padding: 0 1.5%; + background-color: lightgray; + border-radius: 2%; + /*position: relative;*/ +} + +footer { + color: white; + position: relative; + } diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 000000000..e69de29bb diff --git a/styles/normalize.css b/styles/normalize.css new file mode 100644 index 000000000..fa4e73dd4 --- /dev/null +++ b/styles/normalize.css @@ -0,0 +1,447 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/styles/portfolio.css b/styles/portfolio.css new file mode 100644 index 000000000..f3837b889 --- /dev/null +++ b/styles/portfolio.css @@ -0,0 +1,20 @@ +main h2 { + color: white; + margin-left: 20px; +} + +main p { + color: white; + font-size: 22px; + margin-left: 20px; +} + +main ul li { + font-size: 18px; + color: #ff6633; +} + + +main ul li a { + color: white; +} diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 000000000..00a39551a --- /dev/null +++ b/styles/style.css @@ -0,0 +1,63 @@ + +html { + margin: 0; + padding: 0; +} + +nav ul li { + display: inline; + color: red; + padding-right: 30px; +} + +html, body{ + height 100%; +} + +a:visited { + color: gray; +} + +a:visited:hover { + color: orange; +} + +body { + background: url(../images/turntable.jpg) no-repeat center center; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: center: +} + +.container{ + width: 600px; + margin: 0 auto; + text-align: center; +} + +.button { + padding: 20px 48px; + color: white; + font: 20px; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 1px; + text-shadow: 0px 2px 4px rgba(0,0,0,0.6); +} + +h1{ + color: white; + font: 900 60px 'Cookie', cursive; + text-shadow: 0px 2px 4px rgba(0,0,0,0.6); + margin-bottom: 24px; +} + +/* Footer */ +footer { + position: fixed; + bottom: 0; + width: 100%; + z-index: 100; + text-align: center; +}