allwinwilliams.github.io/index.html at main · allwinwilliams/allwinwilliams.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
---
layout: home
title: "Allwin Williams - Interaction Designer"
---
<header class="header-home">
  <nav class="navbar home-nav">
    <div class="container">
      <div class="row w-100 mx-auto">
        <div class="d-lg-flex align-items-center col-12 col-md-12 col-lg-4 text-center text-lg-start">
          <a class="navbar-brand" href="/">
            <img class="d-inline h-100" src="{{ '/assets/icon.png' | relative_url }}" />
              <h5 class="d-inline color-black">Allwin Williams</h5>
          </a>
        </div>
        <div class="col-12 col-md-12 col-lg-8 mt-5 mt-lg-0 py-2">
          <div class="navbar-links d-flex justify-content-center justify-content-lg-end">
            {% assign links = site.data.navigation %}
              {% for link in links %}
                {% assign active = nil %}
                {% if page.url == link.url or page.url contains link.url and link.url != "/"%}
                  {% assign active = 'active' %}
                {% endif %}
                <a class="navbar-link {{ active }} mx-1 mx-sm-3 px-2 px-sm-4" href="{{ link.url | relative_url }}">
                  {{ link.title }}
                </a>
              {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div id="landing-header" class="d-flex pt-4 mt-lg-5 align-items-lg-center">
    <div class="container mb-0 mb-md-2 mt-2 mt-lg-5 mt-lg-0 mx-auto px-3 px-md-4">
      <div class="col-12 col-md-8 col-lg-6">
        <h4>
          Hello there,
        </h4>
        <h1>
          I'm Allwin Williams
        </h1>
        <div class="text-content">
          <p>
            I am an interaction designer exploring ways to create magical experiences and express emotions through new media of multi-sensory interfaces and interactions
          </p>
          <br />
          <p>
            My interests lie at the intersection of experiences and interactions, both digital and tangible. My curiosity about human behavior towards others and technology, and semiotics of communication drive my work.
            I like to explore the internet<emoji class="emoji d-inline">💻</emoji>, electronics<emoji class="emoji d-inline">🕹</emoji>, music<emoji class="emoji d-inline">🎹</emoji>, and the restaurant menu<emoji class="emoji d-inline">🥙</emoji>.
          </p>
        </div>
      </div>
    </div>
  </div>
</header>


<svg id="home-header-bottom" width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M500 80V0C500 0 438.24 60.9836 250 60.9836C61.7601 60.9836 0 0 0 0V80H500Z" fill="#FFFFFF"/>
</svg>


<section id="about-me" class="bg-white mt-5">
  <div class="container">
    <div class="row">
      <div class="col-12 px-4 px-md-0 col-md-4">
        <div class="image-container px-0 px-md-0 px-lg-5">
          <img class="w-100 br-24 shadow-large" src="{{ "/assets/images/allwin-photo.png" | relative_url }}" />
        </div>
      </div>
      <div class="col-12 col-md-8 p-2">
        <div class="br-24 noshadow-large h-100 pt-0 px-2 px-md-5 d-flex align-items-center">
          <div class="px-4">
            <h2 class="mb-4 mt-4 mt-md-0">A brief history of me</h2>
            <p>
              I was curious about computers from my school days and the internet felt like a magic.
              A fasination about how technology works led me towards an undergrad in Information Technology from Coimbatore Institute of Technology, Coimbatore, Tamil Nadu.
              Post which I got inclind towards impact and experiences of the digital solutions and pursued graduate degree in Interaction Design from National Institute of Design, Bengaluru, Karnataka.
              Currently as a product designer, I am experimenting, building and designing experiences for a digital-first credit card to helps starts-ups and digital businesses manage their spends with a new initiatives team at Razorpay, India’s highest valued fintech start-up.
              <br /><br />
              I like watching crime thrillers while having a plate of biryani along with some flavoured soda, especially during rainy weather.
              I also like listening to AR Rahman, and playing the piano.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="recent-projects" class="bg-white">
  <h1 class="text-center my-5">Look at my works</h1>
  <div class="container">
    <div class="row">
      {% assign projects = site.projects | sort:"order" %}
      {% for project in projects limit: 6 %}
        {% assign project_tags = "" %}
        {% for tag in project.tags %}
          {% assign current_tag_slug = tag | slugify %}
          {% assign project_tags = project_tags | append: current_tag_slug | append: " "%}
        {% endfor %}
          <div class="col-12 col-md-6 col-lg-4 project {{ project_tags }}">
            <a href="{{ project.url  | relative_url}}">
              <div class="project-container br-24 shadow-large h-100">
                <img class="w-100 br-24" src="/assets/{{project.url}}/assets/images/card.png" />
                <div class="project-tags">
                  {% for tag in project.tags %}
                    <!-- <a class="project-tag shadow-small" href="#{{ tag | slugify }}">{{tag}}</a> -->
                    <p class="d-inline project-tag shadow-small">{{tag}}</p>
                  {% endfor %}
                </div>
                <div class="project-title" >
                  <h5>{{project.title}}</h5>
                  <p>{{project.description}}</p>
                </div>
            </div>
            </a>
          </div>
        {% endfor %}
    </div>
  </div>
  <div class="text-center">
    <h5>
      <a href="{{ "/projects" |  relative_url }}" class="btn all-projects-button">
        See all projects
      </a>
    </h5>
  </div>
</section>
<section id="music" class="bg-white mt-4">
  <div class="container">
    <div class="w-100">
      <h1 class="text-center mt-5 mb-2">Listen to my music</h1>
      <p class="text-center">Some of the music I made over the past 5 years</p>
      <br/>
      <h4>Mystic Forest</h4>
      <p>It was raining that day. Surrounded by trees, I am standing in a mystical forest. Created in a south-indian raga.</p>
      <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/602201016&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/allwinwilliams" title="Allwin Williams" target="_blank" style="color: #cccccc; text-decoration: none;">Allwin Williams</a> · <a href="https://soundcloud.com/allwinwilliams/carnatic" title="Carnatic" target="_blank" style="color: #cccccc; text-decoration: none;">Carnatic</a></div>
      <br/>
      <h4>The 3 part story</h4>
      <p>I have seen a lot of 3-part hero story. I wanted to somehow create a piece to communicate this 3 part story in an abstract way.</p>
      <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/838426723&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/allwinwilliams" title="Allwin Williams" target="_blank" style="color: #cccccc; text-decoration: none;">Allwin Williams</a> · <a href="https://soundcloud.com/allwinwilliams/mine" title="Mine" target="_blank" style="color: #cccccc; text-decoration: none;">Mine</a></div>
      <br/>
      <br/>
      <h4>Some more...</h4>
      <p>I have stories for each of them. We can talk about it over a chat.</p>
      <iframe width="100%" height="450" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/747682059&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/allwinwilliams" title="Allwin Williams" target="_blank" style="color: #cccccc; text-decoration: none;">Allwin Williams</a> · <a href="https://soundcloud.com/allwinwilliams/sets/musicals-by-allwin" title="Musicals by Allwin" target="_blank" style="color: #cccccc; text-decoration: none;">Musicals by Allwin</a></div>
    </div>
  </div>
</section>