diff --git a/frontpage.md b/frontpage.md
new file mode 100644
index 0000000..3ab53a4
--- /dev/null
+++ b/frontpage.md
@@ -0,0 +1,49 @@
+
+[frontpage](https://github.com/likeandscribe/frontpage)は[atproto](https://github.com/bluesky-social/atproto)を使って投稿の制御を行います。主にpdsの`collection`から検索と`at://`を使います。
+
+[next.js](https://github.com/vercel/next.js)で書かれています。layoutは[tailwindcss](https://github.com/tailwindlabs/tailwindcss)です。
+
+## tailwindcss
+
+htmlに省略形式でcssを記述します。
+
+```html
+ <div className="flex py-10">
+
+      {params.postAuthor === "syui.bsky.social" && (
+         <iframe className="w-full px-8 h-[300px] sm:h-[450px] md:h-[600px]" title="stream" src="https://example.com" style={{}}>
+        </iframe>
+      )}
+
+      <div className="hidden w-64 md:block">
+      <LinkAlternateAtUri
+        authority={authorDid}
+        collection={PostCollection}
+        rkey={post.rkey}
+      />
+      {post.status === "live" ? (
+        <NewComment postRkey={post.rkey} postAuthorDid={authorDid} />
+      ) : (
+        <Alert>
+          <AlertTitle>This post has been deleted</AlertTitle>
+          <AlertDescription>
+            Deleted posts cannot receive new comments.
+          </AlertDescription>
+        </Alert>
+      )}
+      {comments.map((comment) => (
+        <Comment
+          key={comment.id}
+          comment={comment}
+          level={0}
+          postAuthorParam={params.postAuthor}
+          postRkey={post.rkey}
+        />
+      ))}
+      </div>
+
+</div>
+```
+
+`@media`を制御する`sm`, `md`などは記述する順序を間違えると動きませんので注意。
+