at-the-wall

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #golang #linux #macos #nodejs #awesome #cli #kubernetes #awesome-list #ios

(★ 16)

A Game of Thrones scene coded in pure SCSS and HTML

at-the-wall Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Screenshot](https://raw.githubusercontent.com/scriptex/at-the-wall/master/at-the-wall.png)

[![Travis CI](https://travis-ci.com/scriptex/at-the-wall.svg?branch=master)](https://travis-ci.com/scriptex/at-the-wall)
[![Github Build](https://github.com/scriptex/at-the-wall/workflows/Build/badge.svg)](https://github.com/scriptex/at-the-wall/actions?query=workflow%3ABuild)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/at-the-wall/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/at-the-wall&utm_campaign=Badge_Grade)
[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-at-the-wall-master)
[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/at-the-wall/badge)](https://www.codefactor.io/repository/github/scriptex/at-the-wall)
[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/at-the-wall/README.md?pixel)](https://github.com/scriptex/at-the-wall/)

# At the Wall

A scene from Game of Thrones coded in CSS and HTML.
There are no images used whatsoever - only code.

This is the combined work of several frontend developers, including me.
The purpose was to learn new things and work in a larger team.
As a result we achieved a complex and animations-heavy interactive drawing using SCSS and HTML only.

The team was split into smaller teams (two devs) and each team worked on a part of the drawing.
For example: Jon Snow, The White Walker, the sky, the snowflakes, the wall, the ground and the trees.
I coded the White Walker and supervised the team, provided solutions or hints where needed and when everyone was done I merged their work in a single repository.

The drawing is completely fluid and adjusts itself to any viewport.

This repository contains a PWA version of the drawing, which can be installed on a PWA supported device and/or viewed offline.

## Visitor stats

![GitHub stars](https://img.shields.io/github/stars/scriptex/at-the-wall?style=social)
![GitHub forks](https://img.shields.io/github/forks/scriptex/at-the-wall?style=social)
![GitHub watchers](https://img.shields.io/github/watchers/scriptex/at-the-wall?style=social)
![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)

## Code stats

![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/at-the-wall)
![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/at-the-wall?style=plastic)
![GitHub language count](https://img.shields.io/github/languages/count/scriptex/at-the-wall?style=plastic)
![GitHub top language](https://img.shields.io/github/languages/top/scriptex/at-the-wall?style=plastic)
![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/at-the-wall?style=plastic)

## [DEMO](https://codepen.io/scriptex/full/eLWdKN/) and [PWA](https://at-the-wall.atanas.info/)

The demo contains a minified version of the HTML and the CSS output.

The PWA can be installed on any device which supports service workers and can be viewed offline.

## Members (with links to their LinkedIn profiles):

### Team A

-   [Martin Apostolov](https://www.linkedin.com/in/martoapostolov/)

### Team B

-   [Georgi Krastev](https://www.linkedin.com/in/georgi-krastev-a798abba)
-   [Veselin Stoyanov](https://www.linkedin.com/in/veselin-stoyanov-20382b47)

### Team C

-   [Atanas Atanasov](https://www.linkedin.com/in/scriptex)
-   [Dimitar Germanov](https://www.linkedin.com/in/dimitar-germanov-43428312a)

### Team D

-   [Emil Georgiev](https://www.linkedin.com/in/emil-georgiev-23a5989b/)
-   [Mario Todorov](https://www.linkedin.com/in/mario-todorov-9297a045/)

### Team E

-   [Ivaylo Kolarov](https://www.linkedin.com/in/ivaylo-kolarov-70668763/)
-   [Elitsa Dimitrova](https://www.linkedin.com/in/elitsa-dimitrova-1b0429170/)

### PM

-   [Zoran Draganov](https://www.linkedin.com/in/zoran-a-k-a-zack-draganov-a7a156126/)

### QA

-   [Delyana Maneva](https://www.linkedin.com/in/delyana-maneva-b2069254/)

### Illustrator

-   [Nikolay Stanev](https://www.linkedin.com/in/nikolay-stanev-53ab04b8/)

## LICENSE

MIT

---

<div align="center">
    Connect with me:
</div>

<br />

---

<div align="center">
Support and sponsor my work:
<br />
<br />
<a href="https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome" title="Tweet">
	<img src="https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter&color=38A1F3" />
</a>
<a href="https://paypal.me/scriptex" title="Donate on Paypal">
	<img src="https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal&color=222d65" />
</a>
<a href="https://revolut.me/scriptex" title="Donate on Revolut">
	<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json" />
</a>
<a href="https://patreon.com/atanas" title="Become a Patron">
	<img src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413" />
</a>
<a href="https://ko-fi.com/scriptex" title="Buy Me A Coffee">
	<img src="https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi" />
</a>
<a href="https://liberapay.com/scriptex/donate" title="Donate on Liberapay">
	<img src="https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay&logo=liberapay" />
</a>

at-the-wall

at-the-wall Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

at-the-wall

at-the-wall Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README