portfolio-website/index.html at master · daniel-234/portfolio-website · GitHub

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
<!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>My Portfolio Website</title>
		<!-- Bootstrap CSS CDN -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
	        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	    <!-- Bootstrap CSS local fallback -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<div class="container">
			<header class="row">
				<!-- Place header elements on two separate lines when viewed on extra small devices. Place them on the same line otherwise.
				     Push the first six columns to the right and the last six columns to the left when visualized viewports >= 768px -->
				<div class="col-xs-12 col-sm-6 col-sm-push-6 text-right text-uppercase center-elem-header">
					<h1>Daniele Erbì</h1>
					<h4>Front-End Engineer</h4>
				</div>
				<div class="col-xs-12 col-sm-6 col-sm-pull-6 center-elem-header">
					<img class="a" src="images/logo.svg" alt="Logo">
				</div>
			</header>
			<div class="row">
				<div class="col-md-12">
					<hr>
				</div>
			</div>
			<div class="row">
				<figure class="col-md-12">
					<picture>
						<!-- Use media queries to deliver fully responsive images -->
						<source media="(min-width: 992px)" srcset="images/main-large.png">
						<source media="(min-width: 550px)" srcset="images/main-medium.png">
						<img class="img-responsive" src="images/main.png" alt="main image">
					</picture>
				</figure>
			</div>
			<div class="row">
				<div class="col-md-12 center-elem-featured">
					<h2>Featured Work</h2>
					<p class="text-uppercase">
						The projects I developed during my Nanodegree @<a href="https://www.udacity.com/" target="_blank">Udacity</a>
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<hr>
				</div>
			</div>
			<!-- Projects section -->
			<div class="row">
				<!-- Make use of Bootstrap column wrapping technique to accomodate a 3 column layout on larger devices and a 2 column
				     layout on smaller devices. -->
				<article class="col-xs-6 col-md-4 center-elem-section">
					<figure>
						<img class="img-responsive center-block img-section" src="images/online-resume.svg" alt="First Project: Online Resume wordcloud">
					</figure>
					<h3 class="text-uppercase">
						<a href="https://github.com/daniel-234/frontend-nanodegree-resume" target="_blank">Online Resume</a>
					</h3>
				</article>
				<article class="col-xs-6 col-md-4 center-elem-section">
					<figure>
						<img class="img-responsive center-block img-section" src="images/arcade-game-clone.svg" alt="Second Project: Arcade Game Clone wordcloud">
					</figure>
					<h3 class="text-uppercase">
						<a href="https://github.com/daniel-234/frontend-nanodegree-arcade-game" target="_blank">Arcade Game Clone</a>
					</h3>
				</article>
				<article class="col-xs-6 col-md-4 center-elem-section">
					<figure>
						<img class="img-responsive center-block img-section" src="images/website-performance-optimization.svg" alt="Third Project: Website Performance Optimization wordcloud">
					</figure>
					<h3 class="text-uppercase">
						<a href="https://github.com/daniel-234/frontend-nanodegree-mobile-portfolio" target="_blank">Website Optimization</a>
					</h3>
				</article>
				<article class="col-xs-6 col-md-4 center-elem-section">
					<figure>
						<img class="img-responsive center-block img-section" src="images/neighborhood-map.svg" alt="Fourth Project: Neighborhood Map wordcloud">
					</figure>
					<h3 class="text-uppercase">
						<a href="https://github.com/daniel-234/frontend-nanodegree-neighborhood-map" target="_blank">Neighborhood Map</a>
					</h3>
				</article>
				<article class="col-xs-6 col-md-4 center-elem-section">
					<figure>
						<img class="img-responsive center-block img-section" src="images/health-tracker.svg" alt="Fifth Project: Health Tracker wordcloud">
					</figure>
					<h3 class="text-uppercase">
						<a href="https://github.com/daniel-234/frontend-nanodegree-health-tracker" target="_blank">Health Tracker</a>
					</h3>
				</article>
				<article class="col-xs-6 col-md-4 center-elem-section">
					<figure>
						<img class="img-responsive center-block img-section" src="images/feed-reader-testing.svg" alt="Sixth Project: Feed Reader Testing wordcloud">
					</figure>
					<h3 class="text-uppercase">
						<a href="https://github.com/daniel-234/frontend-nanodegree-feedreader" target="_blank">Feed Reader Testing</a>
					</h3>
				</article>
			</div>
			<div class="row">
				<div class="col-md-12">
					<hr>
				</div>
			</div>
		</div>
	</body>
</html>