Skip to content

Commit

Permalink
Merge pull request #1 from channprj/main
Browse files Browse the repository at this point in the history 
feat: add background 3d animation
  • Loading branch information
@dahlia
dahlia authored Jun 29, 2024
2 parents e6de5e8 + 3ece45b commit 1d27eed
Show file tree
Hide file tree
Showing 3 changed files with 573 additions and 68 deletions.
91 changes: 91 additions & 0 deletions index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
div.universe {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
/* display: contents; */

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

z-index: -1;
background: linear-gradient(
180deg,
#373773,
#235689,
#2a9096,
#364a7b,
#4a367b,
#5e3665,
#2c294b,
#31437a
);
background-size: 1600% 1600%;
-webkit-animation: skygradient 180s ease infinite;
-moz-animation: skygradient 180s ease infinite;
-o-animation: skygradient 180s ease infinite;
animation: skygradient 180s ease infinite;
}
@-webkit-keyframes skygradient {
0% {
background-position: 50% 0%;
}
50% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
@-moz-keyframes skygradient {
0% {
background-position: 50% 0%;
}
50% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
@-o-keyframes skygradient {
0% {
background-position: 50% 0%;
}
50% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
@keyframes skygradient {
0% {
background-position: 50% 0%;
}
50% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
canvas {
width: 100% !important;
height: 100% !important;
}
div.logo {
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
}
p.description {
margin-top: 10px;
}
145 changes: 77 additions & 68 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,85 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>한국 연합우주 개발자 모임</title>
<link rel="canonical" href="https://fedidev.kr/">
<link rel="icon" href="fedidevkr.svg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="한국에 거주하거나 한국어를 사용하는
<html lang="ko" data-theme="dark">

<head>
<meta charset="utf-8">
<title>한국 연합우주 개발자 모임</title>
<link rel="canonical" href="https://fedidev.kr/">
<link rel="icon" href="fedidevkr.svg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="한국에 거주하거나 한국어를 사용하는
연합우주(fediverse) 개발자들의 모임입니다.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://fedidev.kr/">
<meta property="og:title" content="한국 연합우주 개발자 모임">
<meta property="og:description" content="한국에 거주하거나 한국어를
<meta property="og:type" content="website">
<meta property="og:url" content="https://fedidev.kr/">
<meta property="og:title" content="한국 연합우주 개발자 모임">
<meta property="og:description" content="한국에 거주하거나 한국어를
사용하는 연합우주(fediverse) 개발자들의 모임입니다.">
<meta property="og:image" content="fedidevkr.svg">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<style>
header > hgroup > img:first-child { display: block; margin: auto; }
dfn { font-style: normal; font-weight: bold; }
</style>
</head>
<body>
<header class="container">
<hgroup>
<img
src="fedidevkr.svg"
alt="한국 연합우주 개발자 모임 로고"
width="150" height="100"
>
<meta property="og:image" content="fedidevkr.svg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="/index.css">
<style>
header>hgroup>img:first-child {
display: block;
margin: auto;
}

dfn {
font-style: normal;
font-weight: bold;
}
</style>
</head>

<body>
<div class="universe"></div>
<header class="container">
<hgroup>
<div class="logo">
<img src="fedidevkr.svg" alt="한국 연합우주 개발자 모임 로고" width="150" height="100">
</div>
<div>
<h1>한국 연합우주 개발자 모임</h1>
<p>한국에 거주하거나 한국어를 사용하는 연합우주(fediverse)
<p class="description">한국에 거주하거나 한국어를 사용하는 연합우주(fediverse)
개발자들의 모임입니다.</p>
</hgroup>
</header>
<main class="container">
<h2>연합우주란?</h2>
<p>한국어로는 흔히 <dfn>연합우주</dfn>라 불리는
<dfn>페디버스</dfn>(fediverse)는 서로 소통 가능한 소셜 미디어
서비스들의 연합으로 이루어진 네트워크입니다. 이러한 서비스들은
서로 다른 서버와 소프트웨어로 운영되지만, 사용자들은 서로의
서비스에 가입하지 않고도 서로 소통할 수 있습니다. 기술적으로는
<a href="#ActivityPub">ActivityPub</a>이라는 <abbr title="World Wide Web
</div>
</hgroup>
</header>
<main class="container">
<h2>연합우주란?</h2>
<p>한국어로는 흔히 <dfn>연합우주</dfn>라 불리는
<dfn>페디버스</dfn>(fediverse)는 서로 소통 가능한 소셜 미디어
서비스들의 연합으로 이루어진 네트워크입니다. 이러한 서비스들은
서로 다른 서버와 소프트웨어로 운영되지만, 사용자들은 서로의
서비스에 가입하지 않고도 서로 소통할 수 있습니다. 기술적으로는
<a href="#ActivityPub">ActivityPub</a>이라는 <abbr title="World Wide Web
Consortium">W3C</abbr> 표준이나 WebFinger 등의 프로토콜을 함께
사용합니다. 주요 구현으로는 Meta의 <a href="https://www.threads.net"
>Threads</a>나 오픈 소스인 <a href="https://joinmastodon.org/ko"
>Mastodon</a>, <a href="https://misskey-hub.net/ko/">Misskey</a>,
<a href="https://pixelfed.org/">Pixelfed</a> 등이 있으며,
<a href="https://wordpress.org/">WordPress</a>나
<a href="https://www.discourse.org/">Discourse</a> 등의 소프트웨어도
플러그인이나 확장을 통해 연합우주에 참여할 수 있습니다.</p>
<h2 id="ActivityPub">ActivityPub이란?</h2>
<p><dfn>ActivityPub</dfn>은 <abbr title="World Wide Web
사용합니다. 주요 구현으로는 Meta의 <a href="https://www.threads.net">Threads</a>나 오픈 소스인 <a href="https://joinmastodon.org/ko">Mastodon</a>, <a href="https://misskey-hub.net/ko/">Misskey</a>,
<a href="https://pixelfed.org/">Pixelfed</a> 등이 있으며,
<a href="https://wordpress.org/">WordPress</a>나
<a href="https://www.discourse.org/">Discourse</a> 등의 소프트웨어도
플러그인이나 확장을 통해 연합우주에 참여할 수 있습니다.
</p>
<h2 id="ActivityPub">ActivityPub이란?</h2>
<p><dfn>ActivityPub</dfn>은 <abbr title="World Wide Web
Consortium">W3C</abbr>에서 제정한 소셜 미디어 서비스들이 서로 소통할 수
있도록 하는 프로토콜 표준입니다. 이 표준은 사용자들이 서로 팔로하거나
메시지를 주고받을 수 있도록 하는 것뿐만 아니라, 사용자들이 서로의 글을
공유하거나 댓글을 달 수 있도록 하는 등의 기능을 정의합니다. 이 표준은 <a
href="https://www.w3.org/TR/activitypub/">W3C 공식 문서</a>에서 확인할
수 있습니다.</p>
<h2>연합우주 개발자란?</h2>
<p>이 모임에서 말하는 <dfn>연합우주 개발자</dfn>란 연합우주에 참여하는
소셜 미디어 서비스들을 개발하거나 운영하는 개발자들을 비롯하여,
연합우주에 관한 기술적인 연구나 활동을 하는 사람들, 이에 관한 글이나
번역을 하는 사람들 등을 포함합니다. 이 모임은 이러한 사람들이 서로
소통하고 정보를 공유할 수 있는 장을 제공하고자 합니다.</p>
<h2>참여 방법</h2>
<p>이 모임에 참여하고 싶으시다면, <a href="https://discord.gg/B2ABMBpHNA"
>Discord 서버</a>에 가입하여 주시기 바랍니다. 이 서버는 한국어를
사용하는 연합우주 개발자들을 위한 공개 채팅방으로, 모임의 소식이나
기술적인 질문, 정보 공유 등을 할 수 있습니다. 장기적으로는 오프라인
모임이나 워크숍 등을 개최할 계획이 있습니다.</p>
</main>
</body>
있도록 하는 프로토콜 표준입니다. 이 표준은 사용자들이 서로 팔로하거나
메시지를 주고받을 수 있도록 하는 것뿐만 아니라, 사용자들이 서로의 글을
공유하거나 댓글을 달 수 있도록 하는 등의 기능을 정의합니다. 이 표준은 <a href="https://www.w3.org/TR/activitypub/">W3C 공식 문서</a>에서 확인할
수 있습니다.</p>
<h2>연합우주 개발자란?</h2>
<p>이 모임에서 말하는 <dfn>연합우주 개발자</dfn>란 연합우주에 참여하는
소셜 미디어 서비스들을 개발하거나 운영하는 개발자들을 비롯하여,
연합우주에 관한 기술적인 연구나 활동을 하는 사람들, 이에 관한 글이나
번역을 하는 사람들 등을 포함합니다. 이 모임은 이러한 사람들이 서로
소통하고 정보를 공유할 수 있는 장을 제공하고자 합니다.</p>
<h2>참여 방법</h2>
<p>이 모임에 참여하고 싶으시다면, <a href="https://discord.gg/B2ABMBpHNA">Discord 서버</a>에 가입하여 주시기 바랍니다. 이 서버는 한국어를
사용하는 연합우주 개발자들을 위한 공개 채팅방으로, 모임의 소식이나
기술적인 질문, 정보 공유 등을 할 수 있습니다. 장기적으로는 오프라인
모임이나 워크숍 등을 개최할 계획이 있습니다.</p>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="/universe.js" defer></script>
</body>

</html>
Loading

0 comments on commit 1d27eed

Please sign in to comment.