Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add files via upload #12

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open

Add files via upload #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7a6a4c5
Add files via upload
markdbellows Feb 10, 2023
f58db9b
title on site
markdbellows Feb 10, 2023
c02aa6f
Finish the basics
markdbellows Feb 11, 2023
18c19ac
fix typo, add consulting
markdbellows Feb 14, 2023
8472ab7
changing capitalization, spacing
sambellows Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added MarkD_Bellows_Resume.pdf
View file
Open in desktop
Binary file not shown.
Binary file added MarkTreeFace.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Network Profile Ideas.pdf
View file
Open in desktop
Binary file not shown.
126 changes: 63 additions & 63 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ```<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)


# 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)
Binary file modified background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
192 changes: 113 additions & 79 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,113 @@
<!doctype html>
<html>
<head>
<!-- Page setup -->
<meta charset="utf-8">
<title>Your title here</title>
<meta name="description" content="A brief description of your site for search engines">
<meta name="author" content="Information about the author here">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="icon" type="image/png" href="favicon.png">

<!-- Stylesheets -->
<!-- Reset default styles and add support for google fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />

<!-- Custom styles -->
<link href="style.css" rel="stylesheet" type="text/css" />

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<!-- Want to add Bootstrap? -->
<!-- Visit: https://getbootstrap.com/docs/4.3/getting-started/introduction/ -->

</head>

<body>

<header id="header">
<img src="logo.jpg">
<h1>Simple Website</h1>

<!-- Menu link fragment #id should match a div id. Example: <a href="#home"> links to <div id="home"></div> -->
<ul class="main-menu">
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</header>

<div id="container">
<div class="inner">
<div id="content">

<div id="home" class="content-region hide">
<h2>Home</h2>
<p>
This is a simple website template published with Github Pages. <a href="https://github.com/cpl-makerlab/simple-website-template">Fork this repository</a> to create your own site!
</p>
</div>

<div id="about" class="content-region hide">
<h2>About</h2>
<p>
Sed tempus urna et pharetra pharetra massa massa ultricies. Porttitor rhoncus dolor purus non enim praesent. Id aliquet risus feugiat in ante metus dictum.
</p>
</div>

<div id="contact" class="content-region hide">
<h2>Contact</h2>
<p>
Pellentesque nec nam aliquam sem et tortor consequat. Quisque sagittis purus sit amet volutpat consequat. Magna eget est lorem ipsum dolor.
</p>
</div>

</div>
</div>
</div>

<footer>
Footer region
</footer>

<!-- Load additional JS scripts here -->
<script type="text/javascript" src="script.js"></script>

</body>
</html>
<!doctype html>
<html>
<head>
<!-- Page setup -->
<meta charset="utf-8">
<title>Mark D Bellows, Computer Engineer</title>
<meta name="description" content="Find out about MarkD Bellows, Computer Engineer">
<meta name="author" content="Written with the help of Samuel and Elise Bellows">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="icon" type="image/png" href="favicon.png">

<!-- Stylesheets -->
<!-- Reset default styles and add support for google fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />

<!-- Custom styles -->
<link href="style.css" rel="stylesheet" type="text/css" />

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<!-- Want to add Bootstrap? -->
<!-- Visit: https://getbootstrap.com/docs/4.3/getting-started/introduction/ -->

</head>

<body>

<header id="header">
<img src="MarkTreeFace.jpg">
<h1>MarkD Bellows</h1>

<!-- Menu link fragment #id should match a div id. Example: <a href="#home"> links to <div id="home"></div> -->
<ul class="main-menu">
<li><a href="#home">Home</a></li>
<li><a href="#networking">Networking Document</a></li>
<li><a href="#Resume">Resume</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>

<div id="container">
<div class="inner">
<div id="content">

<div id="home" class="content-region hide">
<h2>Home</h2>
<p>
Welcome to Mark D Bellows' site!<br>
Please take a look around and provide feedback. There is always something that can be improved.
</p>
</div>

<div id="about" class="content-region hide">
<h2>About</h2>
<p>
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.
</p>
</div>

<div id="contact" class="content-region hide">
<h2>Contact</h2>
<p>
markdbellows@gmail.com
</p>
</div>

<div id="Resume" class="content-region hide">
<h2>Resume</h2>
<p>
Click here to see Mark's Resume. Click on LinkedIn Below for more details
<a href="MarkD_Bellows_Resume.pdf">PDF</a>
</p>
</div>

<div id="networking" class="content-region hide">
<h2>Networking</h2>
<p>
This document is intended to show what Mark is looking for
<a href="Network Profile Ideas.pdf">PDF</a>
</p>
</div>

</div>
</div>
</div>

<footer>
<!-- help here: https://www.sitepoint.com/github-profile-readme/ -->
<div id="badges" align="center">
<a href="https://www.linkedin.com/in/markdbellows/" target="_blank">
<img src="https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn Badge"/>
</a>
&emsp;
<a href="https://github.com/markdbellows" target="_blank">
<img src="https://img.shields.io/badge/Github-white?style=for-the-badge&logo=github&logoColor=black" alt="Github Badge"/>
</a>
&emsp;
<a href="mailto:markdbellows@gmail.com" target="_blank">
<img src="https://img.shields.io/badge/gmail-white?logo=gmail&logoColor=red&style=for-the-badge" alt="Github Badge"/>
</a>

</div>
</footer>


<!-- Load additional JS scripts here -->
<script type="text/javascript" src="script.js"></script>

</body>
</html>
58 changes: 29 additions & 29 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Loading