-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (126 loc) · 4.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Anna Cunnane</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="global.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel = “icon” href = ”favicon.ico” type = “image/x-icon” />
<link rel = “shortcut icon” href = “favicon.ico” type = “image/x-icon” />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto+Mono&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/88135b60ba.js"
crossorigin="anonymous"
></script>
</head>
<body>
<nav>
<h1>Anna Cunnane</h1>
<ul>
<li><a href="#" class="active">Projects</a></li>
<li><a href="CV.html">CV</a></li>
<li><a href="https://www.codewars.com/users/Moggach">CodeWars
</a></li>
<li><a href="https://www.freecodecamp.org/moggach">FreeCodeCamp
</a></li>
</ul>
<label class="switch">
<input type="checkbox" name="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-text">
Switch Theme</div>
</nav>
<section>
<aside>
<ul>
<li>
<a href="https://github.com/Moggach" aria-label="Link to Github account">
<i class="fab fa-github fa-2x"></i></a>
</li>
<li>
<a href="https://www.annacunnane.co.uk/" aria-label="Link to personal website">
<i class="fas fa-globe fa-2x"></i></a>
</li>
<li>
<a href="https://twitter.com/MollyBloom1989" aria-label="Link to Twitter account">
<i class="fab fa-twitter fa-2x"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/in/annacunnane/" aria-label="Link to LinkedIn page">
<i class="fab fa-linkedin fa-2x"></i></a>
</li>
</ul>
</aside>
<div class="modal-container">
<div class="image-grid">
<img id="myImg1" src = "./images/Blog_Site.png" class="img-thumbnail" alt="Personal Blog Site">
<div class="caption01">
<p>A personal blog site built using GatsbyJS and GraphQL to query a database of markdown posts.</p>
<p><a href="https://www.annacunnane.co.uk/" >Link to site</a></p>
</div>
<img id="myImg2" src = "./images/Book_Finder.png" class="img-thumbnail" alt="Book Finder App">
<div class="caption02">
<p>A React app which queries the Google Books API and outputs bibliographic data. Includes dynamic links to Google Store.</p>
<p><a href="https://github.com/Moggach/book-finder">Link to GitHub repository</a></p>
</div>
<div class="caption03">
<img id="myImg3" src="./images/Card_Layouts.png" class="img-thumbnail" alt="Sample Card Layouts">
<p>Some sample card layouts using design inspiration from Tailwind Components.</p>
<p><a href="https://codepen.io/moggach/pen/abNqoNR">Link to CodePen</a></p>
</div>
<div class="caption04">
<img id="myImg4" src="./images/Trello_Copy.png" class="img-thumbnail" alt="A Trello Layout">
<p>A copy of a Trello dashboard - made to practise using Flexbox.</p>
<p><a href="https://codepen.io/moggach/pen/zYqLZBb">Link to CodePen</a></p>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
</div>
</section>
<script>
var modal = document.getElementById('myModal');
var images = document.querySelectorAll(".img-thumbnail");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for(let i = 0; i < images.length; i++){
images[i].onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>
</body>
</html>