-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (101 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/styles.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap"
rel="stylesheet">
<title>Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="hero">
<nav>
</svg>
<img class="logo" src="src/images/logo.svg" alt="Natalie Bencomo's Logo" />
<ul id="nav-list">
<li><a href="#about-me">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact-me">Contact Me</a></li>
</ul>
</nav>
<div class="hero-area">
<div class="hero-text">
<h1>Natalie Bencomo</h1>
<p>Software Developer</p>
<div class="button"><a href="#about-me">About Me</a></div>
</div>
<div class="socials">
<div>
<a href="https://twitter.com/nataliedev111" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50"
viewBox="0 0 24 24">
<path
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.5 8.778c-.441.196-.916.328-1.414.388.509-.305.898-.787 1.083-1.362-.476.282-1.003.487-1.564.597-.448-.479-1.089-.778-1.796-.778-1.59 0-2.758 1.483-2.399 3.023-2.045-.103-3.86-1.083-5.074-2.572-.645 1.106-.334 2.554.762 3.287-.403-.013-.782-.124-1.114-.308-.027 1.14.791 2.207 1.975 2.445-.346.094-.726.116-1.112.042.313.978 1.224 1.689 2.3 1.709-1.037.812-2.34 1.175-3.647 1.021 1.09.699 2.383 1.106 3.773 1.106 4.572 0 7.154-3.861 6.998-7.324.482-.346.899-.78 1.229-1.274z" />
</svg>
</a>
</div>
<div>
<a href="https://www.linkedin.com/in/natalie-bencomo-220305212/" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50"
viewBox="0 0 24 24">
<path
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 8c0 .557-.447 1.008-1 1.008s-1-.45-1-1.008c0-.557.447-1.008 1-1.008s1 .452 1 1.008zm0 2h-2v6h2v-6zm3 0h-2v6h2v-2.861c0-1.722 2.002-1.881 2.002 0v2.861h1.998v-3.359c0-3.284-3.128-3.164-4-1.548v-1.093z" />
</svg>
</a>
</div>
<div><a href="https://github.com/NatalieMonique111" class="social">
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="50" height="50"
viewBox="0 0 24 24">
<path
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 6c-3.313 0-6 2.686-6 6 0 2.651 1.719 4.9 4.104 5.693.3.056.396-.13.396-.289v-1.117c-1.669.363-2.017-.707-2.017-.707-.272-.693-.666-.878-.666-.878-.544-.373.041-.365.041-.365.603.042.92.619.92.619.535.917 1.403.652 1.746.499.054-.388.209-.652.381-.802-1.333-.152-2.733-.667-2.733-2.965 0-.655.234-1.19.618-1.61-.062-.153-.268-.764.058-1.59 0 0 .504-.161 1.65.615.479-.133.992-.199 1.502-.202.51.002 1.023.069 1.503.202 1.146-.776 1.648-.615 1.648-.615.327.826.121 1.437.06 1.588.385.42.617.955.617 1.61 0 2.305-1.404 2.812-2.74 2.96.216.186.412.551.412 1.111v1.646c0 .16.096.347.4.288 2.383-.793 4.1-3.041 4.1-5.691 0-3.314-2.687-6-6-6z" />
</svg>
</a>
</div>
</div>
</section>
<section class="sub-section" id="about-me">
<div class="information">
<h2>About Me</h2>
<p> Greetings, welcome to my page! My name is Natalie. I am a software developer with a love for learning
and technology.</p>
</div>
<div class="headshot-container">
<img class="headshot" src="src/images/Headshot.jpeg" alt="Natalie Bencomo headshot" />
</div>
</section>
<section class="sub-section-alternative" id="projects">
<H2>Projects</H2>
<div class="project-container">
<div class="project-card">
<img class="project-image" src="src/images/explore.png" alt="Project One Image" />
<h3>Project One</h3>
<p class="subtext">A React app that enables users to explore UNESCO world heritage sites. This site utilizes an Express backend, postgreSQL database, and Flickr API.</p>
<hr />
<p class="subtext"><a class="project-link" href="https://explore-our-world.herokuapp.com/">View Here</a></p>
</div>
<div class="project-card">
<img class="project-image" src="src/images/travel-blog.png" alt="Project Two Image" />
<h3>Project Two</h3>
<p class="subtext">A React/Express travel blog site with a postgresSQL database for image storage and comment box feature.</p>
<hr />
<p class="subtext"><a class="project-link" href="https://travel-blog-111.herokuapp.com/">View Here</a>
</div>
<div class="project-card">
<img class="project-image" src="src/images/recipe.png" alt="Project Three Image" />
<h3>Project Three</h3>
<p class="subtext">This is my very first Techtonica project, a static single-page recipe site built with HTML and CSS.</p>
<hr />
<p class="subtext"><a class="project-link" href="https://nataliemonique111.github.io/recipe-page/">View Here</a>
</div>
</div>
</section>
<footer id="contact-me">
<h2><a href="src/contact-form-04/index.html">Contact Me</a></h2>
<h3>NatalieMonique111@gmail.com</h3>
</footer>
<script src="src/app.js"></script>
</body>
</html>
<!-- Inspired by Ania Kubow! -->