diff --git a/MarkD_Bellows_Resume.pdf b/MarkD_Bellows_Resume.pdf new file mode 100644 index 000000000..8a401a538 Binary files /dev/null and b/MarkD_Bellows_Resume.pdf differ diff --git a/MarkTreeFace.jpg b/MarkTreeFace.jpg new file mode 100644 index 000000000..60d107a21 Binary files /dev/null and b/MarkTreeFace.jpg differ diff --git a/Network Profile Ideas.pdf b/Network Profile Ideas.pdf new file mode 100644 index 000000000..5373b1606 Binary files /dev/null and b/Network Profile Ideas.pdf differ diff --git a/README.md b/README.md index 3a2e562d6..d1a1f3d4b 100644 --- a/README.md +++ b/README.md @@ -1,63 +1,63 @@ -# Simple Website Using Github Pages -Make a simple HTML website and publish it using Github Pages. -View example: https://cplmakerlab.github.io/simple-website-template/ - -## Setup -- Create a Github account (if you don't have one yet) -- Fork this repository to copy it to your account, i.e. github.com/username/simple-website-template (you can rename it as well) -- Make sure you see the gh-pages branch (it should be the default) -- Edit website files on the gh-pages branch, then wait a minute or two for Github Pages to update and deploy your site. -- View your site: https://username.github.io/simple-website-template - -## How does this work? -This website template uses CSS & JS to hide and show different parts of index.html and uses Github Pages to render the website from the gh-pages branch. - -## Things to try -- Edit index.html and change the title of the page (both `````` in the header and ```<h1>``` in the body) -- Upload your own logo.jpg and background.jpg images to overwrite the default images. -- Edit index.html and change the content displayed in home, about, and contact. -- Edit index.html and change the content in the footer region. -- Edit style.css and change the link color and font style. -- Update the metadata in the header portion of index.html (this is used by search engines and browsers). - -## Common tags - -Element | Tag | Example usage ---- | --- | --- -Header | h1 | ```<h1>Title of page</h1>``` -Link | a | ```<a href="http://example.com">Check out this link</a>``` -Image | img | ```<img src="http://www.example.com/image.jpg">``` -Paragraph | p | ```<p>This is a new paragraph.</p>``` -Line break | br | ```This is the first line of a poem. <br> This second line will appear below the first. ``` - -## Further reading - -### Where can I learn more about HTML, CSS, JS, and webdevelopment in general? -Check out Mozilla Developers Network (https://developer.mozilla.org). They have lots of good resources, tips, and tutorials to further your knowledge. - -### Can I configure a custom domain for my site, i.e. johnnymakerportfolio.com? -Yes! Github Pages supports [custom domain configuration](https://help.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site). However, you will need to buy a domain name from a registrar such as [NameCheap](https://www.namecheap.com/) or [Gandi](https://www.gandi.net/) -- the cost is usually around $10 - $15 a year. - -### Can I add tracking? -Yes! You can embed Google Analytics to see who is visiting your site. - -### Can I add a blog, etc? -Not really. This template works best for simple sites. For a simple blog check out [Jekyll, which is a static site generator that also works on Github pages](https://help.github.com/en/github/working-with-github-pages/setting-up-a-github-pages-site-with-jekyll). For more functionality, you will probably need a content management system (CMS) such as [Wordpress](https://wordpress.com), [Drupal](http://drupal.org), or [Django](https://www.djangoproject.com). A CMS will require additional setup and a website host, such as [Dreamhost](https://www.dreamhost.com/). - -### Can I sell products or add a store? -Not easily, but if you are determined you can add Paypal buttons or something like [SnipCart](https://snipcart.com/). If you are interested in selling many products online or need a full store, check out Woocommerce, BigCartel, Shopify, or Etsy. - -### Can I make separate HTML files for each page? -Yes, you can use Javascript AJAX calls to pull in external content into your index.html page. See script.js for more details. - -### I heard I need to be using XYZ framework (Bootstrap, React, etc). -Web technology changes rapidly, and it easy to get lost in the hype. Learning the basics of HTML, CSS, and JS is a good place to start. From there, you can explore different frameworks and libraries to see what interests you. - -### I don't want to write code or deal with website hosting. Are there any website builders you recommend? -- Google Sites (free) -- Squarespace -- Wix -- Strikingly (free tier includes single product store) -- Big Cartel, Shopify, Etsy (e-commerce) - - +# Simple Website Using Github Pages +Make a simple HTML website and publish it using Github Pages. +View example: https://cplmakerlab.github.io/simple-website-template/ + +## Setup +- Create a Github account (if you don't have one yet) +- Fork this repository to copy it to your account, i.e. github.com/username/simple-website-template (you can rename it as well) +- Make sure you see the gh-pages branch (it should be the default) +- Edit website files on the gh-pages branch, then wait a minute or two for Github Pages to update and deploy your site. +- View your site: https://username.github.io/simple-website-template + +## How does this work? +This website template uses CSS & JS to hide and show different parts of index.html and uses Github Pages to render the website from the gh-pages branch. + +## Things to try +- Edit index.html and change the title of the page (both ```<title>``` in the header and ```<h1>``` in the body) +- Upload your own logo.jpg and background.jpg images to overwrite the default images. +- Edit index.html and change the content displayed in home, about, and contact. +- Edit index.html and change the content in the footer region. +- Edit style.css and change the link color and font style. +- Update the metadata in the header portion of index.html (this is used by search engines and browsers). + +## Common tags + +Element | Tag | Example usage +--- | --- | --- +Header | h1 | ```<h1>Title of page</h1>``` +Link | a | ```<a href="http://example.com">Check out this link</a>``` +Image | img | ```<img src="http://www.example.com/image.jpg">``` +Paragraph | p | ```<p>This is a new paragraph.</p>``` +Line break | br | ```This is the first line of a poem. <br> This second line will appear below the first. ``` + +## Further reading + +### Where can I learn more about HTML, CSS, JS, and webdevelopment in general? +Check out Mozilla Developers Network (https://developer.mozilla.org). They have lots of good resources, tips, and tutorials to further your knowledge. + +### Can I configure a custom domain for my site, i.e. johnnymakerportfolio.com? +Yes! Github Pages supports [custom domain configuration](https://help.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site). However, you will need to buy a domain name from a registrar such as [NameCheap](https://www.namecheap.com/) or [Gandi](https://www.gandi.net/) -- the cost is usually around $10 - $15 a year. + +### Can I add tracking? +Yes! You can embed Google Analytics to see who is visiting your site. + +### Can I add a blog, etc? +Not really. This template works best for simple sites. For a simple blog check out [Jekyll, which is a static site generator that also works on Github pages](https://help.github.com/en/github/working-with-github-pages/setting-up-a-github-pages-site-with-jekyll). For more functionality, you will probably need a content management system (CMS) such as [Wordpress](https://wordpress.com), [Drupal](http://drupal.org), or [Django](https://www.djangoproject.com). A CMS will require additional setup and a website host, such as [Dreamhost](https://www.dreamhost.com/). + +### Can I sell products or add a store? +Not easily, but if you are determined you can add Paypal buttons or something like [SnipCart](https://snipcart.com/). If you are interested in selling many products online or need a full store, check out Woocommerce, BigCartel, Shopify, or Etsy. + +### Can I make separate HTML files for each page? +Yes, you can use Javascript AJAX calls to pull in external content into your index.html page. See script.js for more details. + +### I heard I need to be using XYZ framework (Bootstrap, React, etc). +Web technology changes rapidly, and it easy to get lost in the hype. Learning the basics of HTML, CSS, and JS is a good place to start. From there, you can explore different frameworks and libraries to see what interests you. + +### I don't want to write code or deal with website hosting. Are there any website builders you recommend? +- Google Sites (free) +- Squarespace +- Wix +- Strikingly (free tier includes single product store) +- Big Cartel, Shopify, Etsy (e-commerce) + + diff --git a/background.jpg b/background.jpg index 0fc9b3c2b..d71072d69 100644 Binary files a/background.jpg and b/background.jpg differ diff --git a/index.html b/index.html index c12fd451c..d8b330fcc 100644 --- a/index.html +++ b/index.html @@ -1,79 +1,113 @@ -<!doctype html> -<html> - <head> - <!-- Page setup --> - <meta charset="utf-8"> - <title>Your title here - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -
-

Home

-

- This is a simple website template published with Github Pages. Fork this repository to create your own site! -

-
- -
-

About

-

- Sed tempus urna et pharetra pharetra massa massa ultricies. Porttitor rhoncus dolor purus non enim praesent. Id aliquet risus feugiat in ante metus dictum. -

-
- -
-

Contact

-

- Pellentesque nec nam aliquam sem et tortor consequat. Quisque sagittis purus sit amet volutpat consequat. Magna eget est lorem ipsum dolor. -

-
- -
-
-
- - - - - - - - + + + + + + Mark D Bellows, Computer Engineer + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+

Home

+

+ Welcome to Mark D Bellows' site!
+ Please take a look around and provide feedback. There is always something that can be improved. +

+
+ +
+

About

+

+ Mark is an Experienced Electrical Engineer who has been working in the computer processor arena for 20+ years. He likes to solve problems and teach his teammates so they can solve problems too. He is open to new opportunites in order to grow his knowledge and friendships. +

+
+ +
+

Contact

+

+ markdbellows@gmail.com +

+
+ +
+

Resume

+

+ Click here to see Mark's Resume. Click on LinkedIn Below for more details + PDF +

+
+ +
+

Networking

+

+ This document is intended to show what Mark is looking for + PDF +

+
+ +
+
+
+ + + + + + + + + diff --git a/script.js b/script.js index 008cc05c3..a38eedfd9 100644 --- a/script.js +++ b/script.js @@ -1,29 +1,29 @@ -// Wait for the document to load before running the script -(function ($) { - - // We use some Javascript and the URL #fragment to hide/show different parts of the page - // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page - $(window).on('load hashchange', function(){ - - // First hide all content regions, then show the content-region specified in the URL hash - // (or if no hash URL is found, default to first menu item) - $('.content-region').hide(); - - // Remove any active classes on the main-menu - $('.main-menu a').removeClass('active'); - var region = location.hash.toString() || $('.main-menu a:first').attr('href'); - - // Now show the region specified in the URL hash - $(region).show(); - - // Highlight the menu link associated with this region by adding the .active CSS class - $('.main-menu a[href="'+ region +'"]').addClass('active'); - - // Alternate method: Use AJAX to load the contents of an external file into a div based on URL fragment - // This will extract the region name from URL hash, and then load [region].html into the main #content div - // var region = location.hash.toString() || '#first'; - // $('#content').load(region.slice(1) + '.html') - - }); - -})(jQuery); +// Wait for the document to load before running the script +(function ($) { + + // We use some Javascript and the URL #fragment to hide/show different parts of the page + // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page + $(window).on('load hashchange', function(){ + + // First hide all content regions, then show the content-region specified in the URL hash + // (or if no hash URL is found, default to first menu item) + $('.content-region').hide(); + + // Remove any active classes on the main-menu + $('.main-menu a').removeClass('active'); + var region = location.hash.toString() || $('.main-menu a:first').attr('href'); + + // Now show the region specified in the URL hash + $(region).show(); + + // Highlight the menu link associated with this region by adding the .active CSS class + $('.main-menu a[href="'+ region +'"]').addClass('active'); + + // Alternate method: Use AJAX to load the contents of an external file into a div based on URL fragment + // This will extract the region name from URL hash, and then load [region].html into the main #content div + // var region = location.hash.toString() || '#first'; + // $('#content').load(region.slice(1) + '.html') + + }); + +})(jQuery); diff --git a/style.css b/style.css index e55275764..10c3e3db4 100644 --- a/style.css +++ b/style.css @@ -1,141 +1,141 @@ -/** - * Typography & Text styles - */ - -/* html is set to 62.5% so that all the REM measurements are based on 10px sizing. So basically 1.5rem = 15px */ -html { - font-size: 62.5%; -} -body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #FFFFFF; -} - -/** - * Links - */ -a { - font-weight: normal; - text-decoration: none; - color:#EF6D3D; -} -a:focus { - outline: thin dotted; -} - -small { - font-size: 75%; -} - -/** - * Headings - */ -h1, -h2, -h3, -h4, -h5, -h6 { - line-height: 1; - text-rendering: optimizeLegibility; /* voodoo to enable ligatures and kerning | https://developer.mozilla.org/en-US/docs/CSS/text-rendering */ - margin-top: 0; - margin-bottom: 2rem; - font-weight: 300; -} -h1 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } -h2 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } -h3 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } -h4 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } -h5 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } -h6 { font-size: 1.4rem; line-height: 1.6; letter-spacing: 0; } - -/** - * Paragraphs - */ -p { - margin: 0 auto 1.5em auto; /* bottom margin for paragraphs */ -} -p + p { - -} - -/** - * Quotes & Blockquotes - */ -q { - quotes: '\00201C' '\00201D'; -} -q:before { - content: open-quote; -} -q:after { - content: close-quote; -} - -blockquote { - /*background-color: #F8F8F8;*/ - border-left: 2px solid #AFC0D2; - margin: 1.6em 10%; - padding: .75em 1em; - font-size:1.8rem; -} -blockquote p:last-child { - margin-bottom: 0; -} - -/** - * Layout styles - */ - -/* Full size background image */ -html, #container, .inner { background-color:transparent;} -html { - background:url(background.jpg) center center no-repeat fixed; - background-size:cover; -} -body { - max-width:800px; - margin:25px auto; -} -header, #content, footer { - background: rgba(0,0,0,.8); - padding:25px; - color:#FFFFFF; -} - -/* Menu Links */ -ul.main-menu { - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - justify-content: left; - list-style: none; -} -ul.main-menu li a { - margin-right:20px; - font-size:2.0rem; - border-bottom: solid transparent 3px; - color:#cfd2da; -} -ul.main-menu li a:hover { - color:#FFFFFF; -} -ul.main-menu li a.active { - color:#FFFFFF; - border-bottom-color:#EF6D3D; -} - -/* Utility classes */ -.hide { - display:none; -} -.show { - display:block; -} - - - +/** + * Typography & Text styles + */ + +/* html is set to 62.5% so that all the REM measurements are based on 10px sizing. So basically 1.5rem = 15px */ +html { + font-size: 62.5%; +} +body { + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #FFFFFF; +} + +/** + * Links + */ +a { + font-weight: normal; + text-decoration: none; + color:#EF6D3D; +} +a:focus { + outline: thin dotted; +} + +small { + font-size: 75%; +} + +/** + * Headings + */ +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1; + text-rendering: optimizeLegibility; /* voodoo to enable ligatures and kerning | https://developer.mozilla.org/en-US/docs/CSS/text-rendering */ + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; +} +h1 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } +h2 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } +h3 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } +h4 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } +h5 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } +h6 { font-size: 1.4rem; line-height: 1.6; letter-spacing: 0; } + +/** + * Paragraphs + */ +p { + margin: 0 auto 1.5em auto; /* bottom margin for paragraphs */ +} +p + p { + +} + +/** + * Quotes & Blockquotes + */ +q { + quotes: '\00201C' '\00201D'; +} +q:before { + content: open-quote; +} +q:after { + content: close-quote; +} + +blockquote { + /*background-color: #F8F8F8;*/ + border-left: 2px solid #AFC0D2; + margin: 1.6em 10%; + padding: .75em 1em; + font-size:1.8rem; +} +blockquote p:last-child { + margin-bottom: 0; +} + +/** + * Layout styles + */ + +/* Full size background image */ +html, #container, .inner { background-color:transparent;} +html { + background:url(background.jpg) center center no-repeat fixed; + background-size:cover; +} +body { + max-width:800px; + margin:25px auto; +} +header, #content, footer { + background: rgba(0,0,0,.8); + padding:25px; + color:#FFFFFF; +} + +/* Menu Links */ +ul.main-menu { + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: left; + list-style: none; +} +ul.main-menu li a { + margin-right:20px; + font-size:2.0rem; + border-bottom: solid transparent 3px; + color:#cfd2da; +} +ul.main-menu li a:hover { + color:#FFFFFF; +} +ul.main-menu li a.active { + color:#FFFFFF; + border-bottom-color:#EF6D3D; +} + +/* Utility classes */ +.hide { + display:none; +} +.show { + display:block; +} + + +