-
Notifications
You must be signed in to change notification settings - Fork 0
/
work.html
114 lines (110 loc) · 7.05 KB
/
work.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Bentley's Portfolio</Title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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=Oxygen:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.production.css">
<link rel="shortcut icon" href="img/favicon.ico">
<script src="js/tota11y.min.js"></script>
</head>
<body>
<header class="page-header">
<img class='whitesvg page-header-item' src="img/main-logo.svg" alt="Main logo">
<nav class="page-header-item">
<ul role="menubar" class="nav-list">
<li role="presentation" >
<a href="index.html" role="menuitem" class="nav-list-item">Home</a>
</li>
<li role="presentation" >
<a href="about.html" role="menuitem" class="nav-list-item">About Me</a>
</li>
<li role="presentation" >
<a href="work.html" role="menuitem" class="nav-list-item nav-list-item-active">Work</a>
</li>
<li role="presentation" >
<a href="contact.html" role="menuitem" class="nav-list-item">Contact</a>
</li>
</ul>
</nav>
</header>
<main>
<h1 class="centered">Things Bentley Built</h1>
<div class="project-list">
<div class="project-list-item">
<h2>A1: Pokedex</h2>
<p>Vanilla HTML, Bootstrap, jQuery, eslint, stylelint, Github Pages</p>
<img class="project-img" src="./img/project_pokedex.png" />
<p>This project was focused on learning to use Bootstrap, jQuery, and interact with an external API. It has a responsive layout and works with a public <a href="https://pokeapi.co" target="_blank">Pokemon API</a>. Dig through and pick a pokemon to see a picture of it and some details.</p>
<a href="https://github.com/bentleyjensen/CF-Pokedex">Github</a>
<a href="https://bentleyjensen.github.io/CF-Pokedex/">Demo</a>
</div>
<div class="project-list-item">
<h2>A2: MyFlix - API</h2>
<p>Express.js, Mongoose, MondoDB, Passport.js, JSDoc, Heroku</p>
<img class="project-img" src="./img/project_myFlix-api.png" />
<p>This API is built with a MongoDB instance behind it, implements full authorization through Passport, and has JSDoc for easy endpoint documentation. Currently Hosted by Heroku. It serves movies, similar in spirit to IMDB.</p>
<a href="https://github.com/bentleyjensen/movie-api">Github</a>
<a href="https://shrouded-fortress-53636.herokuapp.com/">Demo</a>
</div>
<div class="project-list-item">
<h2>A3: MyFlix - React</h2>
<p>React.js, Redux, Parcel, Bootstrap, Netlify</p>
<img class="project-img" src="img/project_myFlix-React.png" />
<p>Built to work with the MyFlix API, this frontend is built in React and bundled with parcel. Browse movies, save favorties, and update user info. Hosted by Netlify.</p>
<a href="https://github.com/bentleyjensen/myflix-client-react">Github</a>
<a href="https://bentley-myflix-client-react.netlify.app/">Demo</a>
</div>
<div class="project-list-item">
<h2>A4: Meet App</h2>
<p>TDD, CD, Google Calendar, OAuth, Serverless</p>
<img class="project-img" src="./img/project_meet.png" />
<p>A Progressive web app built with a TDD approach, which does OAuth via AWS Serverless functions and gets the events from a google calendar. Shows (fake) events for you to meet up with your friends.</p>
<a href="https://github.com/bentleyjensen/meet-app">Github</a>
<a href="https://bentleyjensen.github.io/meet-app/">Demo</a>
</div>
<div class="project-list-item">
<h2>A5: Chat App</h2>
<p>React Native, Google Firestore</p>
<div class="img-portrait-container">
<img class="project-img img-portrait" src="./img/project_chat_short.png" />
</div>
<p>This native app can build for Android or iOS thanks to React Native. It features caching, offline mode, realtime chat, and is backed by a Google Firestore database. Chat with your friends!</p>
<a href="https://github.com/bentleyjensen/chat-app">Github</a>
</div>
<div class="project-list-item">
<h2>A6: MyFlix - Angular</h2>
<p>Angular, Typedoc, Github Pages, Angular Material</p>
<img class="project-img" src="./img/project_myFlix-Angular.png" />
<p>A Single Page App, this is another frontend for the MyFlix API, but this time in Angular. Utilizes the Material design library for Angular.</p>
<a href="https://github.com/bentleyjensen/myflix-client-angular">Github</a>
<a href="https://bentleyjensen.github.io/myflix-client-angular">Demo</a>
</div>
</div>
</main>
<footer class="page-footer">
<p>Find me on</p>
<div class="social-media-footer">
<a href="https://github.com/bentleyjensen" target="_blank">
<img alt="github logo" src="img/github-logo.svg" class="whitesvg" />
</a>
<a href="https://twitter.com/bentleyjensen" target="_blank">
<img alt="twitter logo" src="img/twitter-logo.svg" class="whitesvg" />
</a>
<a href="https://www.linkedin.com/in/bentleyjensen/" target="_blank">
<img alt="linkedin logo" src="img/linkedin-logo.svg" />
</a>
<a href="https://medium.com/@bentleyjensen" target="_blank">
<img alt="medium.com logo" src="img/medium-logo.svg" class="whitesvg" />
</a>
<a href="https://dev.to/bentleyjensen" target="_blank">
<img alt="DEV Community logo" src="img/devto-logo.svg" class="whitesvg" />
</a>
</div>
</footer>
</body>
</html>