diff --git a/dotfiles/.homepage/README.md b/dotfiles/.homepage/README.md
new file mode 100644
index 00000000..b06cfbe1
--- /dev/null
+++ b/dotfiles/.homepage/README.md
@@ -0,0 +1,16 @@
+# Customizable browser homepage
+
+This is a simple browser homepage with focus on customization.
+Try is out [here](https://jcionx.github.io/homepage).
+
+
+
+The search bar is hidden until you start typing.
+
+
+
+The `config.json` file stores all your configs. There you can show/hide elements, change the colors, the background, the default search engine, and add aliases to more engines.
+
+
+
+If you want to use this as your homepage directly from GitHub Pages, you can add `?config=url_to_your_config.json` to use a custom config.
\ No newline at end of file
diff --git a/dotfiles/.homepage/assets/audio/buawawa.mp3 b/dotfiles/.homepage/assets/audio/buawawa.mp3
new file mode 100644
index 00000000..99b170bb
Binary files /dev/null and b/dotfiles/.homepage/assets/audio/buawawa.mp3 differ
diff --git a/dotfiles/.homepage/assets/audio/woooaaauuuuu.mp3 b/dotfiles/.homepage/assets/audio/woooaaauuuuu.mp3
new file mode 100644
index 00000000..8d150ffa
Binary files /dev/null and b/dotfiles/.homepage/assets/audio/woooaaauuuuu.mp3 differ
diff --git a/dotfiles/.homepage/assets/css/style.css b/dotfiles/.homepage/assets/css/style.css
new file mode 100644
index 00000000..76c6a26b
--- /dev/null
+++ b/dotfiles/.homepage/assets/css/style.css
@@ -0,0 +1,106 @@
+@font-face {
+ font-family: 'Roboto';
+ src: url('../fonts/Roboto-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
+ font-weight: normal;
+ font-style: italic;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ color: var(--primary-color);
+ text-align: center;
+ overflow: hidden;
+ margin: 0;
+ height: 100vh;
+ width: 100vw;
+ background-size: cover;
+ background-position: center center;
+}
+
+.clock {
+ display: none;
+ font-size: 10rem;
+ margin-top: 1.3rem;
+}
+
+.date {
+ display: none;
+ font-size: 2.5rem;
+}
+
+.quote {
+ display: none;
+ font-size: 1.6rem;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ bottom: 1.3rem;
+ width: 100vw;
+}
+
+#quote-text {
+ width: 50vw;
+}
+
+.quote-author {
+ font-style: italic;
+ font-weight: 200;
+ font-size: 1.2rem;
+}
+
+.search-box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 80%;
+ height: 50px;
+ display: flex;
+ flex-direction: row;
+}
+
+
+.search-bar {
+ width: 100%;
+ height: 100%;
+ outline: none;
+ border: solid 2px var(--primary-color);
+ border-radius: var(--border-radius);
+ color: var(--primary-color);
+ background-color: var(--secondary-color);
+ font-size: 1.5rem;
+}
+
+.search-icon {
+ height: 40px;
+ width: 40px;
+ position: relative;
+ left: -55px;
+ margin: 8px;
+}
+
+.search-bar:placeholder-shown {
+ opacity: 0;
+ transform: scale(0.95) translateY(1rem);
+}
+
+.search-bar:placeholder-shown ~ .search-icon {
+ opacity: 0;
+ transform: scale(0.95) translateY(1rem) translateX(-1.6rem);
+}
+
+.fade-in {
+ animation: fadeIn 1.5s;
+}
+
+@keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
\ No newline at end of file
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-Black.ttf b/dotfiles/.homepage/assets/fonts/Roboto-Black.ttf
new file mode 100644
index 00000000..0112e7da
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-Black.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-BlackItalic.ttf b/dotfiles/.homepage/assets/fonts/Roboto-BlackItalic.ttf
new file mode 100644
index 00000000..b2c6aca5
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-BlackItalic.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-Bold.ttf b/dotfiles/.homepage/assets/fonts/Roboto-Bold.ttf
new file mode 100644
index 00000000..43da14d8
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-Bold.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-BoldItalic.ttf b/dotfiles/.homepage/assets/fonts/Roboto-BoldItalic.ttf
new file mode 100644
index 00000000..bcfdab43
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-BoldItalic.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-Italic.ttf b/dotfiles/.homepage/assets/fonts/Roboto-Italic.ttf
new file mode 100644
index 00000000..1b5eaa36
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-Italic.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-Light.ttf b/dotfiles/.homepage/assets/fonts/Roboto-Light.ttf
new file mode 100644
index 00000000..e7307e72
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-Light.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-LightItalic.ttf b/dotfiles/.homepage/assets/fonts/Roboto-LightItalic.ttf
new file mode 100644
index 00000000..2d277afb
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-LightItalic.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-Medium.ttf b/dotfiles/.homepage/assets/fonts/Roboto-Medium.ttf
new file mode 100644
index 00000000..ac0f908b
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-Medium.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-MediumItalic.ttf b/dotfiles/.homepage/assets/fonts/Roboto-MediumItalic.ttf
new file mode 100644
index 00000000..fc36a478
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-MediumItalic.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-Regular.ttf b/dotfiles/.homepage/assets/fonts/Roboto-Regular.ttf
new file mode 100644
index 00000000..ddf4bfac
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-Regular.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-Thin.ttf b/dotfiles/.homepage/assets/fonts/Roboto-Thin.ttf
new file mode 100644
index 00000000..2e0dee6a
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-Thin.ttf differ
diff --git a/dotfiles/.homepage/assets/fonts/Roboto-ThinItalic.ttf b/dotfiles/.homepage/assets/fonts/Roboto-ThinItalic.ttf
new file mode 100644
index 00000000..084f9c0f
Binary files /dev/null and b/dotfiles/.homepage/assets/fonts/Roboto-ThinItalic.ttf differ
diff --git a/dotfiles/.homepage/assets/images/wallpapers/1.jpg b/dotfiles/.homepage/assets/images/wallpapers/1.jpg
new file mode 100644
index 00000000..f51ed7f8
Binary files /dev/null and b/dotfiles/.homepage/assets/images/wallpapers/1.jpg differ
diff --git a/dotfiles/.homepage/assets/js/script.js b/dotfiles/.homepage/assets/js/script.js
new file mode 100644
index 00000000..8b01681a
--- /dev/null
+++ b/dotfiles/.homepage/assets/js/script.js
@@ -0,0 +1,189 @@
+// Load the config.json file (using JavaScript vanilla)
+
+config_file = 'config.json';
+
+const urlParams = new URLSearchParams(window.location.search);
+if (urlParams.has('json')) {
+ config_file = urlParams.get('json');
+}
+
+fetch(config_file)
+ .then(response => response.json())
+ .then(data => {
+ // Load the config.json file
+ console.log(data);
+
+ // Load the clock if the config.json file says so
+ if (data["show_clock"] == true) {
+ displayTime(data);
+ clock.style.display = "block";
+ setInterval(displayTime, 1000, data);
+ }
+
+ if (data["show_date"] == true) {
+ displayDate();
+ date.style.display = "block";
+ setInterval(displayDate, 60000);
+ }
+
+ if (data["random_quote"] == true) {
+ displayQuote();
+ quote.style.display = "flex";
+ }
+
+ search_engine = data["search_engine"];
+ alt_engines = data["alt_engines"];
+ console.log(alt_engines)
+ document.documentElement.style.setProperty('--primary-color', data["primary_color"]);
+ document.documentElement.style.setProperty('--secondary-color', data["secondary_color"]);
+ document.documentElement.style.setProperty('--border-radius', data["border_radius"]);
+ document.getElementById('search-icon').setAttribute('fill', data["primary_color"]);
+ document.body.style.backgroundImage = "url('" + data["wallpaper"] + "')";
+
+ if (data["animations"] == true) {
+ clock.classList.add('fade-in');
+ date.classList.add('fade-in');
+ quote.classList.add('fade-in');
+ document.getElementById('search-bar').style.transition = "0.1s";
+ document.getElementById('search-icon').style.transition = "0.1s";
+ }
+
+ if (data["enable_rickroll_at_2am"] == true) {
+ rickroll_at_2am = true;
+ }
+ if (data["hourly_buawawa"] == true) {
+ hourly_buawawa = true;
+ }
+ if (data["ctrl_o_woooaaauuuuu"] == true) {
+ document.addEventListener('keydown', function(e) {
+ if ((e.ctrlKey || e.metaKey) && e.key === 'o') {
+ let audio = new Audio('assets/audio/woooaaauuuuu.mp3');
+ audio.play();
+ e.preventDefault(); // Prevent the default action
+ }
+ });
+ }
+ }
+);
+
+rickroll_at_2am = false;
+hourly_buawawa = false;
+last_hour_buawawa = 0;
+
+search_engine = "";
+alt_engines = {}
+
+clock = document.getElementById('clock');
+clock_text = document.getElementById('clock-text');
+
+date = document.getElementById('date');
+date_text = document.getElementById('date-text');
+
+quote = document.getElementById('quote');
+quote_text = document.getElementById('quote-text');
+quote_author = document.getElementById('quote-author');
+
+function displayTime(config) {
+ if (config["24_hour"] == true) {
+ let date = new Date();
+ let hours = date.getHours();
+ let minutes = date.getMinutes();
+ minutes = minutes < 10 ? '0'+minutes : minutes;
+ let time = hours + ":" + minutes;
+ clock_text.innerHTML = time;
+ } else {
+ let date = new Date();
+ let hours = date.getHours();
+ let minutes = date.getMinutes();
+ let ampm = hours >= 12 ? 'PM' : 'AM';
+ hours = hours % 12;
+ hours = hours ? hours : 12;
+ minutes = minutes < 10 ? '0'+minutes : minutes;
+ let time = hours + ":" + minutes + " " + ampm;
+ clock_text.innerHTML = time;
+ }
+ if (rickroll_at_2am) {
+ let date = new Date();
+ let hours = date.getHours();
+ let minutes = date.getMinutes();
+ if (hours == 2 && minutes == 0) {
+ window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+ }
+ }
+ if (hourly_buawawa) {
+ let date = new Date();
+ let minutes = date.getMinutes();
+ if (minutes == 0 && last_hour_buawawa != date.getHours()) {
+ last_hour_buawawa = date.getHours();
+ let audio = new Audio('assets/audio/buawawa.mp3');
+ audio.play();
+ }
+ }
+}
+
+function displayDate() {
+ let date = new Date();
+ let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+ let day = days[date.getDay()];
+ let dayNumber = date.getDate();
+ let month = date.toLocaleString('default', { month: 'long' });
+ let year = date.getFullYear();
+
+ if (dayNumber == 1 || dayNumber == 21 || dayNumber == 31) {
+ dayNumber += "st";
+ } else if (dayNumber == 2 || dayNumber == 22) {
+ dayNumber += "nd";
+ } else if (dayNumber == 3 || dayNumber == 23) {
+ dayNumber += "rd";
+ } else {
+ dayNumber += "th";
+ }
+
+ let dateText = day + ", " + dayNumber + " " + month + " " + year;
+ date_text.innerHTML = dateText;
+}
+
+function displayQuote() {
+ fetch('https://api.quotable.io/random')
+ .then(response => response.json())
+ .then(data => {
+ quote_text.innerHTML = data["content"];
+ quote_author.innerHTML = "- " + data["author"];
+ }
+ );
+}
+
+// body on any keypress focus on search bar
+document.body.onkeypress = function() {
+ document.getElementById("search-bar").focus();
+}
+
+function isValidUrl(url) {
+ const regex = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+ return regex.test(url);
+}
+
+// Check if search bar pressed enter
+document.getElementById("search-bar").addEventListener("keypress", function(e) {
+ if (e.key === 'Enter') {
+ let url = document.getElementById("search-bar").value;
+ // Check if starts with any of the alt engines
+ for (const [key, value] of Object.entries(alt_engines)) {
+ console.log(key, value)
+ if (url.startsWith(key)) {
+ window.location.href = value + url.replace(key, '');
+ return;
+ }
+ }
+
+ if (isValidUrl(url)) {
+ // Check if the url has http or https
+ if (!url.startsWith('http://') && !url.startsWith('https://')) {
+ url = 'http://' + url;
+ }
+ window.location.href = url;
+ } else {
+ window.location.href = search_engine + url;
+ }
+ }
+});
\ No newline at end of file
diff --git a/dotfiles/.homepage/assets/screenshots/1.jpeg b/dotfiles/.homepage/assets/screenshots/1.jpeg
new file mode 100644
index 00000000..34a9635f
Binary files /dev/null and b/dotfiles/.homepage/assets/screenshots/1.jpeg differ
diff --git a/dotfiles/.homepage/assets/screenshots/2.jpeg b/dotfiles/.homepage/assets/screenshots/2.jpeg
new file mode 100644
index 00000000..3f59a5e7
Binary files /dev/null and b/dotfiles/.homepage/assets/screenshots/2.jpeg differ
diff --git a/dotfiles/.homepage/assets/screenshots/3.png b/dotfiles/.homepage/assets/screenshots/3.png
new file mode 100644
index 00000000..ff804378
Binary files /dev/null and b/dotfiles/.homepage/assets/screenshots/3.png differ
diff --git a/dotfiles/.homepage/config.json b/dotfiles/.homepage/config.json
new file mode 100644
index 00000000..90a04509
--- /dev/null
+++ b/dotfiles/.homepage/config.json
@@ -0,0 +1,34 @@
+{
+ "show_clock": true,
+ "24_hour": true,
+ "show_date": true,
+ "primary_color": "#FFFFFF",
+ "secondary_color": "#4A4A4A",
+ "border_radius": "10px",
+ "wallpaper": "assets/images/wallpapers/1.jpg",
+ "random_quote": true,
+ "search_engine": "https://www.google.com/search?q=",
+ "animations": true,
+ "enable_rickroll_at_2am": true,
+ "hourly_buawawa": true,
+ "ctrl_o_woooaaauuuuu": true,
+ "alt_engines": {
+ "yt ": "https://www.youtube.com/results?search_query=",
+ "gh ": "https://github.com/search?q=",
+ "wiki ": "https://en.wikipedia.org/wiki/Special:Search?search=",
+ "aw ": "https://wiki.archlinux.org/index.php?search=",
+ "r/": "https://www.reddit.com/r/",
+ "u/": "https://www.reddit.com/u/",
+ "mc": "https://namemc.com/search?q=",
+ "pl": "https://www.planetminecraft.com/resources/?q=",
+ "ao3": "https://archiveofourown.org/works/search?utf8=%E2%9C%93&work_search%5Bquery%5D=",
+ "sof": "https://stackoverflow.com/search?q=",
+ "gl": "https://gitlab.com/search?search=",
+ "bb": "https://bitbucket.org/repo/all?name=",
+ "sf": "https://sourceforge.net/directory/?q=",
+ "npm": "https://www.npmjs.com/search?q=",
+ "yarn": "https://yarnpkg.com/packages?q=",
+ "pypi": "https://pypi.org/search/?q=",
+ "dh": "https://hub.docker.com/search?q="
+ }
+}
diff --git a/dotfiles/.homepage/index.html b/dotfiles/.homepage/index.html
index a8140db1..30bbbd62 100644
--- a/dotfiles/.homepage/index.html
+++ b/dotfiles/.homepage/index.html
@@ -1 +1,26 @@
-TEST HOMEPAGE
+
+
+
+
+
+
+ Homepage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file