-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (101 loc) · 5.97 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
<!DOCTYPE html>
<!-- This page is adapted from w3schools "How to make a link tree website https://www.w3schools.com/howto/howto_website_create_linktree.asp" -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Add your name below -->
<title>Caleb Linick</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<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">
</head>
<body class="main-text-color">
<!-- Content container. Everything except footer goes here -->
<div class="container">
<!-- Image and name container. Put your replacement photo—which you should crop to be square—in the images folder, then change the source attribute to images/yourportraitfilename.jpg. This path says, "Look in the images folder for yourportraitfilename.jpg." Be sure to change the alt text, too. -->
<div class="image-container">
<img src="images/profile.jpg" alt="Photo by Art Hauntington">
</div>
<div class="intro">
I'm <span class="name"><strong>Caleb Linick</strong></span>, a CS major. Do you guys like software?
</div>
<div class="section-header">
<h1>My work</h1>
</div>
<!-- Replace the # inside of the href="#" with your links. -->
<div class="links-container">
<div class="button toggle"><i class="fa-brands fa-medium"></i> Blog post</div>
<div class="slidedown">
<div class="description">
<h2>When the gym is more appealing than class...</h2>
<p>Never miss the gym but miss class constantly? This is a deep dive into balancing fitness and academics.</p>
<a href="https://medium.com/@clinick/when-the-gym-is-more-appealing-than-class-26954b2e73e0" class="external-link" target="_blank">Read</a>
</div>
</div>
<div class="button toggle"><i class="fa-brands fa-youtube"></i> Video</div>
<div class="slidedown">
<div class="description">
<h2>Sweet and Sour Peachy Margarita Twist</h2>
<p>Watch me make one of my favorite cocktails!</p>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/3kT_WRKS7KQ?si=75RobqcdMlnoA44J" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<a href="https://www.youtube.com/watch?v=3kT_WRKS7KQ" class="external-link" target="_blank">Watch</a>
</div>
</div>
<div class="button toggle"><i class="fa-brands fa-soundcloud"></i> Podcast</div>
<div class="slidedown">
<div class="description">
<h2>Is AI Immoral??</h2>
<p>Ever considered the vast moral implications of artificial intelligence?
The ethical concerns around privacy,
copyright, and many more are becoming more and more
relevant every day and we're here to talk about it.</p>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1789099477&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
<div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/caleb-linick" title="Caleb Linick" target="_blank" style="color: #cccccc; text-decoration: none;">Caleb Linick</a> · <a href="https://soundcloud.com/caleb-linick/is-ai-immoral" title="Is AI immoral??" target="_blank" style="color: #cccccc; text-decoration: none;">Is AI immoral??</a>
</div>
<a href="https://soundcloud.com/caleb-linick/is-ai-immoral" class="external-link" target="_blank">Listen</a>
</div>
</div>
</div>
<!-- Replace # with PDF from Google Docs, or replace the entire section with whatever you want. Or delete it! Or add another section below it!-->
<div class="section-header">
<h1>About me</h1>
</div>
<div class="links-container">
<a href="https://www.linkedin.com/in/caleb-linick-625758254" class="button" target="_blank"><i class="fa-brands fa-linkedin"></i> LinkedIn</a>
</div>
</div>
<div class="footer">
<p>© Caleb Linick, 2024. Based on a design by <a
href="https://www.w3schools.com/howto/howto_website_create_linktree.asp" target="_blank">w3schools</a>.
</p>
</div>
<script type="text/javascript" src="js/slider.js"></script>
</body>
</html>