vkoves.github.io/index.html at master · vkoves/vkoves.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
---
layout: default
title: Viktor K&ouml;ves - Front-End Engineer & Web Accessibility Specialist
pageClass: '-no-padding'
stylesheets:
 - index.css
---

<section class="first-sect">
  <div class="main-cont">
    <div class="img-cont">
      <div id="img-tri" class="shape triangle -svg -red">
        {% include svgs/triangle.svg %}
      </div>
      <div id="img-pent" class="shape pentagon -svg -orange">
        {% include svgs/pentagon.svg %}
      </div>

      <!-- Load 400px image unless we're on a high density (2x) display -->
      <img
        srcset="images/headshot-bike-400p.webp 1x, images/headshot-bike.webp 2x"
        alt="Photo of Viktor Köves on his White Gazelle ebike, riding down Chicago's Lakefront trail
          past a tennis court, wearing shorts, a t-shirt and sunglasses">
    </div>

    <div class="text-cont">
      <h1 class="-large brand-color">Viktor Köves</h1>

      <p>
        I’m a front-end engineer with years of experience making websites that are beautiful and accessible. Whether you are building a new website from scratch, want to improve your styling, or need an accessibility overhaul, I can help.
      </p>

      <p>
        Need help leveling up your web presence or accessibility?
        Fill out my
        <a href="https://forms.gle/5NFDhz8VVn2TsXQM9" class="-underline">contact form</a>!
      </p>
    </div>
  </div>

  <div id="sect-sq-1" class="shape square -blue -desktop"></div>
  <div id="sect-sq-2" class="shape square -orange -desktop"></div>
  <div id="sect-circ-1" class="shape circle -blue"></div>
  <div id="sect-circ-2" class="shape circle -red -large -desktop"></div>
</section>

<section class="hero -a11y-sect">
  <div class="sect-inner">
    <div class="hero-text">
      <h2>Accessible by Default</h2>
      <p>
        Accessibility is fundamental to all of my work, and I use a variety of tools to ensure the sites I build work well for everyone.
      </p>
    </div>

    {% include svgs/a11y-icon.svg %}
  </div>
</section>

<section class="hero -moon-sect">
  <div class="sect-inner">
    {% include svgs/moon-and-stars.svg %}

    <div class="hero-text">
      <h2>Out Of This World Websites</h2>
      <p>
        I build websites that are lively, animated, and use the latest web technologies, letting your designs really shine.
      </p>
    </div>

  </div>
</section>

<section class="hero -fast-sect">
  <div class="sect-inner">
    <div class="hero-text">
      <h2>Blazing Fast Performance</h2>
      <p>
        I leverage the latest web technologies and front-end techniques to create websites that load in a snap and quickly respond to input.
      </p>
    </div>

    {% include svgs/bullet-train.svg %}
  </div>
</section>

<section class="hero -hire-sect shapes-hero">
  <div class="sect-inner content-limiter -thin">
    <div>
      <h2>Interested?</h2>

      <a href="/hire-me" class="red-button">
        Hire Me
      </a>

      <div class="shape square -white"></div>
      <div class="shape triangle -svg -white">
        {% include svgs/triangle.svg %}
      </div>
      <div class="shape pentagon -svg -white">
        {% include svgs/pentagon.svg %}
      </div>
      <div class="shape circle -white"></div>
      <div class="shape circle -large -white"></div>
    </div>
  </div>
</section>