diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..2ba986f --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/banner.png b/banner.png new file mode 100644 index 0000000..c0161c2 Binary files /dev/null and b/banner.png differ diff --git a/icons/16.png b/icons/16.png new file mode 100644 index 0000000..e7552a6 Binary files /dev/null and b/icons/16.png differ diff --git a/icons/180.png b/icons/180.png new file mode 100644 index 0000000..8f938d6 Binary files /dev/null and b/icons/180.png differ diff --git a/icons/32.png b/icons/32.png new file mode 100644 index 0000000..79821ea Binary files /dev/null and b/icons/32.png differ diff --git a/icons/48.png b/icons/48.png new file mode 100644 index 0000000..63a27f4 Binary files /dev/null and b/icons/48.png differ diff --git a/index.html b/index.html index bad8af1..eda7af6 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Litruv - Dev/Tech Artist
@@ -10,17 +39,29 @@ Avatar

Litruv

-
Dev/Tech Artist @MatesMedia - - +
Dev/Tech Artist @MatesMedia
+ + +
- \ No newline at end of file + diff --git a/main.js b/main.js index 557e07a..dde2c13 100644 --- a/main.js +++ b/main.js @@ -6,9 +6,11 @@ function formatDate(dateString) { minute: '2-digit' }); } + function getRandomRotation() { return Math.random() * 3 - 1.5 } + function createPost(post) { const article = document.createElement('div'); article.className = 'post'; @@ -26,6 +28,9 @@ function createPost(post) { `).join('') : ''; + + const formattedText = post.text.replace(/\n/g, '
'); + article.innerHTML = `
@@ -38,16 +43,20 @@ function createPost(post) {
-
${post.text}
+
${formattedText}
${imageHTML}
`; + + postLink.href = post.url; postLink.appendChild(article); + return postLink; } + function filterOriginalPosts(feed) { return feed.filter((item) => { const isRepost = item?.reason?.$type === 'app.bsky.feed.defs#reasonRepost'; @@ -55,6 +64,7 @@ function filterOriginalPosts(feed) { 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"); @@ -71,7 +81,7 @@ async function fetchPosts() { 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}`, + url: `https://bsky.app/profile/${item.post.author.handle}/post/${item.post.uri.split('/').pop()}`, embed: item.post.embed?.images?.map(img => ({ url: img.fullsize, alt: img.alt || '' @@ -86,4 +96,5 @@ async function fetchPosts() { console.error('Error fetching posts:', error); } } -fetchPosts(); \ No newline at end of file + +fetchPosts(); diff --git a/style.css b/style.css index 2212753..3e3a17a 100644 --- a/style.css +++ b/style.css @@ -30,16 +30,20 @@ a { header { text-align: center; - margin-bottom: 100px; + margin-bottom: 80px; color: #f0f0f0; font-size: 20px; } + h1 { - font-size: 2.5rem; - transform: rotate(-1deg); + transition: all 0.3s ease; text-shadow: 2px 2px 0 #ffffff52, 3px 3px 0 #000; margin-bottom: 0.5rem; + transform-origin: center; + cursor: pointer; + position: relative; + display: inline-block; } .social-links { @@ -65,6 +69,7 @@ h1 { 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); + transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .post-header { @@ -132,26 +137,128 @@ h1 { display: block; } -@keyframes wiggle { + +.post:hover { + transform: scale(1.1) translateY(-5px) !important; + box-shadow: 6px 6px 30px rgba(0, 0, 0, 1); +} + +.subtext { + margin-bottom: 30px; +} + +.social-links a { + margin: 0 10px; + color: #f0f0f0; + font-size: 2rem; + text-decoration: none; + display: inline-block; + /* Ensure proper alignment for the text-shadow */ +} + +.social-links a:hover { + transform: scale(1.1); + transition: transform 0.3s ease; + text-shadow: + 0 0 3px white, + /* Solid outline */ +} + +/* Specific brand colors on hover */ +.social-links a:hover .fab.fa-github { + color: #181717; + /* GitHub's brand color */ +} + +.social-links a:hover .fab.fa-youtube { + color: #FF0000; + /* YouTube's brand color */ +} + +.social-links a:hover .fab.fa-steam { + color: #1b2838; + /* Steam's brand color */ +} + +.social-links a:hover .fab.fa-discord { + color: #7289da; + /* Discord's brand color */ +} + +.social-links a:hover .fa-brands.fa-bluesky { + color: #3E5BFF; + /* Bluesky's brand color */ +} + +@keyframes wildSpin { 0% { - transform: rotate(2deg); + transform: scale(1) rotate(0deg); + } + + 25% { + transform: scale(1.5) rotate(180deg) skew(15deg); } 50% { - transform: rotate(-2deg); + transform: scale(0.8) rotate(-180deg) skew(-15deg); + } + + 75% { + transform: scale(1.2) rotate(360deg); } 100% { - transform: rotate(2deg); + transform: scale(1) rotate(720deg); } } -.post { - transform: rotate(0deg); - transition: transform 0.3s ease-in-out; +@keyframes shake { + + 0%, + 100% { + transform: translateX(0); + } + + 25% { + transform: translateX(-5px) translateY(5px); + } + + 50% { + transform: translateX(5px) translateY(-5px); + } + + 75% { + transform: translateX(-5px) translateY(-5px); + } } -.post:hover { - animation: wiggle 2s ease-in-out infinite; - transform: rotate(2deg); -} \ No newline at end of file +h1:hover { + animation: + wildSpin 3s ease-in-out, + rainbow 3s linear, + shake 0.5s ease-in-out infinite; +} + +.social-links a { + position: relative; +} + +.social-links a::after { + content: attr(title); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 0.3rem; + border-radius: 0.3rem; + font-size: 0.875rem; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s; +} + +.social-links a:hover::after { + opacity: 1; +}