-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (156 loc) · 6.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href=# class="logo">Portfolio</a>
<div class="toggle" onclick="toggleMenu();"></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="https://docs.google.com/document/d/1_6NiGBLwVcWWHZPaEOlUYAAIlyrBMxru2RYcB46b4gs/edit?usp=sharing">Resume</a></li>
</ul>
</header>
<section class=banner id="home">
<div class=textArea>
<h2>Hello, I'm<br><span>Ryan Bell.</span></h2>
<h3>I'm a computer programmer and graphic designer with an interest in data and analytics engineering.</h3>
<a href="#about" class=btn>About Me</a>
</div>
</section>
<section class="about" id="about">
<div class="heading">
<h2>About Me</h2>
</div>
<div class="content">
<div class="contentArea">
<h3>“Real optimism requires problems, and there is no endpoint; it is an eternal process of becoming.” — Kevin Kelly</h3>
<p>I'm a problem-solver, and I like to challenge myself and learn new things. My interests have no bounds, and range from cooking to martial arts to writing. In everything I do, I'm self-motivated because I believe in the strength of internal drive.<br><br>Despite many of my hobbies having to do with technology, I feel drawn to spending my time in nature and appreciating the beauty already inherent to our world. And, although I value time spent in solitude, I also like to build relationships and hear about life from someone else's perspective. I work well in teams, but find importance in the ability to self-express and be confident in your own ideas. Above all else, I think humility and eagerness to learn feed my growth more than anything else I do.</p>
</div>
<div class="w50">
<img src="images\actualHeadshot.jpg" class="image" width="400" height="500"></img>
</div>
</div>
</section>
<section class="services" id="services">
<div class="heading white">
<h2>Services</h2>
<p>I'm looking for full-time employment as a data engineer or an analytics
engineer. Alongside that, I offer freelance services in graphic design, web design, product analysis, and web development.
</p>
</div>
<div class="content">
<div class="servicesArea">
<img src="images/WebDevIcon.png">
<h2>Web Development</h2>
<p>~~~Section Under Construction~~~</p>
</div>
<div class="servicesArea">
<img src="images/WebDesignIcon.jpg">
<h2>Web Design</h2>
<p>~~~Section Under Construction~~~</p>
</div>
<div class="servicesArea">
<img src="images/DataAnalysisIcon.png">
<h2>Product Analysis</h2>
<p>Open to contracted work as a product analyst or data consultant.</p>
</div>
<div class="servicesArea">
<img src="images/GraphicDesignIcon.png">
<h2>Graphic Design</h2>
<p>~~~Section Under Construction~~~
</p>
</div>
</div>
</section>
<section class="work" id="work">
<div class="heading">
<h2>Recent Work</h2>
<p>You can find some of my recent work and projects on Github, LinkedIn, Medium, and Pinterest.</p>
</div>
<div class="content">
<div class="workArea">
<a href="https://github.com/Tacobell3669"><img src="images/GithubIconx256.png"></a>
</div>
<div class="workArea">
<a href="https://www.linkedin.com/in/ryan-bell-74b82611b/"><img src="images/LinkedinIconx256.png"></a>
</div>
<div class="workArea">
<a href="https://medium.com/@bacotell36"><img src="images/MediumIconx256.png"></a>
</div>
<div class="workArea">
<img src="images/PinterestIconx256.png">
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="heading white">
<h2>Contact Me</h2>
<p>Feel free to reach out to me through email, LinkedIn, or by leaving a message below.</p>
</div>
<div class="content">
<div class="contactInfo">
<h3>Contact Info</h3>
<div class="contactInfoArea">
<div class="box">
<div class="icon">
<i class="fa fa-map-marker"></i>
</div>
<div class="text">
<h3>Address</h3>
<p>1031 Curran St NW, Unit B,<br>Atlanta, Georgia,<br>30318</p>
</div>
</div>
<div class="box">
<div class="icon">
<i class="fa fa-phone"></i>
</div>
<div class="text">
<h3>Phone</h3>
<p>404-374-4630</p>
</div>
</div>
<div class="box">
<div class="icon">
<i class="fa fa-envelope-o"></i>
</div>
<div class="text">
<h3>Email</h3>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
<div class="formArea">
<form>
<h3>Message Me</h3>
<input type="text" name="" placeholder="Full Name">
<input type="email" name="" placeholder="Email">
<textarea placeholder="Your Message"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
<script type="text/javascript">
window.addEventListener('scroll', function(){
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
function toggleMenu(){
var menuToggle = document.querySelector('.toggle');
menuToggle.classList.toggle('active')
}
</script>
</body>
</html>