-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (98 loc) · 6 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Web Development Portfolio">
<meta name="author" content="Antonio Nogales">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Antonio Nogales - Web Developer - Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Lobster|Press+Start+2P|Roboto|Roboto+Condensed|Roboto+Slab" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="./images/Plug_It_In_by_boss019_favicon.png">
<link rel="stylesheet" href="./styles/normalize.css">
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<header id="header_main">
<div class="logo_box">
<img class="logo_img" src="images/Plug_It_In_by_boss019_150x150.png" alt="Logo Image">
</div>
<div class="title_box">
<h1 class="title">Antonio Nogales</h1>
<h2 class="subtitle">Front-End Websmith</h2>
</div>
</header>
<input type="checkbox" id="nav-toggle" />
<label for="nav-toggle"><span class="label_text">☰</span></label>
<nav class="top_nav hide">
<ul class="nav-list">
<li class="nav-item"><a class="fade" href="index.html">Home</a></li>
<li class="nav-item"><a class="fade" href="#about">About Me</a></li>
<li class="nav-item"><a class="fade" href="#portfolio">Featured Work</a></li>
<li class="nav-item"><a class="fade" href="#footer_main">Contact</a></li>
</ul>
</nav>
<div class="content_main">
<section id="intro">
<img class="intro_img" src="./images/hero_02.svg" alt="building websites that work">
</section>
<section id="about">
<div class="about_text">
<h3>About Me</h3>
<p>I am a web developer in training, currently completing the <em>Google Challenge Front-End Web Development Scholarship</em> at Udacity. I have been dabbling at html and css for years, but never thought of making it my profession, until now.</p>
</div>
<div class="about_text">
<h3>Skills</h3>
<p>"A skill is the ability to carry out a task with determined results often within a given amount of time, energy, or both. Skills can often be divided into domain-general and domain-specific skills. For example, in the domain of work, some general skills would include time management, teamwork and leadership, self-motivation and others, whereas domain-specific skills would be used only for a certain job. Skill usually requires certain environmental stimuli and situations to assess the level of skill being shown and used.</p>
<p>People need a broad range of skills to contribute to a modern economy. A joint ASTD and U.S. Department of Labor study showed that through technology, the workplace is changing, and identified 16 basic skills that employees must have to be able to change with it."</p>
<cite>Wikipedia contributors, "Skill," Wikipedia, The Free Encyclopedia, <a class="fade" href="https://en.wikipedia.org/w/index.php?title=Skill&oldid=839609736" target="_blank">https://en.wikipedia.org/w/index.php?title=Skill&oldid=839609736</a> (accessed May 4, 2018).</cite>
<!-- add logos for web technologies later
<img src="./images/HTML5_logo_and_wordmark.svg" alt="HTML LOGO">
<!-- <img src="./images/CSS3_logo_and_wordmark.svg" alt="CSS3 LOGO">
<!-- <img src="./images/Unofficial_JavaScript_logo_2.svg" alt="JavaScript LOGO"> -->
</p>
</div>
</section>
<section id="portfolio">
<h3>Featured Work</h3>
<div class="item_box">
<figure>
<a class="fade" href="http://www.nogales.de" target="_blank" rel="noopener noreferrer"><img src="images/nogales.de_small.png" alt="www.nogales.de"></a>
<figcaption>First business website<br>
<a class="fade" href="http://www.nogales.de" target="_blank" rel="noopener noreferrer">view website</a></figcaption>
</figure>
</div>
<div class="item_box">
<figure>
<a class="fade" href="https://annoba.github.io/pixel-art-maker/index.html" target="_blank" rel="noopener noreferrer"><img src="images/Pixel_Art_Maker_small.png" alt="Pixel Art Maker"></a>
<figcaption>Udacity Student Project: Pixel Art Maker<br>
<a class="fade" href="https://annoba.github.io/pixel-art-maker/index.html" target="_blank" rel="noopener noreferrer">view website</a>
</figcaption>
</figure>
</div>
<div class="item_box">
<figure>
<a class="fade" href="http://www.zag.uni-freiburg.de/anthro/fs_anthro/fs.html" target="_blank" rel="noopener noreferrer"><img src="images/Fachschaft_Anthropologie-Uni_Freiburg_small.png" alt="Fachschaft Anthropologie">
</a>
<figcaption>Students' Association at my Uni<br>
<a class="fade" href="http://www.zag.uni-freiburg.de/anthro/fs_anthro/fs.html" target="_blank" rel="noopener noreferrer">view website</a></figcaption>
</figure>
</div>
</section>
</div>
<footer id="footer_main">
<ul class="footer-contact">
<p class="list-header">Contact Information</p>
<li><a class="fade" href="mailto:annoba@gmail.com" target="_blank"><img src="./images/envelope-square.svg" alt="email">email</a>: annoba@gmail.com</li>
<li><a class="fade" href="https://github.com/annoba" target="_blank"><img src="./images/github-square.svg" alt="GitHub">GitHub</a></li>
<li><a class="fade" href="https://codepen.io/annoba/" target="_blank"><img src="./images/codepen.svg" alt="Codepen">Codepen</a></li>
</ul>
<ul class="footer-info">
<p class="list-header">Credit/License/Disclaimer</p>
<li><strong>Logo Image:</strong> ©2006-2018 boss019 https://boss019.deviantart.com/art/Plug-It-In-41615835</li>
<li><strong>Contact Icons:</strong> https://fontawesome.com/icons, used under the Creative Commons Attribution 4.0 International license (https://creativecommons.org/licenses/by/4.0/)</li>
<li><em>The brand icons are a trademark of the respective owners. The use of this trademark does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</em></li>
</ul>
</footer>
</body>
</html>