-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (139 loc) · 6.34 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Victor Peña</title>
<!-- bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- custom css-->
<link rel="stylesheet" href="css/style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KRQ57KZ5L7"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KRQ57KZ5L7');
</script>
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<img class="victor-pena-logo" src="css/images/victorpenaduck.png" alt="duck logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutMe_anchor">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio_anchor">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/victorpena13">GitHub</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="parallax"></div>
<div id="aboutMe_anchor">
<h1>About <img class="victor-pena-logo" src="css/images/victorpenaduck.png" alt="victor pena logo">
</h1>
<h6><a target="_blank" href="https://www.freecodecamp.org/victorpena13">Free Code Camp Profile</a></h6>
</div>
<h1 id="portfolio_anchor">Portfolio</h1>
<div class="card-group">
<div class="card">
<div class="card-body">
<a href="konami.html">
<h4 class="card-title">Konami Code</h4>
</a>
<a href="https://github.com/victorpena13/victorpena13.github.io/blob/main/konami.html">
<h6 class="card-title">source code</h6>
</a>
<p class="card-text">With simple JavaScript, objects and arrays, I am able to detect a user's input. If the right sequence is entered - a secret is revealed.</p>
</div>
<div class="card-footer">
<small class="text-muted">Technologies: HTML, CSS, JavaScript</small>
</div>
</div>
<div class="card">
<div class="card-body">
<a href="coffee-project.html">
<h4 class="card-title">Coffee Project</h4>
</a>
<a href="https://github.com/victorpena13/victorpena13.github.io">
<h6 class="card-title">source code</h6>
</a>
<p class="card-text">
This project lets you add, search by name and category, different coffees to an object-array.
</p>
</div>
<div class="card-footer">
<small class="text-muted">Technologies: HTML, CSS, JavaScript</small>
</div>
</div>
<div class="card">
<div class="card-body">
<a href="calculator.html">
<h4 class="card-title">Calculator</h4>
</a>
<a href="https://github.com/victorpena13/js-calculator">
<h6 class="card-title">source code</h6>
</a>
<p class="card-text">
Created a simple calculator with my own problem solving skills and knowledge of JavaScript.
</p>
</div>
<div class="card-footer">
<small class="text-muted">Technologies: HTML, CSS, JavaScript, jQuery</small>
</div>
</div>
<div class="card">
<div class="card-body">
<a href="mapbox_maps_api.html">
<h4 class="card-title">Mapbox API Project</h4>
</a>
<a href="https://github.com/victorpena13/victorpena13.github.io">
<h6 class="card-title">source code</h6>
</a>
<p class="card-text">With the MapBox API I am able to show a user saved locations. A user can add/hide markers. Zoom in and search.</p>
</div>
<div class="card-footer">
<small class="text-muted">Technologies: HTML, CSS, BootStrap, JavaScript, jQuery <br> APIs: MapBox</small>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">
<a href="weather_map.html">Weather Map Project</a>
</h4>
<h6>
<a href="https://github.com/victorpena13/victorpena13.github.io">source code</a>
</h6>
<p class="card-text">With the MapBox API a map is generated allowing a user to search for a location. That location is then passed through the OpenWeather API allowing me to deliver a five day weather forecast.</p>
</div>
<div class="card-footer">
<small class="text-muted">Technologies: HTML, CSS, BootStrap, JavaScript, jQuery<br>APIs: OpenWeather & Mapbox</small>
</div>
</div>
</div>
</div>
<!--bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!--jquery-->
<script src="js/jQuery.js"></script>
<!--custom javascript-->
<script src="js/main.js"></script>
<script src="js/favicon.js"></script>
</body>
</html>