├── .gitlab-ci.yml ├── LICENSE ├── README.md ├── aryan ├── index.html └── overrides.css ├── fazzi └── index.html ├── kunzooz └── index.html ├── preview.webp ├── sam └── index.html └── src ├── bgs └── topography.svg ├── css └── style.css ├── fonts ├── SpaceMonoNF.woff └── SpaceMonoNF.woff2 ├── images ├── cover1.webp ├── cover2.webp ├── cover3.webp └── cover4.webp └── js ├── date.js └── theme.js /.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | # This file is a template, and might need editing before it works on your project. 2 | # To contribute improvements to CI/CD templates, please follow the Development guide at: 3 | # https://docs.gitlab.com/ee/development/cicd/templates.html 4 | # This specific template is located at: 5 | # https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Pages/HTML.gitlab-ci.yml 6 | 7 | # Full project: https://gitlab.com/pages/plain-html 8 | pages: 9 | stage: deploy 10 | environment: production 11 | script: 12 | - mkdir .public 13 | - cp -r ./* .public 14 | - rm -rf public 15 | - mv .public public 16 | artifacts: 17 | paths: 18 | - public 19 | rules: 20 | - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # startpage 2 | 3 | Yet another minimal startpage (now with multitheme!): 4 | 5 | - Font: SpaceMono Nerd Font 6 | - Colour Scheme(s): Tokyo Night, Colours derived from cover image 7 | 8 | > **NOTE**: keep in mind that I don't own any rights to the images included in 9 | > this repository. 10 | 11 | [fazzi's startpage](https://fazzi.gitlab.io/startpage/fazzi/ "fazzi's startpage") 12 | 13 | [sam's startpage](https://fazzi.gitlab.io/startpage/sam/ "sam's startpage") 14 | 15 | [kunzooz's startpage](https://fazzi.gitlab.io/startpage/kunzooz/ "kunzooz's startpage") 16 | 17 | [aryan's startpage](https://fazzi.gitlab.io/startpage/aryan/ "aryan's startpage") 18 | 19 | ### Preview: 20 | 21 | ![img](preview.webp) 22 | -------------------------------------------------------------------------------- /aryan/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ~/startpage 💤 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 |
21 |
22 |
Welcome back, Aryan.
23 |
24 | 25 | 69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /aryan/overrides.css: -------------------------------------------------------------------------------- 1 | #image { 2 | margin-right: 2em; 3 | } 4 | -------------------------------------------------------------------------------- /fazzi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ~/startpage 💤 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |
20 |
Welcome $HOME!
21 |
22 | 70 |
71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /kunzooz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ~/startpage 🏠 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 |
21 |
Welcome back!
22 |
23 | 24 | 86 |
87 | 88 | 89 | -------------------------------------------------------------------------------- /preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fxzzi/startpage/2a159a11c88a113ae522a502c00550978fe7a9ae/preview.webp -------------------------------------------------------------------------------- /sam/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ~/startpage 💤 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 |
21 |
Welcome back, Sam.
22 |
23 | 24 | 74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /src/bgs/topography.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "SpaceMono Nerd Font"; 3 | font-display: swap; 4 | src: 5 | local("SpaceMono Nerd Font"), 6 | url(../fonts/SpaceMonoNF.woff2) format("woff2"), 7 | url(../fonts/SpaceMonoNF.woff) format("woff"); 8 | } 9 | 10 | :root { 11 | color-scheme: dark; 12 | } 13 | 14 | img { 15 | transition: 16 | transform 0.15s ease-in-out, 17 | opacity 0.2s ease-in-out; 18 | } 19 | 20 | html { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | height: 100svh; 25 | background-color: var(--background-color); 26 | background-image: url("../bgs/topography.svg"); 27 | overflow-x: clip; 28 | } 29 | 30 | html.loaded { 31 | transition: background-color 0.2s ease-in-out; 32 | } 33 | 34 | body { 35 | display: flex; 36 | color: var(--text-color); 37 | font-family: 38 | SpaceMono Nerd Font, 39 | monospace; 40 | justify-content: center; 41 | align-items: center; 42 | } 43 | 44 | #text, 45 | #image { 46 | opacity: 0; 47 | transition: opacity 0.2s ease-in; 48 | } 49 | 50 | #text.loaded, 51 | #image.loaded { 52 | opacity: 1; 53 | } 54 | 55 | #text.loaded * { 56 | transition: color 0.2s ease-in-out; 57 | } 58 | 59 | #carouselImage { 60 | height: 550px; 61 | aspect-ratio: 9 / 16; 62 | border-radius: 6px; 63 | box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5); 64 | object-fit: cover; 65 | } 66 | 67 | #image { 68 | margin-right: 1em; 69 | } 70 | 71 | #carouselImage:hover { 72 | transform: scale(1.1); 73 | cursor: pointer; 74 | } 75 | 76 | @media (max-width: 800px) { 77 | img, 78 | #image { 79 | display: none; 80 | margin: 0; 81 | padding: 0; 82 | } 83 | } 84 | 85 | #greeting { 86 | color: var(--accent-color-2); 87 | font-size: 2.5em; 88 | font-weight: 900; 89 | grid-column: 1/-1; 90 | text-align: center; 91 | display: grid; 92 | } 93 | 94 | #date { 95 | font-size: 1.3em; 96 | font-weight: 600; 97 | color: var(--accent-color); 98 | display: grid; 99 | grid-column: 1/-1; 100 | text-align: center; 101 | margin: 1em 0; 102 | } 103 | 104 | .header { 105 | color: var(--accent-color); 106 | font-size: 1.6em; 107 | font-weight: 600; 108 | } 109 | 110 | #links { 111 | display: grid; 112 | grid-row-gap: 0.5em; 113 | grid-template-columns: repeat(2, 1fr); 114 | } 115 | 116 | ul { 117 | list-style-type: none; 118 | padding-left: 1em; 119 | margin-left: 0; 120 | } 121 | 122 | a { 123 | color: var(--text-color); 124 | font-size: 1.2em; 125 | text-decoration: none; 126 | } 127 | 128 | a:hover { 129 | color: var(--hover-color); 130 | font-style: italic; 131 | } 132 | 133 | .fazzi .urls:nth-child(even) { 134 | padding-left: 1.5em; 135 | } 136 | 137 | #image { 138 | padding-right: 1em; 139 | } 140 | -------------------------------------------------------------------------------- /src/fonts/SpaceMonoNF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fxzzi/startpage/2a159a11c88a113ae522a502c00550978fe7a9ae/src/fonts/SpaceMonoNF.woff -------------------------------------------------------------------------------- /src/fonts/SpaceMonoNF.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fxzzi/startpage/2a159a11c88a113ae522a502c00550978fe7a9ae/src/fonts/SpaceMonoNF.woff2 -------------------------------------------------------------------------------- /src/images/cover1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fxzzi/startpage/2a159a11c88a113ae522a502c00550978fe7a9ae/src/images/cover1.webp -------------------------------------------------------------------------------- /src/images/cover2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fxzzi/startpage/2a159a11c88a113ae522a502c00550978fe7a9ae/src/images/cover2.webp -------------------------------------------------------------------------------- /src/images/cover3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fxzzi/startpage/2a159a11c88a113ae522a502c00550978fe7a9ae/src/images/cover3.webp -------------------------------------------------------------------------------- /src/images/cover4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fxzzi/startpage/2a159a11c88a113ae522a502c00550978fe7a9ae/src/images/cover4.webp -------------------------------------------------------------------------------- /src/js/date.js: -------------------------------------------------------------------------------- 1 | const dateElement = document.getElementById("date"); 2 | 3 | function showTime() { 4 | const date = new Date(); 5 | 6 | const options = { 7 | weekday: "long", 8 | hour: "2-digit", 9 | minute: "2-digit", 10 | second: "2-digit", 11 | day: "2-digit", 12 | month: "2-digit", 13 | year: "2-digit", 14 | }; 15 | 16 | const formattedDate = date.toLocaleString("en-GB", options); 17 | const [dayOfWeek, dateStr, time] = formattedDate.split(", "); 18 | 19 | dateElement.innerHTML = `${dayOfWeek}, ${time} | ${dateStr}`; 20 | } 21 | 22 | setInterval(showTime, 1000); 23 | showTime(); 24 | -------------------------------------------------------------------------------- /src/js/theme.js: -------------------------------------------------------------------------------- 1 | let currentIndex = 2 | localStorage.getItem("currentIndex") || 3 | document.currentScript.getAttribute("currentIndex"); 4 | currentIndex = parseInt(currentIndex); 5 | 6 | const images = ["cover1.webp", "cover2.webp", "cover3.webp", "cover4.webp"]; 7 | const colorSets = [ 8 | { 9 | "--text-color": "#c0caf5", 10 | "--hover-color": "#bb9af7", 11 | "--accent-color": "#7aa2f7", 12 | "--accent-color-2": "#f7768e", 13 | "--background-color": "#1a1b26", 14 | }, 15 | { 16 | "--text-color": "#9fadc6", 17 | "--hover-color": "#9B5856", 18 | "--accent-color": "#28725A", 19 | "--accent-color-2": "#D2C7CB", 20 | "--background-color": "#15191d", 21 | }, 22 | { 23 | "--text-color": "#c0caf5", 24 | "--hover-color": "#e0af68", 25 | "--accent-color": "#7aa2f7", 26 | "--accent-color-2": "#bb9af7", 27 | "--background-color": "#1a1b26", 28 | }, 29 | { 30 | "--text-color": "#EAEFFD", 31 | "--hover-color": "#FDB6A7", 32 | "--accent-color": "#556BFF", 33 | "--accent-color-2": "#FA87A6", 34 | "--background-color": "#16191F", 35 | }, 36 | ]; 37 | 38 | function preloadImages() { 39 | for (let i = 0; i < images.length; i++) { 40 | const img = new Image(); 41 | img.src = "../src/images/" + images[i]; 42 | } 43 | } 44 | 45 | function nextImage() { 46 | currentIndex = (currentIndex + 1) % images.length; 47 | localStorage.setItem("currentIndex", currentIndex); // Update currentIndex in localStorage 48 | const imageElement = document.getElementById("carouselImage"); 49 | imageElement.style.opacity = 0; 50 | updateColors(currentIndex); 51 | 52 | setTimeout(() => { 53 | imageElement.src = "../src/images/" + images[currentIndex]; 54 | imageElement.style.opacity = 1; 55 | }, 200); // Match the transition duration in style.css 56 | } 57 | 58 | function updateColors() { 59 | const colorSet = colorSets[currentIndex]; 60 | // Iterate through the colorSet and set the CSS variables 61 | for (const [property, value] of Object.entries(colorSet)) { 62 | document.documentElement.style.setProperty(property, value); 63 | } 64 | } 65 | 66 | // Set colors with current index first 67 | updateColors(currentIndex); 68 | 69 | // Set the initial image 70 | document.getElementById("carouselImage").src = 71 | "../src/images/" + images[currentIndex]; 72 | 73 | // Image is opacity 0 and text is translated off screen by default 74 | // Add the loaded class to the image and text to animate them in 75 | window.onload = function () { 76 | document.getElementById("image").classList.add("loaded"); 77 | document.getElementById("text").classList.add("loaded"); 78 | document.getElementsByTagName("html")[0].classList.add("loaded"); 79 | // Preload the remaining images 80 | preloadImages(); 81 | }; 82 | --------------------------------------------------------------------------------