-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
188 lines (169 loc) · 7.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<link href="facappstyles.css" rel="stylesheet">
<title> MONDO VISIONOVA </title>
<h1>VISIONOVA STUDIO<h1>
</head>
<body>
<div class="collage-container"> <!-- centres collage -->
<div class="collage"> <!-- defines size & quantitiy of grid boxes, hover over element in dev tools to see -->
<div id="collage__item--1">
<img src="ghost_photo_2.jpg" class="collage-pic" id="collage__img--1">
</div>
<div id="collage__item--2">
<img src="scorch_costume.jpg" class="collage-pic hidden" id="collage__img--2">
</div>
<div id="collage__item--3">
<img src="strap_portrait.jpg" class="collage-pic hidden" id="collage__img--3">
</div>
<div id="collage__item--4">
<img src="strap_costume.JPG" class="collage-pic hidden" id="collage__img--4">
</div>
<div id="collage__item--5">
<img src="scorch_portrait_2.JPG" class="collage-pic hidden" id="collage__img--5">
</div>
<div id="collage__item--6">
<img src="burnt_scrap.jpg" class="collage-pic hidden" id="collage__img--6">
</div>
<div id="collage__item--7">
<img src="ghost_photo_1.jpg" class="collage-pic hidden" id="collage__img--7">
</div>
<div id="collage__item--8">
<img src="kenny_1.JPG" class="collage-pic hidden" id="collage__img--8">
</div>
<div id="collage__item--9">
<img src="kenny_4.jpg" class="collage-pic hidden" id="collage__img--9">
</div>
</div>
</div>
<div>
<script type="text/javascript"> //all pictures are in a class w/opacity 0 and change consecutively into 'showing' class
var pics = document.querySelectorAll('.collage-pic');
var currentPic = 0;
var fadeInterval = setInterval(showPic, 2000); //showpic changes their class every 2 seconds, easy to change fadeInterval here
function showPic(){
pics[currentPic].className = 'hidden';
currentPic = ((currentPic+1)%pics.length);
pics[currentPic].className = 'showing';
}
</script>
</div>
<div class="text-container">
<p>Welcome to my application for FAC Summer 2020! I am applying because I have been teaching myself to code using MOOCs and books for a year on and off, and I would like to take the next step to becoming a professional software designer. I regularly attend Codebar and that's where I met
some members of the Spring 2019 cohort, who were inspiring in their coolness and enthusiasm. </p>
<p>I initially got into coding because I had a place on the Product Design bachelor's at CSM, but couldn't take the place as I already had a degree and couldn't afford the fees. I knew I wanted to work making a wide array of different things and gain technical knowledge as well, but I was quite defeated until I started wondering if I would be up to learning how to code. It was really Karlie Kloss that pushed me to try- I thought if she could do it, I could too. I read about Harvard CS50 online and jumped straight in with C.</p>
<p>I've used the prerequisite to build a webpage as an opportunity to make a small portfolio website for visionova.studio, the 'design studio' which really consists of me, my dining room table & a bookshelf of art supplies. The collage above is made up of work pulled from a few different project sketchbooks, and below is my first attempt at a stop motion animation of a character I made up called Kenny, who represents frantic anxiety. Although I plan on becoming a full time web developer, I love to design and hope to keep dreaming, and drawing, for a long time on the side.</p>
</div>
<br>
<div class="slideshow-container">
<img name="slide" width='375' height='500'> <!-- hard coded for iPhone picture ratios!-->
<button class="button-hidden" id="prev">Previous</button>
<button class="button" id="pause">Pause</button>
<button class="button-hidden" id="next">Next</button>
</div>
</br>
<script>
//not very sophisticated but the most original way! Image source is 0 of arr images, and 0 is changed by pushing & popping
//no transition possible here so have made a stop motion slideshow
var images = ['ken8.jpg',
'ken9.jpg',
'ken10.jpg',
'ken11.jpg',
'ken12.jpg',
'ken13.jpg',
'ken14.jpg',
'ken15.jpg',
'ken16.jpg',
'ken17.jpg',
'ken18.jpg',
'ken19.jpg',
'ken20.jpg',
'ken21.jpg',
'ken22.jpg',
'ken23.jpg' ];
//decide how often images[0] is changed here
//intervalID makes sure you don't get overlapping lots of 2-second-timed calls which makes for jumpy slideshow
//set playing to true for buttons later and just show the image at [0] of the arrat
var intervalID = setInterval("PushNext()", 200);
var playing = true;
document.slide.src = images[0];
//link buttons to be clicked to an element in the document
var pauseButton = document.getElementById("pause");
var prevButton = document.getElementById("prev");
var nextButton = document.getElementById("next");
//changes images[0] with shift from beginning and pushing onto end to show consecutively
function PushNext(){
let selectedNext = images.shift();
images.push(selectedNext);
document.slide.src = images[0];
}
function pauseSlideshow() {
pauseButton.innerHTML = 'Play'; //change text on button
document.getElementById("prev").className = "button-appear"; //make nav buttons show up
document.getElementById("next").className = "button-appear";
playing = false; //set for pause and play later
clearInterval(intervalID); //clear the interval and start a fresh one!
}
function playSlideshow() {
pauseButton.innerHTML = 'Pause';
document.getElementById("prev").className = "button-hidden";
document.getElementById("next").className = "button-hidden";
playing = true;
intervalID = setInterval("PushNext()", 200); //var already declared above! Just reassigning
}
//takes last element from images and unshifts to be images[0]
function pushPrev(){
let selectedPrev = images[images.length-1];
images.pop(selectedPrev);
images.unshift(selectedPrev);
document.slide.src = images[0];
}
//checks whether playing is true or not, as set by functions above, to decide stop/start
pauseButton.onclick = function() {
if(playing) {
pauseSlideshow();
} else {
playSlideshow();
}
};
//on clicking either button, pause will be called prior to calling change in array
prevButton.onclick = function() {
pauseSlideshow();
pushPrev();
}
nextButton.onclick = function () {
pauseSlideshow();
PushNext();
}
//when a key is pressed, checks if it was the space,left,right button and calls relevant nav function
//have not made the r/l keys pause first as I believe user will pause first intuitively????
document.onKeyDown = function(event){
if (event.keyCode === 37){
pushPrev();
}
else if (event.keyCode === 39){
PushNext();
}
else if (event.keyCode === 32 && playing == true){
pauseSlideshow();
}
else if (event.keyCode === 32 && playing == false){
playSlideshow();
}
}
</script>
<br>
<div> <!-- all required links plus instagram open in new window-->
<a href="https://www.instagram.com/visionova.studio" target="blank">
<img src="iconfinder_38-instagram_104466.png" title="visionova on instagram" width="30" height="30"/></a>
<a href="https://www.github.com/jenndroid/jenndroid.github.io" target="blank">
<img src="github-logo.png" title="repo for this page" width="30" height="30"/></a>
<a href="https://www.freecodecamp.org/jenndroid" target="blank">
<img src="fcc-logo.png" title="freecodecamp page" width="50" height="30"/></a>
<a href="https://www.codewars.com/users/jenndroid/completed" target="blank">
<img src="codewars-logo.png" title="codewars page" width="30" height="30"/></a>
</div>
</br>
</body>
</html>