Compare commits
13 Commits
f2e479acc7
...
nextjsRefr
| Author | SHA1 | Date | |
|---|---|---|---|
| 0c1bd5218b | |||
| 4f5eff6cdb | |||
| 3bd2c4041b | |||
| fdea3d2f15 | |||
| 03082a1904 | |||
| 8ab01ca725 | |||
| 05cb8cfc73 | |||
| b79c109876 | |||
| 4d1e45359c | |||
| 33c933d455 | |||
| c5fa636b39 | |||
| c286ebaa5f | |||
| 25238dea05 |
2
.github/workflows/githubPages.yml
vendored
2
.github/workflows/githubPages.yml
vendored
@ -3,7 +3,7 @@ name: github pages
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
- masasasasdasdasd
|
||||
|
||||
jobs:
|
||||
build-deploy:
|
||||
|
||||
50
.gitignore
vendored
50
.gitignore
vendored
@ -1,7 +1,45 @@
|
||||
# Generated by Cargo
|
||||
# will have compiled files and executables
|
||||
/target
|
||||
.DS_Store
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# These are backup files generated by rustfmt
|
||||
**/*.rs.bk
|
||||
# dependencies
|
||||
/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
5
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"files.associations": {
|
||||
"wrangler.json": "jsonc"
|
||||
}
|
||||
}
|
||||
145
README.md
145
README.md
@ -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">
|
||||
<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>
|
||||
First, run the development server:
|
||||
|
||||
###
|
||||
```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">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" height="30" alt="rust logo" />
|
||||
<img width="12" />
|
||||
<img src="https://skillicons.dev/icons?i=actix" height="30" alt="actix logo" />
|
||||
<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" />
|
||||
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:
|
||||
- `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
|
||||
- `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
|
||||
- `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> __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))
|
||||
|
||||
</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">
|
||||
<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>
|
||||
You can use bindings during development, when previewing locally your application and of course in the deployed application:
|
||||
|
||||
###
|
||||
<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 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).
|
||||
|
||||
###
|
||||
- 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/).
|
||||
|
||||
|
||||
#### KV Example
|
||||
|
||||
|
||||
`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.
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
:root {
|
||||
--underlineTitle: 4px solid purple;
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
:root {
|
||||
--tech-gap: 4svw;
|
||||
}
|
||||
.tech-cat {
|
||||
border: 1px solid salmon;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 4svw;
|
||||
}
|
||||
.tech-cat h3 {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
border-bottom: var(--underlineTitle);
|
||||
margin: 2svh 0px;
|
||||
margin-left: 4svw;
|
||||
padding-left: 2svw;
|
||||
padding-bottom: 1svh;
|
||||
}
|
||||
|
||||
.tech-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--tech-gap);
|
||||
}
|
||||
|
||||
.tech-card {
|
||||
border: 1px solid whitesmoke;
|
||||
flex: 0 1 calc(33.3% - var(--tech-gap));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: 1svh;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.tech-card img {
|
||||
/* height: 40px; */
|
||||
padding-top: 2svh;
|
||||
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tech-card progress {
|
||||
width: 90%;
|
||||
margin-bottom: 0.5svh;
|
||||
overflow: hidden;
|
||||
appearance: none;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* for chromium browsers */
|
||||
.tech-card progress::-webkit-progress-value {
|
||||
background-color: steelblue;
|
||||
/* border-radius: 999px; */
|
||||
}
|
||||
|
||||
/* for firefox browsers */
|
||||
.tech-card progress::-moz-progress-bar {
|
||||
background-color: steelblue;
|
||||
/* border-radius: 999px; */
|
||||
}
|
||||
14
eslint.config.mjs
Normal file
14
eslint.config.mjs
Normal 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
7
jsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
16
next.config.mjs
Normal file
16
next.config.mjs
Normal 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
7
old dioxus/.gitignore
vendored
Normal 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
|
||||
2
Cargo.lock → old dioxus/Cargo.lock
generated
2
Cargo.lock → old dioxus/Cargo.lock
generated
@ -3040,7 +3040,7 @@ checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e"
|
||||
|
||||
[[package]]
|
||||
name = "personal_site"
|
||||
version = "0.1.0"
|
||||
version = "1.0.0"
|
||||
dependencies = [
|
||||
"dioxus",
|
||||
]
|
||||
@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "personal_site"
|
||||
version = "0.1.0"
|
||||
version = "1.0.0"
|
||||
authors = ["darkicewolf50 <brock.tomlinson@ucalgary.ca>"]
|
||||
edition = "2021"
|
||||
|
||||
|
Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 130 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
36
old dioxus/assets/styling/blog.css
Normal file
36
old dioxus/assets/styling/blog.css
Normal file
@ -0,0 +1,36 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blogs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80svh;
|
||||
}
|
||||
|
||||
#blogs h1 {
|
||||
border-bottom: var(--underlineTitle);
|
||||
border-radius: var(--underlineTitleBorderRadius);
|
||||
}
|
||||
|
||||
#blogs button {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-size: xx-large;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#blogs a {
|
||||
text-decoration: none;
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
@ -3,20 +3,27 @@
|
||||
flex-direction: row;
|
||||
gap: 2svw;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#contact img {
|
||||
flex: 1 1 50%;
|
||||
border-radius: 100%;
|
||||
max-width: 40%;
|
||||
object-fit: cover;
|
||||
max-height: 250px;
|
||||
display: block;
|
||||
background-color: var(--card-background-color);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#contact div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* flex: 0 0 48%; */
|
||||
}
|
||||
|
||||
#contact div div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
#contact div ul {
|
||||
@ -46,9 +53,14 @@
|
||||
}
|
||||
|
||||
#contact div ul li {
|
||||
justify-content: flex-start;
|
||||
|
||||
border: 1px solid whitesmoke;
|
||||
/* display: flex;
|
||||
justify-content: flex-start; */
|
||||
/* text-wrap: nowrap; */
|
||||
padding-right: 1svw;
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
/* border: 1px solid whitesmoke; */
|
||||
padding: 0.5svh 1svw;
|
||||
}
|
||||
|
||||
#contact div ul li a {
|
||||
@ -68,7 +80,22 @@
|
||||
}
|
||||
|
||||
#contact ul li img {
|
||||
height: 80px;
|
||||
height: var(--img-width);
|
||||
width: var(--img-height);
|
||||
object-fit: contain;
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
filter: invert() hue-rotate(180deg);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
#contact ul li img {
|
||||
display: none;
|
||||
}
|
||||
#contact img {
|
||||
border-radius: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 250px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
111
old dioxus/assets/styling/contactme.css
Normal file
111
old dioxus/assets/styling/contactme.css
Normal file
@ -0,0 +1,111 @@
|
||||
#ContactMe {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
column-gap: 2svw;
|
||||
row-gap: 4svh;
|
||||
min-height: 70svh;
|
||||
margin-top: 4svh;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#ContactMe div {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#ContactMe p {
|
||||
margin: 2svh 2svw;
|
||||
padding: 0svh 2svw;
|
||||
}
|
||||
|
||||
#contact-me {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: transparent;
|
||||
border-radius: 0px;
|
||||
margin: 2svh 0.5svw;
|
||||
padding: 0svh 1svw;
|
||||
}
|
||||
|
||||
#contact-me input {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.5);
|
||||
border-width: 2px;
|
||||
padding: 1svh 0svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#contact-me textarea {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.4);
|
||||
border-width: 2px;
|
||||
padding: 1svh 0svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
min-height: 25svh;
|
||||
}
|
||||
|
||||
#contact-me button {
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.5);
|
||||
padding: 1svh 0svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
background-color: rgba(0, 128, 0, 0.6);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
#ContactMe form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: transparent;
|
||||
border-radius: 0px;
|
||||
margin: 2svh 0.5svw;
|
||||
padding: 0svh 1svw;
|
||||
}
|
||||
|
||||
#ContactMe input {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.5);
|
||||
border-width: 2px;
|
||||
padding: 1svh 0svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#ContactMe textarea {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.4);
|
||||
border-width: 2px;
|
||||
padding: 1svh 0svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
min-height: 25svh;
|
||||
}
|
||||
|
||||
#ContactMe button {
|
||||
border-radius: var(--card-border-radius);
|
||||
border-color: rgba(245, 245, 245, 0.5);
|
||||
padding: 1svh 0svw;
|
||||
margin: 1svh 0.5svw;
|
||||
color: inherit;
|
||||
align-items: start;
|
||||
background-color: rgba(0, 128, 0, 0.6);
|
||||
border-color: transparent;
|
||||
}
|
||||
@ -3,26 +3,28 @@ footer {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
background-color: #d3d3d3;
|
||||
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-between;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
footer img {
|
||||
height: 100px;
|
||||
height: 60px;
|
||||
filter: invert() hue-rotate(180deg);
|
||||
}
|
||||
|
||||
footer a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
border: 1px solid lightgray;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
86
old dioxus/assets/styling/experience.css
Normal file
86
old dioxus/assets/styling/experience.css
Normal file
@ -0,0 +1,86 @@
|
||||
.experience-comp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
|
||||
/* flex-basis: 50%; */
|
||||
}
|
||||
|
||||
.experience-comp h3 {
|
||||
display: flex;
|
||||
/* width: 90%; */
|
||||
border-bottom: var(--underlineTitle);
|
||||
border-radius: var(--underlineTitleBorderRadius);
|
||||
margin: 2svh 2svw;
|
||||
padding: 0svh 2svw;
|
||||
padding-bottom: 1svh;
|
||||
}
|
||||
|
||||
.experience-comp table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0svh 0px;
|
||||
}
|
||||
|
||||
.experience-comp td {
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
padding: 0.25svh 2svw;
|
||||
}
|
||||
.experience-comp tr:nth-child(even) td {
|
||||
padding-bottom: 2svh;
|
||||
}
|
||||
|
||||
.postion {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
.date-location {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
.symbol {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.symbol[rowspan]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
background-color: rgb(120, 120, 120);
|
||||
transform: translateX(-50%);
|
||||
z-index: 0;
|
||||
}
|
||||
.symbol::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: inline-block;
|
||||
background-color: rgb(120, 120, 120);
|
||||
border-radius: 100%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
tr:nth-child(1) > .symbol::before {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
tr:nth-last-child(2) > .symbol::before {
|
||||
bottom: 50%;
|
||||
}
|
||||
53
old dioxus/assets/styling/home.css
Normal file
53
old dioxus/assets/styling/home.css
Normal 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;
|
||||
}
|
||||
@ -5,13 +5,21 @@ body {
|
||||
margin: 20px;
|
||||
}
|
||||
h2 {
|
||||
width: 80%;
|
||||
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;
|
||||
16
old dioxus/assets/styling/navbar.css
Normal file
16
old dioxus/assets/styling/navbar.css
Normal 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;
|
||||
}
|
||||
27
old dioxus/assets/styling/notFound.css
Normal file
27
old dioxus/assets/styling/notFound.css
Normal file
@ -0,0 +1,27 @@
|
||||
#not-found {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80svh;
|
||||
}
|
||||
|
||||
#not-found h1 {
|
||||
border-bottom: var(--underlineTitle);
|
||||
border-radius: var(--underlineTitleBorderRadius);
|
||||
}
|
||||
|
||||
#not-found button {
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-size: xx-large;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#not-found a {
|
||||
text-decoration: none;
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
99
old dioxus/assets/styling/projectCards.css
Normal file
99
old dioxus/assets/styling/projectCards.css
Normal file
@ -0,0 +1,99 @@
|
||||
.project-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1svw;
|
||||
}
|
||||
.project-card {
|
||||
flex: 0 1 30%;
|
||||
margin-bottom: 3svh;
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.project-card {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card img {
|
||||
max-width: 96%;
|
||||
max-height: 200px;
|
||||
|
||||
justify-self: center;
|
||||
|
||||
margin: 0svh 1svw;
|
||||
padding-top: 1svh;
|
||||
object-fit: contain;
|
||||
color: transparent;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.project-title-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
height: 50px;
|
||||
|
||||
border-bottom: var(--underlineTitle);
|
||||
border-radius: var(--underlineTitleBorderRadius);
|
||||
margin: 0px 2svw;
|
||||
padding: 0px 2svw;
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.project-title-info h3 {
|
||||
margin: 0px;
|
||||
text-align: start;
|
||||
white-space: nowrap;
|
||||
align-self: center;
|
||||
font-weight: normal;
|
||||
text-wrap: wrap;
|
||||
border-radius: var(--underlineTitleBorderRadius);
|
||||
}
|
||||
|
||||
.project-title-info img {
|
||||
height: var(--img-width);
|
||||
width: var(--img-height);
|
||||
margin: 1svh 6px;
|
||||
padding: 0px;
|
||||
filter: invert() hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.project-title-info div {
|
||||
display: flex;
|
||||
gap: 1svw;
|
||||
justify-content: flex-end;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.project-card div p {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
justify-self: center;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.project-tech-logos {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
width: 90%;
|
||||
justify-content: flex-start;
|
||||
column-gap: 0.5svw;
|
||||
row-gap: 1svw;
|
||||
padding-left: 2svw;
|
||||
padding-bottom: 1svh;
|
||||
}
|
||||
|
||||
.project-tech-logos img {
|
||||
aspect-ratio: 1;
|
||||
height: var(--img-width);
|
||||
width: var(--img-height);
|
||||
|
||||
/* flex: 0 1 19%; */
|
||||
}
|
||||
8
old dioxus/assets/styling/standardColoursandFonts.css
Normal file
8
old dioxus/assets/styling/standardColoursandFonts.css
Normal file
@ -0,0 +1,8 @@
|
||||
: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;
|
||||
}
|
||||
85
old dioxus/assets/styling/techs.css
Normal file
85
old dioxus/assets/styling/techs.css
Normal file
@ -0,0 +1,85 @@
|
||||
:root {
|
||||
--tech-gap: 4svw;
|
||||
}
|
||||
.tech-cat {
|
||||
/* border: 1px solid salmon; */
|
||||
padding: 0px 1svw;
|
||||
padding-bottom: 2svh;
|
||||
margin-bottom: 3svh;
|
||||
flex: 1 1 auto;
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
|
||||
.tech-cat h3 {
|
||||
border-bottom: var(--underlineTitle);
|
||||
border-radius: var(--underlineTitleBorderRadius);
|
||||
display: flex;
|
||||
margin: 2svh 2svw;
|
||||
padding: 0svh 2svw;
|
||||
padding-bottom: 1svh;
|
||||
}
|
||||
|
||||
.tech-row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
/* column-gap: 0.5svw; */
|
||||
row-gap: 1svh;
|
||||
}
|
||||
|
||||
.tech-card {
|
||||
/* border: 1px solid whitesmoke; */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
flex: 0 1 70px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding: 0px 0.5svw;
|
||||
padding-top: 2svh;
|
||||
padding-bottom: 0.5svh;
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
|
||||
.tech-card img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
aspect-ratio: 1;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.tech-card progress {
|
||||
width: 90%;
|
||||
margin-bottom: 0.5svh;
|
||||
overflow: hidden;
|
||||
appearance: none;
|
||||
border-radius: 999px;
|
||||
justify-self: flex-end;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.tech-card h4 {
|
||||
margin: 1svh 0.5svw;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* for chromium browsers */
|
||||
.tech-card progress::-webkit-progress-value {
|
||||
background-color: steelblue;
|
||||
/* border-radius: 999px; */
|
||||
}
|
||||
|
||||
/* for firefox browsers */
|
||||
.tech-card progress::-moz-progress-bar {
|
||||
background-color: steelblue;
|
||||
/* border-radius: 999px; */
|
||||
}
|
||||
|
||||
/* 48.19 , 68.58*/
|
||||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
116
old dioxus/src/components/experience.rs
Normal file
116
old dioxus/src/components/experience.rs
Normal file
@ -0,0 +1,116 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const EXPERIENCE_CSS: Asset = asset!("/assets/styling/experience.css");
|
||||
|
||||
#[component]
|
||||
pub fn Experience(professional_jobs: bool) -> Element {
|
||||
let experience: [ExpDes; 4] = match professional_jobs {
|
||||
true => EXPERIENCE_JOBS,
|
||||
false => EXPERIENCE_VOL,
|
||||
};
|
||||
rsx! {
|
||||
div { class: "experience-comp",
|
||||
document::Link { rel: "stylesheet", href: EXPERIENCE_CSS }
|
||||
if professional_jobs {
|
||||
h3 { "Professional" }
|
||||
} else {
|
||||
h3 { "Volunteering" }
|
||||
}
|
||||
table {
|
||||
colgroup {
|
||||
col { class: "symbol" }
|
||||
col { class: "postion" }
|
||||
col { class: "date-location" }
|
||||
}
|
||||
tbody {
|
||||
for exp in experience {
|
||||
tr {
|
||||
td { class: "symbol", rowspan: 2,
|
||||
span { class: "dot", "" }
|
||||
}
|
||||
td { "{exp.postition}" }
|
||||
td { "{exp.start_month} - {exp.end_month}" }
|
||||
}
|
||||
tr {
|
||||
// td { "" }
|
||||
td { "{exp.company}" }
|
||||
td { "{exp.location}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(PartialEq, Props, Clone)]
|
||||
struct ExpDes {
|
||||
pub postition: &'static str,
|
||||
pub company: &'static str,
|
||||
pub location: &'static str,
|
||||
pub start_month: &'static str,
|
||||
pub end_month: &'static str,
|
||||
}
|
||||
|
||||
const EXPERIENCE_JOBS: [ExpDes; 4] = [
|
||||
ExpDes {
|
||||
postition: "Project Coordinator",
|
||||
company: "Rally Engineering",
|
||||
location: "Ab",
|
||||
start_month: "Jan 2025",
|
||||
end_month: "May 2025",
|
||||
},
|
||||
ExpDes {
|
||||
postition: "Project Controller Student",
|
||||
company: "Rally Engineering",
|
||||
location: "Ab",
|
||||
start_month: "May 2024",
|
||||
end_month: "Jan 2025",
|
||||
},
|
||||
ExpDes {
|
||||
postition: "Staff",
|
||||
company: "Red Deer Farmer's Market",
|
||||
location: "Ab",
|
||||
start_month: "Mar 2013",
|
||||
end_month: "Present",
|
||||
},
|
||||
ExpDes {
|
||||
postition: "Staff",
|
||||
company: "Ghostrider Storage",
|
||||
location: "BC",
|
||||
start_month: "Mar 2020",
|
||||
end_month: "Present",
|
||||
},
|
||||
];
|
||||
|
||||
const EXPERIENCE_VOL: [ExpDes; 4] = [
|
||||
ExpDes {
|
||||
postition: "Software Subteam Lead",
|
||||
company: "UCalgary Baja",
|
||||
location: "Ab",
|
||||
start_month: "Sept 2024",
|
||||
end_month: "Present",
|
||||
},
|
||||
ExpDes {
|
||||
postition: "Software, Logistics and Business Sub Team Lead",
|
||||
company: "Schulich Off-Road",
|
||||
location: "Ab",
|
||||
start_month: "May 2023",
|
||||
end_month: "Sept 2024",
|
||||
},
|
||||
ExpDes {
|
||||
postition: "Chassis Junior Member",
|
||||
company: "Schulich Off-Road",
|
||||
location: "Ab",
|
||||
start_month: "Sept 2022",
|
||||
end_month: "May 2023",
|
||||
},
|
||||
ExpDes {
|
||||
postition: "Coaching with Elk Valley Special Olympics",
|
||||
company: "Elk Valley Dolphins",
|
||||
location: "BC",
|
||||
start_month: "May 2019",
|
||||
end_month: "May 2019",
|
||||
},
|
||||
];
|
||||
35
old dioxus/src/components/footer.rs
Normal file
35
old dioxus/src/components/footer.rs
Normal file
@ -0,0 +1,35 @@
|
||||
use std::collections::HashMap;
|
||||
|
||||
use crate::helper_fun::{tech_table_lookup, TechDes};
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const ENDER_CSS: Asset = asset!("/assets/styling/ender.css");
|
||||
|
||||
#[component]
|
||||
pub fn Ender() -> Element {
|
||||
// gets list of items to get
|
||||
let footer_info_to_get = vec!["Github", "Email", "LinkedIn", "Twitch", "Youtube"];
|
||||
|
||||
// used so that I dont need to copy paste the same link/info everywhere
|
||||
let mut footer_info: HashMap<&str, TechDes> = HashMap::new();
|
||||
for used_tech_item in footer_info_to_get {
|
||||
footer_info.insert(used_tech_item, *tech_table_lookup(used_tech_item));
|
||||
}
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: ENDER_CSS }
|
||||
footer {
|
||||
p { "Brock Tomlinson © 2025" }
|
||||
div {
|
||||
for (footer_name , footer_item) in footer_info {
|
||||
a { href: "{footer_item.project_site}",
|
||||
img {
|
||||
src: "{footer_item.tech_logo}",
|
||||
alt: "{footer_name}'s logo/icon",
|
||||
}
|
||||
p { "{footer_name}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const HEADER_SVG: Asset = asset!("/assets/header.svg");
|
||||
// const HEADER_SVG: Asset = asset!("/assets/header.svg");
|
||||
|
||||
#[component]
|
||||
pub fn Hero() -> Element {
|
||||
@ -10,14 +10,16 @@ pub fn Hero() -> Element {
|
||||
// Attributes should be defined in the element before any children
|
||||
id: "hero",
|
||||
// After all attributes are defined, we can define child elements and components
|
||||
img { src: HEADER_SVG, id: "header" }
|
||||
// img { src: HEADER_SVG, id: "header" }
|
||||
div { id: "links",
|
||||
// The RSX macro also supports text nodes surrounded by quotes
|
||||
a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
|
||||
a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
|
||||
a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
|
||||
a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
|
||||
a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
|
||||
a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus",
|
||||
"💫 VSCode Extension"
|
||||
}
|
||||
a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
|
||||
}
|
||||
}
|
||||
@ -6,4 +6,10 @@ mod hero;
|
||||
pub use hero::Hero;
|
||||
|
||||
mod techs;
|
||||
pub use techs::{TechCat, TechDes};
|
||||
pub use techs::TechCat;
|
||||
|
||||
mod footer;
|
||||
pub use footer::Ender;
|
||||
|
||||
mod experience;
|
||||
pub use experience::Experience;
|
||||
34
old dioxus/src/components/techs.rs
Normal file
34
old dioxus/src/components/techs.rs
Normal file
@ -0,0 +1,34 @@
|
||||
use crate::helper_fun::tech_table_lookup;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const TECHS_CSS: Asset = asset!("/assets/styling/techs.css");
|
||||
|
||||
#[component]
|
||||
pub fn TechCard(tech_props: &'static str) -> Element {
|
||||
let props_tech = tech_table_lookup(tech_props);
|
||||
|
||||
rsx! {
|
||||
a { class: "tech-card", href: "{props_tech.project_site}",
|
||||
img { src: "{props_tech.tech_logo}", alt: "{tech_props}'s logo" }
|
||||
h4 { "{tech_props}" }
|
||||
progress { value: props_tech.skill_level, max: 100 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn TechCat(cat: &'static str, tech_vec: Vec<&'static str>) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: TECHS_CSS }
|
||||
div { class: "tech-cat",
|
||||
h3 { "{cat}" }
|
||||
div { class: "tech-row",
|
||||
for tech in tech_vec {
|
||||
TechCard {
|
||||
tech_props: tech,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
272
old dioxus/src/helper_fun.rs
Normal file
272
old dioxus/src/helper_fun.rs
Normal file
@ -0,0 +1,272 @@
|
||||
use dioxus::prelude::*;
|
||||
use std::rc::Rc;
|
||||
|
||||
#[component]
|
||||
pub fn get_tech_logos_from_str(used_tech: &'static str) -> Element {
|
||||
let raw_data: TechDes = *tech_table_lookup(used_tech);
|
||||
rsx! {
|
||||
img { src: "{raw_data.tech_logo}", alt: "{used_tech}'s logo/icon" }
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(PartialEq, Props, Clone, Copy)]
|
||||
pub struct TechDes {
|
||||
pub tech_name: &'static str,
|
||||
pub tech_logo: &'static str,
|
||||
pub project_site: &'static str,
|
||||
pub skill_level: u8,
|
||||
}
|
||||
|
||||
#[derive(PartialEq, Props, Clone)]
|
||||
pub struct ProjectDes {
|
||||
website_prop: Option<&'static str>,
|
||||
github_prop: Option<&'static str>,
|
||||
project_name: &'static str,
|
||||
techs_used: Vec<&'static str>,
|
||||
project_des: &'static str,
|
||||
}
|
||||
|
||||
pub fn tech_table_lookup(to_lookup: &str) -> Rc<TechDes> {
|
||||
let mut tech_to_return: TechDes = TechDes {
|
||||
tech_name: "Not in table",
|
||||
tech_logo: "",
|
||||
project_site: "",
|
||||
skill_level: 0,
|
||||
};
|
||||
|
||||
for tech in TECH_TABLE {
|
||||
if tech.tech_name == to_lookup {
|
||||
tech_to_return = tech.into();
|
||||
}
|
||||
}
|
||||
tech_to_return.into()
|
||||
}
|
||||
|
||||
const TECH_TABLE:[TechDes; 37] = [
|
||||
TechDes {
|
||||
tech_name: "Rust",
|
||||
tech_logo: "https://www.svgrepo.com/show/374056/rust.svg",
|
||||
project_site: "https://www.rust-lang.org",
|
||||
skill_level: 60,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Python",
|
||||
tech_logo: "https://www.svgrepo.com/show/452091/python.svg",
|
||||
project_site: "https://www.python.org",
|
||||
skill_level: 50,
|
||||
},
|
||||
|
||||
TechDes {
|
||||
tech_name: "JavaScript",
|
||||
tech_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
|
||||
project_site: "https://www.python.org",
|
||||
skill_level: 60,
|
||||
},
|
||||
|
||||
TechDes {
|
||||
tech_name: "YAML",
|
||||
tech_logo: "https://yaml.org/favicon.svg",
|
||||
project_site: "https://yaml.org",
|
||||
skill_level: 95,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Github",
|
||||
tech_logo: "https://www.svgrepo.com/show/512317/github-142.svg",
|
||||
project_site: "https://github.com/darkicewolf50",
|
||||
skill_level: 80,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Email",
|
||||
tech_logo: "https://www.svgrepo.com/show/491226/email.svg",
|
||||
project_site: "mailto:darkicewolf50@gmail.com",
|
||||
skill_level: 100,
|
||||
},
|
||||
|
||||
TechDes {
|
||||
tech_name: "LinkedIn",
|
||||
tech_logo: "https://www.svgrepo.com/show/521725/linkedin.svg",
|
||||
project_site: "https://www.linkedin.com/in/brock-tomlinson/",
|
||||
skill_level: 40,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Twitch",
|
||||
tech_logo: "https://www.svgrepo.com/show/519925/twitch.svg",
|
||||
project_site: "https://www.twitch.tv/darkicewolf50",
|
||||
skill_level: 60,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Youtube",
|
||||
tech_logo: "https://www.svgrepo.com/show/521936/youtube.svg",
|
||||
project_site: "https://www.youtube.com/@darkicewolf50",
|
||||
skill_level: 40,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Internet",
|
||||
tech_logo: "https://www.svgrepo.com/show/490809/internet.svg",
|
||||
project_site: "https://google.com",
|
||||
skill_level: 99,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "React",
|
||||
tech_logo: "https://www.svgrepo.com/show/452092/react.svg",
|
||||
project_site: "https://react.dev",
|
||||
skill_level: 70,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Docker",
|
||||
tech_logo: "https://www.svgrepo.com/show/448221/docker.svg",
|
||||
project_site: "https://www.docker.com",
|
||||
skill_level: 70,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "FastAPI",
|
||||
tech_logo: "https://fastapi.tiangolo.com/img/favicon.png",
|
||||
project_site: "https://fastapi.tiangolo.com",
|
||||
skill_level: 80,
|
||||
},
|
||||
|
||||
TechDes {
|
||||
tech_name: "Actix",
|
||||
tech_logo: "https://actix.rs/img/logo.png",
|
||||
project_site: "https://actix.rs",
|
||||
skill_level: 20,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "HTML5",
|
||||
tech_logo: "https://www.svgrepo.com/show/452228/html-5.svg",
|
||||
project_site: "https://google.com",
|
||||
skill_level: 90,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "CSS",
|
||||
tech_logo: "https://www.svgrepo.com/show/452185/css-3.svg",
|
||||
project_site: "https://google.com",
|
||||
skill_level: 65,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Git",
|
||||
tech_logo: "https://www.svgrepo.com/show/452210/git.svg",
|
||||
project_site: "https://git-scm.com",
|
||||
skill_level: 55,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Github Actions",
|
||||
tech_logo: "https://cdn.simpleicons.org/githubactions/2088FF",
|
||||
project_site: "https://github.com/",
|
||||
skill_level: 50,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Vs Code",
|
||||
tech_logo: "https://www.svgrepo.com/show/452129/vs-code.svg",
|
||||
project_site: "https://code.visualstudio.com",
|
||||
skill_level: 60,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Gitea",
|
||||
tech_logo: "https://about.gitea.com/gitea.png",
|
||||
project_site: "https://about.gitea.com",
|
||||
skill_level: 85,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "AWS",
|
||||
tech_logo: "https://www.svgrepo.com/show/448266/aws.svg",
|
||||
project_site: "https://aws.amazon.com",
|
||||
skill_level: 30,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Firefox",
|
||||
tech_logo: "https://www.svgrepo.com/show/378808/firefox-developer-edition-57-70.svg",
|
||||
project_site: "https://www.mozilla.org/en-CA/firefox/developer/",
|
||||
skill_level: 80,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Markdown",
|
||||
tech_logo: "https://www.svgrepo.com/show/510065/markdown.svg",
|
||||
project_site: "https://www.markdownguide.org",
|
||||
skill_level: 90,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Prettier",
|
||||
tech_logo: "https://prettier.io/icon.png",
|
||||
project_site: "https://prettier.io",
|
||||
skill_level: 90,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Cloudflare",
|
||||
tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/3b522ef84c409e4457032e4b4e3b984abbc92522c6f100f4ccc55c0ccfd3062b.png",
|
||||
project_site: "https://www.cloudflare.com/en-ca/",
|
||||
skill_level: 65,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Netlify",
|
||||
tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png",
|
||||
project_site: "https://www.netlify.com",
|
||||
skill_level: 60,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Vercel",
|
||||
tech_logo: "https://www.svgrepo.com/show/361653/vercel-logo.svg",
|
||||
project_site: "https://vercel.com/home",
|
||||
skill_level: 60,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Dioxus",
|
||||
tech_logo: "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png",
|
||||
project_site: "https://dioxuslabs.com",
|
||||
skill_level: 70,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Vue",
|
||||
tech_logo: "https://vuejs.org/logo.svg",
|
||||
project_site: "https://vuejs.org",
|
||||
skill_level: 1,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Mongodb",
|
||||
tech_logo: "https://www.svgrepo.com/show/331488/mongodb.svg",
|
||||
project_site: "https://www.mongodb.com",
|
||||
skill_level: 10,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Sqlite",
|
||||
tech_logo: "https://www.svgrepo.com/show/374094/sqlite.svg",
|
||||
project_site: "https://www.sqlite.org",
|
||||
skill_level: 10,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "PostgreSQL",
|
||||
tech_logo: "https://www.svgrepo.com/show/303301/postgresql-logo.svg",
|
||||
project_site: "https://www.postgresql.org",
|
||||
skill_level: 10,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "DynamoDB",
|
||||
tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg",
|
||||
project_site: "https://aws.amazon.com/dynamodb/",
|
||||
skill_level: 70,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Diesel",
|
||||
tech_logo: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745443276/diesel_logo_ujtvia.png",
|
||||
project_site: "https://diesel.rs",
|
||||
skill_level: 10,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Kubernetes",
|
||||
tech_logo: "https://kubernetes.io/images/kubernetes.png",
|
||||
project_site: "https://kubernetes.io",
|
||||
skill_level: 5,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Terraform",
|
||||
tech_logo: "https://www.svgrepo.com/show/448253/terraform.svg",
|
||||
project_site: "https://www.terraform.io",
|
||||
skill_level: 15,
|
||||
},
|
||||
TechDes {
|
||||
tech_name: "Traefik",
|
||||
tech_logo: "https://hub.docker.com/api/media/repos_logo/v1/library%2Ftraefik",
|
||||
project_site: "https://traefik.io/traefik/",
|
||||
skill_level: 60,
|
||||
},
|
||||
];
|
||||
@ -1,13 +1,16 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
// use components::Hero;
|
||||
use views::{Blog, Home, Navbar, NewHome};
|
||||
use views::{Blog, Blogs, ContactMe, Home, Navbar, NewHome, Projects};
|
||||
|
||||
/// Define a components module that contains all shared components for our app.
|
||||
mod components;
|
||||
/// Define a views module that contains the UI for all Layouts and Routes for our app.
|
||||
mod views;
|
||||
|
||||
/// Defines where to place all helper functions
|
||||
mod helper_fun;
|
||||
|
||||
/// The Route enum is used to define the structure of internal routes in our app. All route enums need to derive
|
||||
/// the [`Routable`] trait, which provides the necessary methods for the router to work.
|
||||
///
|
||||
@ -25,23 +28,39 @@ pub enum Route {
|
||||
Home {},
|
||||
// The route attribute can include dynamic parameters that implement [`std::str::FromStr`] and [`std::fmt::Display`] with the `:` syntax.
|
||||
// In this case, id will match any integer like `/blog/123` or `/blog/-456`.
|
||||
#[route("/blog/:id")]
|
||||
#[route("/blogs/:id")]
|
||||
// Fields of the route variant will be passed to the component as props. In this case, the blog component must accept
|
||||
// an `id` prop of type `i32`.
|
||||
Blog { id: i32 },
|
||||
Blogs { id: i32 },
|
||||
|
||||
#[route("/test")]
|
||||
Hello {},
|
||||
#[route("/blogs/:blog_title")]
|
||||
Blog {blog_title: String},
|
||||
|
||||
#[route("/projects")]
|
||||
Projects {},
|
||||
|
||||
#[route("/contact")]
|
||||
ContactMe,
|
||||
|
||||
#[route("/new_home")]
|
||||
NewHome {},
|
||||
// PageNotFound is a catch all route that will match any route and placing the matched segments in the route field
|
||||
#[route("/:..route")]
|
||||
PageNotFound { route: Vec<String> },
|
||||
}
|
||||
|
||||
const NOT_FOUND_CSS: Asset = asset!("/assets/styling/notFound.css");
|
||||
|
||||
#[component]
|
||||
fn Hello() -> Element {
|
||||
rsx!(
|
||||
div {
|
||||
h1 { "hello" }
|
||||
fn PageNotFound(route: Vec<String>) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: NOT_FOUND_CSS }
|
||||
div { id: "not-found",
|
||||
h1 { "Page not found" }
|
||||
p { "We are terribly sorry, but the page you requested doesn't exist." }
|
||||
dioxus::prelude::Link { to: Route::Home {},
|
||||
button { "Return Home Here" }
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
51
old dioxus/src/views/blog.rs
Normal file
51
old dioxus/src/views/blog.rs
Normal file
@ -0,0 +1,51 @@
|
||||
use crate::Route;
|
||||
use dioxus::{document::Link, prelude::*};
|
||||
|
||||
const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
|
||||
|
||||
/// The Blog page component that will be rendered when the current route is `[Route::Blog]`
|
||||
///
|
||||
/// The component takes a `id` prop of type `i32` from the route enum. Whenever the id changes, the component function will be
|
||||
/// re-run and the rendered HTML will be updated.
|
||||
#[component]
|
||||
pub fn Blog(blog_title: String) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: BLOG_CSS }
|
||||
|
||||
div { id: "blog",
|
||||
|
||||
// Content
|
||||
h1 { "This is blog #{blog_title}!" }
|
||||
p {
|
||||
"In blog #{blog_title}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components."
|
||||
}
|
||||
|
||||
// // Navigation links
|
||||
// // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and
|
||||
// // any number of child nodes.
|
||||
// Link {
|
||||
// // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the
|
||||
// // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked
|
||||
// // at compile time to make sure they are valid.
|
||||
// to: Route::Blog { id: id - 1 },
|
||||
// "Previous"
|
||||
// }
|
||||
// span { " <---> " }
|
||||
// Link { to: Route::Blog { id: id + 1 }, "Next" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Blogs(id: i32) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: BLOG_CSS }
|
||||
div { id: "blogs",
|
||||
h1 { "Page Under Development" }
|
||||
p { "Please Try Again Later" }
|
||||
dioxus::prelude::Link { to: Route::Home {},
|
||||
button { "Home" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
90
old dioxus/src/views/contact.rs
Normal file
90
old dioxus/src/views/contact.rs
Normal file
@ -0,0 +1,90 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const PROFESSIONAL_PHOTO_JPG: Asset = asset!("assets/professional_photo_2023.jpg");
|
||||
const CONTACT_CSS: Asset = asset!("/assets/styling/contact.css");
|
||||
|
||||
#[component]
|
||||
pub fn Contact() -> Element {
|
||||
rsx! {
|
||||
document::Link { href: CONTACT_CSS, rel: "stylesheet" }
|
||||
h2 { "Contact" }
|
||||
div { id: "contact",
|
||||
div {
|
||||
div {
|
||||
img {
|
||||
src: PROFESSIONAL_PHOTO_JPG,
|
||||
alt: "Borck's professional photo",
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
div {
|
||||
h4 { "Brock Tomlinson" }
|
||||
ul {
|
||||
li { "FullStack Webdev and Student Software Engineer" }
|
||||
li {
|
||||
a { href: "mailto:darkicewolf50@gmail.com",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/491226/email.svg",
|
||||
alt: "Email icon/logo",
|
||||
}
|
||||
div {
|
||||
p { "Email I check:" }
|
||||
p { "darkicewolf50@gmail.com" }
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
a { href: "mailto:brock@eatsleepski.com",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/491226/email.svg",
|
||||
alt: "Email icon/logo",
|
||||
}
|
||||
div {
|
||||
p { "Professional Email:" }
|
||||
p { "brock@eatsleepski.com" }
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/512317/github-142.svg",
|
||||
alt: "Github logo",
|
||||
}
|
||||
p { "darkicewolf50" }
|
||||
}
|
||||
}
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/521725/linkedin.svg",
|
||||
alt: "LinkedIn logo",
|
||||
}
|
||||
p { "Brock Tomlinson" }
|
||||
}
|
||||
}
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/519925/twitch.svg",
|
||||
alt: "Twitch logo",
|
||||
}
|
||||
p { "darkicewolf50" }
|
||||
}
|
||||
}
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/521936/youtube.svg",
|
||||
alt: "Youtube logo",
|
||||
}
|
||||
p { "@darkicewolf50" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
74
old dioxus/src/views/contact_me.rs
Normal file
74
old dioxus/src/views/contact_me.rs
Normal file
@ -0,0 +1,74 @@
|
||||
use std::collections::HashMap;
|
||||
|
||||
use dioxus::{logger::tracing, prelude::*};
|
||||
|
||||
use crate::views::Contact;
|
||||
|
||||
const CONTACTME_CSS: Asset = asset!("/assets/styling/contactme.css");
|
||||
|
||||
#[component]
|
||||
pub fn ContactMe() -> Element {
|
||||
let mut pre_form: Signal<HashMap<&'static str, String>> = use_signal(|| {
|
||||
HashMap::from([
|
||||
("Name", "".to_string()),
|
||||
("Email", "".to_string()),
|
||||
("Message", "".to_string()),
|
||||
])
|
||||
});
|
||||
|
||||
let mut error_box_message: Signal<String> = use_signal(|| "".to_string());
|
||||
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: CONTACTME_CSS }
|
||||
div { id: "ContactMe",
|
||||
div {
|
||||
h2 { "Get in Touch" }
|
||||
p {
|
||||
"Please feel free to reach out about questions, opporunities or just want to connect.
|
||||
Feel free to either fill out this form or contact me through one of the many of the platforms below"
|
||||
}
|
||||
}
|
||||
div {
|
||||
div { id: "contact-me",
|
||||
label { "Name" }
|
||||
input {
|
||||
oninput: move |event| {
|
||||
pre_form.write().insert("Name", event.value());
|
||||
},
|
||||
}
|
||||
label { "Email" }
|
||||
input {
|
||||
r#type: "email",
|
||||
oninput: move |event| {
|
||||
pre_form.write().insert("Email", event.value());
|
||||
},
|
||||
}
|
||||
label { "Message" }
|
||||
textarea {
|
||||
oninput: move |event| {
|
||||
pre_form.write().insert("Message", event.value());
|
||||
},
|
||||
}
|
||||
p { "{error_box_message}" }
|
||||
button {
|
||||
r#type: "submit",
|
||||
onclick: move |_| tracing::info!("Clicked!\n{:?}", pre_form),
|
||||
"Submit"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Contact {}
|
||||
}
|
||||
}
|
||||
|
||||
// onsubmit:move |event| { log::info!("Submitted! {event:?}"),
|
||||
// FormEvent {
|
||||
// value: "NameEmailMessageSubmit",
|
||||
// values: {
|
||||
// "name": FormValue(["asdasd"]),
|
||||
// "message": FormValue(["asdads"]),
|
||||
// "email": FormValue(["adasdad@asdasd.asdads"])
|
||||
// },
|
||||
// valid: false
|
||||
// }
|
||||
88
old dioxus/src/views/home.rs
Normal file
88
old dioxus/src/views/home.rs
Normal file
@ -0,0 +1,88 @@
|
||||
use crate::components::{Experience, TechCat};
|
||||
use crate::views::{Contact, Projects};
|
||||
use crate::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const HOME_CSS: Asset = asset!("/assets/styling/home.css");
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
let languages = vec![
|
||||
"Rust",
|
||||
"Python",
|
||||
"YAML",
|
||||
"HTML5",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"Markdown",
|
||||
];
|
||||
let backend = vec!["Actix", "FastAPI", "Dioxus", "Diesel"];
|
||||
let frontend = vec!["React", "Dioxus", "Vue"];
|
||||
let databases = vec!["Sqlite", "PostgreSQL", "Mongodb", "DynamoDB"];
|
||||
let tools = vec![
|
||||
"Vs Code",
|
||||
"Git",
|
||||
"Prettier",
|
||||
"Firefox",
|
||||
"Github Actions",
|
||||
"Traefik",
|
||||
"Docker",
|
||||
"Kubernetes",
|
||||
"Terraform",
|
||||
];
|
||||
let platforms = vec!["AWS", "Cloudflare", "Vercel", "Netlify", "Gitea", "Github"];
|
||||
rsx!(
|
||||
document::Link { rel: "stylesheet", href: HOME_CSS }
|
||||
div {
|
||||
div { id: "home-intro",
|
||||
h1 { "Hi I'm Brock" }
|
||||
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 {
|
||||
"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 {
|
||||
"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 {
|
||||
"I advore problem solving and building cool stuff, I'm happy to jump in and get started! "
|
||||
Link { to: Route::ContactMe {}, "Let's create something great together!" }
|
||||
}
|
||||
}
|
||||
div { class: "technologies",
|
||||
|
||||
h2 { "Technology" }
|
||||
p { "Here is what I prefer to use and their self assessed skill" }
|
||||
// p { "Here is what I developed skills in." }
|
||||
div { class: "technologies-cat",
|
||||
TechCat { cat: "Languages", tech_vec: languages }
|
||||
TechCat { cat: "Backend", tech_vec: backend }
|
||||
TechCat { cat: "Frontend", tech_vec: frontend }
|
||||
TechCat { cat: "Databases", tech_vec: databases }
|
||||
TechCat { cat: "Platforms", tech_vec: platforms }
|
||||
TechCat { cat: "Tools", tech_vec: tools }
|
||||
}
|
||||
}
|
||||
Contact {}
|
||||
Projects {}
|
||||
div { id: "experience",
|
||||
h2 { "Experience" }
|
||||
div {
|
||||
Experience { professional_jobs: true }
|
||||
Experience { professional_jobs: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// https://yaml.org/favicon.svg
|
||||
@ -12,7 +12,7 @@ mod new_home;
|
||||
pub use new_home::NewHome;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
pub use blog::{Blog, Blogs};
|
||||
|
||||
mod navbar;
|
||||
pub use navbar::Navbar;
|
||||
@ -20,10 +20,11 @@ pub use navbar::Navbar;
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod footer;
|
||||
pub use footer::Ender;
|
||||
|
||||
mod contact;
|
||||
pub use contact::Contact;
|
||||
|
||||
mod projects;
|
||||
pub use projects::Projects;
|
||||
|
||||
mod contact_me;
|
||||
pub use contact_me::ContactMe;
|
||||
@ -1,4 +1,4 @@
|
||||
use crate::views::Ender;
|
||||
use crate::components::Ender;
|
||||
use crate::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
@ -17,8 +17,10 @@ pub fn Navbar() -> Element {
|
||||
document::Link { rel: "stylesheet", href: STD_COLOUR_AND_FONTS_CSS }
|
||||
|
||||
div { id: "navbar",
|
||||
Link { to: Route::NewHome {}, "Home" }
|
||||
Link { to: Route::Blog { id: 1 }, "Blog" }
|
||||
Link { to: Route::Home {}, "Home" }
|
||||
Link { to: Route::Projects {}, "Projects" }
|
||||
Link { to: Route::Blogs { id: 0 }, "Blogs" }
|
||||
Link { to: Route::ContactMe {}, "Contact" }
|
||||
}
|
||||
|
||||
// The `Outlet` component is used to render the next component inside the layout. In this case, it will render either
|
||||
108
old dioxus/src/views/projects.rs
Normal file
108
old dioxus/src/views/projects.rs
Normal file
@ -0,0 +1,108 @@
|
||||
use crate::helper_fun::get_tech_logos_from_str;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn Projects() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
h2 { "Projects" }
|
||||
p { "Top Featured and Recent Projects" }
|
||||
}
|
||||
div { class: "project-section",
|
||||
ProjectCards {
|
||||
project_name: "Portfolio Site",
|
||||
website_prop: "https://darkicewolf50.github.io",
|
||||
github_prop: "https://github.com/darkicewolf50/darkicewolf50.github.io",
|
||||
project_img: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745630861/Portfolio_site_k4mhmj.png",
|
||||
techs_used: vec!["Rust", "CSS", "Dioxus", "Github Actions", "Git", "Github"],
|
||||
project_des: "This project was a great test of my newly learned Rust.
|
||||
It was certainly interesting to go through all of the stages of front end web developement, while the orignal and new found scope is not currently achieved, it will be on a later pass through.
|
||||
I am very happy with how it turned out in compairison to my origanl site map, and wireframes.
|
||||
Considering this phase one was accomplished in 3 working days I believe it is an excellent show of my skill.",
|
||||
}
|
||||
ProjectCards {
|
||||
project_name: "UCalgary Baja Backend",
|
||||
project_img: "https://www.svgrepo.com/show/448221/docker.svg",
|
||||
techs_used: vec!["Python", "FastAPI", "Github Actions", "Docker", "Traefik", "Git", "Github"],
|
||||
project_des: "This is going to be extremely cost saving for the non-profit club UCalgary Baja.
|
||||
Using automated uploads and linting to check the Python and FastAPI code was excellent for learning how to self-host a web server.
|
||||
This was then upgraded later with the addition of treafik so that it could be SSL certified, this is also known as supporting HTTPS transmissions.
|
||||
Ultimately it will serve as a great stepping stone for both myself an anyone else in UCalgary Baja Software subteam.
|
||||
This will lead into using Actixs in the migration Soon™ to be.",
|
||||
}
|
||||
ProjectCards {
|
||||
project_name: "UCalgary Baja Website",
|
||||
website_prop: "https://uofcbaja.pages.dev",
|
||||
project_img: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745633714/ucalgary-baja-site-April.png",
|
||||
techs_used: vec![
|
||||
"HTML5",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"Markdown",
|
||||
"YAML",
|
||||
"React",
|
||||
"Git",
|
||||
"Github",
|
||||
"Cloudflare",
|
||||
],
|
||||
project_des: "The flexibility that we achieved using React,
|
||||
rather than a locked down platform or framework has allows all the Software members of UCalgary Baja to learn infinitely more.
|
||||
This isn't to say that it is faster or have additional perks of using 'non-code website builders'.
|
||||
This is provided massive opportunities to learn teach and save on cost compaired to the website builders.
|
||||
Overall I would say this will be worth it in the long run and opened my eyes to different website hosting providers,
|
||||
with their associated perks and costs.
|
||||
When we change it, it will most likely we re-written in Vue as there is a good non-depreciated way to initalize the framework.",
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const PROJECT_CARDS_CSS: Asset = asset!("/assets/styling/projectCards.css");
|
||||
|
||||
#[component]
|
||||
pub fn ProjectCards(
|
||||
website_prop: Option<&'static str>,
|
||||
github_prop: Option<&'static str>,
|
||||
project_name: &'static str,
|
||||
techs_used: Vec<&'static str>,
|
||||
project_des: &'static str,
|
||||
#[props(default = "https://picsum.photos/200")] project_img: &'static str,
|
||||
) -> Element {
|
||||
rsx! {
|
||||
document::Link { href: PROJECT_CARDS_CSS, rel: "stylesheet" }
|
||||
div { class: "project-card",
|
||||
img {
|
||||
src: "{project_img}",
|
||||
alt: "dashboard of project or the logo of the project",
|
||||
}
|
||||
div { class: "project-title-info",
|
||||
h3 { "{project_name}" }
|
||||
div {
|
||||
if let Some(github_site) = github_prop {
|
||||
a { href: "{github_site}",
|
||||
get_tech_logos_from_str { used_tech: "Github" }
|
||||
}
|
||||
}
|
||||
if let Some(site) = website_prop {
|
||||
a { href: "{site}",
|
||||
get_tech_logos_from_str { used_tech: "Internet" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
p { "{project_des}" }
|
||||
}
|
||||
div { class: "project-tech-logos",
|
||||
for tech in techs_used {
|
||||
get_tech_logos_from_str { used_tech: tech }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// img {
|
||||
// src: "https://www.svgrepo.com/show/512317/github-142.svg",
|
||||
// alt: "Github logo",
|
||||
// }
|
||||
235
old dioxus/techs.json
Normal file
235
old dioxus/techs.json
Normal file
@ -0,0 +1,235 @@
|
||||
{
|
||||
"Rust": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/374056/rust.svg",
|
||||
"project_site": "https://www.rust-lang.org",
|
||||
"skill_level": 65
|
||||
},
|
||||
|
||||
"Python": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/452091/python.svg",
|
||||
"project_site": "https://www.python.org",
|
||||
"skill_level": 60
|
||||
},
|
||||
|
||||
"JavaScript": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/303206/javascript-logo.svg",
|
||||
"project_site": "https://www.python.org",
|
||||
"skill_level": 60
|
||||
},
|
||||
|
||||
"YAML": {
|
||||
"tech_logo": "https://yaml.org/favicon.svg",
|
||||
"project_site": "https://yaml.org",
|
||||
"skill_level": 95
|
||||
},
|
||||
|
||||
"C": {
|
||||
"tech_logo": "https://www.c-language.org/logo.svg",
|
||||
"project_site": "https://www.c-language.org",
|
||||
"skill_level": 50
|
||||
},
|
||||
|
||||
"C++": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/452183/cpp.svg",
|
||||
"project_site": "https://cplusplus.com",
|
||||
"skill_level": 50
|
||||
},
|
||||
|
||||
"Github": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/512317/github-142.svg",
|
||||
"project_site": "https://github.com/darkicewolf50",
|
||||
"skill_level": 80
|
||||
},
|
||||
|
||||
"Email": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/491226/email.svg",
|
||||
"project_site": "mailto:darkicewolf50@gmail.com",
|
||||
"skill_level": 100
|
||||
},
|
||||
|
||||
"LinkedIn": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/521725/linkedin.svg",
|
||||
"project_site": "https://www.linkedin.com/in/brock-tomlinson/",
|
||||
"skill_level": 4
|
||||
},
|
||||
|
||||
"Twitch": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/519925/twitch.svg",
|
||||
"project_site": "https://www.twitch.tv/darkicewolf50",
|
||||
"skill_level": 6
|
||||
},
|
||||
|
||||
"Youtube": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/521936/youtube.svg",
|
||||
"project_site": "https://www.youtube.com/@darkicewolf50",
|
||||
"skill_level": 4
|
||||
},
|
||||
|
||||
"Internet": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/490809/internet.svg",
|
||||
"project_site": "https://google.com",
|
||||
"skill_level": 99
|
||||
},
|
||||
|
||||
"React": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/452092/react.svg",
|
||||
"project_site": "https://react.dev",
|
||||
"skill_level": 60
|
||||
},
|
||||
|
||||
"Docker": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/448221/docker.svg",
|
||||
"project_site": "https://www.docker.com",
|
||||
"skill_level": 70
|
||||
},
|
||||
|
||||
"FastAPI": {
|
||||
"tech_logo": "https://fastapi.tiangolo.com/img/favicon.png",
|
||||
"project_site": "https://fastapi.tiangolo.com",
|
||||
"skill_level": 80
|
||||
},
|
||||
|
||||
"Actix": {
|
||||
"tech_logo": "https://actix.rs/img/logo.png",
|
||||
"project_site": "https://actix.rs",
|
||||
"skill_level": 20
|
||||
},
|
||||
|
||||
"HTML5": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/452228/html-5.svg",
|
||||
"project_site": "https://google.com",
|
||||
"skill_level": 90
|
||||
},
|
||||
|
||||
"CSS": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/452185/css-3.svg",
|
||||
"project_site": "https://google.com",
|
||||
"skill_level": 60
|
||||
},
|
||||
|
||||
"Git": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/452210/git.svg",
|
||||
"project_site": "https://git-scm.com",
|
||||
"skill_level": 50
|
||||
},
|
||||
|
||||
"Github Actions": {
|
||||
"tech_logo": "https://cdn.simpleicons.org/githubactions/2088FF",
|
||||
"project_site": "https://github.com/",
|
||||
"skill_level": 40
|
||||
},
|
||||
|
||||
"Vs Code": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/452129/vs-code.svg",
|
||||
"project_site": "https://code.visualstudio.com",
|
||||
"skill_level": 60
|
||||
},
|
||||
|
||||
"Gitea": {
|
||||
"tech_logo": "https://about.gitea.com/gitea.png",
|
||||
"project_site": "https://about.gitea.com",
|
||||
"skill_level": 85
|
||||
},
|
||||
|
||||
"AWS": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/448266/aws.svg",
|
||||
"project_site": "https://aws.amazon.com",
|
||||
"skill_level": 40
|
||||
},
|
||||
|
||||
"Firefox": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/378808/firefox-developer-edition-57-70.svg",
|
||||
"project_site": "https://www.mozilla.org/en-CA/firefox/developer/",
|
||||
"skill_level": 80
|
||||
},
|
||||
|
||||
"Markdown": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/510065/markdown.svg",
|
||||
"project_site": "https://www.markdownguide.org",
|
||||
"skill_level": 90
|
||||
},
|
||||
|
||||
"Prettier": {
|
||||
"tech_logo": "https://prettier.io/icon.png",
|
||||
"project_site": "https://prettier.io",
|
||||
"skill_level": 90
|
||||
},
|
||||
|
||||
"DynamoDB": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/353450/aws-dynamodb.svg",
|
||||
"project_site": "https://aws.amazon.com/dynamodb/",
|
||||
"skill_level": 50
|
||||
},
|
||||
|
||||
"Cloudflare": {
|
||||
"tech_logo": "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/3b522ef84c409e4457032e4b4e3b984abbc92522c6f100f4ccc55c0ccfd3062b.png",
|
||||
"project_site": "https://www.cloudflare.com/en-ca/",
|
||||
"skill_level": 40
|
||||
},
|
||||
|
||||
"Netlify": {
|
||||
"tech_logo": "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png",
|
||||
"project_site": "https://www.netlify.com",
|
||||
"skill_level": 70
|
||||
},
|
||||
|
||||
"Vercel": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/361653/vercel-logo.svg",
|
||||
"project_site": "https://vercel.com/home",
|
||||
"skill_level": 60
|
||||
},
|
||||
|
||||
"Dioxus": {
|
||||
"tech_logo": "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png",
|
||||
"project_site": "https://dioxuslabs.com",
|
||||
"skill_level": 60
|
||||
},
|
||||
|
||||
"Vue": {
|
||||
"tech_logo": "https://vuejs.org/logo.svg",
|
||||
"project_site": "https://vuejs.org",
|
||||
"skill_level": 1
|
||||
},
|
||||
|
||||
"Mongodb": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/331488/mongodb.svg",
|
||||
"project_site": "https://www.mongodb.com",
|
||||
"skill_level": 10
|
||||
},
|
||||
|
||||
"Sqlite": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/374094/sqlite.svg",
|
||||
"project_site": "https://www.sqlite.org",
|
||||
"skill_level": 10
|
||||
},
|
||||
|
||||
"PostgreSQL": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/303301/postgresql-logo.svg",
|
||||
"project_site": "https://www.postgresql.org",
|
||||
"skill_level": 10
|
||||
},
|
||||
|
||||
"Diesel": {
|
||||
"tech_logo": "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745443276/diesel_logo_ujtvia.png",
|
||||
"project_site": "https://diesel.rs",
|
||||
"skill_level": 10
|
||||
},
|
||||
|
||||
"Kubernetes": {
|
||||
"tech_logo": "https://kubernetes.io/images/kubernetes.png",
|
||||
"project_site": "https://kubernetes.io",
|
||||
"skill_level": 5
|
||||
},
|
||||
|
||||
"Terraform": {
|
||||
"tech_logo": "https://www.svgrepo.com/show/448253/terraform.svg",
|
||||
"project_site": "https://www.terraform.io",
|
||||
"skill_level": 10
|
||||
},
|
||||
|
||||
"Traefik": {
|
||||
"tech_logo": "https://hub.docker.com/api/media/repos_logo/v1/library%2Ftraefik",
|
||||
"project_site": "https://traefik.io/traefik/",
|
||||
"skill_level": 60
|
||||
}
|
||||
}
|
||||
10639
package-lock.json
generated
Normal file
10639
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
package.json
Normal file
28
package.json
Normal 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
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
1
public/file.svg
Normal file
1
public/file.svg
Normal 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
1
public/globe.svg
Normal 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
1
public/next.svg
Normal 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
1
public/vercel.svg
Normal 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
1
public/window.svg
Normal 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
53
src/app/home.css
Normal 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
33
src/app/layout.js
Normal 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
46
src/app/not-found.js
Normal 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
45
src/app/page.js
Normal 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>
|
||||
);
|
||||
}
|
||||
30
src/components/footer/ender.css
Normal file
30
src/components/footer/ender.css
Normal 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;
|
||||
}
|
||||
45
src/components/footer/ender.jsx
Normal file
45
src/components/footer/ender.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
16
src/components/navbar/navbar.css
Normal file
16
src/components/navbar/navbar.css
Normal 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;
|
||||
}
|
||||
13
src/components/navbar/navbar.jsx
Normal file
13
src/components/navbar/navbar.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -1,99 +0,0 @@
|
||||
use std::collections::HashMap;
|
||||
use std::hash::{BuildHasherDefault, DefaultHasher};
|
||||
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const TECHS_CSS: Asset = asset!("/assets/styling/techs.css");
|
||||
|
||||
#[component]
|
||||
pub fn TechCard(tech_props: &'static str) -> Element {
|
||||
let props_tech = tech_table_lookup(tech_props);
|
||||
|
||||
rsx! {
|
||||
a { class: "tech-card", href: "{props_tech.project_site}",
|
||||
img { src: "{props_tech.lang_logo}", alt: "{tech_props}'s logo" }
|
||||
h4 { "{tech_props}" }
|
||||
progress { value: props_tech.skill_level, max: 100 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn TechCat(cat: String, tech_vec: Vec<&'static str>) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: TECHS_CSS }
|
||||
div { class: "tech-cat",
|
||||
div {
|
||||
h3 { "{cat}" }
|
||||
}
|
||||
div { class: "tech-row",
|
||||
for tech in tech_vec {
|
||||
TechCard { tech_props: tech }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(PartialEq, Props, Clone, Copy)]
|
||||
pub struct TechDes {
|
||||
// to be removed soon
|
||||
pub lang_logo: &'static str,
|
||||
pub project_site: &'static str,
|
||||
pub skill_level: u8,
|
||||
}
|
||||
|
||||
pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
|
||||
let techs_tools_frameworks_lookup = HashMap::from([
|
||||
(
|
||||
"Rust",
|
||||
TechDes {
|
||||
lang_logo: "https://www.rust-lang.org/static/images/rust-logo-blk.svg",
|
||||
project_site: "https://www.rust-lang.org",
|
||||
skill_level: 40,
|
||||
},
|
||||
),
|
||||
(
|
||||
"Python",
|
||||
TechDes {
|
||||
lang_logo: "https://www.svgrepo.com/show/452091/python.svg",
|
||||
project_site: "https://www.python.org",
|
||||
skill_level: 50,
|
||||
},
|
||||
),
|
||||
(
|
||||
"JavaScript",
|
||||
TechDes {
|
||||
lang_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
|
||||
project_site: "https://www.python.org",
|
||||
skill_level: 60,
|
||||
},
|
||||
),
|
||||
(
|
||||
"YAML",
|
||||
TechDes {
|
||||
lang_logo: "https://yaml.org/favicon.svg",
|
||||
project_site: "https://yaml.org",
|
||||
skill_level: 95,
|
||||
},
|
||||
),
|
||||
(
|
||||
"C",
|
||||
TechDes {
|
||||
lang_logo: "https://www.c-language.org/logo.svg",
|
||||
project_site: "https://www.c-language.org",
|
||||
skill_level: 30,
|
||||
},
|
||||
),
|
||||
(
|
||||
"C++",
|
||||
TechDes {
|
||||
lang_logo: "https://www.svgrepo.com/show/452183/cpp.svg",
|
||||
project_site: "https://cplusplus.com",
|
||||
skill_level: 30,
|
||||
},
|
||||
),
|
||||
]);
|
||||
|
||||
techs_tools_frameworks_lookup[to_lookup]
|
||||
}
|
||||
169
src/globals.css
Normal file
169
src/globals.css
Normal 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
169
src/page.module.css
Normal 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();
|
||||
}
|
||||
} */
|
||||
@ -1,39 +0,0 @@
|
||||
use crate::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
|
||||
|
||||
/// The Blog page component that will be rendered when the current route is `[Route::Blog]`
|
||||
///
|
||||
/// The component takes a `id` prop of type `i32` from the route enum. Whenever the id changes, the component function will be
|
||||
/// re-run and the rendered HTML will be updated.
|
||||
#[component]
|
||||
pub fn Blog(id: i32) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: BLOG_CSS }
|
||||
|
||||
div {
|
||||
id: "blog",
|
||||
|
||||
// Content
|
||||
h1 { "This is blog #{id}!" }
|
||||
p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
|
||||
|
||||
// Navigation links
|
||||
// The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and
|
||||
// any number of child nodes.
|
||||
Link {
|
||||
// The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the
|
||||
// blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked
|
||||
// at compile time to make sure they are valid.
|
||||
to: Route::Blog { id: id - 1 },
|
||||
"Previous"
|
||||
}
|
||||
span { " <---> " }
|
||||
Link {
|
||||
to: Route::Blog { id: id + 1 },
|
||||
"Next"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const PROFESSIONAL_PHOTO_JPG: Asset = asset!("assets/professional_photo_2023.jpg");
|
||||
const CONTACT_CSS: Asset = asset!("/assets/styling/contact.css");
|
||||
|
||||
#[component]
|
||||
pub fn Contact() -> Element {
|
||||
rsx! {
|
||||
document::Link { href: CONTACT_CSS, rel: "stylesheet" }
|
||||
h2 { "Contact" }
|
||||
div { id: "contact",
|
||||
img {
|
||||
src: PROFESSIONAL_PHOTO_JPG,
|
||||
alt: "Borck's professional photo",
|
||||
}
|
||||
div {
|
||||
h4 { "Brock Tomlinson" }
|
||||
ul {
|
||||
li { "FullStack Webdev and Student Software Engineer" }
|
||||
li {
|
||||
a { href: "mailto:darkicewolf50@gmail.com",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/491226/email.svg",
|
||||
alt: "Email icon/logo",
|
||||
}
|
||||
div {
|
||||
p { "Email I check:" }
|
||||
p { "darkicewolf50@gmail.com" }
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
a { href: "mailto:brock@eatsleepski.com",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/491226/email.svg",
|
||||
alt: "Email icon/logo",
|
||||
}
|
||||
div {
|
||||
p { "Professional Email:" }
|
||||
p { "brock@eatsleepski.com" }
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/512317/github-142.svg",
|
||||
alt: "Github logo",
|
||||
}
|
||||
p { "darkicewolf50" }
|
||||
}
|
||||
}
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/521725/linkedin.svg",
|
||||
alt: "LinkedIn logo",
|
||||
}
|
||||
p { "Brock Tomlinson" }
|
||||
}
|
||||
}
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/519925/twitch.svg",
|
||||
alt: "Twitch logo",
|
||||
}
|
||||
p { "darkicewolf50" }
|
||||
}
|
||||
}
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/521936/youtube.svg",
|
||||
alt: "Youtube logo",
|
||||
}
|
||||
p { "@darkicewolf50" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const ENDER_CSS: Asset = asset!("/assets/styling/ender.css");
|
||||
|
||||
#[component]
|
||||
pub fn Ender() -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: ENDER_CSS }
|
||||
footer {
|
||||
p { "Brock Tomlinson © 2025" }
|
||||
div {
|
||||
a { href: "https://github.com/darkicewolf50",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/512317/github-142.svg",
|
||||
alt: "Github logo",
|
||||
}
|
||||
p { "Github" }
|
||||
}
|
||||
a { href: "mailto:darkicewolf50@gmail.com",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/491226/email.svg",
|
||||
alt: "Email logo/icon",
|
||||
}
|
||||
p { "Email" }
|
||||
}
|
||||
a { href: "https://www.linkedin.com/in/brock-tomlinson/",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/521725/linkedin.svg",
|
||||
alt: "LinkedIn logo",
|
||||
}
|
||||
p { "LinkedIn" }
|
||||
}
|
||||
a { href: "https://www.twitch.tv/darkicewolf50",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/519925/twitch.svg",
|
||||
alt: "Twitch logo",
|
||||
}
|
||||
p { "Twitch" }
|
||||
}
|
||||
a { href: "https://www.youtube.com/@darkicewolf50",
|
||||
img {
|
||||
src: "https://www.svgrepo.com/show/521936/youtube.svg",
|
||||
alt: "Youtube logo",
|
||||
}
|
||||
p { "Youtube" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
use crate::components::{TechCat, TechDes};
|
||||
use crate::views::Contact;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
let languages: Vec<&'static str> = vec!["Rust", "Python", "JavaScript", "YAML", "C", "C++"];
|
||||
rsx!(
|
||||
h1 { "Hi I'm Brock" }
|
||||
TechCat { cat: "Languages".to_string(), tech_vec: languages }
|
||||
Contact {}
|
||||
)
|
||||
}
|
||||
|
||||
// https://yaml.org/favicon.svg
|
||||
@ -1,7 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn Projects() -> Element {
|
||||
todo!();
|
||||
rsx! {}
|
||||
}
|
||||
50
wrangler.jsonc
Normal file
50
wrangler.jsonc
Normal 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" }]
|
||||
}
|
||||
Reference in New Issue
Block a user