sophie/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

website 2
All checks were successful
/ test (push) Successful in 14s
Details

Browse source
This commit is contained in:
Soph :3 2024-07-23 01:04:20 +03:00
parent a5793e087c
commit 013c7cef7f
Signed by: sophie
GPG key ID: EDA5D222A0C270F2
27 changed files with 626 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

24
website/blog.html Normal file
View file

@ -0,0 +1,24 @@
__TEMPLATE_HEAD__
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css">
</head>
<body>
<h1> sophie's blog </h1>
<a id="return_back" href="/blog.html" style="display:none;font-size:xx-large;">return back?</a>
<div>Scroll to bottom for comments ↓</div>
<ul id="html_list" style="display: none">
</ul>
<div id="renderer"></div>
<div style="color:red;font-size:larger;font-weight:bolder;display:none;" id="error">
Blog post <span></span> does not exist.
</div>
<div class="giscus"></div>
<script src="https://giscus.app/client.js" data-repo="fucksophie/blog_comments" data-repo-id="R_kgDOMY4cfw"
data-category="General" data-category-id="DIC_kwDOMY4cf84ChCRR" data-mapping="url" data-strict="1"
data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="noborder_dark"
data-lang="en" data-loading="lazy" crossorigin="anonymous" async>
</script>
<script type="module" src="blog.js"></script>
</body>
</html>

34
website/blog.ts Normal file
View file

@ -0,0 +1,34 @@
const uriParams = new URLSearchParams(location.search);
if (uriParams.has("md")) {
const error = document.getElementById("error")!;
const renderer = document.getElementById("renderer")!;
const return_back = document.getElementById("return_back")!;
const req = await fetch("/blogs/" + uriParams.get("md") + ".html");
const giscus = document.querySelector(".giscus")! as HTMLDivElement;
if (req.status != 200) {
error.style.display = "block";
giscus.style.display = "none";
} else {
let text = await req.text();
renderer.innerHTML = text;
}
return_back.style.display = "block";
} else {
//@ts-expect-error
const blog_posts = __BLOG_POSTS__.map(z => z.replace(".md", ""))
const html_list = document.getElementById("html_list")!;
html_list.style.display = "block";
for (const blog_post of blog_posts) {
const req = await fetch("/blogs/" + blog_post + ".json");
const metadata = await req.json();
const li = document.createElement("li");
const a = document.createElement("a");
a.href = "/blog.html?md=" + encodeURIComponent(blog_post);
a.innerText = `${metadata.title} (created ${new Date(
metadata.time * 1000
//@ts-expect-error
).toGMTString()})`;
li.appendChild(a);
html_list.appendChild(li);
}
}

22
website/blogs/opensource-watch-comparison.md Normal file
View file

@ -0,0 +1,22 @@
title = Opensource watch comparison
time = 1721340000
========================
This has been a topic I've been very interested for very long. There's been three main opensource watches, those being the Bangle.js 2, ZSwatch, and Pine64 Pinetime. These all have their pluses and minuses, which I'll talk about in this post. As a disclaimar, I don't own any of these. I'm writing this exact blog post to compare and figure out which one of these is the best one. If there is a best one.
There is a different talk about other watches, that aren't opensource by themselves, but can be very easily modified to run [opensource firmwares](https://wasp-os.readthedocs.io/en/latest/install.html#device-support) (also see Gadgetbridge's supported gadgets). In my opinion, these watches are sold only for a very small amount of time, and usually don't work on any opensource apps such as Gadgetbridge. I will not be talking about them in this blog post, because I honestly think that they are not a point for comparison.
## Comparison
| Watch name | Price | Prebuilt? | HR sensor | Environmental sensor? | Pressure sensor? | Flash size | GPS? | Temperature? | External SWD? | Score |
|-------------|----------------|-----------|-----------|-----------------------|------------------|------------|------|--------------|---------------|-----------------|
| Bangle.js 2 | 91,08 EUR | ✅ | ✅ | ✅ | ✅ | 8MB | ✅ | ✅ | ✅ | 7/11 (+0 Price) |
| Pinetime | 24,78 EUR | ✅ | ✅ | ❌ | ❌ | 4MB | ❌ | ❌ | ❌ (sealed) | 6/11 (+4 Price) |
| ZSWatch | Around 40 euro | ❌ | ❌ | ✅ | ✅ | 16MB | ❌ | ✅ | ✅ | 6/10 (+2 Price) |
## Conclusion
In my opinion, every single one of these watches is a good option. However, if you have extra money to spend, the Bangle.js 2 is EASILY the best option. If you are on a budget, choose the pinetime. And if you have a lot of time and energy to build a ZSWatch, then do that.
## Links
[Bangle.js 2](https://shop.espruino.com/banglejs2)
[ZSWatch](https://github.com/jakkra/ZSWatch?tab=readme-ov-file)
[PineTime](https://pine64.com/product/pinetime-smartwatch-sealed/)

16
website/blogs/raspberry-pi-struggles.md Normal file
View file

@ -0,0 +1,16 @@
title = raspberry pi struggles
time = 1717925441
========================
recently, i have been experiencing struggles with my raspberry pi
here i will list all of the issues, maybe you have solutions or something
## git randomly breaking
this is entierly spontenous, and happens on every distro i've used for RPi3. it just SEGFAULT's after I update the system, and nothing helps, even uninstalling and reinstalling doesn't work.
## stdio.h
stdio.h has broken on me multiple times, to the point where it starts pulling in fortran sources and other bullshit, forcing me to use qemu on my own PC to compile stuff
## random overheating ???
my RPi has 0 load, 0 anything. absolutely nothing is being done on it, like 3 processes
and it still randomly overheats, to the point where the case has started to droop. it is literally
melting before my eyes
there is something either very wrong with my raspberry Pi, or I've broken something. at this point all I've been using has been STM32's and ESP8266's for my projects, or a hetzner dedi. i don't know why I even maintain most of my own hardware at this point, it serves 0 purpose if I could just parsec into a server with a 4090

25
website/blogs/why-i-syncthing.md Normal file
View file

@ -0,0 +1,25 @@
title = Why I ❤️ Syncthing
time = 1711916100
========================
I recently moved from Dropbox to Syncthing. It's been one of the best experiences in a long while.
## Rationale
Dropbox had limited devices, while I wanted to sync multiple devices (such as my phone, laptop and PC and RPi), and it was already hitting that limit. I didn't want to pay for a service which I could self host and use entierly independently of any company. It didn't seem hard to at all to setup Syncthing, as I had found it while scrolling friend's discord servers and finding it there.
## How to do it
Syncthing might seem complicated to use and maintain, but it's actually not at all complicated.
First, you have to have at least two devices. These can be absolutely anything, a VPS, a dedicated server, a PC, a phone, a SBC (such as a RPi, BananaPI, etc). After that you have to install syncthing on one of them (your most reliable one) and then follow https://docs.syncthing.net/intro/getting-started.html to install it. Then, grab your phone, whatever it may be, your second device. Let's say it's a laptop, to ease the setup. You have to install syncthing on that laptop too. Then grab it's device ID (the getting started guide would have thought you this), and then just add the device into the main syncthing. This is painless, happens in less than a minute and works through NAT, many firewalls, etc. I have a RPi with a 2TB harddrive setup in my collage dorms, and one on my dedicated server, and one on my laptop and one of my phone. This gives me insane reliability, if the dedicated server goes down, the syncing will resume once it's back. It's entierly painless, once your RPi goes down your data is still perfectly accessible on your server, laptop and phone.
## The experience 4 weeks in
It has been absolutely amazing. One time I had to switch the main server from a VPS to a dedicated server, which was pretty easy. I have had almost 0 hurdles, only issue I ever had was Android not supporting certain filenames (names with |\\?*<\":>+[]/' characters), which then caused a desync. Once I removed these characters from my filenames, it instantly synced and worked perfectly. I have ran into 0 other issues, since that. Absolutely smooth sailing
## Comparison
| Options | Dropbox | Syncthing | Google Drive (one) | Nextcloud | OneDrive |
| -------------------------- | ------------------------------- | -------------------- | :------------------ | ----------------------------- | ------------------------------ |
| Versioning | 30 days on basic and low plans | Configurable, (♾️) | No idea, not listed | Configurable, (♾️) | No idea, not listed |
| Price | 2.09eur (100gb), 10.99eur (2tb) | Server hosting costs | 12USD (2TB) | Server hosting costs | 1.99USD (100gb), 6.99USD (1TB) |
| Opensource | No | Yes | No | Yes | No |
| 2FA | Yes | No | Yes | Yes | Yes |
| Encryption/Encrypted files | No | Yes | Yes | Yes | No |
| Free data | 2gb | ♾️ | 15gb | ♾️(if no hosting, 1gb to 8gb) | 5gb |
## Final Opinions
If you need less than 15GB, just use Google Drive, Dropbox or Onedrive. These also usually come with effords to sync them properly, and don't work on all devices. If you need more than let's say, 1TB, just buy a server from https://contabo.com/en/ or https://www.hetzner.com/sb/ for about the same price, and a LOT more use out of your money.
(I am not endorsed by any of these websites.)

54
website/index.html Normal file
View file

@ -0,0 +1,54 @@
__TEMPLATE_HEAD__
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js"
integrity="sha512-eu9vkh+EbAsW3fMmPTj/DP5W3UegIdu0Z/OABMocvoofx43MYBkcQ9hRIVxZndV1vcCYQwBg+U1PkWl04TD0Jg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="/style.css">
<script src="index.js"></script>
</head>
<body>
<span class="center">
<div>
<button class="selected" id="home-button">home</button> | <button id="donations-button">donations</button> |
<a href="/blog.html"><button>blog</button></a>
</div>
<span id="home">
I'm Latvian, 17. My name's Sophie. I love listening to music, I have <span
id="songplays">&lt;loading...&gt;</span> song plays.
<br>
I am a JS/TS developer, mostly specializing in backend work.
<br>
I play minecraft, and upgun with friends. I have developed many bukkit plugins for Paper/Folia/Spigot
before, and am pretty well versed in them.
<br>
Contact me at <a href="https://matrix.to/#/@yourfriend:bark.lgbt">matrix</a>, <a
href="https://discord.com/users/845374523263811614">discord</a>, <a
href="https://github.com/fucksophie">github (view projects here)</a>, <a
href="https://git.sad.ovh/sophie">sadgit</a>, or <a href="https://bark.lgbt/@yourfriend">mastodon</a>
<br>
<a href="/key.txt">Here's my PGP key.</a>
</span>
<span id="donations" style="display:none">
<ul>
<li>BTC bc1q83jdukjn4a2qm0rmn9tqcfkcq60la22lqy2shx</li>
<li>ETH/BSC/<strong>USDT</strong>/USDC (send via BSC) 0xc691cd8950Fdf96Faa2aCA1CA9b4B3Fd5B2a44BB</li>
<li>SOL 79NKoiXaPzbwbsD5MFKKwmoeEPKtTsoQFfx64MHmULF7</li>
<li><strong>XMR
42iW3icQrybKYieQNSrm76dXetuXD6HaxZDijajXkge7GTSKVG4NefxBj3mbWudpY62dxRTihm4beJgy36X8xFKCTWpVAjS</strong>
</li>
</ul>
OR <a href="https://ko-fi.com/sophskofi">kofi</a> OR, dm for paypal
<br>
<img src="/sticker.webp" alt="monero-chan" style="width:128px;">
</span>
</span>
<span style="position:absolute;left:10px;bottom:10px">
Click <kbd>spacebar</kbd> to change the themes.
</span>
</body>
</html>

381
website/index.ts Normal file
View file

@ -0,0 +1,381 @@
/*
The original version of this ProcessingJava script was written by
Jason Labbe (available here: https://openprocessing.org/sketch/377231/)
This is a highly modified version by Sophie, firstly re-written using JS, and then
improved using newer techniques (no more pGraphics, using font toPoints now as an example).
Jason Labbe's version is licensed under CC BY-SA 3.0 DEED, and so is this version.
https://creativecommons.org/licenses/by-sa/3.0/deed.en
*/
/*
You won't believe what they say about us, bad PR
Bad chemistry between the 9 and 3-Star
Only real fanatics know, TL;DR
In the ER, at the hotel, two key-cards
GTB, they still want to hear "GT-R"
Black Discharge top, G-Star Raw's
Sing Peroxide on the stage in B-sharp
black windows on the strip, black Dodge Charge
*/
// Global variables
let particles: Particle[] = [];
let font: p5.Font;
let bgColor: p5.Color;
let darkMode = false;
let darkTheme: p5.Color;
let lightTheme: p5.Color;
interface Bounds {
x: number;
y: number;
w: number;
h: number;
}
function generateRandomPos(x: number, y: number, mag: number) {
let randomDir = createVector(random(0, width), random(0, height));
let pos = createVector(x, y);
pos.sub(randomDir);
pos.normalize();
pos.mult(mag);
pos.add(x, y);
return pos;
}
function getTextSize(text: string, font: p5.Font) {
let fontSize = 1200; // Wait, doesn't this impact performance heavily?
// Nope, a single iteration (once warmed up) only takes around
// 0.04799999999254942ms. This means, that for a 8K screen it'd take
// 11ms, and for normal 1080P screen it takes 20-40ms (891 iterations).
// This can be optimized further, but it's a single run of this function
// every time the word is rerendered. I don't think it matters nearly as much..
// Pouring too much time into this single number.. what the hell
let bounds: Bounds;
//let iters = 0;
//let time = 0;
do {
//const loopstart = performance.now();
fontSize--;
bounds = font.textBounds(text, 0, 0, fontSize) as Bounds;
// const loopend = performance.now();
// time += loopend - loopstart;
// iters += 1;
} while (bounds.w > windowWidth - 100);
//console.log("Took " + time + "ms for " + iters + " iterations");
return fontSize;
}
class Particle {
pos: p5.Vector;
vel: p5.Vector;
acc: p5.Vector;
target: p5.Vector;
closeEnoughTarget: number;
maxSpeed: number;
maxForce: number;
particleSize: number;
isKilled: boolean;
startColor: p5.Color;
targetColor: p5.Color;
colorWeight: number;
colorBlendRate: number;
constructor() {
this.pos = createVector(0, 0);
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.target = createVector(0, 0);
this.closeEnoughTarget = 50;
this.maxSpeed = 4.0;
this.maxForce = 0.1;
this.particleSize = 5;
this.isKilled = false;
this.startColor = color(0);
this.targetColor = color(0);
this.colorWeight = 0;
this.colorBlendRate = 0.025;
}
move() {
// Check if particle is close enough to its target to slow down
let proximityMult = 1.0;
let distance = dist(this.pos.x, this.pos.y, this.target.x, this.target.y);
if (distance < this.closeEnoughTarget) {
proximityMult = distance / this.closeEnoughTarget;
}
//.push force towards target
let towardsTarget = createVector(this.target.x, this.target.y);
towardsTarget.sub(this.pos);
towardsTarget.normalize();
towardsTarget.mult(this.maxSpeed * proximityMult);
let steer = createVector(towardsTarget.x, towardsTarget.y);
steer.sub(this.vel);
steer.normalize();
steer.mult(this.maxForce);
this.acc.add(steer);
// Move particle
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(0);
}
draw() {
// Draw particle
let currentColor = lerpColor(
this.startColor,
this.targetColor,
this.colorWeight
);
noStroke();
fill(currentColor);
ellipse(this.pos.x, this.pos.y, this.particleSize, this.particleSize);
// Blend towards its target color
if (this.colorWeight < 1.0) {
this.colorWeight = min(this.colorWeight + this.colorBlendRate, 1.0);
}
}
kill() {
if (!this.isKilled) {
// Set its target outside the scene
let randomPos = generateRandomPos(
width / 2,
height / 2,
(width + height) / 2
);
this.target.x = randomPos.x;
this.target.y = randomPos.y;
// Begin blending its color to black
this.startColor = lerpColor(
this.startColor,
this.targetColor,
this.colorWeight
);
this.targetColor = color(0);
this.colorWeight = 0;
this.isKilled = true;
}
}
}
function preload() {
font = loadFont("https://rsms.me/inter/font-files/InterVariable.ttf");
darkTheme = color(34, 40, 49, 255);
lightTheme = color(238, 238, 238, 255);
}
function nextWord(word: string) {
const fontSize = getTextSize(word, font);
const bounds = font.textBounds(word, 0, 0, fontSize) as Bounds;
let sampleFactor = 0.2;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
sampleFactor = 0.1;
}
let points = font.textToPoints(
word,
(windowWidth - 25 - bounds.w) / 2,
(windowHeight + bounds.h / 2) / 2,
fontSize,
{
sampleFactor,
simplifyThreshold: 0,
}
);
let newColor = color(
random(0.0, 255.0),
random(0.0, 255.0),
random(0.0, 255.0)
);
let particleCount = particles.length;
let particleIndex = 0;
for (let i = 0; i < points.length; i++) {
let randomIndex = Math.floor(random(0, points.length));
const point = points[randomIndex];
let newParticle;
if (particleIndex < particleCount) {
newParticle = particles[particleIndex];
newParticle.isKilled = false;
particleIndex += 1;
} else {
newParticle = new Particle();
let randomPos = generateRandomPos(
width / 2,
height / 2,
(width + height) / 2
);
newParticle.pos.x = randomPos.x;
newParticle.pos.y = randomPos.y;
newParticle.maxSpeed = random(2.0, 5.0);
newParticle.maxForce = newParticle.maxSpeed * 0.025;
newParticle.particleSize = random(3, 6);
newParticle.colorBlendRate = random(0.0025, 0.03);
particles.push(newParticle);
}
newParticle.startColor = lerpColor(
newParticle.startColor,
newParticle.targetColor,
newParticle.colorWeight
);
newParticle.targetColor = newColor;
newParticle.colorWeight = 0;
newParticle.target.x = point.x;
newParticle.target.y = point.y;
}
if (particleIndex < particleCount) {
for (let i = particleIndex; i < particleCount; i++) {
let particle = particles[i];
particle.kill();
}
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function setup() {
// selection
let pages = ["home", "donations"];
let selected = "home";
pages.forEach(z => {
const buttonElement = document.getElementById(z+"-button")!;
const element = document.getElementById(z)!;
buttonElement.addEventListener("click", _ => {
if(z !== selected) {
const selectedElement = document.getElementById(selected)!
const selectedButton = document.getElementById(selected+"-button")!
selectedElement.style.display = "none";
element.style.display = "block";
selectedButton.className = ""
buttonElement.className = "selected";
selected = z;
}
})
});
// lastfm
(async () => {
const lastfm = await fetch(
"https://ws.audioscrobbler.com/2.0/?method=user.getinfo&user=yourfriendoss&api_key=8d983789c771afaeb7412ac358d4bad0&format=json"
);
const json = await lastfm.json();
document.getElementById("songplays")!.innerText = json.user.playcount;
})();
const theme = localStorage.getItem("theme");
if (theme == "dark") {
bgColor = darkTheme;
darkMode = true;
} else {
bgColor = lightTheme;
darkMode = false;
}
document.body.setAttribute("data-theme", darkMode ? "dark" : "light");
const canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0, 0);
canvas.style("zIndex", "-1");
background(bgColor);
const p = "sad.ovh"
nextWord(p);
let ticks = 0;
setInterval(() => {
const a = particles.filter(z => {
const x = Math.abs(Math.floor(z.vel.x))
const y = Math.abs(Math.floor(z.vel.y))
if (x == 1 || y == 1 || x == 0 || y == 0) {
return false;
} else {
return true;
}
}).length;
if (a == 0) ticks++;
if (a != 0) ticks = 0;
if (ticks == 60 * 8) {
ticks = 0;
nextWord(p)
}
}, 1)
}
function keyPressed(a: KeyboardEvent) {
if (a.code == "Space") {
if (darkMode) {
bgColor = lightTheme;
} else {
bgColor = darkTheme;
}
darkMode = !darkMode;
document.body.setAttribute("data-theme", darkMode ? "dark" : "light");
localStorage.setItem("theme", darkMode ? "dark" : "light");
}
}
function draw() {
fill(bgColor);
noStroke();
rect(0, 0, width * 2, height * 2);
for (let x = particles.length - 1; x > -1; x--) {
let particle = particles[x];
particle.move();
particle.draw();
if (particle.isKilled) {
if (
particle.pos.x < 0 ||
particle.pos.x > width ||
particle.pos.y < 0 ||
particle.pos.y > height
) {
particles.splice(x, 1);
}
}
}
}
function mouseDragged() {
if (mouseButton == LEFT) {
for (const particle of particles) {
if (dist(particle.pos.x, particle.pos.y, mouseX, mouseY) < 50) {
particle.kill();
}
}
}
}

13
website/key.txt Normal file
View file

@ -0,0 +1,13 @@
-----BEGIN PGP PUBLIC KEY BLOCK-----
mDMEZizohxYJKwYBBAHaRw8BAQdAeSabI0imbtNWIlSSNKVd7uvos9sE9/IbvaQz
pgqHw3S0HWkgaGVhcnQgcGdwIDxzb2ZpamFAZHVjay5jb20+iJkEExYKAEEWIQQ0
8hTtyOXLi7xHvkHtpdIioMJw8gUCZizohwIbAwUJBaNwiQULCQgHAgIiAgYVCgkI
CwIEFgIDAQIeBwIXgAAKCRDtpdIioMJw8p7lAP9M/p4eWBd1E4VBfcilUpOoZ1bG
kcd+zzAsjezIK/gO+AD+MXkykqgGE2EvEqCNHfzWkKnPguxkZH56YYTu8YVSwgG4
OARmLOiHEgorBgEEAZdVAQUBAQdAT0SaQuH8xRA7q//yz3hmXZoWrqWj4n7v1wIB
m1fvjnYDAQgHiH4EGBYKACYWIQQ08hTtyOXLi7xHvkHtpdIioMJw8gUCZizohwIb
DAUJBaNwiQAKCRDtpdIioMJw8kkOAQDZ+sd9PuGquNSn7kKktpNunVhIYxo9nXhF
q+7kU7x8ywEA2cIdm+0dQYYm65YreaWfcOR4DJPz9sFhvCh6M4xoHg0=
=qcUB
-----END PGP PUBLIC KEY BLOCK-----

BIN
website/sticker.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

36
website/style.css Normal file
View file

@ -0,0 +1,36 @@
body[data-theme="light"] {
color: #31363F;
}
body[data-theme="dark"] {
color: #eeeeee;
}
body[data-theme="dark"]>.center>a {
color: #eeeeee !important;
}
body[data-theme="light"]>.center>a {
color: #31363F !important;
}
:root {
font-family: Inter, sans-serif;
font-feature-settings: 'liga' 1, 'calt' 1;
}
@supports (font-variation-settings: normal) {
:root {
font-family: InterVariable, sans-serif;
}
}
.center {
position: absolute;
top: 10px;
left: 10px;
}
.selected {
font-weight: bold;
}

26
website/templates/head.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<!-- Primary Meta Tags -->
<title>soph's blog and information</title>
<meta name="title" content="soph's blog and information" />
<meta name="description" content="yourfriend.lol v2, soph's blog and information"" />
<!-- Open Graph / Facebook -->
<meta property=" og:type" content="website" />
<meta property="og:url" content="https://sad.ovh" />
<meta property="og:title" content="soph's blog and information" />
<meta property="og:description" content="yourfriend.lol v2, soph's blog and information" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://sad.ovh" />
<meta property="twitter:title" content="soph's blog and information" />
<meta property="twitter:description" content="yourfriend.lol v2, soph's blog and information"" />
<meta name=" viewport" content="width=device-width, initial-scale=1.0">