Skip to content

Commit

Permalink
Merge pull request #3 from yuma140902/destyle
Browse files Browse the repository at this point in the history
destyle
  • Loading branch information
yuma140902 authored Dec 21, 2023
2 parents a1254e7 + f90879d commit a00b932
Show file tree
Hide file tree
Showing 13 changed files with 464 additions and 787 deletions.
74 changes: 25 additions & 49 deletions src/apps/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,33 @@ hideTitle: false
head: |
<link href="/{{resolve '../works.css'}}" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="/card-animation.js"></script>
---

このサイトで公開しているアプリの一覧

## 一般人向け

<div class="works onecolumn">
<div class="ui-stack ui-interval-small">

<a class="card" href="/web-image-editor" target="_blank">
<div class="card-header">
<a class="ui-card" href="/web-image-editor" target="_blank">
<div class="ui-card-header">

### ブラウザ上で画像編集 - Web Image Editor

<div class="badges">
<img src="https://img.shields.io/github/deployments/yuma140902/web-image-editor/github-pages?logo=github&label=Deployment" />
</div>
</div>
<div class="card-body">
<div class="hero">
<div class="ui-card-body">
<div class="ui-hero">
<img src="/{{resolve '../works/img/web-image-editor.png'}}" />
</div>
</div>

</a>
<a class="card" href="/{{resolve '../webtools/diff.html'}}" target="_blank">
<div class="card-header nobody">
<a class="ui-card" href="/{{resolve '../webtools/diff.html'}}" target="_blank">
<div class="ui-card-header">

### 2つの文字列の差分を表示 - Diff Tool

Expand All @@ -40,8 +41,8 @@ head: |
</div>

</a>
<a class="card" href="/{{resolve '../webtools/csv2tex.html'}}" target="_blank">
<div class="card-header nobody">
<a class="ui-card" href="/{{resolve '../webtools/csv2tex.html'}}" target="_blank">
<div class="ui-card-header">

### エクセルの表をLaTeX形式に変換 - CSV to LaTeX

Expand All @@ -58,27 +59,27 @@ head: |

物好きな人のために

<div class="works onecolumn">
<a class="card" href="/regend-webui" target="_blank">
<div class="card-header">
<div class="ui-stack ui-interval-small">
<a class="ui-card" href="/regend-webui" target="_blank">
<div class="ui-card-header">

### 正規表現をDFAに変換 - Regend WebUI

<div class="badges">
<img src="https://img.shields.io/github/deployments/yuma140902/regend-webui/github-pages?logo=github&label=Deployment" />
</div>
</div>
<div class="card-body">
<div class="ui-card-body">

<div class="hero">
<div class="ui-hero">
<img src="/{{resolve '../works/img/regend.gif'}}" />
</div>
</div>

</a>

<a class="card" href="/{{resolve '../webtools/sort.html'}}" target="_blank">
<div class="card-header nobody">
<a class="ui-card" href="/{{resolve '../webtools/sort.html'}}" target="_blank">
<div class="ui-card-header">

### ソートアルゴリズムを可視化 - Sort Visualizer

Expand All @@ -88,8 +89,8 @@ head: |
</div>

</a>
<a class="card" href="/sanmoku-next-js/" target="_blank">
<div class="card-header nobody">
<a class="ui-card" href="/sanmoku-next-js/" target="_blank">
<div class="ui-card-header">

### Next.jsで実装された三目並べ - sanmoku-next-js

Expand All @@ -99,8 +100,8 @@ head: |
</div>

</a>
<a class="card" href="/gomoku-react/" target="_blank">
<div class="card-header nobody">
<a class="ui-card" href="/gomoku-react/" target="_blank">
<div class="ui-card-header">

### Reactで実装された五目並べ - gomoku-react

Expand All @@ -110,8 +111,8 @@ head: |
</div>

</a>
<a class="card" href="/gomoku-blazor/" target="_blank">
<div class="card-header nobody">
<a class="ui-card" href="/gomoku-blazor/" target="_blank">
<div class="ui-card-header">

### Blazorで実装された五目並べ - gomoku-blazor

Expand All @@ -121,8 +122,8 @@ head: |
</div>

</a>
<a class="card" href="/gomoku-elm/" target="_blank">
<div class="card-header nobody">
<a class="ui-card" href="/gomoku-elm/" target="_blank">
<div class="ui-card-header">

### Elmで実装された五目並べ - gomoku-elm

Expand All @@ -136,28 +137,3 @@ head: |
</div>

<div style="height: 110px" />

<script>
gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll('.card').forEach(card => {
gsap.fromTo(card, {
y: 100,
scale: 1.0,
autoAlpha: 0
},
{
y: 0,
scale: 1,
autoAlpha: 1,
ease: 'back.in(1.7)',
duration: 0.2,
scrollTrigger: {
trigger: card,
start: 'top bottom+=100',
toggleActions: 'play none none none'
}
}
);
});
</script>
60 changes: 60 additions & 0 deletions src/card-animation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
document.addEventListener('DOMContentLoaded', () => {
gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll('.ui-card').forEach(card => {
gsap.fromTo(card, {
y: 100,
scale: 1.0,
autoAlpha: 0
},
{
y: 0,
scale: 1,
autoAlpha: 1,
ease: 'back.in(1.7)',
duration: 0.2,
scrollTrigger: {
trigger: card,
start: 'top bottom+=100',
toggleActions: 'play none none none'
}
}
);
});

/*ScrollTrigger.batch('.card', {
onEnter: (batch) => {
gsap.to(batch,{
y: 0,
scale: 1,
autoAlpha: 1,
stagger: 0.1,
})
},
invertal: 10,
start: 'top bottom',
});*/
});

window.onUpdateTheme = (theme) => {
const gh_marks = document.querySelectorAll('.ui-card img[src^="/works/img/github-mark"]');
gh_marks.forEach(img => {
if (theme === 'dark') {
img.src = "/works/img/github-mark-white.png";
}
else {
img.src = "/works/img/github-mark.png";
}
})

const regend_logos = document.querySelectorAll('.ui-card img[src^="/works/img/regend-logo"]');
regend_logos.forEach(img => {
if (theme === 'dark') {
img.src = "/works/img/regend-logo-dark.png";
}
else {
img.src = "/works/img/regend-logo-light.png";
}
})
};

68 changes: 4 additions & 64 deletions src/deploys/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ hideTitle: false
head: |
<link href="/works.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="/card-animation.js"></script>
---

このウェブサイトを構成する各コンポーネントのデプロイ状況

- [サービス一覧](/services/)

<div class="works onecolumn">
<div class="ui-stack ui-interval-small">
{{#each deploys}}
<div class="card">
<div class="card-header nobody">
<div class="ui-card">
<div class="ui-card-header nobody">
<h3><a href="{{ url }}">{{#if name}}{{ name }}{{else}}{{ url }}{{/if}}</a></h3>
{{#if repo}}<a href="{{ repo }}"><img src="{{ badge }}" /></a>{{else}}<img src="{{ badge }}" />{{/if}}
</div>
Expand All @@ -23,64 +24,3 @@ head: |
</div>

<div style="height: 110px" />

<script>

gsap.registerPlugin(ScrollTrigger);

window.onUpdateTheme = (theme) => {
const gh_marks = document.querySelectorAll('.card img[src^="/works/img/github-mark"]');
gh_marks.forEach(img => {
if (theme === 'dark') {
img.src = "/works/img/github-mark-white.png";
}
else {
img.src = "/works/img/github-mark.png";
}
})

const regend_logos = document.querySelectorAll('.card img[src^="/works/img/regend-logo"]');
regend_logos.forEach(img => {
if (theme === 'dark') {
img.src = "/works/img/regend-logo-dark.png";
}
else {
img.src = "/works/img/regend-logo-light.png";
}
})
};

document.querySelectorAll('.card').forEach(card => {
gsap.fromTo(card, {
y: 100,
scale: 1.0,
autoAlpha: 0
},
{
y: 0,
scale: 1,
autoAlpha: 1,
ease: 'back.in(1.7)',
duration: 0.2,
scrollTrigger: {
trigger: card,
start: 'top bottom+=100',
toggleActions: 'play none none none'
}
}
);
});

/*ScrollTrigger.batch('.card', {
onEnter: (batch) => {
gsap.to(batch,{
y: 0,
scale: 1,
autoAlpha: 1,
stagger: 0.1,
})
},
invertal: 10,
start: 'top bottom',
});*/
</script>
38 changes: 19 additions & 19 deletions src/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,23 @@ og:
description: yuma14の個人サイト
---

<div class="card-container">
<a class="card" href="/profile">
<div class="card-header">
<h2><span class="material-symbols-rounded">person</span>&nbsp;About Me</h2>
<div class="ui-flex-cluster ui-interval-small" style="margin-top: 2em">
<a class="ui-card ui-flex-half-if-wide" href="/profile">
<div class="ui-card-header">
<h2 class="ui-icon-text"><span class="material-symbols-rounded">person</span>&nbsp;About Me</h2>
</div>
<div class="card-body">
<div class="ui-card-body">
<div id="avater-container">
<img src="https://avatars.githubusercontent.com/u/23431077" style="border-radius: 50%"/>
</div>
</div>
</a>

<a class="card" href="/works/">
<div class="card-header">
<h2><span class="material-symbols-rounded">handyman</span>&nbsp;Projects</h2>
<a class="ui-card ui-flex-half-if-wide" href="/works/">
<div class="ui-card-header">
<h2 class="ui-icon-text"><span class="material-symbols-rounded">handyman</span>&nbsp;Projects</h2>
</div>
<div class="card-body wide">
<div class="ui-card-body ui-wide">
<div id="works-showcase">
<div>
<img src="{{resolve './works/img/reverie.png'}}" />
Expand All @@ -45,14 +45,14 @@ og:
</div>
</a>

<a class="card" href="/apps/">
<div class="card-header">
<h2><span class="material-symbols-rounded">apps</span>&nbsp;ウェブアプリ</h2>
<a class="ui-card ui-flex-half-if-wide" href="/apps/">
<div class="ui-card-header">
<h2 class="ui-icon-text"><span class="material-symbols-rounded">apps</span>&nbsp;ウェブアプリ</h2>
</div>
<div class="card-body">
<div class="ui-card-body">
<p>このサイトで公開しているウェブアプリの一覧</p>
</div>
<div class="card-body wide">
<div class="ui-card-body ui-wide">
<div id="apps-showcase">
<div>
<img src="{{resolve './works/img/web-image-editor.png'}}" />
Expand All @@ -61,17 +61,17 @@ og:
</div>
</a>

<a class="card" href="/deploys/">
<div class="card-header">
<h2><span class="material-symbols-rounded">cloud</span>&nbsp;サービス一覧</h2>
<a class="ui-card ui-flex-half-if-wide" href="/deploys/">
<div class="ui-card-header">
<h2 class="ui-icon-text"><span class="material-symbols-rounded">cloud</span>&nbsp;サービス一覧</h2>
</div>
<div class="card-body">
<div class="ui-card-body">
<p>運営しているサービス一覧とデプロイ状況</p>
</div>
</a>

</div>
<h2><span class="material-symbols-rounded">history</span>&nbsp;更新履歴</h2>
<h2 class="ui-icon-text"><span class="material-symbols-rounded">history</span>&nbsp;更新履歴</h2>

最終更新 {{ build.year }}年{{ build.month }}月{{ build.day }}日 {{ build.hour }}時{{ build.minute }}分(UTC)

Expand Down
Loading

0 comments on commit a00b932

Please sign in to comment.