-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (139 loc) · 8.3 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
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X4PHNMQF4N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-X4PHNMQF4N');
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio template">
<meta name="keywords" content="HTML, CSS, Flexbox">
<meta name="author" content="Luis Fernando Jimenez">
<link rel="stylesheet" href="styles.css">
<title>Luis's Portfolio</title>
<link rel="shortcut icon" type="image/png" href="./resources/favicon.png" />
</head>
<body>
<div class="wrapper">
<header class="header">
<a href="#" class="logo">Lujim</a>
<span class="hamburger-menu" id="ham-button">☰</span>
<ul class="menu">
<li><a href="#portfolio" class="menu-item">Portfolio</a></li>
<li><a href="#about" class="menu-item">About</a></li>
<li><a href="#contact" class="menu-item">Contact</a></li>
</ul>
<nav class="navbar overlay" id="myNav">
<a href="javascript:void(0)" class="closebtn" id="close-btn">×</a>
<ul class="overlay-content">
<li><a href="#portfolio" class="menu-item">Portfolio</a></li>
<li><a href="#about" class="menu-item">About</a></li>
<li><a href="#contact" class="menu-item">Contact</a></li>
</ul>
</nav>
</header>
<div class="headline-background">
<section class="headline">
<h1 class="title">
I'm Luis <br>Glad to see you!
</h1>
<div class="header-content">
<p class="descr">I’m a software developer! I can help you build a product, feature or website. Look through
some
of my work and experience! If you like what you see and have a project you need coded, don’t hesitate to
contact me.</p>
<h2 class="connect"> <a href="#">Let's connect</a></h2>
<ul class="socials">
<li><a href="https://twitter.com/lujimhe" target="_blank" rel="noopener noreferrer">
<img src="./resources/TwitterVector.svg" alt="Twitter logo"></a></li>
<li><a href="https://www.linkedin.com/in/lujim/" target="_blank" rel="noopener noreferrer">
<img src="./resources/LinkedinVector.svg" alt="Linkedin logo"></a></li>
<li><a href="https://medium.com/@lu.jim" target="_blank" rel="noopener noreferrer">
<img src="./resources/MediumVector.svg" alt="Medium logo"></a></li>
<li><a href="https://github.com/lu-jim" target="_blank" rel="noopener noreferrer">
<img src="./resources/GithubVector.svg" alt="Github logo"></a></li>
<li><a href="https://wellfound.com/u/lujim" target="_blank" rel="noopener noreferrer">
<svg fill="currentColor" viewBox="0 0 554.89997 266.70002" width="35" class="w-30 text-black"><path d="M 80.9,263.59999 0,2.9999988 H 75.3 L 123,190.39999 174.9,2.9999988 h 75.5 L 302.3,190.39999 350,2.9999988 h 75.3 L 343.5,263.59999 H 263.3 L 212.7,75.399999 161.1,263.59999 H 80.9 Z"></path><circle cx="511.09995" cy="222.89999" fill="#EC2E3A" r="43.799999"></circle><circle cx="511.09995" cy="43.799999" fill="#EC2E3A" r="43.799999"></circle></svg></a></li>
</ul>
</div>
</section>
</div>
<section class="about-section" id="about">
<div class="about-info">
<h2 class="about-title title">
About Myself
</h2>
<p class="descr"> Hola! My name is Luis and I’m a Full-Stack Developer with working experience as a Support
Manager in the information technology and services industry. If you like what you see and have a project you
need coded, don’t hesitate to
contact me.</p>
<h2 class="connect"> <a href="#">Let's connect</a></h2>
<ul class="socials">
<li><a href="https://twitter.com/lujimhe" target="_blank" rel="noopener noreferrer">
<img src="./resources/TwitterVector.svg" alt="Twitter logo"></a></li>
<li><a href="https://www.linkedin.com/in/lujim/" target="_blank" rel="noopener noreferrer">
<img src="./resources/LinkedinVector.svg" alt="Linkedin logo"></a></li>
<li><a href="https://medium.com/@lu.jim" target="_blank" rel="noopener noreferrer">
<img src="./resources/MediumVector.svg" alt="Medium logo"></a></li>
<li><a href="https://github.com/lu-jim" target="_blank" rel="noopener noreferrer">
<img src="./resources/GithubVector.svg" alt="Github logo"></a></li>
<li><a href="https://wellfound.com/u/lujim" target="_blank" rel="noopener noreferrer">
<svg fill="currentColor" viewBox="0 0 554.89997 266.70002" width="35" class="w-30 text-black"><path d="M 80.9,263.59999 0,2.9999988 H 75.3 L 123,190.39999 174.9,2.9999988 h 75.5 L 302.3,190.39999 350,2.9999988 h 75.3 L 343.5,263.59999 H 263.3 L 212.7,75.399999 161.1,263.59999 H 80.9 Z"></path><circle cx="511.09995" cy="222.89999" fill="#EC2E3A" r="43.799999"></circle><circle cx="511.09995" cy="43.799999" fill="#EC2E3A" r="43.799999"></circle></svg></a></li>
</ul>
<button type="button" class="see-project resume" onclick="window.location.href='https://drive.google.com/file/d/1K5bLCSNlcHBmx1YUBk2BcMAmvZftfxBK/view?usp=sharing'">Get My Resume</button>
</div>
<div class="header-content about-content">
<ul class="skill-list">
<li class="list-title">Languages <img src="./resources/downarrow.svg" alt="Down Arrow"></li>
</ul>
<ul class="sublist">
<li class="subitem"> <img src="./resources/jsicon.svg" alt="JavaScript" class="skill-logo"> JavaScript</li>
<li class="subitem"> <img src="./resources/html5.svg" alt="HTML" class="skill-logo"> HTML</li>
<li class="subitem"> <img src="./resources/css.svg" alt="CSS" class="skill-logo"> CSS</li>
</ul>
<ul class="skill-list">
<li class="list-title">Frameworks <img src="./resources/rightarrow.svg" alt="Right Arrow"></li>
<li class="divider-mobile"><img src="./resources/horizontal_separator.svg" alt="horizontal_separator"></li>
<li><img src="./desktop-resources/Separator-Bottom.svg" alt="horizontal_separator" class="divider-desktop">
</li>
<li class="list-title">Skills <img src="./resources/rightarrow.svg" alt="Down Right"></li>
<li class="divider-mobile"><img src="./resources/horizontal_separator.svg" alt="horizontal_separator"></li>
<li><img src="./desktop-resources/Separator-Bottom.svg" alt="horizontal_separator" class="divider-desktop">
</li>
</ul>
</div>
</section>
</div>
<section class="contact-section">
<div class="contact-content" id="contact">
<h2 class="title contact-text contact-title">Contact me</h2>
<p class="contact-text">If you have an application you are interested in developing, a feature that you need built
or a project that needs coding. I’d love to help with it </p>
<form id="fs-frm" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/f/mnqlrawl"
method="post" class="contact-form">
<fieldset id="fs-frm-inputs">
<label for="full-name">Full Name</label>
<input type="text" maxlength="30" name="name" id="full-name" placeholder="First and Last Name" required>
<label for="email-address">Email Address</label>
<input type="email" name="_replyto" id="email-address" placeholder="Email Address" required>
<label for="message">Message</label>
<textarea rows="5" name="message" id="message" maxlength="500" placeholder="Write your message here."
required></textarea>
<input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
</fieldset>
<div id='test-alert'>
</div>
<input class="see-project get-in-touch" type="submit" value="Get In Touch" id="form-submit-button">
</form>
</div>
</section>
<script src="./script.js"></script>
<script src="./formValidation.js"></script>
</body>
</html>