diff --git a/avatar.png b/avatar.png
new file mode 100644
index 0000000..092b324
Binary files /dev/null and b/avatar.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..add0eb9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            margin: 0;
+            min-height: 100vh;
+            background: #242424;
+            font-family: monospace;
+            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm2 2v16h16V2H2z' fill='%23000000' fill-opacity='0.05'/%3E%3C/svg%3E");
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit; 
+        }
+
+        .bg-pattern {
+            position: fixed;
+            inset: 0;
+            opacity: 0.05;
+            z-index: 0;
+            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+        }
+
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 2rem;
+            position: relative;
+            z-index: 1;
+            padding-top: 100px;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 100px;
+            color:#f0f0f0;
+            font-size: 20px;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            transform: rotate(-1deg);
+            text-shadow: 2px 2px 0 #ffffff52, 3px 3px 0 #000;
+            margin-bottom: 0.5rem;
+        }
+
+
+        .social-links {
+            margin-top: 1rem;
+            font-size: 1rem;
+        }
+
+        .social-links a {
+            margin: 0 10px;
+            color: #f0f0f0;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        .social-links a:hover {
+            color: #2563eb;
+        } 
+
+        .post {
+            background: white;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            border: 2px solid #000;
+            position: relative;
+            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1), 6px 6px 0 rgba(0, 0, 0, 0.05);
+        }
+
+        .post-header {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .avatar {
+            width: 48px;
+            height: 48px;
+            background: #f0f0f0;
+            border: 2px solid black;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            transform: rotate(-2deg);
+            box-shadow: 2px 2px 0 #000;
+        }
+
+        .post-content {
+            text-shadow: 1px 1px 0 #fff;
+        }
+
+        .image-placeholder {
+            margin-top: 1rem;
+            border: 4px solid black;
+            background: #f0f0f0;
+            text-align: center;
+            transform: rotate(1deg);
+            box-shadow: 4px 4px 0 #000;
+        }
+
+        .post-actions {
+            margin-top: 1rem;
+            display: flex;
+            gap: 1rem;
+        }
+
+        .action-btn {
+            border: none;
+            background: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-family: inherit;
+        }
+
+        .action-btn.like {
+            color: #db2777;
+            transform: rotate(-1deg);
+        }
+
+        .action-btn.repost {
+            color: #2563eb;
+            transform: rotate(1deg);
+        }
+
+        .corner {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            border: 2px solid black;
+        }
+
+        .corner-tl {
+            top: -2px;
+            left: -2px;
+            border-right: 0;
+            border-bottom: 0;
+        }
+
+        .corner-tr {
+            top: -2px;
+            right: -2px;
+            border-left: 0;
+            border-bottom: 0;
+        }
+
+        .corner-bl {
+            bottom: -2px;
+            left: -2px;
+            border-right: 0;
+            border-top: 0;
+        }
+
+        .corner-br {
+            bottom: -2px;
+            right: -2px;
+            border-left: 0;
+            border-top: 0;
+        }
+
+        .avatar-img {
+            width: 250px;
+            height: 250px;
+            margin: 20px auto;
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-pattern"></div>
+    <div class="container">
+        <img src="/avatar.png" alt="Avatar" class="avatar-img">
+        <header>
+            <h1>Litruv</h1>
+            <div>Dev/Tech Artist @<a href="https://mates.dev/">MatesMedia</a>
+
+            <div class="social-links">
+                <a href="https://github.com/Litruv" target="_blank">GitHub</a>
+                <a href="https://www.youtube.com/c/Litruv" target="_blank">YouTube</a>
+                <a href="https://steamcommunity.com/id/Litruv" target="_blank">Steam</a>
+                <a href="https://discordapp.com/users/220772082055774210" target="_blank">Discord</a>
+            </div>
+            </div>
+        </header>
+        <div id="posts"></div>
+    </div>
+    <script>
+        function formatDate(dateString) {
+            return new Date(dateString).toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        }
+        function getRandomRotation() {
+            return Math.random() * 6 - 3;
+        }
+        function createPost(post) {
+            const article = document.createElement('div');
+            article.className = 'post';
+            article.style.transform = `rotate(${getRandomRotation()}deg)`;
+
+            const postLink = document.createElement('a');
+            postLink.href = post.url;
+            postLink.target = "_blank";
+            postLink.style.textDecoration = "none";
+
+            const imageHTML = post.embed.length > 0
+                ? post.embed.map(img => `
+                    <a href="${img.url}" target="_blank">
+                        <img class="image-placeholder" src="${img.url}" alt="${img.alt || 'Image'}" style="width: 100%;" />
+                    </a>
+                `).join('')
+                : '';
+            article.innerHTML = `
+                <div class="post-header">
+                    <div class="avatar">
+                        <img src="${post.avatar}" alt="${post.author}" style="width: 100%; height: 100%; object-fit: cover;" />
+                    </div>
+                    <div>
+                        <div style="font-weight: bold;">${post.author} (@${post.handle})</div>
+                        <div style="font-size: 0.875rem; color: #666;">
+                            ${formatDate(post.createdAt)}
+                        </div>
+                    </div>
+                </div>
+                <div class="post-content">${post.text}</div>
+                ${imageHTML}
+                <div class="post-actions">
+                    <button class="action-btn like">♥ ${post.likes}</button>
+                    <button class="action-btn repost">⟲ ${post.reposts}</button>
+                </div>
+            `;
+            postLink.appendChild(article);
+            return postLink;
+        }
+        function filterOriginalPosts(feed) {
+            return feed.filter((item) => {
+                const isRepost = item?.reason?.$type === 'app.bsky.feed.defs#reasonRepost';
+                const isReply = item?.post?.record?.reply;
+                return !isRepost && !isReply;
+            });
+        }
+        async function fetchPosts() {
+            try {
+                const response = await fetch("https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=lit.mates.dev&limit=20&filter=posts_no_replies");
+                if (!response.ok) {
+                    throw new Error('Failed to fetch posts');
+                }
+                const data = await response.json();
+                const filteredFeed = filterOriginalPosts(data.feed);
+                const posts = filteredFeed.map(item => ({
+                    author: item.post.author.displayName,
+                    handle: item.post.author.handle,
+                    avatar: item.post.author.avatar,
+                    createdAt: item.post.record.createdAt,
+                    text: item.post.record.text,
+                    likes: item.post.likeCount || 0,
+                    reposts: item.post.repostCount || 0,
+                    url: `https://bsky.app/profile/${item.post.author.handle}/post/${item.post.cid}`,
+                    embed: item.post.embed?.images?.map(img => ({
+                        url: img.fullsize,
+                        alt: img.alt || ''
+                    })) || []
+                }));
+                const postsContainer = document.getElementById('posts');
+                postsContainer.innerHTML = '';
+                posts.forEach(post => {
+                    postsContainer.appendChild(createPost(post));
+                });
+            } catch (error) {
+                console.error('Error fetching posts:', error);
+            }
+        }
+        fetchPosts();
+    </script>
+</body>
+</html>
\ No newline at end of file
