-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
145 lines (130 loc) · 9.41 KB
/
script.js
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
const cardMarkup = `
<div class="cardLayoutContainer">
<section id="itemLeft" class="leftSection">
<div id="leftPictureContainer">
<div id="leftPicture"></div>
</div>
<div id="leftPictureTitle"></div>
<div id="leftExtraInfo"></div>
</section>
<section id="itemRight" class="rightSection">
<div class="rightElementStyling" id="rightAreaTop"></div>
<div class="rightElementStyling" id="rightAreaMiddle"></div>
<div class="rightElementStyling" id="rightAreaBottom"></div>
</section>
</div>
`
window.addEventListener('DOMContentLoaded', function (){
document.getElementById('cardDisplayContainer').innerHTML = cardMarkup;
popluateRightCard_Home()
})
document.getElementById('home').addEventListener('click', popluateRightCard_Home)
document.getElementById('home').addEventListener('click', animationWrapper)
document.getElementById('about').addEventListener('click', popluateRightCard_About)
document.getElementById('about').addEventListener('click', animationWrapper)
document.getElementById('github').addEventListener('click', popluateRightCard_Github)
document.getElementById('github').addEventListener('click', animationWrapper)
document.getElementById('resume').addEventListener('click', popluateRightCard_Resume)
document.getElementById('resume').addEventListener('click', animationWrapper)
function popluateRightCard_Home(){
document.getElementById('leftPicture').style.background = '#FFFFFF url("https://drextd.github.io/garethadam.github.io/images/personalPicture.jpg") no-repeat center'
document.getElementById('leftPicture').style.backgroundSize = 'cover'
document.getElementById('leftPictureTitle').textContent = 'Gareth Adam'
document.getElementById('leftExtraInfo').textContent = 'Web Developer, I.T Professional'
document.getElementById('rightAreaTop').textContent = 'Welcome to my Portfolio.'
document.getElementById('rightAreaMiddle').textContent = 'Most recent position held was a Graduate Support Engineer of 2 years to get my foot in the door into the I.T industry.'
document.getElementById('rightAreaBottom').textContent = 'Now seeking to take the next step in my career as a Junior Web Developer / Software Engineer. Currently working towards my AWS Cloud Practitioner certification.'
}
function popluateRightCard_About(){
document.getElementById('leftPicture').style.background = '#FFFFFF url("https://drextd.github.io/garethadam.github.io/images/personalPicture.jpg") no-repeat center'
document.getElementById('leftPicture').style.backgroundSize = 'cover'
document.getElementById('leftPictureTitle').textContent = 'Gareth Adam'
document.getElementById('leftExtraInfo').textContent = 'Web Developer, I.T Professional'
document.getElementById('rightAreaTop').textContent = 'A little bit about myself.'
document.getElementById('rightAreaMiddle').textContent = `After graduating from University of Canberra (QLD TAFE Campus) back in 2018 I went straight into the I.T industry as a Graduate Support Engineer.
This position opened up the world to what it means to work in a larger team and gave me first hand experience working within a Monolithic system.
Additionally has granted me a unique perspective of being able on both sides of the fence with supporting applications and developing them.`
document.getElementById('rightAreaBottom').textContent = `My interests lie within problem solving, running on the treadmill of always learning, curiousity to dive deeper that what is required.
Lastly, I spend my free time with my loving family and being an avid gamer (video and tabletop).`
}
function popluateRightCard_Github(){
document.getElementById('leftPicture').style.background = '#FFFFFF url("https://drextd.github.io/garethadam.github.io/images/githubLogo.png") no-repeat center'
document.getElementById('leftPicture').style.backgroundSize = 'cover'
document.getElementById('leftPictureTitle').textContent = 'Github Links'
document.getElementById('leftExtraInfo').textContent = 'Code examples / Previous projects'
document.getElementById('rightAreaTop').innerHTML = `Leetcode
<a href="https://leetcode.com/problemset/all/">https://leetcode.com/problemset/all/</a>
Github repo
<a href="https://github.com/Drextd/garethadam.github.io/tree/main/Leetcode%20Solutions">garethadam.github.io - Leetcode Solutions</a>
`
document.getElementById('rightAreaMiddle').innerHTML = `TAFE - Nov 2016
<a href="https://github.com/Drextd/QuoteSystem">QuoteSytem</a>
University - Feb 2017 to Nov 2018
<a href="https://github.com/Drextd/socialmedia">socialmedia - replicated</a>
<a href="https://github.com/Drextd/weatherApp">weatherApp - Public API (Dark Sky)</a>
<a href="https://github.com/Drextd/getthatrecipe">getthatrecipe - Public API (Edamam)</a>
The Odin Project
<a href="https://github.com/Drextd/theOdinProject/tree/main/full_stack_javascript">The Odin Project - Full Stack Javascript</a>
`
document.getElementById('rightAreaBottom').textContent = 'The primary focus has been with Javascript as this is my preferred language of choice and my most proficient.'
}
function popluateRightCard_Resume(){
document.getElementById('leftPicture').style.background = '#FFFFFF url("https://drextd.github.io/garethadam.github.io/images/resumePicture.png") no-repeat center'
document.getElementById('leftPicture').style.backgroundSize = 'cover'
document.getElementById('leftPictureTitle').textContent = 'Resume and Contact'
document.getElementById('leftExtraInfo').innerHTML = `Email
<a href="mailto:[email protected]">[email protected]</a>
`
document.getElementById('rightAreaTop').innerHTML = `Resume
<a href="https://drive.google.com/file/d/1Zbr_aK7ifeTWd9ADqn_9BHDzyZ7lrBrI/view?usp=sharing">Google Drive: CV - Gareth Adam</a>
`
document.getElementById('rightAreaMiddle').innerHTML = `Social Links
<ul>
<li id='facebookIcon'></li>
<li><a href="https://www.facebook.com/gareth.adam.5/">Facebook</a></li>
</ul>
<ul>
<li id='discordIcon'></li>
<li><a>Discord - Gression#0076 </a></li>
</ul>
<ul>
<li id='battleNetIcon'></li>
<li><a>Battle.Net - Drextd#6654 </a></li>
</ul>
`
document.getElementById('facebookIcon').style.background = 'url("https://drextd.github.io/garethadam.github.io/images/facebookIcon.png") no-repeat center'
document.getElementById('facebookIcon').style.backgroundSize = 'contain'
document.getElementById('discordIcon').style.background = 'url("https://drextd.github.io/garethadam.github.io/images/discordIcon.png") no-repeat center'
document.getElementById('discordIcon').style.backgroundSize = 'contain'
document.getElementById('battleNetIcon').style.background = 'url("https://drextd.github.io/garethadam.github.io/images/battleNetIcon.png") no-repeat center'
document.getElementById('battleNetIcon').style.backgroundSize = 'contain'
document.getElementById('rightAreaBottom').innerHTML = ''
}
function leftAnimation(){
document.getElementById('itemLeft').animate([
{
opacity: 0,
transform: 'translateX(-20%)'
},
{
opacity: 1,
transform: 'translateX(0%)'
}
], 1000)
}
function rightAnimation(){
document.getElementById('itemRight').animate([
{
opacity: 0,
transform: 'translateX(20%)'
},
{
opacity: 1,
transform: 'translateX(0%)'
}
], 1000)
}
function animationWrapper(){
leftAnimation()
rightAnimation()
}