zstrike/home-frontend
1
0
Fork 0
forked from vyla-entertainment/home-frontend
Code Pull Requests Activity

enhanced lighthouse report

Browse Source
This commit is contained in:
alwaysmesmerizingyou
2026-08-21 19:40:20 -07:00
parent acf97ae05d
commit 6e4074bf95
9 changed files with 103 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/data/partners.json
View File

@@ -2,11 +2,13 @@
{
"name": "FMHY",
"logo": "assets/images/partners/fmhy.png",
"logoSmall": "assets/images/partners/fmhy.png",
"link": "https://fmhy.net"
},
{
"name": "r/Piracy",
"logo": "assets/images/partners/piracy.png",
"logoSmall": "assets/images/partners/piracy.png",
"link": "https://reddit.com/r/Piracy"
}
]

18
src/data/reviews.json
View File

@@ -3,36 +3,42 @@
"name": "ZENITH The Great (Ash Fan)",
"handle": "@zenithrifle",
"text": "oh god the ui is so goood",
"avatar": "/assets/images/testimonials/zenithrifle.png"
"avatar": "/assets/images/testimonials/zenithrifle.png",
"avatarSmall": "/assets/images/testimonials/zenithrifle.png"
},
{
"name": "Light",
"handle": "@acideetdeforme",
"text": "Youre highk a goat for doing ts without ads",
"avatar": "/assets/images/testimonials/acideetdeforme.png"
"avatar": "/assets/images/testimonials/acideetdeforme.png",
"avatarSmall": "/assets/images/testimonials/acideetdeforme.png"
},
{
"name": "char",
"handle": "@chariachtus",
"text": "I find Vyla as the best by far",
"avatar": "/assets/images/testimonials/chariachtus.png"
"avatar": "/assets/images/testimonials/chariachtus.png",
"avatarSmall": "/assets/images/testimonials/chariachtus.png"
},
{
"name": "amri",
"handle": "@snorer",
"text": "who is the owner of such greatness",
"avatar": "/assets/images/testimonials/snorer.png"
"avatar": "/assets/images/testimonials/snorer.png",
"avatarSmall": "/assets/images/testimonials/snorer.png"
},
{
"name": "Bee",
"handle": "@block.tale.adict",
"text": "this is sickk",
"avatar": "/assets/images/testimonials/block.tale.adict.png"
"avatar": "/assets/images/testimonials/block.tale.adict.png",
"avatarSmall": "/assets/images/testimonials/block.tale.adict.png"
},
{
"name": "lucky-mucky",
"handle": "@lucky_mucky_",
"text": "ur like the best owner ever❤️",
"avatar": "/assets/images/testimonials/lucky_mucky_.png"
"avatar": "/assets/images/testimonials/lucky_mucky_.png",
"avatarSmall": "/assets/images/testimonials/lucky_mucky_.png"
}
]

17
src/scripts/components/testimonial-card.js
View File

@@ -11,14 +11,23 @@ function initials(name) {
export function createTestimonialCard(testimonial) {
const card = createElement('div', 'testimonial-card');
const avatar = testimonial.avatar
? `<img src="${testimonial.avatar}" alt="" width="34" height="34" loading="lazy" decoding="async">`
: initials(testimonial.name || '?');
let avatarHTML;
if (testimonial.avatar) {
if (testimonial.avatarSmall) {
avatarHTML = `<img src="${testimonial.avatarSmall}" alt="" width="34" height="34" loading="lazy" decoding="async"
srcset="${testimonial.avatarSmall} 60w, ${testimonial.avatar} 120w" sizes="60px">`;
} else {
avatarHTML = `<img src="${testimonial.avatar}" alt="" width="34" height="34" loading="lazy" decoding="async">`;
}
} else {
avatarHTML = initials(testimonial.name || '?');
}
card.innerHTML = `
<div class="testimonial-top">
<div class="testimonial-user">
<div class="testimonial-avatar">${avatar}</div>
<div class="testimonial-avatar">${avatarHTML}</div>
<div class="testimonial-names">
<span class="testimonial-name">${testimonial.name}</span>
<span class="testimonial-handle">${testimonial.handle || ''}</span>

17
src/scripts/sections/partners.js
View File

@@ -4,9 +4,22 @@ import { observeReveals } from '../animations/reveal-observer.js';
function createPartnerItem(partner) {
const item = createElement('div', 'partner-item reveal');
let imgHTML;
if (partner.logo) {
if (partner.logoSmall) {
imgHTML = `<img src="${partner.logoSmall}" alt="${partner.name}" width="128" height="128" loading="lazy" decoding="async"
srcset="${partner.logoSmall} 64w, ${partner.logo} 128w" sizes="64px">`;
} else {
imgHTML = `<img src="${partner.logo}" alt="${partner.name}" width="128" height="128" loading="lazy" decoding="async">`;
}
} else {
imgHTML = '';
}
const inner = partner.link
? `<a href="${partner.link}" target="_blank" rel="noopener noreferrer"><img src="${partner.logo}" alt="${partner.name}" width="128" height="128" loading="lazy" decoding="async"></a>`
: `<img src="${partner.logo}" alt="${partner.name}" width="128" height="128" loading="lazy" decoding="async">`;
? `<a href="${partner.link}" target="_blank" rel="noopener noreferrer">${imgHTML}</a>`
: imgHTML;
item.innerHTML = inner;
return item;
}

7
src/styles/base/reset.css
View File

@@ -22,15 +22,14 @@ body {
line-height: 1.5;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
-ms-overflow-style: none;
min-height: 100%;
min-height: 100dvh;
background: var(--color-bg);
}
body::-webkit-scrollbar {
display: none;
width: 0;
background: transparent;
}
a {
@@ -66,4 +65,4 @@ ol {
::selection {
background: var(--color-fg);
color: var(--color-bg);
}
}

4
src/styles/components/buttons.css
View File

@@ -51,6 +51,10 @@
touch-action: manipulation;
}
.hero-cta:hover {
transform: scale(0.97);
}
.hero-cta:active {
transform: scale(0.97);
}

8
src/styles/sections/hero-content.css
View File

@@ -20,8 +20,7 @@
}
.hero-title {
font-size: clamp(2rem, calc(2rem + 2 * ((100vw - 23.4375rem) / 66.5625)), 4rem);
line-height: clamp(2.28rem, calc(2.28rem + 1.72 * ((100vw - 23.4375rem) / 66.5625)), 4rem);
font-size: 2.3rem;
letter-spacing: -.03em;
font-weight: 500;
text-wrap: balance;
@@ -41,7 +40,7 @@
font-size: 0.8rem;
margin: 1rem auto 0;
line-height: 1.5;
width: 80%;
width: 50%;
}
.hero-description a {
@@ -66,13 +65,14 @@
@media (max-width: 768px) {
.hero-description {
margin-top: 0rem;
width: 80%;
}
}
@media (orientation: landscape) and (max-height: 600px) {
.hero-title {
margin-bottom: 0rem;
font-size: 2.7rem;
font-size: 2rem;
}
.hero-container {