1500bytes

I decided to channel my passion for documentation to find the best study method for myself. This is the website you're currently on which I plan to utilize as a dumping ground for my tech related thoughts along with documentation for all services and solutions I aquire knowledge about.

Hosting

Currently this site is hosted using Netlify CI/CD processes to build from my Github repo.

Workflow

The main intentions of this site was to enable me to publish my information for others to use, encourage me to document my knowledge and by proxy requiring me to read over study material such as protocol whitepapers multiple times over, while enjoying it in order to properly format the documents.

Configuration

The webiste is using Vitepress as the SSG (Static Site Generator)

config.js

///config.js
import { generateSidebar } from 'vitepress-sidebar';


export default {
  title: "1500bytes",
  description: "Everything I know.",
  cleanUrls: "true",

  themeConfig: {
    logo: "/logo.png",
    siteTitle: "1500bytes",
    // Search config
    search: [
      { provider: 'local' },
    ],
    // Navbar Link
    nav: [
      { text: "Me", link: "/about-me" },
      { text: "Thoughts", link: "/thoughts/index" },
      { text: "Wiki", link: "/wiki/index" },      
      { text: "Projects", link: "/projects/index" },
      { text: "NetDivide", link: "https://netdivide.1500bytes.com/" },
    ],
    // Social Icons
    socialLinks: [
      { icon: "github", link: "https://github.com/kARAT97" },
      { icon: "instagram", link: "https://www.instagram.com/alex.arnars/" },
      { icon: "linkedin", link: "https://www.linkedin.com/in/alexander-orn-arnarson/" },
    ],
    // Sidebar
    sidebar: generateSidebar([
      {
      documentRootPath: '/docs',
      resolvePath: '/',
      },
      {
      documentRootPath: '/docs',
      rootGroupText: 'Thoughts',
      rootGroupLink: 'thoughts/index',
      scanStartPath: '/thoughts',      
      resolvePath: '/thoughts/',
      hyphenToSpace: 'true',
      capitalizeFirst: 'true',
      },
      {
      documentRootPath: '/docs',
      rootGroupLink: 'wiki/index',
      scanStartPath: '/wiki',
      resolvePath: '/wiki/',
      hyphenToSpace: 'true',
      capitalizeFirst: 'true',
      convertSameNameSubFileToGroupIndexPage: 'true',    
      collapseDepth: '2',
      keepMarkdownSyntaxFromTitle: 'true',
      sortMenusByFrontmatterOrder: 'true',
      }
    ]),

    markdown: {
      theme: "material-palenight",
      lineNumbers: true,
    },
  },
};

custom.css

css

@import url(https://fonts.googleapis.com/css?family=Space+Mono:regular,italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:regular,italic,700,700italic);

:root {
  --vp-c-brand: #ff7340;
  --vp-c-brand-light: #ff5719;
  --vp-c-brand-lighter: #ff7340;
  --vp-c-brand-lighter: rgba(255, 135, 23, 0.25);
  --vp-c-brand-dark: #ff622d;
  --vp-c-brand-darker: #e23c00;

  --vp-c-sponsor: #fd1d7c;

  /* Typography */
  --vp-font-family-base: "Space Grotesk", "Inter var experimental", "Inter var",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  /* Code Snippet font */
  --vp-font-family-mono: "Space Mono", Menlo, Monaco, Consolas, "Courier New",
    monospace;
  /* Sidebar with modification */
  --vp-sidebar-width: 310px;
}

/* Custom Stlye */
.custom-layout {
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  min-height: 400px;
  max-width: 750px;
  margin: 6rem auto 0;
  border-radius: 10px;
}

.custom-layout h1 {
  font-size: 2.2rem;
  font-weight: 600;
}

.custom-layout h2 {
  font-size: 1.2rem;
  font-weight: 600;
  align-items: left;
  justify-content: left;
  text-align: left;
}

.custom-layout .btn {
  background-color: var(--vp-button-brand-bg);
  color: var(--vp-button-brand-text);
  border-radius: 20px;
  padding: 0.5rem 1.4rem;
}




/* Wiki index left box Style */
.wiki-index-b1-layout {
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  text-align: center;
  gap: 1rem;
  min-height: 300px;
  max-width: 150px;
  margin: 6rem auto 0;
  border-radius: 10px;
}

.wiki-index-layout h1 {
  font-size: 1.5rem;
  font-weight: 600;
}

.wiki-index-layout h2 {
  font-size: 1.0rem;
  font-weight: 400;
  align-items: left;
  justify-content: left;
  text-align: left;
}


/* Wiki index center box Style */
.wiki-index-b2-layout {
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  text-align: center;
  gap: 1rem;
  min-height: 300px;
  max-width: 150px;
  margin: 6rem auto 0;
  border-radius: 10px;
}

.wiki-index-layout h1 {
  font-size: 1.5rem;
  font-weight: 600;
}

.wiki-index-layout h2 {
  font-size: 1.0rem;
  font-weight: 400;
  align-items: left;
  justify-content: left;
  text-align: left;
}


/* Wiki index right box Style */
.wiki-index-b3-layout {
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  text-align: center;
  gap: 1rem;
  min-height: 300px;
  max-width: 150px;
  margin: 6rem auto 0;
  border-radius: 10px;
}

.wiki-index-layout h1 {
  font-size: 1.5rem;
  font-weight: 600;
}

.wiki-index-layout h2 {
  font-size: 1.0rem;
  font-weight: 400;
  align-items: left;
  justify-content: left;
  text-align: left;
}




/* Feature boxes test style */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: var(--vp-c-bg-soft);
    color: var(--vp-c-text-1);
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
  .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}





.timecontainer {
    width: 60%;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.timecontainer::before {
    position: absolute;
    left: 50%;
    content: '';
    width: 5px;
    height: 100%;
    background-color: rgb(30, 30, 32);
    border-radius: 5px;
}

.entry {
    margin: 50px 10px;
    position: relative;
}

.timeindicator {
    position: absolute;
    top: -5px;
    left: calc(50% - 5px);
    width: 15px;
    height: 15px;
    background-color: rgba(247, 89, 16);
    border-radius: 50%;
}

.timeindicator span {
    position: relative;
    top: -5px;
    width: 7px;
    height: 7px;
    display: inline-block;
    background-color: rgb(247, 89, 16);
    border-radius: 50%;
}

.timecontent {
    width: 200px;
    margin: 0 auto;
    transform: translate(-58%, -9px);
    font-size: 14px;
    text-align: right;
}

.entry:nth-child(odd) .timecontent {
    text-align: left;
    transform: translate(60%, -9px);
}

.timecontent span {
    font-weight: 500;
    font-size: 16px;
    display: block;
    color: rgb(250, 112, 49);
}

.time {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-130%, -48%);
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 25px;
    background-color: rgb(250, 112, 49);
    color: white;
    display: inline-block;
}

.entry:nth-child(even) .time {
    transform: translate(40%, -48%);
}

@media only screen and (max-width: 600px) {
    .timecontainer {
        margin: 0;
    }

    .entry:nth-child(even) .timecontent, .entry:nth-child(odd) .timecontent {
        text-align: left;
        transform: translate(60%, -9px);
    }

    .entry:nth-child(even) .time, .entry:nth-child(odd) .time {
        transform: translate(-130%, -48%);
    }
}

Folder tree

Root
├── docs (Publish directory)
│   ├── .vitepress (Vitepress configuration directory)
│   ├── projects (Directory for Project pages)
│   ├── public (Media directory)
│   ├── thoughts (Directory for thoughts)
│   └── wiki (Directory for Wiki)
└── node_modules (Node.js Modules)

1500bytes ​

Hosting ​

Workflow ​

Configuration ​

Folder tree ​

1500bytes

Hosting

Workflow

Configuration

Folder tree