---

layout: default

---

<a id="backtotop_button"></a>

<section class="cover fullscreen image-slider slider-all-controls controls-inside parallax">

<ul class="slides">

<li class="overlay image-bg bg-light">

<div class="background-image-holder">

<img alt="image" class="background-image" src="img/home23.jpg" />

</div>

<div class="container v-align-transform">

<div class="row">

<div class="col-sm-10 col-sm-offset-1 text-center" id="new_text">

<h1 class="mb40 mb-xs-16 large" id="new_text">We are

<br />FOSSASIA</h1>

<h6 class="uppercase mb16" id="new_text">Creating collaborative open-source technologies.</h6>

<p class="lead mb40" id="new_text">

Connecting Open Tech Communities all over Asia with Developers and Creators

<br /> in the FOSSASIA Network.

</p>

<a class="btn btn-lg btn-filled" href="https://fossasia.org">Start Exploring</a>

</div>

</div>

<!--end of row-->

</div>

<!--end of container-->

</li>

<li class="overlay image-bg">

<div class="background-image-holder">

<img alt="image" class="background-image" src="img/home22.jpg" />

</div>

<div class="container v-align-transform">

<div class="row">

<div class="col-sm-offset-1 text-center col-sm-10">

<h1 class="mb40 mb-xs-16 large" id="new_text">Google Code-In with FOSSASIA 2018</h1>

<h6 class="uppercase mb16" id="new_text">Offering a range of exciting tasks involving</h6>

<p class="lead mb40" id="new_text">

Coding, Documentation, Outreach, Design, Quality Control

<br />and much more!

</p>

<a class="btn btn-lg btn-filled" href="https://codein.withgoogle.com/organizations/fossasia/">Participate</a>

</div>

</div>

<!--end of row-->

</div>

<!--end of container-->

</li>

<li class="overlay image-bg">

<div class="background-image-holder">

<img alt="image" class="background-image" src="img/home21.jpg" />

</div>

<div class="container v-align-transform">

<div class="row">

<div class="col-sm-offset-1 text-center col-sm-10">

<h1 class="mb40 mb-xs-16 large" id="new_text">FOSSASIA builds exciting Projects</h1>

<h6 class="uppercase mb16" id="new_text">All open source</h6>

<p class="lead mb40" id="new_text">

Even you can contribute

<br />

</p>

<a class="btn btn-lg btn-filled" href="https://github.com/fossasia">Explore Projects</a>

</div>

</div>

<!--end of row-->

</div>

</li>

<li class="overlay image-bg">

<div class="background-image-holder">

<img alt="image" class="background-image" src="img/home20.jpg" />

</div>

<div class="container v-align-transform">

<div class="row">

<div class="col-sm-offset-1 text-center col-sm-10">

<h1 class="mb40 mb-xs-16 large" id="new_text">Last Year, we broke Google Code-In records</h1>

<h6 class="uppercase mb16" id="new_text">With over 900 students and 90 mentors</h6>

<p class="lead mb40" id="new_text">

FOSSASIA had over 1500 completed tasks... stunning isn't it?!

<br />

</p>

<a class="btn btn-lg btn-filled" href="https://opensource.googleblog.com/2018/01/google-code-in-2017-winners.html">Learn

More</a>

</div>

</div>

<!--end of container-->

</section>

<section class="bg-secondary pb0" id="welcome">

<div class="container">

<div class="row mb80 mb-xs-0">

<div class="col-md-8 col-md-offset-2 text-center">

<h1>What is open source?</h1>

<p>

In general, open source refers to any program whose source code is made available for use or

modification as users or other developers see fit. Open source software is usually developed as a

public collaboration and made freely available.

</p>

</div>

</div>

<!--end of row-->

<div class="row v-align-children">

<div class="col-md-7 col-sm-6 text-center mb-xs-24">

<img class="cast-shadow" alt="Screenshot" src="https://www.ost.agency/wp-content/uploads/2017/12/lg.png" />

</div>

<div class="col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1">

<h3>What is FOSSASIA?</h3>

<p>

FOSSASIA develops software and hardware and cooperates with Open Tech projects. Please check out

our Github and FOSSASIA Labs.

</p>

<a class="btn btn-lg" href="https://fossasia.org/" target="_blank">Explore Fossasia 🌏</a>

</div>

</div>

</div>

<!--end of container-->

</section>

<section id="connect">

<div class="container" id="social_box">

<div class="row mb80 mb-xs-0">

<div class="col-md-8 col-md-offset-2 text-center">

<h1>Connect with Fossasia on Social Media</h1>

<p> Be sure to follow us on social media! </p>

<p class="large">

<a href="https://www.facebook.com/fossasia/" class="ti-facebook lgi" target="_blank"></a>

<a href="https://twitter.com/fossasia" class="ti-twitter lgi" target="_blank"></a>

<a href="https://www.instagram.com/fossasia/" target="_blank" class="ti-instagram lgi"></a>

<a href="https://www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" target="_blank" class="ti-youtube lgi"></a>

<a href="https://github.com/fossasia" target="_blank" class="ti-github lgi"></a>

<a href="https://flickr.com/photos/fossasia" target="_blank" class="ti-flickr lgi"></a>

<a href="https://www.linkedin.com/groups/FOSSASIA-3762811" target="_blank" class="ti-linkedin lgi"></a>

<a href="https://plus.google.com/108920596016838318216" target="_blank" class="ti-google lgi"></a>

<a href="https://codein.withgoogle.com/organizations/fossasia/" target="_blank" class="ti-settings lgi"></a>

</p>

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffossasia%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId"

width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media">

</iframe>

<a class="twitter-timeline" data-width="340" data-height="500" data-theme="dark" data-link-color="#E81C4F" href="https://twitter.com/fossasia?ref_src=twsrc%5Etfw">Tweets by fossasia</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

</div>

</div>

</section>

<hr>

<section>

<div class="container" id="videos">

<!--end of row-->

<div class="row v-align-children">

<div class="col-md-7 col-sm-6 text-center mb-xs-24">

<video controls="" preload="metadata">

<source src="video/fossasia.mp4" type="video/mp4">

</video>

</div>

<div class="col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1">

<h3>Fossasia Attracting Students</h3>

<p>

The video is made is by one of our students during the competition itself!

</p>

<a class="btn btn-lg" href="https://www.youtube.com/channel/UCQprMsG-raCIMlBudm20iLQ" target="_blank">Our

Youtube

Channel</a>

</div>

</div>

<!--end of row-->

</div>

<!--end of container-->

</section>

<section>

<div class="container" id="students">

<div class="row mb64 mb-xs-24" style="margin-top: 50px">

<div class="col-sm-12 col-md-10 col-md-offset-1 text-center">

<h2> Students </h2>

</div>

<!--end of row-->

<div class="row">

{% for student in site.data.students limit:30 %}

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 text-center">

<div class="card single-mentor">

{% if student.image %}

<img src="img/students/{{student.image}}" alt="{{ student.name }}">

{% else %}

<img src="img/students/member.png" alt="{{ student.name }}">

{% endif %}

<br>

<p class="person-name">{{ student.name }}</p><br>

<ul class="list-inline social-list social-overlay-list">

{% if student.github %}

<a href="https://github.com/{{student.github}}" class="icon-a" target="_blank">

<i class="ti-github"></i>

</a>

{% endif %}

{% if student.twitter %}

<a href="https://twitter.com/{{ student.twitter }}" class="icon-a" target="_blank">

<i class="ti-twitter-alt"></i>

</a>

{% endif %}

{% if student.blog %}

<a href="https://{{ student.blog }}" class="icon-a" target="_blank">

<i class="ti-rss"></i>

</a>

{% endif %}

{% if student.facebook %}

<a href="https://facebook.com/{{ student.facebook }}" class="icon-a" target="_blank">

<i class="ti-facebook"></i>

</a>

{% endif %}

</ul>

</div>

</div>

{% endfor %}

<!--end of row-->

</div>

<!--end of container-->

</li>

</ul>

</section>

<!--Videos Section-->

<section class="bg-secondary pb0">

<div class="container">

<div class="row mb64 mb-xs-24">

<div class="col-sm-12 col-md-10 col-md-offset-1 text-center">

<h2> Videos </h2>

</div>

</div>

<!--end of row-->

<div class="row masonry masonryFlyIn">

<div class="col-md-12 col-sm-12 masonry-item mb30">

<div class="col-sm-12 text-center spread-children-large">

{% for video in site.data.videos %}

<a href="{{ video.link }}">

<div class="card single-mentor" id="video">

{% if video.image %}

<img src="img/videos/{{ video.image }}" style="width:150px; height:150px;" />

{% endif %}

<br>

<h4 class="person-name">

<b>{{ video.name }}</b>

</h4>

<br>

<h5 class="person-name">{{ video.user }}</h6>

</div>

</a>

{% endfor %}

</div>

</div>

<!--end of row-->

</div>

<!--end of container-->

</li>

</ul>

</section>

<!--/Videos section-->

<!-- Proejct section-->

<section>

<div class="container">

<div class="row mb64 mb-xs-24">

<div class="col-sm-12 col-md-10 col-md-offset-1 text-center">

<h3> FOSSASIA | Projects </h3>

</div>

</div>

<div class="row v-align-children">

<div class="col-md-7 col-sm-6 text-center mb-xs-24">

<img class="cast-shadow" alt="Screenshot" src="img/susi.jpg" />

</div>

<div class="col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1">

<h3>SUSI.AI</h3>

<p>

Susi is an artificial intelligence system, combining pattern matching, internet data, data flow,

and inference engine principles. Through some abilities to reflect, it can remember the user input

to produce deductions and personalized feedback. Its purpose is to explore the abilities of an

artificial companion and to answer the remaining unanswered questions. The SUSI.AI web chat is a

front-end developed for web access of SUSI.

</p>

<a class="btn-filled btn" href="https://github.com/fossasia/chat.susi.ai">Contribute</a>

<a class="btn-filled btn" href="https://chat.susi.ai/">Try</a>

</div>

</div>

<!--end of row-->

</div>

<!--end of container-->

</section>

<section>

<div class="container" id="mentors">

<div class="row mb64 mb-xs-24">

<div class="col-sm-12 col-md-10 col-md-offset-1 text-center">

<h3>Our Mentors</h3>

</div>

</div>

<!--end of row-->

<div class="row">

{% for mentor in site.data.mentors limit:30 %}

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 text-center">

<div class="card single-mentor">

{% if mentor.image %}

<img class="mentor-img" src="img/mentors/{{mentor.image}}" alt="{{ mentor.name }}">

{% else %}

<img src="img/mentors/member.png" alt="{{ mentor.name }}">

{% endif %}

<p class="person-name">{{ mentor.name }}</p>

<ul class="list-inline social-list social-overlay-list">

{% if mentor.github %}

<a href="https://github.com/{{mentor.github}}" class="icon-a" target="_blank" rel="noopener">

<i class="ti-github"></i>

</a>

{% endif %}

{% if mentor.twitter %}

<a href="https://twitter.com/{{ mentor.twitter }}" class="icon-a" target="_blank">

<i class="ti-twitter-alt"></i>

</a>

{% endif %}

{% if mentor.blog %}

<a href="https://{{ mentor.blog }}" class="icon-a" target="_blank">

<i class="ti-rss"></i>

</a>

{% endif %}

{% if mentor.facebook %}

<a href="https://facebook.com/{{ mentor.facebook }}" class="icon-a" target="_blank">

<i class="ti-facebook"></i>

</a>

{% endif %}

</ul>

</div>

</div>

{% endfor %}

</div>

<!--end of row-->

</div>

<!--end of container-->

</section>

<!-- Map -->

<section>

<div class="container">

<div class="row mb64 mb-xs-24">

<div class="col-sm-12 col-md-10 col-md-offset-1 text-center">

<h3>Map of our students and mentors</h3>

</div>

</div>

<div id="map" align="center">

</div>

</div>

</section>

<script src="js/geolocation.js"></script>

<!-- Contributors -->

<section class="bg-secondary">

<div class="container">

<div class="row mb-xs-24 mb16">

<div class="col-sm-12 col-md-10 col-md-offset-1 text-center">

<h3>Contributors</h3>

<a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org" target="_blank">Repository</a>

<a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org/pulse" target="_blank">View

Activity</a>

<a class="btn btn-lg" href="https://github.com/fossasia/gci18.fossasia.org/graphs/contributors" target="_blank">Details

of Our Contributors</a>

<a class="btn btn-lg" href="https://blog.fossasia.org/open-source-developer-guide-and-best-practices-at-fossasia/"

target="_blank">How to contribute?</a>

</div>

</div>

<!--end of row-->

<div class="row equal-row" id="contributors">

</div>

<!--end of row-->

</div>

<!--end of container-->

</section>

<section>

<div id="app" class="thank_you"></div>

</section>