-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
198 lines (186 loc) · 11.1 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
<!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">
<link rel="stylesheet" href="portfolio.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="portfolio.js"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400&family=Krona+One&family=Shrikhand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Flickity -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<title>Kirsty Bryce</title>
<link rel="icon" href="Images/icon.png" type="image/png">
</head>
<body>
<main>
<section id='home'>
<div class='home-container'>
<nav>
<ul id='nav-list'>
<li><a href="#about">ABOUT</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<div id='home-titles'>
<div id='inner-title-div'>
<h1 id='title'>KIRSTY BRYCE</h1>
<h1 id='small-title'>KIRSTY<br>BRYCE</h1>
<h2 id='subtitle'>COMPUTING GRADUATE<br>WEB DEVELOPER & DESIGNER</h2>
<h2 id='small-subtitle'>COMPUTING GRADUATE<br>WEB DEVELOPER<br>& DESIGNER</h2>
</div>
</div>
</div>
<img id='home-banner' src='Images/home-banner.png' alt="Home page banner picture">
</section>
<section id='about'>
<div class='custom-container'>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<h2 class='section-title'>ABOUT</h2>
<p class='about-text'>
I’m Kirsty and I’m a web developer and designer.
I received a Master’s degree in Computing from Edinburgh
Napier University in October 2020. I also have a Master’s
degree in Arts & Cultural Management, and a Bachelor's in Audio Production.
For my Computing Master's dissertation I created a prototype of a relaxation
app using Axure, which you can view <a href='http://www.kirstybryce.com/ZenSounds/' target="_blank">here</a>.
<br>
<br>
My multi-disciplinary background in art and computing has allowed me to have skills that can be used
in different areas of work. During my Computing Master's I learned skills such as web development
and UX/UI design. I also have skills in design and prototyping tools such as Figma, Photoshop, Illustrator, InDesign, XD, and Axure.
I know web development technologies such as HTML, CSS, JavaScript, TypeScript, React, Bootstrap, SASS, Webflow, and Git.
<br>
<br>
Other than web development, my interests lie in music, dancing, comic books, video games, and drawing.
</p>
</div>
<div class="col-lg-6 col-xl-6">
<div class='doc-links' id='doc-links-lg'>
<a href='./PDF-files/Kirsty-Bryce-CV.pdf' target="_blank">CV</a>
<br>
<br>
<a href='./PDF-files/Computing-Dissertation.pdf' target="_blank">COMPUTING MSC DISSERTATION</a>
<br>
<br>
<a href='./PDF-files/Cultural-Project.pdf' target="_blank">ARTS MANAGEMENT MA PROJECT</a>
<br>
<br>
<a href='./PDF-files/Major-Project.pdf' target="_blank">AUDIO PRODUCTION BA(HONS) DISSERTATION</a>
<br>
<br>
<a href='./PDF-files/web design udemy certificate.pdf' target="_blank">WEB DESIGN CERTIFICATE</a>
<br>
<br>
<a href='https://www.codecademy.com/profiles/KirstyBryce/certificates/705dcb15de0da4dd9d9fc4f3274b430e' target="_blank">JAVASCRIPT CERTIFICATE</a>
<br>
<br>
<a href='https://www.codecademy.com/profiles/KirstyBryce/certificates/56fb1e71303e37b643bb1905f31c8a09' target="_blank">TYPESCRIPT CERTIFICATE</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12">
<div class='doc-links' id='doc-menu'>
<ul>
<li onclick="openLinksMenu()">LINKS
<ul id='inner-menu' class='hide-contents'>
<li><a href='./PDF-files/Kirsty-Bryce-CV.pdf' target="_blank">CV</a></li>
<li><a href='./PDF-files/Computing-Dissertation.pdf' target="_blank">COMPUTING MSC DISSERTATION</a></li>
<li><a href='./PDF-files/Cultural-Project.pdf' target="_blank">ARTS MANAGEMENT MA PROJECT</a></li>
<li><a href='./PDF-files/Major-Project.pdf' target="_blank">AUDIO PRODUCTION BA(HONS) DISSERTATION</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id='projects'>
<h2 class='section-title'>PROJECTS</h2>
<!-- Flickity carousel -->
<div class="carousel" data-flickity='{ "wrapAround": false }'>
<!-- team app -->
<div class="carousel-cell">
<a href="https://team-app-841a18.webflow.io/" target="_blank">
<div class="slide-border">
<img class='carousel-img' alt='Team App' src="Carousel/team-app.jpg" alt="Second slide">
</div>
</a>
<p class='project-caption'><span class='project-title'>Team App</span> is a responsive site of a team working site I created using Webflow, with static (home) and dynamic (blog) pages.</p>
</div>
<!-- chat app -->
<div class="carousel-cell">
<a href="https://chat-app-homepage-123.webflow.io//" target="_blank">
<div class="slide-border">
<img class='carousel-img' alt='Chat App' src="Carousel/chat-app.png" alt="Second slide">
</div>
</a>
<p class='project-caption'><span class='project-title'>ChatApp</span> is a responsive prototype of a messaging site I created using Webflow</p>
</div>
<!-- ornamental -->
<div class="carousel-cell">
<a href="https://www.figma.com/proto/EEvuRpnQ2YpXzesesolgKu/Ornamental?node-id=1%3A3&scaling=min-zoom&page-id=0%3A1" target="_blank">
<div class="slide-border">
<img class='carousel-img' alt='Ornamental' src="Carousel/ornamental.png" alt="First slide">
</div>
</a>
<p class='project-caption'><span class='project-title'>Ornamental</span> is a prototype of a vintage item store I created using Figma</p>
</div>
<!-- MoveMe -->
<div class="carousel-cell">
<a href="https://www.figma.com/proto/M88Xthy33uF4QLcWgYOuTs/MoveMe-Fitness-App?node-id=1%3A41&scaling=min-zoom&page-id=0%3A1" target="_blank">
<div class="slide-border">
<img class='carousel-img' alt='Move me' src="Carousel/moveme.png" alt="Third slide">
</div>
</a>
<p class='project-caption'><span class='project-title'>MoveMe</span> is a prototype of a fitness social site I created using Figma</p>
</div>
<!-- LST Aquaholics -->
<div class="carousel-cell">
<a href="Carousel/aquaholics.png" target="_blank">
<div class="slide-border">
<img class='carousel-img' alt='LST Aquaholics' src="Carousel/aquaholics.png" alt="Fourth slide">
</div>
</a>
<p class='project-caption'><span class='project-title'>LST Aquaholics</span> is a logo I designed to be printed on water bottles for the Life Science Technologies departement of Imec (Leuven, Belgium)</p>
</div>
<!-- Flickity carousel end -->
</section>
</main>
<a id="back-to-top" title="Back to top" class='hide'>
<span class="material-icons md-48">
arrow_circle_up
</span>
</a>
<footer id='contact'>
<div class="custom-container">
<h2 class='section-title'>CONTACT</h2>
<div class="row" id='contact-links'>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3" id='phone-div'>
<a href="tel:+34603166336">+34 603 16 63 36</a>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<a href='https://www.linkedin.com/in/kirsty-bryce-1283b9127/' target="_blank">LinkedIn</a>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3" id='location-div'>
Murcia, Spain
</div>
</div>
</div>
</footer>
</body>
</html>