-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
132 lines (131 loc) · 9.75 KB
/
portfolio.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
<!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">
<title>Portfolio</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic&display=swap" rel="stylesheet">
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="portfolio.css" />
</head>
<body>
<main>
<nav class="navbar navbar-expand-lg sticky-top navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="index.html">About</a>
</li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigationbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2" id="navigationbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="portfolio.html">Portfolio<img class="icon" src="https://image.flaticon.com/icons/png/512/14/14573.png"></a>
</li>
<li class="nav-item active">
<a href="https://medium.com/@danhallada" target="_blank">Blog<img class="icon" src="https://miro.medium.com/max/390/1*emiGsBgJu2KHWyjluhKXQw.png"/></a>
</li>
<li class="nav-item active">
<a href="https://www.linkedin.com/in/daniel-hallada-307b9092" target="_blank">Linkedin<img class="icon" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-512.png"/></a>
</li>
<li class="nav-item active">
<a href="https://github.com/hdaniel1/" target="_blank">Github<img class="icon" src="https://image.flaticon.com/icons/svg/25/25231.svg"/></a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container" id="portfolio-info">
<div class="col-md-6 px-0">
<h1 class="display-4">Portfolio</h1>
<p class="lead my-3">
I've worked with a number of languages / technologies, including React.js, Ruby on Rails, and Semantic UI React.
<br/><br/>I'm always learning something new, so expect this list to grow overtime, along with my portfolio. Right now, I'm currently diving into Node.js, a Javascript run-time for developing server-side applications.
<br/><br/>Check out some of my projects below!</p>
<p class="lead mb-0">
</div>
</div>
</div>
<h2 id="oo-title"><i><u>Object-Oriented & Full Stack</u></i></h2>
<br/>
<div class="card-deck" id="project-container">
<div class="card w-50">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/dDKCkAlhjts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<h5 class="card-title"><u>Audiotecha</u><img class="icon" src="https://image.flaticon.com/icons/png/512/27/27130.png"></h5>
<p class="card-text">Integrate with your Spotify account to manage a backlog of albums you'd like to listen to. Listen to albums, create playlists, see stats, but keep in mind an album can only be listened to once!</p>
<p><a class="app-link" target="_blank" href="https://audiotecha-frontend.herokuapp.com/"><b>Try it!</b></a></p>
<h6><i>Ruby on Rails, React.js, Redux, CSS, HTML, Semantic UI, Chart.js</i></h6>
</div>
<div class="card-footer">
<small class="text-muted"><a href="https://github.com/hdaniel1/Audiotheca-Frontend" target="_blank"><img class="icon" src="https://image.flaticon.com/icons/svg/25/25231.svg"/></a></small>
</div>
</div>
<div class="card w-50">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/FtFIG0QTF98" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<h5 class="card-title"><u>Pokemon Safari</u><img class="icon" src="https://image.flaticon.com/icons/png/512/868/868596.png"></h5>
<p class="card-text">Using data seeded from the PokeApi, trainers can hunt for and catch various Pokemon across a multitude of environments, all while enjoying classic tunes from the franchise.</p>
<h6><i>Ruby on Rails, Javascript, CSS, HTML</i></h6>
</div>
<div class="card-footer">
<small class="text-muted"><a href="https://github.com/hdaniel1/pokemon-safari-frontend" target="_blank"><img class="icon" src="https://image.flaticon.com/icons/svg/25/25231.svg"/></a></small>
</div>
</div>
<div class="card w-50">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/cg5CkVbS8mE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<h5 class="card-title"><u>Taplist</u><img class="icon" src="https://cdn4.iconfinder.com/data/icons/drink-1-8/48/23-512.png"></h5>
<p class="card-text">Browse through a selection of beers, breweries, and retailers. Keep track of favorites, write reviews, and add various beer-oriented tags.</p>
<h6><i>Ruby on Rails, CSS, HTML</i></h6>
</div>
<div class="card-footer">
<a href="https://github.com/hdaniel1/Tap_List" target="_blank"><img class="icon" src="https://image.flaticon.com/icons/svg/25/25231.svg"/></a>
</div>
</div>
</div>
<br/>
<div id="other-container">
<h2 id="misc-title"><i><u>Miscellaneous</u></i></h2>
<br/>
<div class="card-deck">
<div class="card w-50">
<div class="card-body">
<h5 class="card-title"><u>This website!</u><img class="icon" src="https://image.flaticon.com/icons/png/512/93/93618.png"></h5>
<p class="card-text">Using a bit of Bootstrap, vanilla CSS, and plain old HTML, I created this site to get more experience in all of the above and showcase my portfolio. </p>
<h6><i>HTML, CSS, Bootstrap</i></h6>
</div>
<div class="card-footer">
<small class="text-muted"><a href="https://github.com/hdaniel1/pokemon-safari-frontend" target="_blank"><img class="icon" src="https://image.flaticon.com/icons/svg/25/25231.svg"/></a></small>
</div>
</div>
<br/>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title"><u>Bandcamp to Spotify Chrome Extension</u><img class="icon" src="https://cdn3.iconfinder.com/data/icons/music-and-audio-1/26/music-audio-1027-512.png"></h5>
<p class="card-text">Chrome extension to quickly search for an album / artist combination from Bandcamp on Spotify.</p>
<p><a class="app-link" target="_blank" href="https://chrome.google.com/webstore/detail/bandcamp-to-spotify/jidagjanelgimifhmmpocnppmodololk?utm_source=chrome-ntp-icon"><b>Try it!</b></a></p>
<h6><i>Javascript</i></h6>
</div>
<div class="card-footer">
<small class="text-muted"><a href="https://github.com/hdaniel1/Bandcamp-Spotify" target="_blank"><img class="icon" src="https://image.flaticon.com/icons/svg/25/25231.svg"/></a></small>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</main>
<footer>
<p>© Dan Hallada | 2019</p>
</footer>
</body>
</html>