-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (149 loc) · 12.7 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
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/css/Source%20Code%20Pro.css">
<link rel="stylesheet" href="assets/css/Ubuntu.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bs-theme-overrides.css">
<link rel="stylesheet" href="assets/css/aos.min.css">
<link rel="stylesheet" href="assets/css/Contact-Details-icons.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-images.css">
<link rel="stylesheet" href="assets/css/stuff.css">
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77">
<nav class="navbar navbar-expand-md fixed-top navbar-light" id="mainNav">
<div class="container"><a class="navbar-brand" data-aos="fade-right" data-aos-once="true" href="#">CT-42210 - NICK TROIANO</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" data-aos="fade-left" data-aos-once="true" href="#about">About</a></li>
<li class="nav-item nav-link"><a class="nav-link" data-aos="fade-left" data-aos-once="true" href="#programming">Programming</a></li>
<li class="nav-item nav-link"><a class="nav-link" data-aos="fade-left" data-aos-once="true" href="#music">Music</a></li>
<li class="nav-item nav-link"><a class="nav-link" data-aos="fade-left" data-aos-once="true" href="#running">Running</a></li>
<li class="nav-item nav-link"><a class="nav-link" data-aos="fade-left" data-aos-once="true" href="#light-and-sound">L&S</a></li>
<li class="nav-item nav-link"><a class="nav-link" data-aos="fade-left" data-aos-once="true" href="#boy-scouts">Boy Scouts</a></li>
<li class="nav-item nav-link"><a class="nav-link" data-aos="fade-left" data-aos-once="true" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="masthead" style="background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1)), url("assets/img/sbb%20boardwalk.jpeg") center / cover;opacity: 1;">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 data-aos="fade-up" data-aos-once="true" class="brand-heading ubuntu">Nick Troiano</h1>
<p data-aos="fade-up" data-aos-delay="100" data-aos-once="true" class="intro-text sourceCodePro">Chatham, NJ / S. Bethany Beach, DE</p><a class="btn btn-link btn-circle" role="button" data-aos="fade-up" data-aos-delay="200" data-aos-once="true" href="#about"><i class="fa fa-angle-double-down animated"></i></a>
</div>
</div>
</div>
</div>
</header>
<div class="container py-4 py-xl-5" id="about">
<div class="row gy-4 gy-md-0">
<div class="col-md-6">
<div class="p-xl-5 m-xl-5"><img class="rounded img-fluid w-100 fit-cover" data-aos="fade-right" data-aos-once="true" style="min-height: 300px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png"></div>
</div>
<div class="col-md-6 d-md-flex align-items-md-center ubuntu">
<div style="max-width: 350px;">
<h2 class="text-uppercase fw-bold" data-aos="fade-up" data-aos-once="true">About me</h2>
<p data-aos="fade-up" data-aos-delay="100" data-aos-once="true" class="my-3">Born in Boston, I am a student at Morristown Beard School, Morristown, NJ. I am the oldest of 3, and <idk what to put></p><a class="btn btn-primary btn-lg me-2" role="button" data-aos="fade-left" data-aos-delay="200" data-aos-once="true" href="https://mbs.net">Check out MBS</a>
</div>
</div>
</div>
</div>
<div class="container py-4 py-xl-5 ubuntu" id="programming">
<div class="row gy-4 gy-md-0">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div style="max-width: 350px;">
<h2 class="text-uppercase fw-bold" data-aos="fade-up" data-aos-once="true">Programming</h2>
<p data-aos="fade-up" data-aos-delay="100" data-aos-once="true" class="my-3">I am a programmer by hobby. I work in primaraly Python, Java, JavaScript, and HTML/CSS, but I will learn basic components of any language that I must use. I am a natural problem solver; I build simple solutions to problems to make my life easier. </p><a class="btn btn-primary btn-lg me-2" role="button" data-aos="fade-right" data-aos-delay="300" data-aos-once="true" href="programming.html">Learn more</a><a class="btn btn-outline-primary btn-lg" role="button" data-aos="fade-right" data-aos-delay="200" data-aos-once="true" href="https://github.com/CT-42210">Github</a>
</div>
</div>
<div class="col-md-6">
<div class="p-xl-5 m-xl-5"><img class="rounded img-fluid w-100 fit-cover" data-aos="fade-left" data-aos-once="true" style="min-height: 300px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png"></div>
</div>
</div>
</div>
<div class="container py-4 py-xl-5 ubuntu" id="music">
<div class="row gy-4 gy-md-0">
<div class="col-md-6">
<div class="p-xl-5 m-xl-5"><img class="rounded img-fluid w-100 fit-cover" data-aos="fade-right" data-aos-once="true" style="min-height: 300px;" src="assets/img/all%20star%20audition%20drums.jpeg"></div>
</div>
<div class="col-md-6 d-md-flex align-items-md-center">
<div style="max-width: 350px;">
<h2 class="text-uppercase fw-bold" data-aos="fade-up" data-aos-once="true">Music</h2>
<p data-aos="fade-up" data-aos-delay="100" data-aos-once="true" class="my-3">I play drums, as well as guitar and bass. I also taught myself how to mix/master using Logic Pro X, and use it to produce metal covers of my favorite pop songs to post on Instagram. </p><a class="btn btn-primary btn-lg me-2" role="button" data-aos="fade-left" data-aos-delay="200" data-aos-once="true" href="music.html">Learn More</a><a class="btn btn-outline-primary btn-lg" role="button" data-aos="fade-left" data-aos-delay="300" data-aos-once="true" href="https://www.instagram.com/njt.422/">Instagram</a>
</div>
</div>
</div>
</div>
<div class="container py-4 py-xl-5 ubuntu" id="running">
<div class="row gy-4 gy-md-0">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div style="max-width: 350px;">
<h2 class="text-uppercase fw-bold" data-aos="fade-up" data-aos-once="true">Running</h2>
<p data-aos="fade-up" data-aos-delay="100" data-aos-once="true" class="my-3">I love to run; it makes me feel calmer and more centered during my day-to-day, and I am very competitive with my training and races. </p><a class="btn btn-primary btn-lg me-2" role="button" data-aos="fade-right" data-aos-delay="300" data-aos-once="true" href="running.html">Learn More</a><a class="btn btn-outline-primary btn-lg" role="button" data-aos="fade-right" data-aos-delay="200" data-aos-once="true" href="https://nj.milesplit.com/athletes/10945666-nicholas-troiano">milesplit</a>
</div>
</div>
<div class="col-md-6">
<div class="p-xl-5 m-xl-5"><img class="rounded img-fluid w-100 fit-cover" data-aos="fade-left" data-aos-once="true" style="min-height: 300px;" src="assets/img/2023%20na%20medal.jpeg"></div>
</div>
</div>
</div>
<div class="container py-4 py-xl-5 ubuntu" id="light-and-sound">
<div class="row gy-4 gy-md-0">
<div class="col-md-6">
<div class="p-xl-5 m-xl-5"><img class="rounded img-fluid w-100 fit-cover" data-aos="fade-right" data-aos-once="true" style="min-height: 300px;" src="assets/img/basement%20light%20towers.jpeg"></div>
</div>
<div class="col-md-6 d-md-flex align-items-md-center">
<div style="max-width: 350px;">
<h2 class="text-uppercase fw-bold" data-aos="fade-up" data-aos-once="true">Light and Sound</h2>
<p data-aos="fade-up" data-aos-delay="100" data-aos-once="true" class="my-3">I have recently taken up light and sound engineering with a friend of mine. I taught myself basic wave properties to best place speakers and lights in a room, and taught myself how to program a lightshow using an ADJ MyDMX3 RM. I also managed to fully repair 4 Elation Moving Head Lights.</p><a class="btn btn-primary btn-lg me-2" role="button" data-aos="fade-left" data-aos-delay="200" data-aos-once="true" href="light-and-sound.html">Learn More</a>
</div>
</div>
</div>
</div>
<div class="container py-4 py-xl-5 ubuntu" id="boy-scouts">
<div class="row gy-4 gy-md-0">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
<div style="max-width: 350px;">
<h2 class="text-uppercase fw-bold" data-aos="fade-up" data-aos-once="true">Boy Scouts</h2>
<p data-aos="fade-up" data-aos-delay="100" data-aos-once="true" class="my-3">I am a member of Troop 8, Chatham, and boy scouts/adventure/the outdoors have become a big part of my life.</p><a class="btn btn-primary btn-lg me-2" role="button" data-aos="fade-right" data-aos-duration="300" data-aos-delay="300" data-aos-once="true" href="boy%20scouts.html">Learn more</a>
</div>
</div>
<div class="col-md-6">
<div class="p-xl-5 m-xl-5"><img class="rounded img-fluid w-100 fit-cover" data-aos="fade-left" data-aos-once="true" style="min-height: 300px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png"></div>
</div>
</div>
</div>
<section class="text-white py-4 py-xl-5 ubuntu" id="contact">
<div class="container">
<div class="border rounded border-0 d-flex flex-column justify-content-center align-items-center p-4 py-5" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("assets/img/sbb%20beach.jpeg") center / cover;height: 500px;">
<div class="row">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold mb-3" data-aos="fade-up" data-aos-once="true">Contact</h1>
<p data-aos="fade-up" data-aos-delay="100" data-aos-once="true" class="mb-4">I am fairly busy, but I will try my best to get back to you!</p><a class="btn btn-primary fs-5 me-2 py-2 px-4" role="button" data-aos="fade-right" data-aos-delay="200" data-aos-once="true" href="contact.html">Say Hi</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container text-center">
<p class="sourceCodePro">Nick Troiano - 2024</p>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/aos.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
</body>
</html>