-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (125 loc) · 10.9 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
<!DOCTYPE html>
<HTML>
<header>
<link rel="stylesheet" href="index.css">
<div class=row>
<div class=column>
<a class="button" href="index.html">Home</a><a class="button" href="changelog.html">Changelog</a><a class="button" href="todo.html">To Do</a>
<h1>Tyler Rust Portfolio</h1>
<h2><a href = https://github.com/strrules105/HTMLPortfolio>Link to Github Repository</a></h2>
<p>Email: [email protected]</p>
<p><a href = https://strrules105.github.io/Portfolio>Previous Portfolio Page</a></p>
</div>
<div class=column>
<div class="box">
<img src="Resized-Picture.png";>
<p style="font-size: 15px;"><i>Fig 1: </i>A photo of me, Tyler Rust, sitting in my dorm.</p>
</div>
</div>
</div>
</header>
<body>
<button class="collapsible">Canvas "Technologies to Master"</button>
<div class="content">
<button class="collapsible">Basics of the Web</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://sun.iwu.edu/~mliffito/cs_codex/posts/web-development-basics>https://sun.iwu.edu/~mliffito/cs_codex/posts/web-development-basics/</a>
Completed. I've read a multitude of links from this site, many were very simple explaining the usefulness of HTML and CSS, basics of the web etc. I feel like I have a decent foundation for how HTML pages work.</button>
<button class="collapsiblecontent"><a href = https://flexboxfroggy.com>flexboxfroggy</a> Completed. I have guided the frogs to safety, they have been reunited with their respectful lilypads by utilizing the power of CSS properties.</button>
</div>
<button class="collapsible">Visual Studio Code</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://neu-se.github.io/CS4530-CS5500-Spring-2021/tutorials/week1-getting-started>Getting Started</a> Completed. Downloaded Choco, nvm, VSCode, typescript compiler with nvm. What a pain to get set up actually.
<ul>
Used all of these to download and set up VSCode, Typescript compiler, node, etc</li>
<br><a href= https://code.visualstudio.com/docs/introvideos/basics>Visual Studio Basics</a>
<br><a href= https://nodejs.org/en/download>Node Download</a>
<br><a href= https://code.visualstudio.com/docs/nodejs/nodejs-tutorial>Node + JS Tutorial</a>
<br><a href= https://code.visualstudio.com/docs/typescript/typescript-compiling>Compiling with Typescript</a>
<br><a href= https://code.visualstudio.com/docs/nodejs/nodejs-tutorial>Node + JS Tutorial</a>
</ul>
</div>
<button class="collapsible">TypeScript</button>
<div class="content">
<button class="collapsiblecontent">
<a href = https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html>TypeScript in 5 Minutes</a> Completed.
</button>
<button class="collapsiblecontent">
<a href= https://www.c-sharpcorner.com/UploadFile/c63ec5/building-a-simple-website-with-typescript>Typescript beginner website tutorial</a> Completed. Read through, used to help build<a href=https://strrules105.github.io/Pokedex> Pokedex</a> website.
</button>
</div>
<button class="collapsible">React(+Hooks)</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://reactjs.org/tutorial/tutorial.html>Intro to react tutorial</a> Complete. Made the TicTacToe game, good intro to react, but I still need to improve.</button>
<button class="collapsiblecontent"><a href = https://reactjs.org/docs/hooks-intro.html>Intro to hooks tutorial</a> Complete. Hooks are backwards compatible, can be adopted gradually, allows re-use of stateful logic.</button>
<button class="collapsiblecontent"><a href = https://reactjs.org/docs/hooks-intro.html>Intro to hooks overview</a> Complete. Never call hooks inside loops, conditions, or nested functions. Only call at the top level from React function components.</button>
</div>
<button class="collapsible">Git</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://sun.iwu.edu/~mliffito/cs_codex/posts/how-to-start-using-git>Getting started with Git</a> Completed.</button>
<button class="collapsiblecontent"><a href = https://sun.iwu.edu/~mliffito/cs_codex/posts/git-cookbook>Git Cookbook</a> Completed.</button>
<button class="collapsiblecontent"><a href = https://sun.iwu.edu/~mliffito/cs_codex/posts/git-teamwork>Git Teamwork</a> Completed.</button>
<button class="collapsiblecontent"><a href = https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging>Merging Branches with Git</a> Completed. Learned how to create dev branches and merge from command line and VSCode</button>
</div>
<button class="collapsible">Bootstrap</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://sun.iwu.edu/~mliffito/cs_codex/posts/bootstrap>Bootstrap tutorial</a> Complete.</button>
<button class="collapsiblecontent"><a href = https://www.w3schools.com/bootstrap5/bootstrap_get_started.php>W3Schools intro to Bootstrap</a> Complete. Learned that Bootstrap
makes web development easier with responsive development.</button>
</div>
<button class="collapsible">Requirements Gathering</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://sun.iwu.edu/~mliffito/cs_codex/posts/requirements-gathering>Learning about the necessary and desired function of software</a> Completed.</button>
</div>
<button class="collapsible">User Interface Design</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://sun.iwu.edu/~mliffito/cs_codex/posts/user-interface-design>UI Design</a> Complete.</button>
<button class="collapsiblecontent"><a href = https://web.archive.org/web/20180809162725/https://99designs.com/blog/tips/7-unbreakable-laws-of-user-interface-design>7 Laws of User Interface Design</a> Complete.</button>
</div>
<button class="collapsible">Deploying With Github</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f>Deploying React App with Github</a> Complete. Have already deployed TicTacToe and Password Strength Checker with CI/CD.</button>
<button class="collapsiblecontent"><a href = https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages
>Github pages and Markdown</a> (Used to make my first <a href = https://strrules105.github.io/Portfolio>portfolio)</a> Completed.</button>
<button class="collapsiblecontent"><a href=https://dev.to/dyarleniber/setting-up-a-ci-cd-workflow-on-github-actions-for-a-react-app-with-github-pages-and-codecov-4hnp>CI/CD Guide that I used</a></button>
</div>
<button class="collapsible">Testing</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://neu-se.github.io/CS4530-CS5500-Spring-2021/tutorials/week5-unit-testing>Jest Tutorial</a> Complete. Very helpful in learning how to test code in VS</button>
<button class="collapsiblecontent"><a href = https://www.smashingmagazine.com/2020/06/practical-guide-testing-react-applications-jest>Jest+React Tutorial</a> Complete.</button>
</div>
</div>
<button class="collapsible">Screenshots of Success</button>
<div class="content">
<p>
<img src="flexboxfroggy.PNG";>
</p>
</div>
<button class="collapsible">Projects</button>
<div class="content">
<button class="collapsiblecontent"><a href =https://strrules105.github.io/Pokedex>Pokedex </a> <a href = "https://github.com/strrules105/Pokedex">| Repository </a>Made with guide at <a href=https://www.freecodecamp.org/news/a-practical-guide-to-typescript-how-to-build-a-pokedex-app-using-html-css-and-typescript>freeCodeCamp</a></button>
<button class="collapsiblecontent"><a href = https://strrules105.github.io/TicTacToe>TicTacToe </a> <a href = "https://github.com/strrules105/TicTacToe">| Repository </a>Made with guide at <a href=https://reactjs.org/tutorial/tutorial.html>Reactjs.org</a></button>
<button class="collapsiblecontent"><a href = https://strrules105.github.io/Password-Strength-Checker>Password Strength Checker </a><a href = "https://github.com/strrules105/Password-Strength-Checker">| Repository </a> Started with guide at <a href=https://www.kindacode.com/article/react-typescript-password-strength-checker-example/#The_Code>kindacode.com</a> I spent like 3 hours figuring out how to use types and modify readonly values in the CSS to make a dynamic color changing progress bar.</button>
</div>
<button class="collapsible">Unfinished Projects</button>
<div class="content">
<button class="collapsiblecontent"><a href = https://strrules105.github.io/Checkers>Checkers</a> (Until I get this site working, here is the repository proof.) <a href=https://github.com/strrules105/Checkers>Checkers Github repository</a> This code was originally copied from <a href=https://github.com/GabrielMioni/react-checkers/tree/master/src>https://github.com/GabrielMioni/react-checkers/tree/master/src</a> </button>
<button class="collapsiblecontent"><a href = https://strrules105.github.io/TrustFlip>TrustFlip</a> Inspiration comes from my friend Michael young who developed <a href=https://runeflip.herokuapp.com>Runeflip</a></button>
</div>
<script> //Got this code from https://www.w3schools.com/howto/howto_js_collapsible.asp
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</HTML>