-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
181 lines (158 loc) · 9.19 KB
/
index.html
File metadata and controls
181 lines (158 loc) · 9.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
<!-- p5.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<!-- Stylesheets -->
<link rel="stylesheet" href="/Portfolio/Stylesheets/visualization.css">
</head>
<body>
<div class="container">
<header>
<h1>Portfolio Website</h1>
<p class="subtitle">Showcase your skills</p>
</header>
<section class="tutorial-section">
<h2>GitHub Pages</h2>
<p>
We'll be using GitHub Pages to serve our static site.
A quick reminder from the slides: a static site is when the server just serves pre-built content
"as-is" so there's no customisation from the user requesting it for what content is received.
It can be viewed as a server-less tech stack.
</p>
<h3>Creating your Repository</h3>
<p> To follow these steps, you should have a GitHub account.
If you don't have one, sign up for one at <a href="https://github.com/signup">https://github.com/signup</a>.
<ul>
<li>Create a new repository (green "New" button on homepage) </li>
<li>Go to the settings of the repository</li>
<li>Go to <strong>Pages</strong> (under the Code and Automation section)</li>
<li>Select "Deploy from a branch"</li>
<li>Configure it to be "main" and <strong>save</strong></li>
</ul>
</p>
<h3>Testing Pages: basic HTML </h3>
<p>Here's a basic HTML program to test your repository. </p>
<pre><code class="language-html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ed's Portfolio</title>
<meta charset="UTF-8">
<body>
<h1>Hello world</h1>
<p>I'm alive!</p>
</body>
</html>
</code></pre>
<p>Put this code inside of <code>index.html</code>, push the file to your repository, and go to the repository on GitHub.
You should see the following:
</p>
<img src="/Portfolio/Images/GH-Status.png" alt="GitHub Pages status screenshot">
<p>If you click on the brown dot, you'll get information about your deployment to GH Pages.
When it has fully processed, which you can see under "Deployments" on the right-hand side of the page,
you can check out your site at:
</p>
<p><strong>YourGitHubName</strong>.github.io/<strong>YourRepositoryName</strong></p>
<p>If it doesn't work, then you should double-check your pages configuration and, if you change something,
do another edit and commit.
</p>
<p>Congratulations! You've made the site. </p>
</section>
<section class="tutorial-section">
<h2>Using Bootstrap</h2>
<p>We'll use bootstrap to help style our site because doing it from scratch with raw HTML/CSS/JS would take a while (but is a good exercise for learning).</p>
<h3>How does Bootstrap work? </h3>
<p>
Bootstrap is a front-end framework that provides prebuilt CSS styles and JavaScript behaviors.
You add Bootstrap class names to regular HTML elements, and those elements get consistent, responsive styling.
</p>
<p>
A <strong>component</strong> is a reusable UI building block, such as a navbar, card, alert, button, or modal.
We'll look at a couple examples of components in the coming code snippets - the main thing is that you can look at
their documentation here: <a href="https://getbootstrap.com/docs/5.3/components">https://getbootstrap.com/docs/5.3/components</a>
</p>
<h3>Importing Bootstrap using CDNs</h3>
<p>Add the following inside your <code><head></code>:</p>
<pre><code class="language-html">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
</code></pre>
<p>Add this just before <code></body></code> so interactive components work:</p>
<pre><code class="language-html">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</code></pre>
<h3>Bootstrap Example:NavBar </h3>
<p>Navbar code (put this into <code></body></code> to see what it does):</p>
<pre><code class="language-html">
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom sticky-top">
<div class="container">
<a class="navbar-brand fw-semibold" href="#">Ed's Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="https://github.com/RexMortem" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github me-1"></i>GitHub
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/edward-denton-416a30240/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-linkedin me-1"></i>LinkedIn
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:Edward.Denton@warwick.ac.uk">
<i class="bi bi-envelope-fill me-1"></i>Email
</a>
</li>
</ul>
</div>
</div>
</nav>
</code></pre>
<p>What this navbar does:</p>
<ul>
<li><code>navbar-expand-lg</code> shows a full horizontal menu on large screens and collapses it on smaller screens.</li>
<li><code>sticky-top</code> keeps the navbar visible at the top while scrolling.</li>
<li><code>navbar-toggler</code> is the mobile menu button.</li>
<li><code>data-bs-target="#mainNavbar"</code> connects the button to the collapsible menu container.</li>
<li><code>ms-auto</code> pushes nav links to the right side.</li>
<li><code>bi ...</code> classes display Bootstrap Icons for GitHub, LinkedIn, and Email.</li>
<li><code>target="_blank" rel="noopener noreferrer"</code> opens external links in a new tab safely.</li>
</ul>
<p>Don't worry about all the exact details though - Bootstrap has quite a bit of boilerplate in it,
which can be overwhelming for someone starting. Just start looking at examples in their documentation
and tweaking them to see how changing one thing affects the output.
</p>
</section>
<section class="tutorial-section">
<h2>Make It Your Own</h2>
<p>
It's time to just go wild and make it your own! Look at the components page in Bootstrap's docs
and feel free to add whatever you want.
</p>
<p>If you want to do something super exciting, then you can also add js scripts to add some animation
or further functionality! For the example site below, I've added some JavaScript to cycle the text.
</p>
<p>If you want an example for what kind of things to add, I've made an example here: <a href="https://uwcs.github.io/PortfolioExample/">https://uwcs.github.io/PortfolioExample/</a></p>
<p>The code for the example site: <a href="https://github.com/UWCS/PortfolioExample">https://github.com/UWCS/PortfolioExample</a>
</p>
</section>
<section class="tutorial-section">
<h2>Going Further: React</h2>
<p>
Our site just uses bootstrap since that's enough for our small site - if you want to
build something more substantial, our society has a React course which you can find here: <a href="https://readytoreact.net/">https://readytoreact.net/</a>
</p>
</section>
</div>
</body>
</html>