Skip to content

Commit

Permalink
More refactoring from HTML to CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@liweiyap
liweiyap committed Oct 28, 2021
1 parent 62b6810 commit 37629c3
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 10 deletions.
16 changes: 16 additions & 0 deletions assets/css/liweiyap_ghpages.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,22 @@ span {
margin-right: auto;
}

.container-centered-with-limited-clickable-span {
/* https://stackoverflow.com/a/41107163/12367873 */
width: 100%;
text-align: center;
}

.container-centered-with-limited-clickable-span img {
display: initial;
}

.google-playstore-badge {
height: 70px;
display: initial;
margin-bottom: 0.6em;
}

/* container for typewriter */
.container-typewriter {
max-width: 48rem;
Expand Down
4 changes: 2 additions & 2 deletions assets/js/typewriter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ typewriter
.typeString('<br/>')
.typeString('<span style="color:greenyellow;font-family:Inconsolata;font-size:90%;">LeetCode_Solutions .. | 106</span>')
.typeString('<br/>')
.typeString('<span style="color:greenyellow;font-family:Inconsolata;font-size:90%;">liweiyap.github.io .. | 77</span>')
.typeString('<span style="color:greenyellow;font-family:Inconsolata;font-size:90%;">liweiyap.github.io .. | 80</span>')
.typeString('<br/>')
.typeString('<span style="color:greenyellow;font-family:Inconsolata;font-size:90%;">narradir-android .... | 66</span>')
.typeString('<br/>')
Expand Down Expand Up @@ -47,6 +47,6 @@ typewriter
.typeString('<br/><br/>')
.typeString('<span style="color:greenyellow;font-family:Inconsolata;font-size:90%;">Total repositories: 18</span>')
.typeString('<br/>')
.typeString('<span style="color:greenyellow;font-family:Inconsolata;font-size:90%;">Total commits: 749</span>')
.typeString('<span style="color:greenyellow;font-family:Inconsolata;font-size:90%;">Total commits: 752</span>')
.typeString('<span style="color:greenyellow;font-family:Inconsolata;font-size:90%;"><br/><br/>$</span>')
.start();
7 changes: 3 additions & 4 deletions de/nebenprojekte.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h1>Nebenprojekte</h1>
<div class="post">
<h2 class="post-title"><a href="https://github.com/liweiyap/narradir-android" id="narradir">Narradir</a></h2>
<h3 class="post-subtitle">Android-Applikation in Java</h3>
<a href='https://play.google.com/store/apps/details?id=com.liweiyap.narradir&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' onmouseover="this.style.opacity=1; this.style.filter=alpha(opacity=100);"><img alt='Jetzt bei Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/de_badge_web_generic.png' style="height:70px; display:initial; margin-bottom: 0.6em;" /></a>
<a href='https://play.google.com/store/apps/details?id=com.liweiyap.narradir&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' onmouseover="this.style.opacity=1; this.style.filter=alpha(opacity=100);"><img alt='Jetzt bei Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/de_badge_web_generic.png' class="google-playstore-badge"/></a>
<p>Zum automatischen Erzählen der Nachtphase in den Deduktionsbrettspielen <i>Dem Widerstand: Avalon</i> und <i>Secret Hitler</i> mit der Bibliothek <a href="https://github.com/google/ExoPlayer"><i>ExoPlayer</i></a> habe ich die mobile App <i>Narradir</i> entwickelt. Die Sprachsynthese fürs Erzählen habe ich mit dem <a href="https://cloud.google.com/text-to-speech">Text‐to‐Speech API</a> vom Google Cloud SDK durch Bash‐Skripte gemacht.</p>
{% include narradir-carousel.html %}
Im Vergleich mit ähnlichen Anwendungen bietet <i>Narradir</i> folgende Vorteile an:
Expand Down Expand Up @@ -52,9 +52,8 @@ <h3 class="post-subtitle">Web scraping in Python</h3>
<h2 class="post-title"><a href="https://github.com/liweiyap/Conway_GameOfLife">Conways Spiel des Lebens</a></h2>
<h3 class="post-subtitle">Simulation der Evolution einer gitterförmigen Population von Zellen in C++ mit Qt</h3>
<p>Gegeben sei ein Gitter, in dem jedes Quadrat eine Zelle ist. Jede Zelle kann einen von zwei Zuständen einnehmen, welche als <i>lebendig</i> (1) oder <i>tot</i> (0) bezeichnet werden. Unter den folgenden <a href="https://de.wikipedia.org/wiki/Conways_Spiel_des_Lebens#Die_Spielregeln">vier Regeln</a> hängt der Zustand jeder Zelle in der Folgegeneration nur vom aktuellen Zustand der Zelle selbst und den aktuellen Zuständen ihrer <a href="https://de.wikipedia.org/wiki/Moore-Nachbarschaft">acht Nachbarzellen</a> (horizontal, vertikal, oder diagonal) ab:</p>
<!-- https://stackoverflow.com/a/41107163/12367873 -->
<div style="width:100%;text-align:center;">
<a href="https://qualityswdev.com/2011/07/31/conways-game-of-life-in-scala/" onmouseover="this.style.opacity=1; this.style.filter=alpha(opacity=100);"><img src="../assets/conway/rules.webp" style="display:initial; height:250px;"></a>
<div class="container-centered-with-limited-clickable-span">
<a href="https://qualityswdev.com/2011/07/31/conways-game-of-life-in-scala/" onmouseover="this.style.opacity=1; this.style.filter=alpha(opacity=100);"><img src="../assets/conway/rules.webp" height="250px"></a>
</div>
<ol>
<li>Lebende Zellen mit weniger als zwei lebenden Nachbarn sterben in der Folgegeneration an Unterbevölkerung <i>(z.B. wegen Einsamkeit)</i>.</li>
Expand Down
7 changes: 3 additions & 4 deletions projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h1>Projects</h1>
<div class="post">
<h2 class="post-title"><a href="https://github.com/liweiyap/narradir-android" id="narradir">Narradir</a></h2>
<h3 class="post-subtitle">Android app in Java</h3>
<a href='https://play.google.com/store/apps/details?id=com.liweiyap.narradir&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' onmouseover="this.style.opacity=1; this.style.filter=alpha(opacity=100);"><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' style="height:70px; display:initial; margin-bottom: 0.6em;"/></a>
<a href='https://play.google.com/store/apps/details?id=com.liweiyap.narradir&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' onmouseover="this.style.opacity=1; this.style.filter=alpha(opacity=100);"><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' class="google-playstore-badge"/></a>
<p>I developed a mobile app for automating night-time narration in the social-deduction board games <i>The Resistance: Avalon</i> and <i>Secret Hitler</i> using the <a href="https://github.com/google/ExoPlayer"><i>ExoPlayer</i></a> library. I synthesized the speech audio files for the narration via the <a href="https://cloud.google.com/text-to-speech">Text‐to‐Speech API</a> from the Google Cloud SDK using Bash scripting.</p>
{% include narradir-carousel.html %}
This app offers the following improvements over similar apps out there:
Expand Down Expand Up @@ -52,9 +52,8 @@ <h3 class="post-subtitle">Web scraping in Python</h3>
<h2 class="post-title"><a href="https://github.com/liweiyap/Conway_GameOfLife">Conway's Game of Life</a></h2>
<h3 class="post-subtitle">Simulation of evolution in a grid-like population of cells in C++ with Qt</h3>
<p>Given a grid of cells, each cell has an initial state: <i>live</i> (1) or <i>dead</i> (0). Each cell interacts with its <a href="https://en.wikipedia.org/wiki/Moore_neighborhood">eight neighbours</a> (horizontal, vertical, or diagonal) using the following <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life#Rules">four rules</a>:</p>
<!-- https://stackoverflow.com/a/41107163/12367873 -->
<div style="width:100%;text-align:center;">
<a href="https://qualityswdev.com/2011/07/31/conways-game-of-life-in-scala/" onmouseover="this.style.opacity=1; this.style.filter=alpha(opacity=100);"><img src="../assets/conway/rules.webp" style="display:initial; height:250px;"></a>
<div class="container-centered-with-limited-clickable-span">
<a href="https://qualityswdev.com/2011/07/31/conways-game-of-life-in-scala/" onmouseover="this.style.opacity=1; this.style.filter=alpha(opacity=100);"><img src="../assets/conway/rules.webp" height="250px"></a>
</div>
<ol>
<li>Any live cell with fewer than two live neighbours dies, as if caused by under-population <i>(inability to reproduce)</i>.</li>
Expand Down

0 comments on commit 37629c3

Please sign in to comment.