This is Erik's Homepage, it is a personal browser start page that you can customize on your own. This is a heavily open source project, and I encourage user customization.
- Light & Dark Mode — Automatically matches your OS preference, with a manual toggle in the top-right corner.
- Greeting — Displays a greeting. You can make them anything you want. They can be funny jokes, or whatever.
- Quick-Launch Icons — Icon grid linking to sites like Google, Google Maps, YouTube, ChatGPT, etc, with day/night icon variants. Feel free to add your own.
- Task Board — Four categories loosely inspired by the Eisenhower matrix: To-Do, Projects/Goals, Events, and Development. They can be renamed if you'd like, these are just suggestions.
├── Home.html # Main page structure
├── home2.css # Styles, theming, and layout
├── java1.js # All JavaScript logic
├── Icons/ # App icons (day + night variants, e.g. GG.png / GGn.png)
└── BG/ # Background tile images (day + night variants, e.g. BG1.png / BG1n.png)
This repository includes some icons for sites like Google, and ChatGPT. If you want to add icons for your own site, you will need to source them on your own, and make a "dark theme" equivalent.
- Download the repository (do not keep README.md and LICENSE)
- Add your own icons to the
Icons/folder and backgrounds to theBG/folder (see above). - Open
Home.htmlin any browser. - To use as your browser's start page, set the local file path (e.g.
file:///path/to/Home.html) as your homepage in browser settings. - Use Custom New Tab extension (
https://chromewebstore.google.com/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia?hl=en) to set this site as your new tab. - Download VS Code or any platform to make your own changes!
Adding Icons: Add an entry to the logos array in java1.js and a corresponding <a> tag in Home.html. Place the icon images (day and night versions) in the Icons/ folder — the night variant is auto-derived by inserting n before .png (e.g. GG.png → GGn.png).
Editing Tasks: Update the <li> items inside each .task-category in Home.html. Tasks with checkboxes should use the .daily-item class with a data-task attribute for persistence.
Adding/Changing Backgrounds: Drop new tile images into BG/ and update the dayBackgrounds array or specialDates object in java1.js. Customize which tiles appear on which day, or add custom tiles on holidays in java1.js.
Adding Custom Greetings: Change the greeting that appears on the top of the homepage in java1.js. Add custom messages at a specified time period for a specific day of the week.
This is how my homepage looks like on a certain day:
Works in any browser that supports CSS custom properties, backdrop-filter, and the prefers-color-scheme media query (Chrome, Firefox, Brave, Edge, Safari, etc).
Personal use project — feel free to fork and adapt for your own start page.