-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (142 loc) · 5.94 KB
/
index.html
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
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
</head>
<body>
<header>
<h1>Trevor Huey</h1>
<img src="./family.jpg" width="300" />
</header>
<main>
<hr />
<article>
<h2>About Me</h2>
<div>
<ul>
<li>Computer Science degree from BYU (Provo)</li>
<li>Developed web applications for the last 10 years</li>
<li>Worked with React for 8 years</li>
<li>Have been a Web Developer, Software Engineer, Lead Engineer, Architect, and CTO</li>
<li>Currently a Principal Software Engineer at <a href="https://www.deque.com">Deque</a> making the Web more accessible for people with disabilites</li>
</ul>
</div>
</article>
<hr />
<section>
<header>
<h2>Let's talk React!</h2>
</header>
<figure>
<img src="./react.png" role="presentation" />
</figure>
</section>
<hr />
<article>
<h2>Three Parts of a Web Page</h2>
<ol>
<li><strong>Structure (HTML):</strong> What content is on the page and how it is arranged.</li>
<li><strong>Styling (CSS):</strong> What the content looks like.</li>
<li><strong>Interactivity (JavaScript):</strong> How the user can interact with the page.</li>
</ol>
<iframe height="600" style="width: 100%;" scrolling="no" title="Three Parts" src="https://codepen.io/thuey/embed/LYdZKeN?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/thuey/pen/LYdZKeN">
Blank Canvas</a> by Trevor Huey (<a href="https://codepen.io/thuey">@thuey</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<a href="https://codepen.io/thuey/pen/yLKJdRW">Completed JavaScript example.</a>
</article>
<hr />
<article>
<h2>Why React?</h2>
<ol>
<li><strong>Declarative vs Imperative:</strong> Describe what you want instead of how you want it done.</li>
<li><strong>Easy to re-use components:</strong> You can write code once and use it in a lot of places.</li>
<li><strong>React everywhere!:</strong> You can use React to write web apps, blogs, desktop apps, and mobile apps.</li>
</ol>
<iframe height="600" style="width: 100%;" scrolling="no" title="Blank Canvas React" src="https://codepen.io/thuey/embed/eYMzqzJ?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/thuey/pen/eYMzqzJ">
Blank Canvas React</a> by Trevor Huey (<a href="https://codepen.io/thuey">@thuey</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<a href="https://codepen.io/thuey/pen/vYRKoXR">Completed React example.</a>
</article>
<hr />
<header>
<h2>How I use React</h2>
</header>
<section>
<header>
<h3>Cross-platform Mobile Apps</h3>
</header>
<aside>
<h4>Jolt iOS App</h4>
<figure>
<img alt="Screenshot of Jolt app on iPad" src="./ios.webp" />
<figcaption>Image from <a href="https://apps.apple.com/us/app/jolt/id1440535681">Apple Store</a></figcaption>
</figure>
</aside>
<aside>
<h4>Jolt Android App</h4>
<figure>
<img alt="Screenshot of Jolt app on Android tablet" src="./android.png" />
<figcaption>Image from <a href="https://play.google.com/store/apps/details?id=com.joltup.universal&hl=en_US&gl=US">Play Store</a></figcaption>
</figure>
</aside>
</section>
<section>
<header>
<h3>Web Applications</h3>
</header>
<aside>
<h4>Ancestry Profile Page</h4>
<figure>
<img alt="Screenshot of Ancestry.com Profile" src="./ancestry.png" />
<figcaption>Screenshot of Ancestry.com Profile</figcaption>
</figure>
</aside>
<aside>
<h4>Nelnet Bank</h4>
<figure>
<img alt="Screenshot of Nelnet Bank" src="./nelnet.png" />
<figcaption>Screenshot of Nelnet Bank</figcaption>
</figure>
</aside>
</section>
<header>
<h3>3D Visualization</h3>
</header>
<figure>
<iframe width="1000" height="500" src="https://www.youtube.com/embed/iO8LEIO7amE?clip=Ugkxi4d9HQbWo1M9ReOwAI-W-6qIuzdlqtJB&clipt=EKmICBiS6Qg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption>Video clip of the Vertex 3D Visualization tool</figcaption>
</figure>
<header>
<h3>Browser Extensions</h3>
</header>
<figure>
<img alt="Screenshot of the Axe Extension" src="./axe.png" />
<figcation>Screenshot of the Axe Extension from <a href="deque.com">deque.com</a></figcation>
</figure>
<hr />
<article>
<h2>Next Steps</h2>
<ul>
<li>React's website has tutorials: <a href="https://reactjs.org/">https://reactjs.org/</a></li>
<li>Free beginner's guide to React by Kent C. Dodds on <a href="https://egghead.io/courses/the-beginner-s-guide-to-react">egghead.io</a></li>
<li>Paid course on <a href="https://ui.dev/react">ui.dev</a></li>
</ul>
</article>
<hr />
<article>
<h2>Questions?</h2>
<dl>
<dt>Email</dt>
<dd><a href="mailto:thuey100@gmail.com">thuey100@gmail.com</a></dd>
</dl>
<dl>
<dt>LinkedIn</dt>
<dd><a href="https://www.linkedin.com/in/trevorhuey/">https://www.linkedin.com/in/trevorhuey/</a></dd>
</dl>
</article>
</main>
</body>
</html>