-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (153 loc) · 12.3 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
153
154
155
156
157
158
159
160
161
<!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" />
<title>Ben Hamel's Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="nav-bar">
<a href="./index.html" class="nav-logo">Ben <span class="primary-color">Hamel</span></a>
<ul class="nav-menu">
<li class="nav-item">
<a href="https://www.linkedin.com/in/benehamel/" class="nav-link" target="_blank"
rel="noopener noreferrer" aria-label="Visit Ben Hamel's LinkedIn page">
<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 12C0 5.64873 5.14873 0.5 11.5 0.5C17.8513 0.5 23 5.64873 23 12C23 18.3513 17.8513 23.5 11.5 23.5C5.14873 23.5 0 18.3513 0 12ZM5.89375 10.0594V17.75H8.33751V10.0594H5.89375ZM5.75 7.61563C5.75 8.40625 6.325 8.98125 7.11563 8.98125C7.90625 8.98125 8.48125 8.40625 8.48125 7.61563C8.48125 6.825 7.90625 6.25 7.11563 6.25C6.39688 6.25 5.75 6.825 5.75 7.61563ZM14.8063 17.75H17.1063V13.0063C17.1063 10.6344 15.6687 9.84375 14.3031 9.84375C13.0812 9.84375 12.2188 10.6344 12.0031 11.1375V10.0594H9.70313V17.75H12.1469V13.6531C12.1469 12.575 12.8656 12 13.5844 12C14.3031 12 14.8063 12.3594 14.8063 13.5812V17.75Z"
fill="#1544C0" />
</svg>
</a>
</li>
<li class="nav-item">
<a href="https://github.com/ben-hamel" class="nav-link" target="_blank" rel="noopener noreferrer"
aria-label="Visit Ben Hamel's GitHub page">
<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 12C0 5.64873 5.14873 0.5 11.5 0.5C17.8513 0.5 23 5.64873 23 12C23 18.3513 17.8513 23.5 11.5 23.5C5.14873 23.5 0 18.3513 0 12ZM5.75 12.1204C5.75 8.95528 8.31726 6.388 11.4824 6.388C14.6476 6.388 17.2148 8.95528 17.25 12.1204C17.25 14.6525 15.6322 16.7978 13.3463 17.5715C13.065 17.6067 12.9595 17.4308 12.9595 17.2901V15.7076C12.9595 15.18 12.7837 14.8284 12.5726 14.6525C13.8387 14.5119 15.1751 14.0547 15.1751 11.8391C15.1751 11.206 14.9289 10.6785 14.5772 10.2917C14.58 10.2806 14.5839 10.2668 14.5885 10.2502C14.6423 10.056 14.7985 9.49236 14.5069 8.77944C14.5069 8.77944 14.0145 8.63877 12.9243 9.3773C12.4671 9.27179 11.9748 9.20146 11.4824 9.20146C10.9901 9.20146 10.4977 9.23663 10.0405 9.3773C8.95029 8.63877 8.45795 8.77944 8.45795 8.77944C8.14714 9.53923 8.34503 10.1294 8.38556 10.2503L8.38763 10.2565C8.00074 10.6785 7.78973 11.1709 7.78973 11.8039C7.78973 14.0195 9.12616 14.5119 10.3922 14.6525C10.2515 14.7932 10.0757 15.0394 10.0405 15.4262C9.72401 15.5669 8.91515 15.8131 8.38763 14.9339C8.38763 14.9339 8.07111 14.3712 7.5084 14.336C7.5084 14.336 6.94574 14.336 7.47326 14.6877C7.47326 14.6877 7.8601 14.8635 8.10625 15.5317C8.10625 15.5317 8.45795 16.6571 10.0405 16.3054V17.2901C10.0405 17.4308 9.93502 17.6067 9.65369 17.5715C7.4029 16.7978 5.75 14.6525 5.75 12.1204Z"
fill="#1544C0" />
</svg></a>
</li>
</ul>
</nav>
<div class="section-hero">
<div class="hero-content">
<div class="hero-left">
<div class="hero-title">
<h1>Merging Code, Productivity, and People Skills</h1>
</div>
<h4>
Experience the art of coding - Explore my portfolio and discover a world of digital innovation!
</h4>
</div>
<div class="hero-right">
<img class="hero-right-img" src="imgs/Mini Room - Music - [email protected]" alt="">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section">
<h1 class="center-header">ABOUT <span class="primary-color">ME</span></h1>
<div class="content-container">
<div class="about-flex-left">
<div class="about-content-wrapper">
<h3>BEN HAMEL - SOFTWARE DEVELOPER</h3>
<h4>Bringing ideas to life, one line of code at a time</h4>
<p class="about-body">
Hey there! I'm a Software Developer with a unique background in commissioned car sales,
audio/visual technology, and consumer tech sales and repair. With my strong work ethic and
collaborative approach, I love solving problems and contributing to technical projects -
whether on a team or flying solo. My passion for productivity and streamlined workflows
keeps me on the cutting edge of innovation, helping me deliver amazing results. And, as a
lifelong learner, I'm always excited to take on new challenges!
</p>
<div class="button-group">
<a href="assets/Ben-Hamel-Resume.pdf"><button class="button-item">Resume</button></a>
<a href="https://www.linkedin.com/in/benehamel/" target="_blank" rel="noopener noreferrer"
aria-label="Visit Ben Hamel's LinkedIn page">
<svg width="23" height="24" viewBox="0 0 23 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 12C0 5.64873 5.14873 0.5 11.5 0.5C17.8513 0.5 23 5.64873 23 12C23 18.3513 17.8513 23.5 11.5 23.5C5.14873 23.5 0 18.3513 0 12ZM5.89375 10.0594V17.75H8.33751V10.0594H5.89375ZM5.75 7.61563C5.75 8.40625 6.325 8.98125 7.11563 8.98125C7.90625 8.98125 8.48125 8.40625 8.48125 7.61563C8.48125 6.825 7.90625 6.25 7.11563 6.25C6.39688 6.25 5.75 6.825 5.75 7.61563ZM14.8063 17.75H17.1063V13.0063C17.1063 10.6344 15.6687 9.84375 14.3031 9.84375C13.0812 9.84375 12.2188 10.6344 12.0031 11.1375V10.0594H9.70313V17.75H12.1469V13.6531C12.1469 12.575 12.8656 12 13.5844 12C14.3031 12 14.8063 12.3594 14.8063 13.5812V17.75Z"
fill="#1544C0" />
</svg>
</a>
<a href="https://github.com/ben-hamel" target="_blank" rel="noopener noreferrer"
aria-label="Visit Ben Hamel's GitHub page">
<svg width="23" height="24" viewBox="0 0 23 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 12C0 5.64873 5.14873 0.5 11.5 0.5C17.8513 0.5 23 5.64873 23 12C23 18.3513 17.8513 23.5 11.5 23.5C5.14873 23.5 0 18.3513 0 12ZM5.75 12.1204C5.75 8.95528 8.31726 6.388 11.4824 6.388C14.6476 6.388 17.2148 8.95528 17.25 12.1204C17.25 14.6525 15.6322 16.7978 13.3463 17.5715C13.065 17.6067 12.9595 17.4308 12.9595 17.2901V15.7076C12.9595 15.18 12.7837 14.8284 12.5726 14.6525C13.8387 14.5119 15.1751 14.0547 15.1751 11.8391C15.1751 11.206 14.9289 10.6785 14.5772 10.2917C14.58 10.2806 14.5839 10.2668 14.5885 10.2502C14.6423 10.056 14.7985 9.49236 14.5069 8.77944C14.5069 8.77944 14.0145 8.63877 12.9243 9.3773C12.4671 9.27179 11.9748 9.20146 11.4824 9.20146C10.9901 9.20146 10.4977 9.23663 10.0405 9.3773C8.95029 8.63877 8.45795 8.77944 8.45795 8.77944C8.14714 9.53923 8.34503 10.1294 8.38556 10.2503L8.38763 10.2565C8.00074 10.6785 7.78973 11.1709 7.78973 11.8039C7.78973 14.0195 9.12616 14.5119 10.3922 14.6525C10.2515 14.7932 10.0757 15.0394 10.0405 15.4262C9.72401 15.5669 8.91515 15.8131 8.38763 14.9339C8.38763 14.9339 8.07111 14.3712 7.5084 14.336C7.5084 14.336 6.94574 14.336 7.47326 14.6877C7.47326 14.6877 7.8601 14.8635 8.10625 15.5317C8.10625 15.5317 8.45795 16.6571 10.0405 16.3054V17.2901C10.0405 17.4308 9.93502 17.6067 9.65369 17.5715C7.4029 16.7978 5.75 14.6525 5.75 12.1204Z"
fill="#1544C0" />
</svg>
</a>
</div>
</div>
</div>
<div class="about-flex-right">
<img class="avatar" src="./imgs/Hero Avatar.png" alt="Ben Hamel's profile photo" />
</div>
</div>
</div>
<div class="section">
<div class="projects-container"></div>
<h1 class="center-header">PERSONAL <span class="primary-color">PROJECTS</span></h1>
<div class="flex-cards">
<div class="card">
<img class="project-img" src="./imgs/joshua-woroniecki-lzh3hPtJz9c-unsplash.jpeg"
alt="A colorful picture of a half closed macbook pro" />
<h3>WEBSITE - MY PORTFOLIO</h3>
<h4>Tech: HTML, CSS, Javascript</h4>
<p class="text-content">
Welcome to my portfolio website! I built this site from scratch using HTML, CSS, and vanilla
Javascript to showcase my personal coding projects. Drawing inspiration from some of my favorite
websites, I designed it to look amazing on any device. Whether you're on a desktop or a mobile
device, you'll get an optimal viewing experience. I'm excited to share my passion for coding
with you, and I hope you enjoy browsing my projects as much as I enjoyed creating them!
</p>
<div class="project-button-group">
<a href="https://www.figma.com/file/r5uA27iOkIC41lP7k12Ufk/Website?node-id=0%3A1"
target="_blank" rel="noopener noreferrer"><button class="button-item">Design</button>
</a>
<a href="https://github.com/ben-hamel/my-dev-portfolio-vanilla" target="_blank"
rel="noopener noreferrer" aria-label="Visit Ben Hamel's GitHub page">
<button class="button-item">Code</button>
</a>
</div>
</div>
<div class="card">
<img class="project-img" src="imgs/25516.jpg" alt="Neon style sign that says coming soon" />
<h3>MOBILE APP - THE SCENE</h3>
<h4>Tech: React Native, Expo, Firestore</h4>
<p class="text-content">
<strong>Coming Soon:</strong> Get ready to unleash your creativity with our upcoming mobile app!
Designed to help you find local creatives and collaborators, this app is built using
cutting-edge technologies like React Native, Firebase, Firestore database, and Expo. With its
sleek and intuitive interface, you can easily connect with like-minded individuals to work on
projects together. Whether you're an artist, musician, writer, or any kind of creative, our app
will help you find the perfect match for your next collaboration. And the best part? It's
available on both iOS and Android platforms, so you can stay connected no matter what device
you're on. Stay tuned for the launch!
</p>
<div class="project-button-group">
<button class="button-item button-item-disabled" disabled>Design</button>
<button class="button-item button-item-disabled" disabled>Code</button>
</div>
</div>
</div>
</div>
</div>
<div class="footer">Ben Hamel - Newfoundland, Canada</div>
</body>
<script>
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
</script>
</html>