-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (109 loc) · 6 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
<!DOCTYPE html>
<html lang="en">
<!-- DEVELOPER: Kolleen Caffyn -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link id="favicon" class="logo" rel="icon" href="img/lotus.png"> <!-- lotus by default-->
<link rel="stylesheet" href="styles/main.css"> <!--for the whole site-->
<link id="theme" rel="stylesheet" href="styles/light.css"> <!--theme -- light by default-->
<title>Kolleen Caffyn.</title>
</head>
<body>
<header>
<h1>Kolleen Caffyn.</h1>
<h2 id="subtitle">Graphic Designer, Digital Artist, Front-End Developer...Jack of All Trades, really.</h2>
<label id="switch">
<input type="checkbox" onclick="toggleTheme()" id="status">
<span class="slider"></span>
</label>
<!--to do: get this shit working and STAY that way-->
<nav class="navbar icon-bar navbar-fixed-bottom" id="mobile"><!--considering remaking this as literally the same as the desktop one except it drops up-->
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a style="border-left:none;" href="illust.html"><i class="fa fa-paint-brush"></i></a><!--for the sake of time, convenience, and sanity, we'll just have this one link to the illustrations page for now. the other two work sample pages are literally just generic 'coming soon' placeholders anyway-->
<!--<button id="dropup" onfocus="dropUp()"><i class="fa fa-star"></i></button>
<div id="dropup-menu" class="dropup-content">
<a href="illust.html">Illustrations<i class="fa fa-paint-brush dropup-icon"></i></a>
<a href="programming.html">Programming<i class="fa fa-terminal dropup-icon"></i></a>
<a href="music.html">Music<i class="fa fa-music dropup-icon"></i></a>
</div>-->
<a href="resume.html"><i class="fa fa-file-text"></i></a>
<a href="contact.html"><i class="fa fa-envelope"></i></a>
</nav>
<!--to do: fix the dropup for the future-->
<nav class="navbar" id="desktop">
<div class="container-fluid"><ul class="navbar-nav">
<li class="nav-item" id="current">
<img src="img/lotus.png" alt="Logo" style="max-width: 40px;" id="logo">
<a class="nav-link active" href="#">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Works</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="illust.html">Illustrations</a></li>
<li><a class="dropdown-item" href="#">Programming</a></li>
<li><a class="dropdown-item" href="music.html">Music</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="resume.html">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul></div>
</nav>
<!--to do: add distant to the programming page as soon as we have a full working demo ready-->
</header>
<main>
<!-- Carousel -->
<div id="featured" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#featured" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#featured" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#featured" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/gallery/urban nights.png" alt="Urban Nights" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="img/gallery/A Lonely Lotus.png" alt="A Lonely Lotus" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="img/gallery/distant.png" alt="distant" class="d-block w-100">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#featured" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#featured" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<section id="bio">
<h2>About</h2>
<img src="img/profile.jpg" alt="myself">
<article class="about">
<p>I am a graphic designer currently pursuing a Communication major at New Jersey Institute of Technology.<br>
I draw, I code, I edit, etc., etc...I pretty much made this entire page myself.</p>
<p>Oh, but I won't get into <i>too</i> much detail about myself. That's what the <a href="resume.html">resume page</a> is for!</p>
<p>Or, you can browse through some of my best illustrations <a href="illust.html">here!</a></p>
<p>Or....you can just go to them through the links in the navigation bar! That works too.</p>
</article>
</section>
</main>
</body>
<footer>
© Kolleen Caffyn || Privacy Statement || Terms of Use
</footer>
<!--apparently these go at the bottom to make pages run faster-->
<script id="toggle" type="text/javascript" src="scripts/themeToggle.js">checkCookie();</script>
<script type="text/javascript" src="scripts/mobileDropup.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
$(document).ready(function() {
$('#desktop').element({prependTo:'#mobile'});
});
</script>
</html>