astro

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ master ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v3
+      - name: Install, build, and upload your site
+        uses: withastro/action@v1
+        with:
+          node-version: 20
+          package-manager: bun@latest
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1,20 @@
+# build output
+dist/
+.output/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

astro.config.mjs

@@ -0,0 +1,23 @@
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+import mdx from '@astrojs/mdx';
+import remarkGfm from 'remark-gfm';
+import remarkSmartypants from 'remark-smartypants';
+import rehypeExternalLinks from 'rehype-external-links';
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://bolton.dev',
+  integrations: [mdx(), svelte(), tailwind()],
+  markdown: {
+    shikiConfig: {
+      theme: 'nord'
+    },
+    remarkPlugins: [remarkGfm, remarkSmartypants],
+    rehypePlugins: [[rehypeExternalLinks, {
+      target: '_blank'
+    }]]
+  }
+});

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bytecraft",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "bunx astro dev",
+    "preinstall": "npx only-allow bun",
+    "start": "bunx astro dev",
+    "build": "bunx astro check && astro build",
+    "preview": "bunx astro preview",
+    "astro": "bunx astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.4.1",
+    "@astrojs/mdx": "^2.0.0",
+    "@astrojs/svelte": "^5.0.3",
+    "@astrojs/tailwind": "^5.1.0",
+    "@types/bun": "^1.0.2",
+    "astro": "^4.0.1",
+    "daisyui": "^4.6.0",
+    "reading-time": "^1.5.0",
+    "rehype-external-links": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-smartypants": "^2.0.0",
+    "sass": "^1.70.0",
+    "svelte": "^5.0.0-next.37",
+    "svelte-preprocess": "^5.1.3",
+    "tailwindcss": "^3.0.24",
+    "typescript": "^5.3.3"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}

src/components/BaseHead.astro

@@ -0,0 +1,55 @@
+---
+import { ViewTransitions } from 'astro:transitions'
+import '../styles/global.sass'
+
+export interface Props {
+  title: string
+  description: string
+  permalink: string
+}
+
+const { title, description, permalink } = Astro.props
+const socialUrl = Astro.site.href + 'assets/images/pixelmonk.png'
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={permalink} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={socialUrl} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={permalink} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+<meta property="twitter:image" content={socialUrl} />
+
+<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Roboto+Slab:400,100,300,700" rel="stylesheet" />
+
+<ViewTransitions />
+
+<!-- This is intentionally inlined to avoid FOUC -->
+<script is:inline>
+  const root = document.documentElement
+  const theme = localStorage.getItem('theme')
+  if (
+    theme === 'dark' ||
+    (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    root.classList.add('theme-dark')
+  } else {
+    root.classList.remove('theme-dark')
+  }
+</script>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/BaseLayout.astro

@@ -0,0 +1,21 @@
+---
+import BaseHead from '../components/BaseHead.astro';
+
+export interface Props {
+  title: string;
+  description: string;
+  permalink: string;
+  current?: string;
+}
+const { title, description, permalink, current } = Astro.props;
+---
+<html lang="en">
+<head>
+  <BaseHead title={title} description={description} permalink={permalink} />
+</head>
+<body class="index">
+    <main>
+      <slot />
+    </main>
+</body>
+</html>

src/pages/index.astro

@@ -0,0 +1,59 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const title = 'Chris Bolton';
+const description = 'Your local software engineer, travel bug, creative, and entrepreneur.';
+const permalink = Astro.site.href;
+---
+
+<BaseLayout title={title} description={description} permalink={permalink}>
+    <div class="bg" id="bg-1">
+        <div class="inner-container bg">
+            <div id="top-content">
+                <div class="name">Chris Bolton</div>
+                <div class="tagline">Your local software engineer, travel bug, creative, and entrepreneur.</div>
+                <div class="social">
+                    <a href="https://twitter.com/thepixelmonk" target="_blank"><img src="/assets/images/twitter.png" /></a>
+                    <a href="https://github.com/thepixelmonk" target="_blank"><img src="/assets/images/github.png" /></a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bg" id="bg-2">
+        <div class="content">
+            <p>Hi there. My name is <span>Chris Bolton</span>.</p>
+            <br />
+            <p>I'm a software developer and serial entrepreneur, addicted to making <span>cool stuff </span>with <span>awesome people</span>.</p>
+            <br />
+            <p>
+                Feel free to check out my <a class="bold" href="https://drive.google.com/file/d/1YaonKD2nAWDQm7P0xu6muNLK5KLXF0DS/view?usp=sharing" target="_blank">resume</a> and send me an
+                <a class="bold" href="mailto:[email protected]">email </a>if you'd like to chat.
+            </p>
+        </div>
+    </div>
+    <div class="bg" id="bg-5">
+        <div class="content">
+            <div class="title">
+                <div class="typcn typcn-user"></div>
+                <div class="text">About me</div>
+            </div>
+            <div id="about">
+                <div class="blurb">
+                    <div class="logo">
+                        <div class="typcn typcn-code"></div>
+                        <div class="text">
+                            Primarily, I do <span>full-stack web development </span>and have dabbled in mobile apps. Broadly, I'm interested in most aspects of software development and hope to get more into
+                            <span>computer science </span>and <span>data mining </span>in the coming months. If that sounds interesting to you, check out what I've been working on recently.
+                        </div>
+                    </div>
+                </div>
+                <div class="blurb">
+                    <div class="logo">
+                        <div class="typcn typcn-social-github"></div>
+                        <div class="text">I'm a bit of an <span>open web evangelist</span>, and an <span>open source fanatic</span>. I believe that open source empowers people to stop complaining and start fixing problems.</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</BaseLayout>