itflows/index.ejs at master · yourivdlans/itflows · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png?v=vMOnge5Gld">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png?v=vMOnge5Gld">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png?v=vMOnge5Gld">
  <link rel="manifest" href="site.webmanifest?v=vMOnge5Gld">
  <link rel="mask-icon" href="safari-pinned-tab.svg?v=vMOnge5Gld" color="#5bbad5">
  <link rel="shortcut icon" href="favicon.ico?v=vMOnge5Gld">
  <meta name="msapplication-TileColor" content="#2b5797">
  <meta name="msapplication-config" content="browserconfig.xml?v=vMOnge5Gld">
  <meta name="theme-color" content="#ffffff">
</head>
<body>
  <nav class="navbar navbar-default fixed-top navbar-expand-lg" role="navigation-demo">
    <div class="container">
      <div class="d-inline-flex align-items-center navbar-brand" href="/">
        <img src="drops.png" alt="drops" style="width: 20px;">
        <div class="ml-1">Itflows</div>
      </div>
      <ul class="mb-0 pl-0">
        <a href="#contact" class="btn btn-itflows btn-raised btn-fab btn-round" data-toggle="dropdown">
          <i class="material-icons">email</i>
          <div class="ripple-container"></div></a>
      </ul>
    </div>
  </nav>
  <div class="page-header header-small">
    <div class="container">
      <div class="row">
        <div class="col-md-8 ml-auto mr-auto text-center">
          <h1 class="title">Hi! My name is Youri</h1>
          <h4>I'm a passionate freelance webdeveloper. The code I write is solid using the latest stable technologies.</h4>
        </div>
      </div>
    </div>
  </div>
  <div class="main main-raised">
    <div class="container">
      <div class="skillset">
        <div class="row">
          <div class="col-md-8 ml-auto mr-auto text-center">
            <h2 class="title">But, what do you do?</h2>
            <h5 class="description">With more than 10 years of experience I've touched all layers of the stack. I'll give you a small example of my skillset:</h5>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="info info-horizontal pt-0 pt-sm-5">
              <div class="icon icon-itflows">
                <i class="material-icons">gesture</i>
              </div>
              <div class="description">
                <h4 class="info-title">Front-end</h4>
                <p class="h-md-200px h-lg-150px">I'm not shy to get my hands dirty on CSS, HTML or JS. Having built themes in AngularJS I now focus more on React.</p>
                <dl>
                  <dt>Tools</dt>
                  <dd>React</dd>
                  <dd>AngularJS</dd>
                  <dd>Material Design</dd>
                  <dd>Bootstrap</dd>
                  <dd>Sass</dd>
                  <dd>ES6</dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="info info-horizontal pt-0 pt-sm-5">
              <div class="icon icon-itflows">
                <i class="material-icons">build</i>
              </div>
              <div class="description">
                <h4 class="info-title">Back-end</h4>
                <p class="h-md-200px h-lg-150px">My passion lies with using Ruby. You'll find me working on the back-end mostly.</p>
                <dl>
                  <dt>Tools / Methodologies</dt>
                  <dd>Ruby on Rails</dd>
                  <dd>API's</dd>
                  <dd>Minitest / Rspec</dd>
                  <dd>Automated testing</dd>
                  <dd>Don't Repeat Yourself</dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="info info-horizontal pt-0 pt-sm-5">
              <div class="icon icon-itflows">
                <i class="material-icons">storage</i>
              </div>
              <div class="description">
                <h4 class="info-title">Dev-ops</h4>
                <p class="h-md-200px h-lg-150px">Coming from an age where we didn't have automated deployments I've gained diverse expierence with deployment options. Nowadays I've traded the manual for the automated.</p>
                <dl>
                  <dt>Tools</dt>
                  <dd>Ubuntu</dd>
                  <dd>Chef</dd>
                  <dd>Dokku</dd>
                  <dd>Docker</dd>
                  <dd>Nginx</dd>
                  <dd>PostgreSQL</dd>
                  <dd>MySQL</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="proof">
        <div class="row">
          <div class="col-md-8 ml-auto mr-auto text-center">
            <h2 class="title">Not bad, can you show me something?</h2>
            <h5 class="description">Most of the work I do is behind closed doors but here is some public work.</h5>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="card card-background" style="background-image: url('github-profile.jpg')">
              <div class="card-body">
                <h6 class="card-category text-info">Open source</h6>
                <a target="_blank" href="https://github.com/yourivdlans">
                  <h3 class="card-title">Github</h3>
                </a>
                <p class="card-description">
                  View my Github profile to get an idea of what I'm working on in the open source community.
                </p>
                <a target="_blank" href="https://github.com/yourivdlans" class="btn btn-success btn-round">
                  View profile
                </a>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card card-background" style="background-image: url('materialism.jpg')">
              <div class="card-body">
                <h6 class="card-category text-info">Theme creator alter-ego</h6>
                <a target="_blank" href="https://themeforest.net/user/themeguys/portfolio">
                  <h3 class="card-title">ThemeGuys</h3>
                </a>
                <p class="card-description">
                  Together with a friend and colleague we started the ThemeGuys alter-ego to develop themes.
                </p>
                <a target="_blank" href="https://themeforest.net/user/themeguys/portfolio" class="btn btn-success btn-round">
                  View portfolio
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="contact" class="contact pb-5">
        <div class="row">
          <div class="col-md-8 ml-auto mr-auto text-center">
            <h2 class="title">And how can I contact you?</h2>
            <h5 class="description">Easy! Just pick one of the options below.</h5>
          </div>
        </div>
        <div class="row">
          <div class="col text-center">
            <a href="mailto:youri@itflows.nl" class="btn btn-social btn-fill btn-twitter">
              <i class="material-icons">email</i> youri@itflows.nl
            </a>
            <a target="_blank" href="https://www.linkedin.com/in/yourivdlans/" class="btn btn-social btn-fill btn-linkedin">
              <i class="fa fa-linkedin-square"></i> Connect with Linkedin
            </a>
            <div class="mt-3">
              <p class="description">Or just say hi when you see me walking down the street.</p>
              <img src="me.png" alt="me" style="width:10rem" class="img-fluid rounded-circle" />
              <p class="description pt-3 mb-0">KvK: 59593741<br/>BTW: NL001566637B66</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer ">
    <div class="container">
      <div class="copyright pull-right">
        ©
        <script>
          document.write(new Date().getFullYear())
        </script>, Itflows
      </div>
    </div>
  </footer>
</body>
</html>