portfolio/vis.html at main · sheehan-j/portfolio · 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
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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no" />

		<!-- Bootstrap CSS -->
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
			crossorigin="anonymous"
		/>

		<!-- Typekit Project Link -->
		<!-- <link rel="stylesheet" href="https://use.typekit.net/dta7tim.css"> -->

		<!-- Main Stylesheet -->
		<link rel="stylesheet" href="styles/styles.css" />

		<!-- Animate on Scroll (AOS) -->
		<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />

		<!-- Boostrap JS -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha256-XDbijJp72GS2c+Ij234ZNJIyJ1Nv+9+HH1i28JuayMk=" crossorigin="anonymous"></script> -->

		<!-- Inter Font -->
		<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=Inter:wght@300;400;600;700;800;900&display=swap"
			rel="stylesheet"
		/>

		<!-- Preload Images -->
		<link rel="preload" as="image" href="img/vis.png" />

		<title>VIS Project</title>
		<link rel="shortcut icon" type="image/jpg" href="img/favicon.png" />
	</head>
	<body>
		<header>
			<!-- Main Navbar -->
			<nav class="navbar navbar-expand py-3">
				<div id="mainNavbar" class="collapse navbar-collapse justify-content-center">
					<a href="index.html#projects-gallery" class="nav-link active" style="position: absolute; left: 1rem"
						><div class="nav-link-glare"></div>
						Return to Projects</a
					>
					<ul class="navbar-nav pb-1 py-lg-0">
						<li class="nav-item my-2 m-lg-0 px-1 px-lg-2 px-xl-3">
							<a class="nav-link" href="index.html">Home</a>
						</li>
						<li class="nav-item my-2 m-lg-0 px-1 px-lg-2 px-xl-3">
							<a class="nav-link" href="about.html">About</a>
						</li>
					</ul>
				</div>
			</nav>
		</header>

		<main>
			<div class="container-fluid p-0 m-0" syle="margin-top: 0 !important">
				<div
					class="projects-container flex-column align-items-center flex-xxl-row justify-content-center row px-xxl-5 py-5"
				>
					<div
						class="projects-column-left col-12 col-xxl-5 mb-4 mb-xxl-0 px-5 px-xxl-0 d-flex justify-content-start flex-row"
					>
						<div>
							<div
								id="project-animation-order-1"
								class="projects-text-container text-center text-xxl-start p-4"
							>
								<!-- <div class="text-center text-xxl-start"> -->
								<div
									id="jackson-pools"
									class="project-subtitle text-center text-xxl-start"
									style="background-color: #f9f7f5"
								>
									<span class="project-subtitle">WEBSITE</span>
								</div>
								<div class="project-title mb-2 text-center text-xxl-start">
									Electric Car Company Website
								</div>
								<div class="project-text text-center text-xxl-start px-5 px-xxl-0">
									This is a website that was created for submission to the Technology Student
									Association's Webmaster competition. I helped design this website alongside a
									teammate and handled the majority of development using HTML, CSS, and JavaScript. I
									also used the Bootstrap framework to make the website responsive and incorporated
									fullPage.js and jQuery for some of the website’s key visuals. All of the 3-D car
									models and renders were created by a teammate.
									<br /><br />
									The website is designed for a fictional electric car company, VIS. It showcases
									their two available models and important details about the environmental benefits of
									electric vehicles. The website also includes a configurator where the user can
									customize their desired model.
									<br /><br />
									This website placed first at the Technology Student Assocation's Florida State
									Conference. Unfortunately, due to cancellation of the national conference because of
									COVID-19, this website was unable to compete at the national level.
								</div>
							</div>
							<a href="https://jordansheehan.com/vis/vishome.html" target="_blank">
								<div id="project-animation-order-2" class="link-card py-3 mt-3">
									<div class="link-card-glare"></div>
									<div class="transparent-rectangle-resume-1"></div>
									<div class="transparent-rectangle-resume-2"></div>
									<div class="transparent-rectangle-resume-3"></div>
									<!-- <div id="project-animation-order-4" class="mt-4 text-center text-xxl-start"><span class="project-subtitle">LINKS</span></div> -->
									<div class="project-link-text text-center w-100">Link to Website</div>
								</div>
							</a>
						</div>
					</div>

					<div
						class="projects-column-right col-12 col-xxl-6 mt-4 mt-xxl-0 px-2 px-xxl-0 d-flex justify-content-center"
						data-aos-delay="0"
						style="position: relative"
					>
						<img src="img/vis.png" class="project-page-image" />
						<div class="project-image-background"></div>
					</div>
				</div>
			</div>
		</main>

		<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
		<script>
			AOS.init();
		</script>
	</body>
</html>