repl.it
@Vandesm14/

personal

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • background.jpg
  • fav.png
  • jquery.min.js
  • photo-min.png
  • photo-small.png
  • photo.png
  • pointer.png
  • script.js
  • style.css
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

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Vandesm14</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link rel="icon" href="fav.png" />
</head>

<body>
	<div class="background"></div>
	<div class="app">
		<div class="nav">
			<div class="nav-section">
				<img src="fav.png" class="nav-logo">
				<p class="nav-title">Vandesm14</p>
			</div>
			<h3 class="nav-heading">About Me</h3>
		</div>
		<div class="scroll">
			<div class="panel">
				<h3 style="display:none" id="home">Home</h3>
				<div class="animation">
					<h3 class="part-A start">Shane Vandegrift</h3>
					<p class="part-A start">(aka Vandesm14)</p>
					<img class="part-B start" src="photo-small.png">
					<img class="part-C start" src="pointer.png">
				</div>
			</div>
			<div class="panel">
				<h3 id="about-me">About Me</h3>
				<p class="panel-content">
					Hello! I am Shane, an 18 yo. Nodejs full-stack web developer. I enjoy creating useful full-stack applications large and small. Alongside my interest for web development, I have a similar interest in the multimedia field. This includes things like composing music, editing photos, writing articles, and working in the media booth at my church. I am very thankful for my interest in programming and multimedia as they both relate to eachother.
					<br><br>
					<i>"I'm not giving up, I'm just taking a break...a long one."</i><br>~ Shane Vandegrift
					<br><br>
					<b id="contact">Contact:</b><br>
					Discord: Vandesm14#3364<br>
					Email: <a href="mailto:[email protected]">[email protected]</a><br>
					Twitter: <a href="https://twitter.com/Vandesm14">Vandesm14</a><br>
					Github: <a href="https://github.com/Vandesm14">Vandesm14</a><br>
					Repl.it: <a href="https://repl.it/@Vandesm14">Vandesm14</a>
				</p>
			</div>
			<div class="panel">
				<h3 id="projects">Projects</h3>
				<div class="panel-content">
					<div class="list">
						<div class="list-item">
							<a class="item-title" href="http://classaware.org">Classaware</a>
							<p class="item-tags"><a class="item-tag">tags</a><a class="item-tag">list</a></p>
							<p class="item-snippet">
								During my first week of High School, it was challenging adapting to the bell schedule. I tried setting a timer for each period, but it got teidious after a while. I though to myself "Why can't this be automated? It's a super simple task, just countdown to the end of each period". So that's what I did. I have happily recieved tons of feedback and support from over 600 users. Currently, I have been working hard to create a unified version for <b>any</b> school to use. This is still in the making, but it is definitely a promising concept!
							</p>
						</div>
						<div class="list-item">
							<a class="item-title" href="https://blog.vandesm14.ml">Blog</a>
							<p class="item-tags"><a class="item-tag">tags</a><a class="item-tag">list</a></p>
							<p class="item-snippet">
								A blog is a very important site to have if you're a developer. It's a great place to share your experiences and discoveries with the world. It took me a while to create the perfect one. Each time I'd create one, it'd either go silent after a week, or not be enough to suit my needs. My current blog, however, is a combination of trial and error with tons of planning.
							</p>
						</div>
						<div class="list-item">
							<a class="item-title" href="https://chat.hyperjs.ml">LowChat</a>
							<p class="item-tags"><a class="item-tag">tags</a><a class="item-tag">list</a></p>
							<p class="item-snippet">
								For a while on <a href="repl.it">repl.it</a>, there was a boom in shared chatroom applications. I began with basic one which was mostly a direct clone off of the Socket.io example, except that it had chatlogs. Feeling ambitious, I redid the server-side to support logless chatting, which made it more stable. A few months later I wanted to make another chatroom which was secure, fast, and intuitive (everything that the other one wasn't). I call the finished project: <a href="https://chat.hyperjs.ml">LowChat</a>, a sleek and modern chatting application.
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="panel">
				<h3 id="blog">Blog</h3>
				<div class="panel-content">
					<div class="list blog-list" id="blog-list"></div>
				</div>
			</div>
		</div>
	</div>
	<template id="itemTemplate">
		<div class="list-item">
			<a class="item-title" href="{{url}}">{{title}}</a>
			<p class="item-snippet">{{snippet}}</p>
		</div>
	</template>
	<script src="jquery.min.js"></script>
	<script src="script.js"></script>
</body>

</html>
result
console
?