-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (207 loc) · 12.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="./hunterTabs.css">
<link rel="stylesheet" href="./hunterJumper.css">
<link rel="stylesheet" href="./hunterScroller.css">
<link rel="stylesheet" href="./animate.css">
<!-- <script defer src="./hunterScroller.js" type="module"></script> -->
<script src="https://kit.fontawesome.com/0ceac8fa1a.js" crossorigin="anonymous"></script>
<script defer src="./hunterTabs.js"></script>
<script defer src="./animate.js"></script>
<!-- <script defer src="./JumpingGame/hunterJumper.js"></script> -->
<title>Dio's Domain</title>
</head>
<body>
<header id="mainHeader">
<nav>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="hallofgame.html">Hall Of Game</a></li>
<li><a href="mailme.html">E-Mail Me</a></li>
<li><a href="film-app.html">Film App</a></li>
</ul>
</nav>
</header>
<section class="section">
<div class="title" >
<h2 class="title">Welcome to Dio's Domain</h2>
<p class="intro">
Hello, my name is Nathan Davies Parkes and this is a look into my beginnings...
</p>
</div>
<div class="about-center section-center">
<article class="about-img">
<img id="hisoka" src="./Images/hisoka.png" alt="hisoka hunterXhunter">
</article>
<article class="about">
<!-- btn container -->
<div class="btn-container">
<button class="tab-btn active" data-id="aboutMe">My story
</button>
<button class="tab-btn" data-id="mySkills">My Skills
</button>
<button class="tab-btn" data-id="myProjects">My Projects
</button>
</div>
<article class="about-content">
<!-- single item -->
<div class="content active" id="aboutMe">
<!-- <section class="dataOutput"></section> -->
<section id="firstTab">
<!-- <a href="../hunterHome/index.html" target= '_blank'>Click me for the Low down of my Story</a> -->
<p class="myStory">My journey as a developer began in 2021 when I enrolled on CodeCademy's Full Stack Engineer Course. In 2022 I reached out to an organisation called GlowFinger, where I was accepted as an intern and commenced in my largest trial yet, Business Transfiguration. I learnt many new skills and my understanding in the concept of programming grew, I have now taken on tools such as Svelte, Tailwind CSS, Docker and more. More about me<a href="./Images/Nathan DP - Developer CV 2023.pdf" target="-blank"><i class="fa-solid fa-circle-info"></i></a></p>
<!-- <img src="./Images/gon-killua.jpg" alt="gon-killua"> -->
</section>
</div>
<!-- end of single item -->
<!-- single item -->
<div class="content" id="mySkills">
<section id="secondTab" >
<div class="flex">
<div class="flip-card" style="margin-left: 1.2%;">
<div class="flip-card-inner">
<div class="flip-card-front">
<i class="fa-brands fa-square-js fa-10px" style="color: #bfe2d9;"></i>
</div>
<div class="flip-card-back">
<h2>JS</h2>
<p>I used this in creation of games, functionality and API's.</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<i class="fa-brands fa-python fa-10px" style="color: #bfe2d9;"></i>
</div>
<div class="flip-card-back">
<h2>Python</h2>
<p>Mainly found in my mini games and links to databases.</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<i class="fa-brands fa-html5 shield " style="color: #bfe2d9;"></i>
</div>
<div class="flip-card-back">
<h2>HTML</h2>
<p>The base of how to render information on a webpage.</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<i class="fa-brands fa-css3-alt shield fa-10px" style="color: #bfe2d9;"></i>
</div>
<div class="flip-card-back">
<h2>CSS</h2>
<p>Used in designing webpages and games.</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<i class="fa-brands fa-square-git fa-10px" style="color: #bfe2d9;"></i>
</div>
<div class="flip-card-back">
<h2>GitHub</h2>
<p>A great tool for storing and progressing with code.</p>
</div>
</div>
</div>
<div class="flip-card" style="margin-left: 2%;">
<div class="flip-card-inner">
<div class="flip-card-front">
<i class="fa-sharp fa-solid fa-database" style="color: #bfe2d9;"></i>
</div>
<div class="flip-card-back">
<h2>SQL</h2>
<p>A backend language that allows connections to databases.</p>
</div>
</div>
</div>
</div>
<!-- <img src="./Images/killuaShadow.jpg" alt="killuaShadow"> -->
</section>
</div>
<!-- end of single item -->
<!-- single item -->
<div class="content" id="myProjects">
<section id="thirdTab">
<dl>
<dt>
Jumping Game - <a href="./JumpingGame/hunterJumper.html" target="_blank">View</a>
</dt>
<dd>
<i class="fa-solid fa-gamepad pad flip"></i>
<i class="fa-brands fa-square-js flip" ></i>
<i class="fa-brands fa-html5 flip"></i>
<i class="fa-brands fa-css3-alt flip"></i>
</dd>
<dt>
Original SideScroller - <a href="./SideScroller/hunterScroller.html" target="_blank">View</a>
</dt>
<dd>
<i class="fa-solid fa-gamepad pad flip"></i>
<i class="fa-brands fa-square-js flip" ></i>
<i class="fa-brands fa-html5 flip"></i>
<i class="fa-brands fa-css3-alt flip"></i>
</dd>
<dt>
Current SideScroller - <a href="https://ashy-mushroom-02b6fdb03.3.azurestaticapps.net" target="_blank">View</a>
</dt>
<dd>
<i class="fa-solid fa-gamepad pad flip"></i>
<i class="fa-brands fa-square-js flip" ></i>
<i class="fa-brands fa-html5 flip"></i>
<i class="fa-brands fa-css3-alt flip"></i>
<i class="fa-brands fa-square-git flip"></i>
</dd>
<dt>
Film Application - <a href="./film-app.html">View</a>
</dt>
<dd>
<i class="fa-solid fa-computer flip"></i>
<i class="fa-brands fa-python flip" ></i>
<i class="fa-sharp fa-solid fa-database flip"></i>
</dd>
</dl>
</section>
</div>
<!-- end of single item -->
</article>
</article>
</div>
</section>
<footer>
<section id="footer">
<span class="git">
<a href="https://github.com/DiOality/dios-domain" target="_blank" class="text-gray-400 hover:text-gray-500">
<!-- <span class="sr-only">GitHub</span> -->
<p><svg fill="#758BFD" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a></p>
</span>
<span>
<p><a href="https://www.linkedin.com/in/nathan-d-parkes-307a34260?" target="_blank">
<svg fill="#758BFD" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a></p>
</span>
<p><a href="https://www.instagram.com/dioality/" target="_blank"><svg fill="#758BFD" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a></p>
<!-- <p id="copyright">© 2023 Nathan Davies Parkes</p> -->
</section>
</footer>
</body>
</html>