-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (118 loc) · 6.8 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nicolas o garcia</title>
<script src="vendor.bundle.js" type="text/javascript" charset="utf-8" defer></script>
<script src="bundle.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body class="container-fluid">
<!-- HEADER/NAVBAR -->
<nav>
<div class="nav-menu-icon">
<span class="ion-navicon-round"></span>
</div>
<div class="nav-menu">
<a class="scroll-on-page-link" href="#home-scrollto">home</a>
<a class="scroll-on-page-link" href="#portfolio-scrollto">portfolio</a>
<a class="scroll-on-page-link" href="#skills-scrollto">skills</a>
<a class="scroll-on-page-link" href="#about-me-scrollto">about me</a>
<a class="scroll-on-page-link" href="#contact-scrollto">contact</a>
</div>
</nav>
<!-- WELCOME SPLASH -->
<a id="home-scrollto"></a>
<section class="welcome-section blue" id="welcome-section">
<div class="box" id="title-box">
<h1>nicolas garcia</h1>
<h3>full-stack web developer</h3>
</div>
<div class="box" id="portrait-box">
<img id="portrait-image" alt="portrait" src="assets/images/profile_square.png">
</div>
</section>
<!-- PORTFOLIO SECTION -->
<a id="portfolio-scrollto"></a>
<section class="portfolio-section blue">
<div class="box header-box" id="portfolio-header-box">
<h2>portfolio</h2>
</div>
<div class="card box" id="oto-card">
<div class="card-body" style="background-image:url(/assets/images/cards/OTO-screenshot.png)">
</div>
<div class="card-header">
<h4>
<a href="https://oto-client.herokuapp.com" target='_blank'>OTO</a>
<a class="devicon-github-plain icon-sm" href="https://github.com/soynog/oto-client" target='_blank'></a>
</h4>
</div>
<div class="card-copy">
<p>OTO, the Outdoor Trip Organizer, makes organizing a camping trip fun and easy! Built with Ruby on Rails, Ember.js, and Bourbon. I challenged myself when building OTO by choosing to use the Ember.js front-end framework, and by collaborating with UX designer <a href="http://www.normanwozniak.com/" target="_blank">Norman Wozniak</a> on the project. Using Ember meant learning a new tool on the fly, but it helped me create a well-organized and easily expandable app. Working with a UX designer allowed me to focus on coding rather than design minutiae, but also challenged me to build features as specified, without the flexibility to rework them for easier implementation. I am actively working to improve OTO and add more features.</p>
</div>
</div>
</section>
<!-- SKILLS SECTION -->
<a id="skills-scrollto"></a>
<section class="skills-section blue">
<div class="box header-box" id="skills-header-box">
<h2>skills</h2>
</div>
<div class="box body-box subtle">
<h3>summary</h3>
<p>My strongest languages are Ruby and JavaScript, and I am comfortable with both front and back-end work. I strive to write elegant code--which to me means DRY, modular, and succinct but comprehensible.</p>
</div>
<div class="box subtle list-box">JavaScript</div>
<div class="box subtle list-box">Ruby</div>
<div class="box subtle list-box">HTML/CSS</div>
<div class="box subtle list-box">jQuery/AJAX</div>
<div class="box subtle list-box">Ember.js</div>
<div class="box subtle list-box">Sass/SCSS</div>
<div class="box subtle list-box">Handlebars</div>
<div class="box subtle list-box">Bourbon</div>
<div class="box subtle list-box">Bootstrap</div>
<div class="box subtle list-box">Node.js</div>
<div class="box subtle list-box">Express.js</div>
<div class="box subtle list-box">Ruby on Rails</div>
<div class="box subtle list-box">PostgreSQL</div>
<div class="box subtle list-box">MongoDB</div>
<div class="box subtle list-box">Git/GitHub</div>
</section>
<!-- ABOUT ME SECTION -->
<a id="about-me-scrollto"></a>
<section class="about-me-section blue">
<div class="box header-box" id="about-me-header-box">
<h2>about me</h2>
</div>
<div class="box body-box subtle">
<h3>summary</h3>
<p>I’m a full stack web developer eager to find innovative and efficient tech-based solutions to hard problems in the transportation industry and beyond. After five years working as a transit planner in federal and state government, I’ve turned to coding as an outlet for my creativity and love of solving tough problems.</p>
</div>
<div class="box body-box subtle">
<h3>professional philosophy</h3>
<p>My experience as a planner has taught me to value stakeholder involvement and recognize the iterative nature of project development. With this perspective and a strong fluency in web development technologies and concepts, I’m ready to build effective web solutions that meet client needs--and that also improve dynamically as those needs evolve.</p>
</div>
<div class="box body-box subtle">
<h3>personal interests</h3>
<p>I love creating things, solving puzzles, learning new skills, and Doing It mYself. In my free time I like to design and play board games, cross-country ski, camp, hunt for wild mushrooms, and cook delicious food. I’m currently living in my home state of Massachusetts, but I’ve spent time in DC, Oregon, and New Hampshire/Vermont.</p>
</div>
</section>
<!-- CONTACT SECTION -->
<a id="contact-scrollto"></a>
<section class="contact-section blue">
<div class="box header-box" id="contact-header-box">
<h2>contact</h2>
</div>
<a class="box subtle list-box" href="mailto:nicolas.o.garcia@gmail.com" target="_blank"><span class="h5">email</span></a>
<a class="box subtle list-box" href="https://github.com/soynog" target="_blank"><span class="devicon-github-plain icon-lg"></span></a>
<a class="box subtle list-box" href="https://www.linkedin.com/in/nicolasogarcia" target="_blank"><span class="ion-social-linkedin icon-lg"></span></a>
<a class="box subtle list-box" href="assets/images/nog_resume.pdf" target="_blank"><span class="h5">resume</span></a>
</section>
<!-- FOOTER -->
<footer>© 2016 <a href="http://www.nicolasogarcia.com" target="_blank">nicolas o garcia</a></footer>
</body>
<!-- EXTERNAL STYLE SHEET LINKS -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/master/devicon.min.css">
<link rel="stylesheet" href="
http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</html>