-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (227 loc) · 16.3 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
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="icon" href="titleicon.png" type="image/icon type">
<title>Tech Jobs 2023</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');
</style>
</head>
<body>
<div class="scrollmarking-0 scrollmark"></div>
<div class="mainbox">
<div class="maintext-box">
<div class="maintext letter-blue" id="letter">T</div>
<div class="maintext letter-red" id="letter">E</div>
<div class="maintext letter-yellow" id="letter">C</div>
<div class="maintext letter-blue" id="letter">H</div>
<div class="maintext letter-green" id="letter">J</div>
<div class="maintext letter-red" id="letter">O</div>
<div class="maintext letter-yellow" id="letter">B</div>
</div>
<div class="inputbox">
<div class="inputbox-text">🔎 Find out more about the available jobs in the Tech Industry!</div>
<div class="inputbox-icon">🌐</div>
</div>
<div class="grid-box">
<div class="iconbox">
<div class="icon available" id="softwareeng" onclick="scrollsoftwareeng()"><img src="softwareeng.png"></div>
<div class="iconbox-name available" onclick="scrollsoftwareeng()">Software Engineer</div>
</div>
<div class="iconbox">
<div class="icon available" id="hardwareeng" onclick="scrollhardwareeng()"><img src="hardwareeng.png"></div>
<div class="iconbox-name available">Hardware Engineer</div>
</div>
<div class="iconbox">
<div class="icon available" id="webdev" onclick="scrollwebdeveloper()"><img src="webdev.png"></div>
<div class="iconbox-name available">Web Developer</div>
</div>
<div class="iconbox">
<div class="icon available" id="networkeng" onclick="scrollnetworkengineer()"><img src="networkeng.png"></div>
<div class="iconbox-name available">Network Engineer</div>
</div>
<div class="iconbox">
<div class="icon available" id="datasci" onclick="scrolldatascientist()"><img src="datasci.png"></div>
<div class="iconbox-name available">Data Scientist</div>
</div>
<div class="iconbox">
<div class="icon available" id="securityeng" onclick="scrollsecurityengineer()"><img src="securityeng.png"></div>
<div class="iconbox-name available">Security Engineer</div>
</div>
</div>
<div class="availpos" id="availpos">
<div class="scrollmarking-1 scrollmark"></div>
<h1 class="google-blue">Software Engineer</h1>
<div class="body">Software developers design a range of software solutions, from operating systems and databases to mobile applications and games. To understand what the software is required to do, developers often liaise extensively with customers and colleagues.</div>
<div class="body">
<h3 class="header">Key Skills Include:</h3>
<div class="skillsets-row">
<div class="reqskillsets google-blue">High-level technical knowledge</div>
<div class="reqskillsets google-blue">The ability to think in a procedural and strategic manner</div>
<div class="reqskillsets google-blue">The ability to work within a team</div>
<div class="reqskillsets google-blue">Attention to detail</div>
</div>
</div>
<div class="body website-box">
<div class="website-leftsubbox">Here are websites you can checkout:</div>
<div class="website-rightsubbox">
<ol>
<li><a href="https://www.computerscience.org/careers/software-engineer/" style="text-decoration: underline; text-decoration-color: #4884f4;" >What is a software engineer?</a></li>
<li><a href="https://www.monster.com/career-advice/article/software-engineer-skills" style="text-decoration: underline; text-decoration-color: #4884f4;">Core skills and qualities required</a></li>
<li><a href= "https://sg.linkedin.com/jobs/software-engineer-jobs?position=1&pageNum=0" style="text-decoration: underline; text-decoration-color: #4884f4;">Job opportunities</a></li>
</ol>
</div>
</div>
<div class="navibuttons">
<button class="navibut google-blue" onclick="scrollup()">PREVIOUS</button>
<button class="navibut google-blue" onclick="scrollhardwareeng()">NEXT</button>
</div>
</div>
<div class="availpos" id="availpos">
<div class="scrollmarking-2 scrollmark"></div>
<h1 class="google-red">Hardware Engineer</h1>
<div class="body">Hardware engineers design, build, and test computer hardware (such as computer chips and circuit boards) and computer systems. They also work with peripheral devices such as printers, scanners, modems, and monitors, among others.</div>
<div class="body">
<h3 class="header">Key Skills Include:</h3>
<div class="skillsets-row">
<div class="reqskillsets google-red">High-level of analysis</div>
<div class="reqskillsets google-red">The ability to think in a logical manner</div>
<div class="reqskillsets google-red">The ability to work within a team</div>
<div class="reqskillsets google-red">Attention to detail</div>
</div>
</div>
<div class="body website-box">
<div class="website-leftsubbox">Here are websites you can checkout:</div>
<div class="website-rightsubbox">
<ol>
<li><a href="https://www.careerexplorer.com/careers/computer-hardware-engineer/" style="text-decoration: underline; text-decoration-color: #d9433b;"> Job Scope of a hardware engineer</a></li>
<li><a href="https://www.indeed.com/career-advice/career-development/hardware-engineering-vs-software-engineering" style="text-decoration: underline; text-decoration-color: #d9433b;">Difference between hardware and software engineers</a></li>
<li><a href= "https://www.zippia.com/hardware-engineer-jobs/" style="text-decoration: underline; text-decoration-color: #d9433b;" >Experience of being a hardware engineer</a></li>
</ol>
</div>
</div>
<div class="navibuttons">
<button class="navibut google-red" onclick="scrollsoftwareeng()">PREVIOUS</button>
<button class="navibut google-red" onclick="scrollwebdeveloper()">NEXT</button>
</div>
</div>
<div class="availpos" id="availpos">
<div class="scrollmarking-3 scrollmark"></div>
<h1 class="google-yellow">Web Developer</h1>
<div class="body">Web developers are responsible for day-to-day Web site creation and design. They combine the skills of a computer programmer with those of a graphic designer. Developers work with all of the elements of a Web site—text, images, graphics, and more—to come up with functional, interesting, and user-friendly designs.</div>
<div class="body">
<h3 class="header">Key Skills Include:</h3>
<div class="skillsets-row">
<div class="reqskillsets google-yellow">Understanding of web technologies (client side, server side and databases)</div>
<div class="reqskillsets google-yellow">The ability to keep abreast of latest developments in HTML, CSS and other coding languages</div>
<div class="reqskillsets google-yellow">Creative and analytical thinking</div>
<div class="reqskillsets google-yellow">Eye for design and aesthetic</div>
</div>
</div>
<div class="body website-box">
<div class="website-leftsubbox">Here are websites you can checkout:</div>
<div class="website-rightsubbox">
<ol>
<li><a href="https://brainstation.io/career-guides/how-to-become-a-web-developer" style="text-decoration: underline; text-decoration-color: #e8ac04;">How to become a web developer?</a></li>
<li><a href="https://devmountain.com/blog/4-ways-to-determine-the-best-web-development-language/" style="text-decoration: underline; text-decoration-color: #e8ac04;">Key programming languages required</a></li>
<li><a href= "https://www.nobledesktop.com/classes-near-me/blog/web-developer-pros-and-cons" style="text-decoration: underline; text-decoration-color: #e8ac04;">Advantages of being a web developer</a></li>
</ol>
</div>
</div>
<div class="navibuttons">
<button class="navibut google-yellow" onclick="scrollhardwareeng()">PREVIOUS</button>
<button class="navibut google-yellow" onclick="scrollnetworkengineer()">NEXT</button>
</div>
</div>
<div class="availpos" id="availpos">
<div class="scrollmarking-4 scrollmark"></div>
<h1 class="google-green">Network Engineer</h1>
<div class="body">Network engineering involves setting up, administering, maintaining and upgrading communication systems, local area networks and wide area networks for an organisation. Network engineers are also responsible for security, data storage and disaster recovery strategies.</div>
<div class="body">
<h3 class="header">Key Skills Include:</h3>
<div class="skillsets-row">
<div class="reqskillsets google-green">Specialist network knowledge</div>
<div class="reqskillsets google-green">The ability to think in a analytical manner</div>
<div class="reqskillsets google-green">The ability to problem solve</div>
<div class="reqskillsets google-green">Excellent communication skills</div>
</div>
</div>
<div class="body website-box">
<div class="website-leftsubbox">Here are websites you can checkout:</div>
<div class="website-rightsubbox">
<ol>
<li><a href="https://resources.workable.com/network-engineer-job-description" style="text-decoration: underline; text-decoration-color: #109c5c;">Job scope of network engineers</a></li>
<li><a href="https://www.sdxcentral.com/industry/career/skills/top-10-network-engineer-skills-to-know/" style="text-decoration: underline; text-decoration-color: #109c5c;">Skills and Knowledge required</a></li>
<li><a href= "https://www.jobstreet.com.sg/en/job-search/network-engineer-jobs/" style="text-decoration: underline; text-decoration-color: #109c5c;">Job opportunities in Singapore</a></li>
</ol>
</div>
</div>
<div class="navibuttons">
<button class="navibut google-green" onclick="scrollwebdeveloper()">PREVIOUS</button>
<button class="navibut google-green" onclick="scrolldatascientist()">NEXT</button>
</div>
</div>
<div class="availpos" id="availpos">
<div class="scrollmarking-5 scrollmark"></div>
<h1 class="google-blue">Data Scientist</h1>
<div class="body">Data scientists are experts in wrestling with huge amounts of (often messy) data points and using their arsenal of skills in maths, statistics and programming to clean and organise them into value-adding insights.</div>
<div class="body">
<h3 class="header">Key Skills Include:</h3>
<div class="skillsets-row">
<div class="reqskillsets google-blue">Solid grasp of statistics, including statistical test and distributions</div>
<div class="reqskillsets google-blue">The ability to work with a variety of programming languages like SAS, R and Python</div>
<div class="reqskillsets google-blue">The ability to visually represent data and insights for easier analysis</div>
<div class="reqskillsets google-blue">The ability to look for and find order, patterns and trends in data.</div>
</div>
</div>
<div class="body website-box">
<div class="website-leftsubbox">Here are websites you can checkout:</div>
<div class="website-rightsubbox">
<ol>
<li><a href="https://sponsored.chronicle.com/the-data-boom-spurs-new-demand-for-data-scientists/index.html" style="text-decoration: underline; text-decoration-color: #4884f4;">Demand for data scientists are increasing</a></li>
<li><a href="https://www.google.com/search?client=safari&rls=en&q=data+sicnetist+job+opportunites&ie=UTF-8&oe=UTF-8" style="text-decoration: underline; text-decoration-color: #4884f4;">Job opportunites for data scientists</a></li>
<li><a href= "https://www.simplilearn.com/what-skills-do-i-need-to-become-a-data-scientist-article" style="text-decoration: underline; text-decoration-color: #4884f4;">Most important skills for data scientists</a></li>
</ol>
</div>
</div>
<div class="navibuttons">
<button class="navibut google-blue" onclick="scrollnetworkengineer()">PREVIOUS</button>
<button class="navibut google-blue" onclick="scrollsecurityengineer()">NEXT</button>
</div>
</div>
<div class="availpos" id="availpos">
<div class="scrollmarking-6 scrollmark"></div>
<h1 class="google-red">Security Engineer</h1>
<div class="body">Security Engineers are dedicated to strategising how to protect their information, networks and systems and how to prevent, address and curtail disasters if they should occur.</div>
<div class="body">
<h3 class="header">Key Skills Include:</h3>
<div class="skillsets-row">
<div class="reqskillsets google-red">Specialist knowledge in relation to cybersecurity protocols</div>
<div class="reqskillsets google-red">Specialist network knowledge</div>
<div class="reqskillsets google-red">The ability to handle stressful situations</div>
<div class="reqskillsets google-red">Attention to detail</div>
</div>
</div>
<div class="body website-box">
<div class="website-leftsubbox">Here are websites you can checkout:</div>
<div class="website-rightsubbox">
<ol>
<li><a href="https://www.coursera.org/articles/what-is-a-security-engineer" style="text-decoration: underline; text-decoration-color: #d9433b;">Understanding more about security engineers</a></li>
<li><a href="https://www.michaelpage.com.sg/advice/job-description/technology/cybersecurity-engineer" style="text-decoration: underline; text-decoration-color: #d9433b;">Importance of security engineers<a></li>
<li><a href= "https://www.bestcolleges.com/bootcamps/guides/best-cybersecurity-programming-languages/" style="text-decoration: underline; text-decoration-color: #d9433b;">Programming languages neeeded </a></li>
</ol>
</div>
</div>
<div class="navibuttons">
<button class="navibut google-red" onclick="scrolldatascientist()">PREVIOUS</button>
<button class="navibut google-red" onclick="scrollup()">HOME</button>
</div>
</div>
</div>
</body>
</html>