ItyRamirez.github.io/index.html at master · ItyRamirez/ItyRamirez.github.io · GitHub

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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Title: Enter Name -->
  <title>Andrea Ramirez</title>

  <!-- CSS Imports -->
  <link href="css/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="css/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="css/css/animate.css" rel="stylesheet" type="text/css">
  <link href="css/css/component.css" rel="stylesheet" type="text/css">
  <link href="css/css/simpletextrotator.css" rel="stylesheet" type="text/css">
  <link href="css/css/theme.css" rel="stylesheet" type="text/css">
  <link href="css/css/main.css" rel="stylesheet" type="text/css">
  <script src="js/modernizr.custom.js"></script>
</head>
<body>

  <!-- Header. Profile picture, name, tagline, resume download, and navbar. -->
  <header id="intro">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavigation">
            <i class="fa fa-bars"></i>
          </button>
          <img src="lib/img/Profile.jpg" class="navbar-logo pull-left" alt="" />
          <a href="#intro" class="navbar-brand animated flipInX">{Insert Name Here}</a>
        </div>

        <div class="collapse navbar-collapse" id="myNavigation">
          <ul class="nav navbar-nav navbar-right animated flipInX">
            <li><a href="#about" class="scroll">About Me</a></li>
            <li><a href="#expertise" class="scroll">Expertise</a></li>
            <li><a href="#projects" class="scroll">Side Projects</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="jumbotron">
      <img src="lib/img/Profile.jpg" class="img-responsive" alt="" />
      <h2 class="jumbo-name wow bounceInUp">Andrea Ramirez</h2>
      <p class = "tagline"><span class="rotate"> Web developer, Fashion Designer, hand model, swimsuit model </span></p>
      <a class="resume" href="">Resume</a>
    </div>
  </header>

  <!-- About. Short description of yourself, profile pic, experience -->
  <div class="section" id="about">
    <div class="container">
      <div class="row">
        <div class="col-sm-3 wow slideInLeft">
          <img src="lib/img/Profile.jpg" class="image-bordered img-responsive" alt="" />
        </div>

        <div class="col-sm-9 wow slideInRight">
          <h3 class="name">Andrea Ramirez</h3>
          <p class="description">{At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.}</p>
        </div>
      </div>
    </div>
  </div>


  <!-- Inbetween: Using quotes to de-clutter the webpage -->
  <div class="section quote-section">
    <div class="container">
      <div class="row wow fadeInUp">
        <div class="col-sm-6 col-sm-offset-3">
          <blockquote class="blockquote-reverse">
            <p><i class="fa fa-quote-left"></i> We keep moving forward, opening new doors, and doing new things, because we're curious and curiosity keeps leading us down new paths.</p>
            <p class="quoter"> - Walt Disney</p>
          </blockquote>
        </div>
      </div>
    </div>
  </div>


  <!-- Expertise: Displays work experience -->
  <div class="section" id="expertise">
    <div class="container">
      <div class="row">
        <div class="col-md-12 wow fadeInDown">
          <h2 class="title">Expertise and Experience</h2>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in turpis quam. Nulla quis eleifend lectus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, nihil fugiat id animi, corporis placeat perspiciatis at voluptatem quas culpa, quisquam labore atque? Aut alias, laboriosam blanditiis veritatis aliquid labore?</p>
        </div>
      </div>

      <div class="experiences">
        <div class="row">
          <div class="col-sm-6">
            <div class="experience">
              <div class="col-sm-4">
                <h2 class = "wow lightSpeedIn">Apple</h2>
              </div>
              <div class="col-sm-8">
                <p>Created the macbook and worked with iOS 9 team</p>
                <p>Wrote the swift language book</p>
              </div>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="experience">
              <div class="col-sm-4">
                <h2 class = "wow lightSpeedIn">Facebook</h2>
              </div>
              <div class="col-sm-8">
                <p>Contributed to the react framework</p>
                <p>Worked on the react native team</p>
                <p>Implemented feature x that made users stay online x times longer</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <div class="experience">
            <div class="col-sm-4">
              <h2 class = "wow lightSpeedIn">Heroku</h2>
            </div>
            <div class="col-sm-8">
              <p>Raised cloud computing efficiency by 2%</p>
              <p>Allowed for servers to power down when fewer endpoints are requested.</p>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="experience">
            <div class="col-sm-4">
              <h2 class = "wow lightSpeedIn">Salesforce</h2>
            </div>
            <div class="col-sm-8">
              <p>Worked with project team to implement IoT cloud server.</p>
              <p>Increased user retention by 10% by implementing feature x.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Inbetween: Using quotes to de-clutter the webpage -->
  <div class="section quote-section">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
          <blockquote class="blockquote-reverse">
            <p><i class="fa fa-quote-left"></i> Disneyland will never be completed. It will continue to grow as long as there is imagination left in the world.</p>
            <p class="quoter"> - Walt Disney</p>
          </blockquote>
        </div>
      </div>
    </div>
  </div>


  <!-- Projects: Using Tympanus grid package to display side-projects -->
  <div class="section" id="projects">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2 class="title">Side Projects</h2>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in turpis quam. Nulla quis eleifend lectus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores laboriosam porro itaque dolores libero a mollitia voluptas facere pariatur quia in, rem atque vitae nesciunt cupiditate reiciendis neque, quisquam dolorum!</p>
        </div>

        <div class="col-md-12">
          <ul id="og-grid" class="og-grid">
            <li>
              <a href="http://appdeveloperclub.com" data-largesrc="lib/img/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
                <img src="lib/img/thumbs/1.jpg" alt="img01"/>
              </a>
            </li>
            <li>
              <a href="http://appdeveloperclub.com" data-largesrc="lib/img/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
                <img src="lib/img/thumbs/2.jpg" alt="img02"/>
              </a>
            </li>
            <li>
              <a href="http://appdeveloperclub.com" data-largesrc="lib/img/3.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
                <img src="lib/img/thumbs/3.jpg" alt="img02"/>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>


  <!-- Footer: Social links -->
  <div class="section" id="footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <ul class="brands">
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
          </ul>

          <p>© ItyRamirez 2014 All right reserved.</p>
        </div>
      </div>
    </div>
  </div>


  <!-- Javascript Imports -->
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/modernizr.custom.js"></script>
  <script src="js/grid.js"></script>
  <script src="js/wow.min.js"></script>
  <script src="js/jquery.simple-text-rotator.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>