Compare commits

...

1 Commits

Author SHA1 Message Date
0c1bd5218b feat(next): started porting over from dioxus to nextjs 2025-05-08 17:19:55 -06:00
63 changed files with 11485 additions and 100 deletions

50
.gitignore vendored
View File

@ -1,7 +1,45 @@
# Generated by Cargo # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# will have compiled files and executables
/target
.DS_Store
# These are backup files generated by rustfmt # dependencies
**/*.rs.bk /node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# wrangler files
.wrangler
.dev.vars*

5
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"files.associations": {
"wrangler.json": "jsonc"
}
}

145
README.md
View File

@ -1,110 +1,67 @@
<h2 align="left">Hi! My name is Brock and I'm a Full-stack web developer, I am passionate about bringing the backend to low-cost high availably self-hosted servers</h2> This is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
### ## Getting Started
<div align="left"> First, run the development server:
<img src="https://github-readme-stats.vercel.app/api?username=darkicewolf50&hide_title=false&hide_rank=false&show_icons=true&include_all_commits=true&count_private=true&disable_animations=false&theme=dracula&locale=en&hide_border=false" height="150" alt="stats graph" />
<img src="https://github-readme-stats.vercel.app/api/top-langs?username=darkicewolf50&locale=en&hide_title=false&layout=compact&card_width=320&langs_count=5&theme=dracula&hide_border=false" height="150" alt="languages graph" />
</div>
### ```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
<img align="right" height="120" src="https://media.tenor.com/dEoasElm-JgAAAAM/helldivers2-helldiver.gif" /> Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### ## Cloudflare integration
<div align="left"> Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" height="30" alt="rust logo" /> - `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
<img width="12" /> - `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
<img src="https://skillicons.dev/icons?i=actix" height="30" alt="actix logo" /> - `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" height="30" alt="python logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/fastapi/fastapi-original.svg" height="30" alt="fastapi logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" height="30" alt="react logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" height="30" alt="html5 logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" height="30" alt="css3 logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" height="30" alt="javascript logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" height="30" alt="c logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg" height="30" alt="cplusplus logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" height="30" alt="git logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" height="30" alt="github logo" />
<img width="12" />
<img src="https://cdn.simpleicons.org/githubactions/2088FF" height="30" alt="githubactions logo" />
<img width="12">
<img src="https://img.shields.io/badge/Gitea-34495E?style=for-the-badge&logo=gitea&logoColor=5D9425" height="30" alt="gitea logo">
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-line-wordmark.svg" height="30" alt="amazonwebservices logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/terraform/terraform-original.svg" height="30" alt="terraform logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg" height="30" alt="kubernetes logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" height="30" alt="docker logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/raspberrypi/raspberrypi-original.svg" height="30" alt="raspberrypi logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg" height="30" alt="nginx logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg" height="30" alt="vscode logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firefox/firefox-original.svg" height="30" alt="firefox logo" />
<img width="12" />
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg" height="30" alt="markdown logo" />
![Prettier](https://img.shields.io/badge/prettier-%23F7B93E.svg?style=for-the-badge&logo=prettier&logoColor=black) > __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md#recommended-development-workflow))
![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)
![AmazonDynamoDB](https://img.shields.io/badge/Amazon%20DynamoDB-4053D6?style=for-the-badge&logo=Amazon%20DynamoDB&logoColor=white)
![Cloudflare](https://img.shields.io/badge/Cloudflare-F38020?style=for-the-badge&logo=Cloudflare&logoColor=white)
![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7)
![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)
![Pandas](https://img.shields.io/badge/pandas-%23150458.svg?style=for-the-badge&logo=pandas&logoColor=white)
![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)
</div> ### Bindings
### Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
<div align="left"> You can use bindings during development, when previewing locally your application and of course in the deployed application:
<a href="https://www.youtube.com/@darkicewolf50" target="_blank">
<img src="https://img.shields.io/static/v1?message=Youtube&logo=youtube&label=&color=FF0000&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="youtube logo" />
</a>
<a href="https://www.instagram.com/darkicewolf50/" target="_blank">
<img src="https://img.shields.io/static/v1?message=Instagram&logo=instagram&label=&color=E4405F&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="instagram logo" />
</a>
<a href="https://www.instagram.com/darkicewolf50/" target="_blank">
<img src="https://img.shields.io/static/v1?message=Twitch&logo=twitch&label=&color=9146FF&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="twitch logo" />
</a>
<a href="darkicewolf50" target="_blank">
<img src="https://img.shields.io/static/v1?message=Discord&logo=discord&label=&color=7289DA&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="discord logo" />
</a>
<a href="darkicewolf50@gmail.com" target="_blank">
<img src="https://img.shields.io/static/v1?message=Gmail&logo=gmail&label=&color=D14836&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="gmail logo" />
</a>
<a href="https://www.linkedin.com/in/brock-tomlinson/" target="_blank">
<img src="https://img.shields.io/static/v1?message=LinkedIn&logo=linkedin&label=&color=0077B5&logoColor=white&labelColor=&style=for-the-badge" height="35" alt="linkedin logo" />
</a>
</div>
### - To use bindings in dev mode you need to define them in the `next.config.js` file under `setupDevBindings`, this mode uses the `next-dev` `@cloudflare/next-on-pages` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/darkicewolf50/darkicewolf50/output/github-snake-dark.svg" />
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/darkicewolf50/darkicewolf50/output/github-snake.svg" />
<img alt="github-snake" src="https://raw.githubusercontent.com/darkicewolf50/darkicewolf50/output/github-snake.svg" />
</picture>
### - To use bindings in the preview mode you need to add them to the `pages:preview` script accordingly to the `wrangler pages dev` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
- To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
![](https://github-profile-trophy.vercel.app/?username=darkicewolf50&theme=radical&no-frame=false&no-bg=false&margin-w=4) #### KV Example
![](https://quotes-github-readme.vercel.app/api?type=horizontal&theme=radical) `c3` has added for you an example showing how you can use a KV binding.
In order to enable the example:
- Search for javascript/typescript lines containing the following comment:
```ts
// KV Example:
```
and uncomment the commented lines below it (also uncomment the relevant imports).
- In the `wrangler.jsonc` file add the following configuration line:
```
"kv_namespaces": [{ "binding": "MY_KV_NAMESPACE", "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }],
```
- If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
```bash
npm run cf-typegen
# or
yarn cf-typegen
# or
pnpm cf-typegen
# or
bun cf-typegen
```
After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.
Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV_NAMESPACE` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.

14
eslint.config.mjs Normal file
View File

@ -0,0 +1,14 @@
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [...compat.extends("next/core-web-vitals")];
export default eslintConfig;

7
jsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}

16
next.config.mjs Normal file
View File

@ -0,0 +1,16 @@
import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
// Here we use the @cloudflare/next-on-pages next-dev module to allow us to
// use bindings during local development (when running the application with
// `next dev`). This function is only necessary during development and
// has no impact outside of that. For more information see:
// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
setupDevPlatform().catch(console.error);
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
trailingSlash: true, // optional: ensures all paths end with /
};
export default nextConfig;

7
old dioxus/.gitignore vendored Normal file
View File

@ -0,0 +1,7 @@
# Generated by Cargo
# will have compiled files and executables
/target
.DS_Store
# These are backup files generated by rustfmt
**/*.rs.bk

View File

View File

Before

Width:  |  Height:  |  Size: 130 KiB

After

Width:  |  Height:  |  Size: 130 KiB

View File

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

10639
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

28
package.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "personal-site",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"pages:build": "npx @cloudflare/next-on-pages",
"preview": "npm run pages:build && wrangler pages dev",
"deploy": "npm run pages:build && wrangler pages deploy"
},
"dependencies": {
"next": "15.3.2",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@cloudflare/next-on-pages": "^1.13.12",
"@cloudflare/workers-types": "^4.20250508.0",
"@eslint/eslintrc": "^3",
"eslint": "^9",
"eslint-config-next": "15.3.1",
"vercel": "^41.7.3",
"wrangler": "^4.14.4"
}
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

1
public/file.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 391 B

1
public/globe.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

1
public/next.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

1
public/vercel.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 128 B

1
public/window.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

After

Width:  |  Height:  |  Size: 385 B

53
src/app/home.css Normal file
View File

@ -0,0 +1,53 @@
#home-intro {
display: flex;
flex-direction: column;
width: 90%;
margin-top: 2svh;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
#home-intro h1 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
display: flex;
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
#home-intro p {
margin: 1svh 4svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
.technologies {
display: flex;
flex-direction: column;
}
.technologies-cat {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
column-gap: 1svw;
row-gap: 1svh;
}
#experience {
display: flex;
flex-direction: column;
margin-bottom: 4svh;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
#experience div {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
margin: 4svh 0px;
}

33
src/app/layout.js Normal file
View File

@ -0,0 +1,33 @@
import { Geist, Geist_Mono } from "next/font/google";
import "../globals.css";
import Navbar from "@/components/navbar/navbar";
import Ender from "@/components/footer/ender";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata = {
title: "Brock Tomlinson",
description:
"The protfolio site for Brock Tomlinson, it has some blogs, my personal preferences all skill set",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
{/* className={`${geistSans.variable} ${geistMono.variable}`} */}
<body>
<Navbar />
<main>{children}</main>
<Ender />
</body>
</html>
);
}

46
src/app/not-found.js Normal file
View File

@ -0,0 +1,46 @@
import Navbar from "@/components/navbar/navbar";
export const runtime = "edge";
export default function NotFound() {
return (
<>
<title>Brock Tomlinson - Not Found</title>
<Navbar />
</>
);
}
// const styles = {
// error: {
// fontFamily:
// 'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
// height: "100vh",
// textAlign: "center",
// display: "flex",
// flexDirection: "column",
// alignItems: "center",
// justifyContent: "center",
// },
// desc: {
// display: "inline-block",
// },
// h1: {
// display: "inline-block",
// margin: "0 20px 0 0",
// padding: "0 23px 0 0",
// fontSize: 24,
// fontWeight: 500,
// verticalAlign: "top",
// lineHeight: "49px",
// },
// h2: {
// fontSize: 14,
// fontWeight: 400,
// lineHeight: "49px",
// margin: 0,
// },
// };

45
src/app/page.js Normal file
View File

@ -0,0 +1,45 @@
"use client";
import Image from "next/image";
import Ender from "../components/footer/ender";
import "./home.css";
import Link from "next/link";
export default function Home() {
return (
<main>
<div id="home-intro">
<h1> Hi I'm Brock </h1>
<p>
a fourth year Software Engineering Student specializing in full-stack
development with a strong focus on backend technologies. I am
developing the language of how to design, develop, and create programs
that are to industry standards and reasonably efficent. I bring the
lessons learned from each project I have completed, learning from the
mistakes I have made and bringing improved versions forward into the
next project.
</p>
<p>
As of writing this I intend to bring the knowledge learned from my
time at university in Software Engineering onto a Baja SAE car, where
we can collect data remotely and graph data for instantaneous and
future analysis, during vechile operation.
</p>
<p>
I grew up in a small ski town where, I started learning about
programming, from of course Minecraft, where I thought the application
of this was so futuristic and downright cool that I knew I wanted to
persure it further. While living there I spend a majority of my time
outside of school swimming competitively, where I ranked top 10 in BC.
Along with swimming I spend a lot of time volunteering with
fundraising events and coaching the local Special Olympics swim team.
</p>
<p>
I advore problem solving and building cool stuff, I'm happy to jump in
and get started!
<Link href="ContactMe">Let's create something great together!</Link>
</p>
</div>
</main>
);
}

View File

@ -0,0 +1,30 @@
footer {
display: flex;
flex-direction: column;
text-align: center;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
/* background-color: #d3d3d3; */
}
footer div {
display: flex;
flex-direction: row;
flex: 1 1 2;
justify-content: space-evenly;
}
footer img {
height: 60px;
filter: invert() hue-rotate(180deg);
}
footer a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
}

View File

@ -0,0 +1,45 @@
import "./ender.css";
export default function Ender() {
return (
<footer>
<p>Brock Tomlinson © 2025</p>
<div>
<a href="https://github.com/darkicewolf50">
<img
src="https://www.svgrepo.com/show/512317/github-142.svg"
alt="Github's logo"
/>
<p>Github</p>
</a>
<a href="mailto:darkicewolf50@gmail.com">
<img
src="https://www.svgrepo.com/show/491226/email.svg"
alt="Email icon"
/>
<p>Email</p>
</a>
<a href="https://www.linkedin.com/in/brock-tomlinson/">
<img
src="https://www.svgrepo.com/show/521725/linkedin.svg"
alt="LinkedIn's logo"
/>
<p>LinkedIn</p>
</a>
<a href="https://www.twitch.tv/darkicewolf50">
<img
src="https://www.svgrepo.com/show/519925/twitch.svg"
alt="Twitch's logo"
/>
<p>Twitch</p>
</a>
<a href="https://www.youtube.com/@darkicewolf50">
<img
src="https://www.svgrepo.com/show/521936/youtube.svg"
alt="Youtube's logo"
/>
<p>Youtube</p>
</a>
</div>
</footer>
);
}

View File

@ -0,0 +1,16 @@
#navbar {
display: flex;
flex-direction: row;
}
#navbar a {
color: #ffffff;
margin-right: 20px;
text-decoration: none;
transition: color 0.2s ease;
}
#navbar a:hover {
cursor: pointer;
color: #91a4d2;
}

View File

@ -0,0 +1,13 @@
import Link from "next/link";
import "./navbar.css";
export default function Navbar() {
return (
<div id="navbar">
<Link href="/">Home</Link>
<Link href="/projects">Projects</Link>
<Link href="/blogs/0">Blogs</Link>
<Link href="/Contact">Contact</Link>
</div>
);
}

169
src/globals.css Normal file
View File

@ -0,0 +1,169 @@
:root {
--underlineTitle: 4px solid purple;
--underlineTitleBorderRadius: 4px;
--img-width: 32px;
--img-height: 32px;
--card-background-color: rgba(38, 38, 38, 0.5);
--card-border-radius: 0.5rem;
}
body {
background-color: #0f1116;
color: #ffffff;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
h2 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
display: flex;
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
/*
p {
width: 90%;
margin: 2svh 0px;
margin-left: 2svw;
padding-left: 2svw;
padding-bottom: 1svh;
} */
#hero {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#links {
width: 400px;
text-align: left;
font-size: x-large;
color: white;
display: flex;
flex-direction: column;
}
#links a {
color: white;
text-decoration: none;
margin-top: 20px;
margin: 10px 0px;
border: white 1px solid;
border-radius: 5px;
padding: 10px;
}
#links a:hover {
background-color: #1f1f1f;
cursor: pointer;
}
#header {
max-width: 1200px;
}
/* /* :root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
} */
/*
body {
background-color: #0f1116;
color: #ffffff;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
h2 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
display: flex;
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}*/
/*
p {
width: 90%;
margin: 2svh 0px;
margin-left: 2svw;
padding-left: 2svw;
padding-bottom: 1svh;
} */
/*
#hero {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#links {
width: 400px;
text-align: left;
font-size: x-large;
color: white;
display: flex;
flex-direction: column;
}
#links a {
color: white;
text-decoration: none;
margin-top: 20px;
margin: 10px 0px;
border: white 1px solid;
border-radius: 5px;
padding: 10px;
}
#links a:hover {
background-color: #1f1f1f;
cursor: pointer;
}
#header {
max-width: 1200px;
} */

169
src/page.module.css Normal file
View File

@ -0,0 +1,169 @@
/* .page {
--gray-rgb: 0, 0, 0;
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
--button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2;
display: grid;
grid-template-rows: 20px 1fr 20px;
align-items: center;
justify-items: center;
min-height: 100svh;
padding: 80px;
gap: 64px;
font-family: var(--font-geist-sans);
}
@media (prefers-color-scheme: dark) {
.page {
--gray-rgb: 255, 255, 255;
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
--button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a;
}
}
.main {
display: flex;
flex-direction: column;
gap: 32px;
grid-row-start: 2;
}
.main ol {
font-family: var(--font-geist-mono);
padding-left: 0;
margin: 0;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
list-style-position: inside;
}
.main li:not(:last-of-type) {
margin-bottom: 8px;
}
.main code {
font-family: inherit;
background: var(--gray-alpha-100);
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
.ctas {
display: flex;
gap: 16px;
}
.ctas a {
appearance: none;
border-radius: 128px;
height: 48px;
padding: 0 20px;
border: none;
border: 1px solid transparent;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
a.primary {
background: var(--foreground);
color: var(--background);
gap: 8px;
}
a.secondary {
border-color: var(--gray-alpha-200);
min-width: 158px;
}
.footer {
grid-row-start: 3;
display: flex;
gap: 24px;
}
.footer a {
display: flex;
align-items: center;
gap: 8px;
}
.footer img {
flex-shrink: 0;
}
/* Enable hover only on non-touch devices */
/*
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
border-color: transparent;
}
a.secondary:hover {
background: var(--button-secondary-hover);
border-color: transparent;
}
.footer a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
} */
/*
@media (max-width: 600px) {
.page {
padding: 32px;
padding-bottom: 80px;
}
.main {
align-items: center;
}
.main ol {
text-align: center;
}
.ctas {
flex-direction: column;
}
.ctas a {
font-size: 14px;
height: 40px;
padding: 0 16px;
}
a.secondary {
min-width: auto;
}
.footer {
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
} */
/*
@media (prefers-color-scheme: dark) {
.logo {
filter: invert();
}
} */

50
wrangler.jsonc Normal file
View File

@ -0,0 +1,50 @@
/**
* For more details on how to configure Wrangler, refer to:
* https://developers.cloudflare.com/workers/wrangler/configuration/
*/
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "personal-site",
"compatibility_date": "2025-05-08",
"compatibility_flags": [
"nodejs_compat"
],
"pages_build_output_dir": ".vercel/output/static",
"observability": {
"enabled": true
}
/**
* Smart Placement
* Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
*/
// "placement": { "mode": "smart" },
/**
* Bindings
* Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
* databases, object storage, AI inference, real-time communication and more.
* https://developers.cloudflare.com/workers/runtime-apis/bindings/
*/
/**
* Environment Variables
* https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
*/
// "vars": { "MY_VARIABLE": "production_value" },
/**
* Note: Use secrets to store sensitive data.
* https://developers.cloudflare.com/workers/configuration/secrets/
*/
/**
* Static Assets
* https://developers.cloudflare.com/workers/static-assets/binding/
*/
// "assets": { "directory": "./public/", "binding": "ASSETS" },
/**
* Service Bindings (communicate between multiple Workers)
* https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
*/
// "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
}