-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathskills.html
executable file
·155 lines (142 loc) · 8.74 KB
/
skills.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
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>DawnM | Skills</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CV website for DawnM Calder-Murphy, Full Stack Development student, and Graphic Designer">
<meta name="keywords" content="Fullstack developer, graduate, HTML, CSS, JavaScript, Python, Graphic Designer">
<meta name="author" content="DawnM">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
<link rel="icon" type="image/png" href="assets/favicomatic/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="assets/favicomatic/favicon-16x16.png" sizes="16x16" />
</head>
<body>
<!-- Header includes my name, job title & button to email me. To be added later: button for switching to site optimised for those with visual impairment. -->
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img alt="DawnM - Developer and Designer" src="assets/images/DawnM-resume-brand.svg">
</a>
<a class="btn btn-default navbar-btn" href="mailto:[email protected]" target="_blank"><img src="assets/images/navicon-emailme.svg" alt="Email me button" title="Email Me"></a>
<a class="btn btn-default navbar-btn hidden-xs hidden-sm" href="work.html"><img src="assets/images/navicon-work.svg" alt="Work button" title="My Work Experience"></a>
<a class="btn btn-default navbar-btn hidden-xs hidden-sm" href="skills.html"><img src="assets/images/navicon-skills.svg" alt="Skills button" title="My Skills"></a>
<a class="btn btn-default navbar-btn hidden-xs hidden-sm" href="studies.html"><img src="assets/images/navicon-study.svg" alt="Studies button" title="My Studies"></a>
<a class="btn btn-default navbar-btn hidden-xs hidden-sm" href="index.html"><img src="assets/images/navicon-author.svg" alt="Home button" title="About Me"></a>
</div>
</div>
</nav>
</header>
<main class="panels container-fluid">
<!-- Languages panel -->
<div class="col-xs-12 col-xs-offset-0 col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-1 col-lg-4 col-lg-offset-1">
<div class="panel panel-default skills-languages">
<!-- Panel title, and image depicting languages / frameworks I know -->
<div class="panel-heading">Languages</div>
<div class="panel-body">
<img src="assets/images/skills-languages.svg" class="img-responsive center-block skills-image">
</div>
<!-- List of languages / frameworks I know -->
<ul class="list-group">
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-html.svg" alt="bullet point" aria-hidden="true">
<a href="https://www.w3schools.com/html/html5_intro.asp" target="_blank">HTML / HTML5</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-css.svg" alt="bullet point" aria-hidden="true">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3" target="_blank">CSS / CSS3</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-javascript.svg" alt="bullet point" aria-hidden="true">
<a href="https://www.javascript.com" target="_blank">JavaScript</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-bootstrap.svg" alt="bullet point" aria-hidden="true">
<a href="https://getbootstrap.com/docs/3.3/" target="_blank">Bootstrap</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-python.svg" alt="bullet point" aria-hidden="true">
<a href="https://www.python.org" target="_blank">Python</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-jquery.svg" alt="bullet point" aria-hidden="true">
<a href="https://jquery.com" target="_blank">jQuery</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-angularjs.svg" alt="bullet point" aria-hidden="true">
<a href="https://angularjs.org" target="_blank">AngularJS</a>
</li>
</ul>
</div>
</div>
<!-- Platforms panel -->
<div class="col-xs-12 col-xs-offset-0 col-sm-10 col-sm-offset-1 col-md-5 col-md-offset-0 col-lg-4 col-lg-offset-2">
<div class="panel panel-default skills-platforms">
<!-- Panel title, and image depicting platforms / programs I work on -->
<div class="panel-heading">Platforms</div>
<div class="panel-body">
<img src="assets/images/skills-platforms.svg" class="img-responsive center-block skills-image">
</div>
<!-- List of platforms / programs I work on -->
<ul class="list-group">
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-illustrator.svg" alt="bullet point" aria-hidden="true">
<a href="https://www.adobe.com/uk/products/illustrator.html" target="_blank">Adobe Illustrator</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-adobexd.svg" alt="bullet point" aria-hidden="true">
<a href="https://www.adobe.com/uk/products/xd.html" target="_blank">Adobe Xd</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-photoshop.svg" alt="bullet point" aria-hidden="true">
<a href="https://www.adobe.com/uk/products/photoshop.html" target="_blank">Adobe Photoshop</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-github.svg" alt="bullet point" aria-hidden="true">
<a href="https://github.com" target="_blank">Github</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-wordpress.svg" alt="bullet point" aria-hidden="true">
<a href="https://wordpress.org" target="_blank">Wordpress</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-slack.svg" alt="bullet point" aria-hidden="true">
<a href="https://slack.com" target="_blank">Slack</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-terminal.svg" alt="bullet point" aria-hidden="true">
<a href="https://en.wikipedia.org/wiki/Terminal_(macOS)" target="_blank">Mac Terminal</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-sublime.svg" alt="bullet point" aria-hidden="true">
<a href="https://www.sublimetext.com" target="_blank">Sublime Text</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-replit.svg" alt="bullet point" aria-hidden="true">
<a href="https://repl.it" target="_blank">repl.it</a>
</li>
<li class="list-group-item">
<img class="pie-bullet" src="assets/images/skills-bullet-codepen.svg" alt="bullet point" aria-hidden="true">
<a href="https://codepen.io" target="_blank">Codepen</a>
</li>
</ul>
</div>
</div>
</main>
<!-- Footer contains the navbar on all portrait screens, so that its closer to the user's hand. On tablet landscape screens, and desktop, it should show in the top nav -->
<footer class="hidden-md hidden-lg">
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid bottom-nav">
<a class="btn btn-default navbar-btn" href="index.html"><img src="assets/images/navicon-author.svg" alt="Home button" title="About me"></a>
<a class="btn btn-default navbar-btn" href="studies.html"><img src="assets/images/navicon-study.svg" alt="Studies button" title="My Studies"></a>
<a class="btn btn-default navbar-btn" href="skills.html"><img src="assets/images/navicon-skills.svg" alt="Skills button" title="My Skills"></a>
<a class="btn btn-default navbar-btn" href="work.html"><img src="assets/images/navicon-work.svg" alt="Work button" title="Work experience"></a>
</div>
</nav>
</footer>
</body>
</html>