diff --git a/components.el b/components.el
new file mode 100644
index 0000000..5f0a1a3
--- /dev/null
+++ b/components.el
@@ -0,0 +1,26 @@
+;; This buffer is for text that is not saved, and for Lisp evaluation.
+;; To create a file, visit it with C-x C-f and enter text in its buffer.
+
+(require 'ox-publish)
+(setq org-publish-project-alist
+ '(
+ ("pages"
+ :base-directory "~/personal/org/"
+ :base-extension "org"
+ :publishing-directory "~/personal/site/"
+ :recursive t
+ :publishing-function org-html-publish-to-html
+ :html-head-include-default-style nil
+ :headline-levels 4
+ :auto-preamble t
+ )
+ ("static"
+ :base-directory "~/personal/org/"
+ :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
+ :publishing-directory "~/personal/site/"
+ :recursive t
+ :publishing-function org-publish-attachment
+ :html-head-include-default-style nil
+ )
+ ("org" :components ("pages" "static"))
+ ))
diff --git a/org/index.org b/org/index.org
new file mode 100644
index 0000000..acb760b
--- /dev/null
+++ b/org/index.org
@@ -0,0 +1,40 @@
+#+OPTIONS: toc:nil
+#+OPTIONS: num:nil
+#+HTML_HEAD:
+---------- __o __o __o __o
+-------- _`\<,_ _`\<,_ _`\<,_ _`\<,_
+------- (*)/ (*) (*)/ (*) (*)/ (*) (*)/ (*)
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Creative Commons Attribution 4.0 International License .
+#+END_EXPORT
diff --git a/org/pics.org b/org/pics.org
new file mode 100644
index 0000000..9e9c7a0
--- /dev/null
+++ b/org/pics.org
@@ -0,0 +1,32 @@
+#+OPTIONS: toc:nil
+#+OPTIONS: num:nil
+#+HTML_HEAD: Creative Commons Attribution 4.0 International License .
+#+END_EXPORT
diff --git a/site/css/stylesheet.css b/site/css/stylesheet.css
new file mode 100644
index 0000000..97b43e5
--- /dev/null
+++ b/site/css/stylesheet.css
@@ -0,0 +1,260 @@
+html {
+ font-family:sans-serif;
+ color:#080808
+}
+body {
+ max-width:1366px;
+ margin:0 auto;
+ padding:1rem;
+ background: rgb(27, 27, 27);
+ color: white;
+ font-size: 18px;
+}
+
+h2 a {
+ color: purple;
+ text-decoration: none;
+}
+
+h2 {
+ color: #45818e;
+}
+
+h3 {
+ color: white;
+}
+
+ul a:link {
+ color: #ce7e00;
+ text-decoration: none;
+}
+
+ul a:visited {
+ color: purple;
+ text-decoration: none;
+}
+
+ul a:hover {
+ color: #fcffd3;
+}
+
+img {
+ max-width: 90%;
+}
+
+.index {
+ display:flex;
+ flex-direction:row
+}
+.index .article-list {
+ flex-grow:1
+}
+.index .article-list .article {
+ margin-bottom:1rem
+}
+.index .article-list .date {
+ display:block;
+ color:#333
+}
+.index aside {
+ width:40%
+}
+.index aside img {
+ display:block;
+ margin:0 auto 1rem;
+ border-radius:5px
+}
+.index aside dt {
+ font-size:.9rem
+}
+.index aside dd {
+ margin-left:0
+}
+.index aside dd:not(:last-child) {
+ margin-bottom:.5rem
+}
+@media(max-width:640px) {
+ .index aside {
+ display:none
+ }
+}
+article {
+ margin:0 auto;
+ max-width:720px;
+ line-height:1.3
+}
+article img,
+article video,
+article iframe {
+ display:block!important;
+ margin:0 auto!important;
+ max-width:90%
+}
+@media(max-width:640px) {
+ article img,
+ article video,
+ article iframe {
+ max-width:calc(100% - 2rem)
+ }
+}
+article .comment {
+ margin:2rem auto 0;
+ max-width:80%;
+ color:#333
+}
+.footnotes {
+ font-size:.85rem
+}
+footer {
+ margin-top:2rem;
+ text-align:center;
+ font-size:.8rem;
+ color:#333
+}
+.float-img {
+ float:right;
+ display:inline;
+ padding-left:1rem
+}
+@media(max-width:640px) {
+ .float-img {
+ display:block;
+ float:none;
+ padding-left:inherit
+ }
+}
+pre {
+ max-width: 50%;
+ color: white;
+}
+pre .cp {
+ color:#800
+}
+pre .k {
+ color:#008
+}
+pre .kt,
+pre .kd,
+pre .kc {
+ color:#44f
+}
+pre .s {
+ color:#484;
+ font-style:italic
+}
+pre .cm,
+pre .c1 {
+ color:#333;
+ font-style:italic
+}
+pre .gi {
+ color:green
+}
+pre .gd {
+ color:red
+}
+pre .gu {
+ color:blue
+}
+.webring {
+ margin-top:2rem
+}
+.webring h2 {
+ font-size:1.2rem
+}
+.webring .articles {
+ display:flex
+}
+@media(max-width:640px) {
+ .webring .articles {
+ flex-direction:column
+ }
+}
+.webring .title {
+ margin:0
+}
+.webring .article {
+ flex:1;
+ display:flex;
+ flex-direction:column;
+ background:#eee;
+ padding:.5rem;
+ margin:0 .5rem
+}
+@media(max-width:640px) {
+ .webring .article {
+ margin:.5rem 0
+ }
+}
+.webring .article:first-child {
+ margin-left:0
+}
+.webring .article:last-child {
+ margin-right:0
+}
+.webring .summary {
+ font-size:.8rem;
+ flex:1
+}
+.webring .attribution {
+ float:right;
+ font-size:.8rem;
+ color:#555;
+ line-height:3
+}
+.webring .date {
+ color:#000
+}
+summary {
+ cursor:pointer;
+ background-color:#eee;
+ padding:.25rem 1rem;
+ margin:0 -1rem
+}
+details[open] {
+ border-bottom:1rem solid #eee;
+ margin:0 -1rem 1rem;
+ padding:0 1rem
+}
+.text-center {
+ text-align:center
+}
+blockquote {
+ border-left:5px solid #bbb;
+ background-color:#eee;
+ padding:0 1rem;
+ margin-left:calc(-1rem - 5px);
+ margin-right:-1rem
+}
+blockquote blockquote {
+ margin-right:0;
+ margin-left:0
+}
+dl {
+ display:grid;
+ grid-template-columns:auto 1fr;
+ grid-gap:.2rem 1rem
+}
+dl dt {
+ font-weight:700;
+ grid-column-start:1
+}
+dl dd {
+ grid-column-start:2;
+ margin:0
+}
+.alert {
+ padding:.5rem;
+ border:1px solid transparent;
+ margin-bottom:1rem
+}
+.alert.alert-danger {
+ background:#f8d7da;
+ color:#721c24;
+ border-color:#f5c6cb
+}
+.alert.alert-info {
+ background:#d1ecf1;
+ color:#0c5460;
+ border-color:#bee5eb
+}
