-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (117 loc) · 4.92 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
<!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.0" />
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/style.css" />
<title>Mia Mauro | Web Developer</title>
</head>
<body>
<header>
<h1>Mia Mauro</h1>
<nav class="navbar">
<ul class="navlinks">
<!--Link navbar items to corresponding sections below.-->
<li><a href="#about-me">About Me</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact-me">Contact Me</a></li>
<!--Create a list item to add resume once complete.-->
<li><a href="#resume">Resume</a></li>
</ul>
</nav>
</header>
<!--Place a recent photo of myself near top of page to go along with my introduction.-->
<div class="avatar-background">
<img
class="avatar"
src="./assets/images/self portrait2 copy.png"
alt="self portrait"
/>
</div>
<main>
<section id="about-me" class="main-section">
<h2>About Me</h2>
<!--Remember DRY coding. Create a class (.section-right) to format the following divs the same way without repeating code.-->
<div class="section-right">
<p>
Hello! My name is Mia Mauro, and I'm currently studying web
development in the University of Denver's Full Stack Coding program.
I live in Des Moines, Iowa, but was previously traveling the country
full time as a registered nurse. <br />
<br />
<!--Will need to add more introductory info as I get further along in the class and begin preparing for career moves.-->
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam,
vel voluptas. Cumque dolor quisquam laboriosam accusamus
consequuntur rem eius sed debitis illo pariatur obcaecati molestias
sit ratione veritatis sequi, minus eligendi repellat. Mollitia amet
molestiae inventore, dolorem soluta a perferendis fugiat, debitis,
quam consequuntur ab. Dolorem necessitatibus earum iste laudantium
corrupti, ipsam commodi exercitationem laborum.
</p>
</div>
</section>
<section id="work" class="main-section">
<h2>Work</h2>
<div class="section-right projects">
<!--Anchor GitHub profile for now. Once completed projects are added, link to appropriate repo.-->
<a
href="https://hollyhleal.github.io/travel-buddy/"
class="title-holder"
>
<img
src="./assets/images/travel-buddy-screenshot.png"
alt="travel buddy project"
class="large-project"
/>
<div class="project-title">Travel Buddy</div>
</a>
<div class="smaller-projects">
<!--Create classes to style project titles neatly and uniform across entire portfolio.-->
<a
href="https://whispering-dawn-72162.herokuapp.com/"
class="title-holder"
>
<img
src="./assets/images/proj2 screenshot.png"
alt="discovering denver project"
/>
<div class="project-title">Discovering Denver</div>
</a>
<a href="https://github.com/miamauro" class="title-holder">
<img src="./assets/images/beans2.avif" alt="coffee beans" />
<div class="project-title">Title</div>
</a>
</div>
<div class="smaller-projects">
<a href="https://github.com/miamauro" class="title-holder">
<img src="./assets/images/beans2.avif" alt="coffee beans" />
<div class="project-title">Title</div>
</a>
<!--The projects are currently linked to my GitHub profile, but will lead to completed projects in the future.-->
<a href="https://github.com/miamauro" class="title-holder">
<!--Alt attributes will need to be updated once projects are added. The images are placeholders for now.-->
<img src="./assets/images/beans2.avif" alt="coffee beans" />
<div class="project-title">Title</div>
</a>
</div>
</div>
</section>
<section id="contact-me" class="main-section">
<h2>Contact Me</h2>
<div class="section-right">
<div class="contact-list">
<ul>
<li class="contact-items">515.720.2988</li>
<li class="contact-items">miaherzog@outlook.com</li>
<li class="contact-items" id="github-page">
<a href="https://github.com/miamauro">GitHub</a>
</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>