smclacke.github.io/index.html at main · smclacke/smclacke.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" type="image/x-icon" href="/images/whale_icon.png">
	<link rel="stylesheet" href="/css/style.css">
	<title>Sarah McLacken</title>
</head>

<body>
	<header class="site-header">
		<div class="top-left-bubble">
			<div class="name-wrapper">
				<img src="/images/walkingpete.gif" class="penguin" alt="Penguin">
				<div class="name-title">Sarah McLacken</div>
				<div class="email">sarah@mclacken.com</div>
			</div>
			<div class="social-links">
				<a href="https://www.linkedin.com/in/sarah-mclacken/" target="_blank">
					<img src="/images/linkedin_logo.png" alt="LinkedIn">
				</a>
				<a href="https://github.com/smclacke" target="_blank">
					<img src="/images/github_logo.png" alt="GitHub">
				</a>
				<a href="https://www.instagram.com/sarahmclackenart/" target="_blank">
					<img src="/images/insta_logo.png" alt="Instagram">
				</a>
			</div>
		</div>
		<nav class="mobile-nav" aria-label="Primary">
			<button id="motionToggle" type="button" aria-label="Toggle motion">
				<img id="duck" class="duck-icon" src="/images/flying_duck.gif" alt="Duck">
			</button>
		</nav>
	</header>

	<!-- SKY -->
	<section class="sky-section" aria-label="Hero">

		<div class="sun-wrapper">
			<div class="sun"></div>
		</div>

		<div class="intro-text">
			<h2>👋 Hi! I'm Sarah</h2>
			<p>I'm a software engineer and artist.<br>Welcome to my portfolio! 🦆</p>
		</div>

		<!-- Foreground birds -->
		<img src="/images/flying_duck.gif" class="flying-duck"  alt="">
		<img src="/images/flying_duck.gif" class="flying-duck1" alt="">
		<img src="/images/flying_duck.gif" class="flying-duck2" alt="">
		<img src="/images/flying_duck.gif" class="flying-duck3" alt="">
		<img src="/images/flying_duck.gif" class="flying-duck4" alt="">

		<!-- Depth / silhouette birds (far away) -->
		<img src="/images/flying_duck.gif" class="duck-far duck-far-1" alt="">
		<img src="/images/flying_duck.gif" class="duck-far duck-far-2" alt="">
		<img src="/images/flying_duck.gif" class="duck-far duck-far-3" alt="">
	</section>

	<!-- PROJECTS -->
	<section class="projects-section" aria-label="Projects">
		<div class="projects">
			<a href="/about"       class="project-link"><div class="project-card"><img src="/about/images/pcard.png"       alt="About"></div></a>
			<a href="/finearts"    class="project-link"><div class="project-card"><img src="/finearts/images/pcard.png"    alt="Fine Arts"></div></a>
			<a href="/minirt"      class="project-link"><div class="project-card"><img src="/minirt/images/pcard.png"      alt="MiniRT"></div></a>
			<a href="/ft_hangouts" class="project-link"><div class="project-card"><img src="/ft_hangouts/images/pcard.png" alt="ft_hangouts"></div></a>
			<a href="/fractol"     class="project-link"><div class="project-card"><img src="/fractol/images/pcard.png"     alt="Fractol"></div></a>
			<a href="/kfheinxumc"  class="project-link"><div class="project-card"><img src="/kfheinxumc/images/pcard.png"  alt="KFHeinxUMC"></div></a>
		</div>
	</section>

	<!-- OCEAN -->
	<div id="ocean">
		<div class="whale-wrapper">
			<img src="images/whale_ocean.png" class="whale" id="whale" alt="Whale">
			<div class="whale-bubbles"></div>
		</div>
	</div>

	<script src="/js/main.js" defer></script>
</body>
</html>