-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (181 loc) · 10.2 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
<!--
Web Development Project - index.html
Author: Adrian Thomas Capacite
Date:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P236LWH');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adrian Capacite</title>
<link rel="icon" type="image/x-icon" href="assets/images/favicon/favicon.ico">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/content-style.css">
</head>
<body class="">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P236LWH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav id="primary-nav">
<ul class="constrain-width">
<li id="nav-logo"><a href="index.html"><img src="assets/images/logo/AC-White-x64.png" alt="Logo"></a></li>
<li class="nav-link"><a href="software.html">Software</a></li>
<li class="nav-link"><a href="photography.html">Photography</a></li>
<li class="nav-link"><a href="software-web-dev-project.html">Web Project</a></li>
<li class="nav-link"><a href="about.html">About</a></li>
<li class="nav-link"><a href="#" onclick="openContactModal()">Contact</a></li>
</ul>
<div class="nav-toggle" onclick="toggleNav()">
<div></div>
</div>
</nav>
<div class="header-background viewport-height">
<img src="assets/images/background/adrian-sillhouette.jpg" alt="Sillhouette of Adrian">
<div class="background-gradient"></div>
</div>
<header class="viewport-height">
<div id="home-header-logo">
<img src="assets/images/logo/Adrian-white-x256.png" alt="logo">
<img src="assets/images/logo/Capacite-white-x256.png" alt="logo">
</div>
</header>
<!-- Main Content -->
<main class="constrain-width">
<section>
<h1>My name is Adrian Capacite</h1>
<p>
I'm a software developer, web developer and photographer. Based in Dublin, Ireland
</p>
<p>
I'm currently studying my BSc in Computer Science at Technological University Dublin.
</p>
<p>
My top 3 computer languages are:
</p>
<ol>
<li>Java</li>
<li>C</li>
<li>HTML and CSS <small>Yes, they're two separate languages but they work with eachother</small></li>
</ol>
</section>
<section>
<h2>Latest Articles</h2>
<div class="scrolling-cards">
<article class="card">
<div>
<a href="software-web-dev-project.html">
<img src="assets/images/background/html-web-development.jpg" alt="HTML code and website" loading="lazy">
<h3>Web Development Project Report</h3>
<p>The website will serve as an interactive hub for learning, research and career information about the present writer. The website will provide content such as a portfolio for work such as software development and photography, blog articles, links to social media profiles such as GitHub, Twitter, Instagram etc…, a means to quickly contact the present writer and an online Curriculum Vitae.</p>
</a>
</div>
</article>
<article class="card">
<div>
<a href="software-my-uni-experience.html">
<img src="assets/images/background/Central-Quad-cgi-view-from-Academic-Plaza_small.jpg" alt="Central Quad cgi view from Academic Plaza" loading="lazy">
<h3>My Uni Experience</h3>
<p>Before I started university, I was doing my QQI Level 5 course in Software Development in Dun Laoghaire Further Education. In the course I did subjects such as Database Methods, Software Architecture, Web Authoring, Program and Design Principals, Work Experience, Communications, Maths and Networking. I was delighted to graduated the course with straight distinctions. Afterwards, I took up a few jobs during the summer to save up money to pay for my tuition and rent for when I move out.</p>
</a>
</div>
</article>
</div>
</section>
<section>
<h2>Latest Photos</h2>
<div class="carousel">
<div class="carousel-display">
<a class="carousel-prev" onclick="carouselPrev(this)">
<i class="fas fa-chevron-left"></i>
</a>
<a class="carousel-next" onclick="carouselNext(this)">
<i class="fas fa-chevron-right"></i>
</a>
<div class="carousel-pos-data">0</div>
<div class="carousel-pos">1 / 7</div>
<img class="carousel-image" src="assets/images/galleries/latest/bray-beach-1.jpg" alt="Bray beach" loading="lazy">
</div>
<div class="carousel-images-thumbs">
<img src="assets/images/galleries/latest/bray-beach-1.jpg" alt="Bray beach" loading="lazy" onclick="carouselSetTo(this, 0)">
<img src="assets/images/galleries/latest/bray-beach-2.jpg" alt="Bray beach" loading="lazy" onclick="carouselSetTo(this, 1)">
<img src="assets/images/galleries/latest/kilarney-waterfall.jpg" alt="Waterfall at kilarney" loading="lazy" onclick="carouselSetTo(this, 2)">
<img src="assets/images/galleries/latest/newbridge-river-liffey-1.jpg" alt="River Liffey at Newbridge" loading="lazy" onclick="carouselSetTo(this, 3)">
<img src="assets/images/galleries/latest/newbridge-river-liffey-2.jpg" alt="River Liffey at Newbridge" loading="lazy" onclick="carouselSetTo(this, 4)">
<img src="assets/images/galleries/latest/sandymount-beach.jpg" alt="Sandymount Beach" loading="lazy" onclick="carouselSetTo(this, 5)">
<img src="assets/images/galleries/latest/wet-road-at-dusk.jpg" alt="Wet road at dusk" loading="lazy" onclick="carouselSetTo(this, 6)">
</div>
</div>
</section>
</main>
<!-- Main Content End -->
<footer class="constrain-width">
<p>Adrian Capacite © 2021</p>
</footer>
<!-- Contact modal -->
<section id="contact-modal" class="modal-container">
<div class="modal-content contact-form">
<div class="modal-close div-icon icon-x" onclick="closeContactModal()">
<div></div>
</div>
<h2 class="font-size-2">Contact me</h2>
<P>
Contacts not available at the moment.
</P>
<!-- <form action="#" name="contact-form" id="contact-form" onsubmit="validateForm(this)">
<div class="input text required">
<label for="name" class="input-label">Name</label><input type="text" id="name" name="name">
</div>
<div class="input text required">
<label for="email" class="input-label">Email</label><input type="text" name="email" id="email">
</div>
<div class="input input-group radio required">
<span class="input-label">Reason of contact</span>
<div class="input-options">
<input type="radio" name="reason" id="enquiry"><label for="enquiry">Enquiry</label>
<input type="radio" name="reason" id="suggestion"><label for="suggestion">Suggestion</label>
<input type="radio" name="reason" id="issue"><label for="issue">Issue</label>
</div>
</div>
<div class="input input-group check required">
<span class="input-label">Subject</span>
<div class="input-options">
<input type="checkbox" name="subject" id="photography"><label for="photography">Photography</label>
<input type="checkbox" name="subject" id="software"><label for="software">Software</label>
<input type="checkbox" name="subject" id="correspondence"><label for="correspondence">Correspondence</label>
</div>
</div>
<div class="input select">
<label for="visitor-origin" class="input-label">How did you hear about me?</label>
<select name="visitor-origin" id="visitor-origin">
<option value="">N/A</option>
<option value="friend">A friend</option>
<option value="search">On google</option>
<option value="social-media">Social media</option>
</select>
</div>
<div class="input textarea required ">
<label for="message" class="input-label">Message</label><textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<div class="submit">
<p class="submit-output">Form submitted</p>
<button type="submit" value="submit">Submit</button>
</div>
</form> -->
</div>
</section>
<!-- End contact modal -->
<script src="assets/scripts/scripts.js"></script>
<!-- fontawesome.com script for icons -->
<script src="https://kit.fontawesome.com/87e2e714ed.js" crossorigin="anonymous"></script>
</body>
</html>