feat(master): added backend project, fixed dixous 2.0.1, css and added dockerhub option to project card
This commit is contained in:
parent
2806d654a7
commit
5e52c6dea1
2
Cargo.lock
generated
2
Cargo.lock
generated
@ -3179,7 +3179,7 @@ checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e"
|
||||
|
||||
[[package]]
|
||||
name = "personal_site"
|
||||
version = "1.6.0"
|
||||
version = "2.0.1"
|
||||
dependencies = [
|
||||
"dioxus",
|
||||
"reqwest",
|
||||
|
@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "personal_site"
|
||||
version = "1.6.0"
|
||||
version = "2.0.1"
|
||||
authors = ["darkicewolf50 <brock.tomlinson@ucalgary.ca>"]
|
||||
edition = "2021"
|
||||
|
||||
|
@ -45,6 +45,7 @@
|
||||
border-radius: 1rem;
|
||||
padding: 0.25svh 8px;
|
||||
margin: 0svh 0.25svh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
@ -65,13 +66,17 @@ h3 {
|
||||
margin: 0px;
|
||||
padding: 1svh 0svw;
|
||||
border-bottom: none;
|
||||
/* border-bottom: var(--underlineTitle);
|
||||
border-radius: var(--underlineTitleBorderRadius); */
|
||||
}
|
||||
|
||||
#blog_content p {
|
||||
padding: 1svh 0svw;
|
||||
margin: 0px;
|
||||
text-wrap: wrap;
|
||||
max-width: 25rem;
|
||||
}
|
||||
|
||||
#blog #blog_content p {
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
#blogs {
|
||||
@ -132,12 +137,19 @@ h3 {
|
||||
border: 2px solid rgba(145, 164, 210, 0.4);
|
||||
border-radius: var(--card-border-radius);
|
||||
font-size: medium;
|
||||
margin-top: auto;
|
||||
margin-bottom: 4svh;
|
||||
}
|
||||
#blogs .blog-preview #blog_info div p:last-child {
|
||||
margin-right: 0svh;
|
||||
margin-left: 2svw;
|
||||
}
|
||||
|
||||
#blogs .blog-preview #blog_info div div p:last-child {
|
||||
margin: 0svh 0.25svh;
|
||||
padding: 0.25svh 8px;
|
||||
}
|
||||
|
||||
#blogs-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -2,6 +2,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--card-background-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
|
||||
/* flex-basis: 50%; */
|
||||
}
|
||||
|
@ -63,15 +63,11 @@
|
||||
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;
|
||||
}
|
||||
|
@ -67,6 +67,10 @@
|
||||
filter: grayscale(100%) invert(100%) brightness(2.5);
|
||||
}
|
||||
|
||||
.project-title-info #dockerhub img {
|
||||
filter: grayscale(100%) invert(100%) brightness(2.5);
|
||||
}
|
||||
|
||||
.project-title-info img:hover {
|
||||
filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%)
|
||||
hue-rotate(187deg) brightness(95%) contrast(90%);
|
||||
@ -77,6 +81,11 @@
|
||||
hue-rotate(185deg) brightness(1.3) contrast(90%) saturate(100%);
|
||||
}
|
||||
|
||||
.project-title-info #dockerhub img:hover {
|
||||
filter: grayscale(100%) invert(165%) sepia(15%) saturate(733%)
|
||||
hue-rotate(185deg) brightness(1.3) contrast(90%) saturate(100%);
|
||||
}
|
||||
|
||||
.project-title-info div {
|
||||
display: flex;
|
||||
gap: 1svw;
|
||||
|
14
src/lib.rs
14
src/lib.rs
@ -1,6 +1,5 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub use helper_fun::set_meta_tags;
|
||||
// use components::Hero;
|
||||
use views::{Blog, Blogs, ContactMe, Home, Navbar, NewHome, Projects};
|
||||
|
||||
@ -55,7 +54,6 @@ fn PageNotFound(route: Vec<String>) -> Element {
|
||||
rsx! {
|
||||
document::Stylesheet { href: asset!("/assets/styling/notFound.css") }
|
||||
document::Title { "Brock Tomlinson - Not Found" }
|
||||
set_meta_tags { description: "This is not a valid page", keywords: "404 Nothing" }
|
||||
div { id: "not-found",
|
||||
h1 { "Page not found" }
|
||||
p { "We are terribly sorry, but the page you requested doesn't exist." }
|
||||
@ -65,15 +63,3 @@ fn PageNotFound(route: Vec<String>) -> Element {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The server function at the endpoint "static_routes" will be called by the CLI to generate the list of static
|
||||
// routes. You must explicitly set the endpoint to `"static_routes"` in the server function attribute instead of
|
||||
// the default randomly generated endpoint.
|
||||
// #[server(endpoint = "static_routes", output = server_fn::codec::Json)]
|
||||
// async fn static_routes() -> Result<Vec<String>, ServerFnError> {
|
||||
// // The `Routable` trait has a `static_routes` method that returns all static routes in the enum
|
||||
// Ok(Route::static_routes()
|
||||
// .iter()
|
||||
// .map(ToString::to_string)
|
||||
// .collect())
|
||||
// }
|
||||
|
57
src/main.rs
57
src/main.rs
@ -13,6 +13,30 @@ fn main() {
|
||||
// The `launch` function is the main entry point for a dioxus app. It takes a component and renders it with the platform feature
|
||||
// you have enabled
|
||||
dioxus::launch(App);
|
||||
|
||||
// for compiling the app
|
||||
// dioxus::LaunchBuilder::new()
|
||||
// // Set the server config only if we are building the server target
|
||||
// .with_cfg(server_only! {
|
||||
// ServeConfig::builder()
|
||||
// // Enable incremental rendering
|
||||
// .incremental(
|
||||
// IncrementalRendererConfig::new()
|
||||
// // Store static files in the public directory where other static assets like wasm are stored
|
||||
// .static_dir(
|
||||
// std::env::current_exe()
|
||||
// .unwrap()
|
||||
// .parent()
|
||||
// .unwrap()
|
||||
// .join("public")
|
||||
// )
|
||||
// // Don't clear the public folder on every build. The public folder has other files including the wasm
|
||||
// // binary and static assets required for the app to run
|
||||
// .clear_cache(false)
|
||||
// )
|
||||
// .enable_out_of_order_streaming()
|
||||
// })
|
||||
// .launch(App);
|
||||
}
|
||||
|
||||
/// App is the main component of our app. Components are the building blocks of dioxus apps. Each component is a function
|
||||
@ -35,25 +59,14 @@ fn App() -> Element {
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "ssg")]
|
||||
fn main() {
|
||||
use dioxus_fullstack::{incremental::IncrementalRendererConfig, prelude::*};
|
||||
|
||||
LaunchBuilder::new()
|
||||
.with_cfg(
|
||||
ServeConfig::builder()
|
||||
.incremental(
|
||||
IncrementalRendererConfig::new()
|
||||
.static_dir(
|
||||
std::env::current_exe()
|
||||
.unwrap()
|
||||
.parent()
|
||||
.unwrap()
|
||||
.join("public"),
|
||||
)
|
||||
.clear_cache(false),
|
||||
)
|
||||
.enable_out_of_order_streaming(),
|
||||
)
|
||||
.launch(app);
|
||||
}
|
||||
// The server function at the endpoint "static_routes" will be called by the CLI to generate the list of static
|
||||
// routes. You must explicitly set the endpoint to `"static_routes"` in the server function attribute instead of
|
||||
// the default randomly generated endpoint.
|
||||
// #[server(endpoint = "static_routes", output = server_fn::codec::Json)]
|
||||
// async fn static_routes() -> Result<Vec<String>, ServerFnError> {
|
||||
// // The `Routable` trait has a `static_routes` method that returns all static routes in the enum
|
||||
// Ok(Route::static_routes()
|
||||
// .iter()
|
||||
// .map(ToString::to_string)
|
||||
// .collect())
|
||||
// }
|
||||
|
@ -1,11 +1,9 @@
|
||||
use crate::{set_meta_tags, Route};
|
||||
use crate::Route;
|
||||
// use dioxus::logger::tracing::info;
|
||||
use dioxus::prelude::*;
|
||||
use reqwest;
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
// 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
|
||||
@ -54,11 +52,6 @@ pub fn Blog(blog_title: String) -> Element {
|
||||
// span { " <---> " }
|
||||
Link { to: Route::Blogs { page_num: 0 }, "Go Back" }
|
||||
if let Some(blog_content) = &*blog_resource.read() {
|
||||
document::Meta { name: "description", content: "{blog_content.blog_title}" }
|
||||
document::Meta {
|
||||
name: "keywords",
|
||||
content: "webdev software engineer fullstack",
|
||||
}
|
||||
div { id: "blog_info",
|
||||
h1 { "{blog_content.blog_title}" }
|
||||
div {
|
||||
@ -85,7 +78,7 @@ async fn get_blog(blog_name: String) -> Result<BlogContent, reqwest::Error> {
|
||||
let client = reqwest::Client::new();
|
||||
|
||||
let res = client
|
||||
.get(format!("http://localhost:8000/blogs/blog/{}", blog_name))
|
||||
.get(format!("/blogs/blog/{}", blog_name))
|
||||
.timeout(std::time::Duration::from_secs(10))
|
||||
.send()
|
||||
.await?
|
||||
@ -137,10 +130,6 @@ pub fn Blogs(page_num: u32) -> Element {
|
||||
document::Stylesheet { href: asset!("/assets/styling/blog.css") }
|
||||
div { id: "blogs",
|
||||
document::Title { "Brock Tomlinson - Blogs" }
|
||||
set_meta_tags {
|
||||
description: "This is a collection of blog posts, ranging from tutorials, technologies I found interesting, and opinion pieces",
|
||||
keywords: "blogs blog software engineer webdev",
|
||||
}
|
||||
div { id: "blogs-title",
|
||||
h1 { "Blogs" }
|
||||
p {
|
||||
@ -239,10 +228,7 @@ async fn get_blogs_preview(
|
||||
let client = reqwest::Client::new();
|
||||
|
||||
let res = client
|
||||
.get(format!(
|
||||
"http://localhost:8000/blogs/{}/{}",
|
||||
_num_limit, page_num
|
||||
))
|
||||
.get(format!("blogs/{}/{}", _num_limit, page_num))
|
||||
.timeout(std::time::Duration::from_secs(10))
|
||||
.send()
|
||||
.await?
|
||||
|
@ -4,7 +4,7 @@ use serde_json;
|
||||
// use dioxus::logger::tracing;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::{helper_fun::set_meta_tags, views::Contact};
|
||||
use crate::views::Contact;
|
||||
|
||||
#[component]
|
||||
pub fn ContactMe() -> Element {
|
||||
@ -17,10 +17,6 @@ pub fn ContactMe() -> Element {
|
||||
rsx! {
|
||||
document::Stylesheet { href: asset!("/assets/styling/contactme.css") }
|
||||
document::Title { "Brock Tomlinson - Contact" }
|
||||
set_meta_tags {
|
||||
description: "Get in Touch, get in contact",
|
||||
keywords: "contact software engineer webdev",
|
||||
}
|
||||
div { id: "ContactMe",
|
||||
div {
|
||||
h2 { "Get in Touch" }
|
||||
|
@ -38,7 +38,7 @@ pub fn Home() -> Element {
|
||||
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.",
|
||||
keywords: "dev webdev Rust rust-lang software engineer",
|
||||
keywords: "webdev Rust software engineer projects blog darkicewol50",
|
||||
}
|
||||
div {
|
||||
div { id: "home-intro",
|
||||
|
@ -1,4 +1,4 @@
|
||||
use crate::helper_fun::{get_tech_logos_from_str, set_meta_tags};
|
||||
use crate::helper_fun::get_tech_logos_from_str;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
@ -6,10 +6,6 @@ pub fn Projects(#[props(default = true)] independent_page: bool) -> Element {
|
||||
rsx! {
|
||||
if independent_page {
|
||||
document::Title { "Brock Tomlinson - Projects" }
|
||||
set_meta_tags {
|
||||
description: "Top Featured and Recent Projects",
|
||||
keywords: "projects Rust CSS HTML JavaScript Dioxus Gitea Git software engineer",
|
||||
}
|
||||
}
|
||||
div {
|
||||
h2 { "Projects" }
|
||||
@ -17,21 +13,43 @@ pub fn Projects(#[props(default = true)] independent_page: bool) -> Element {
|
||||
}
|
||||
div { class: "project-section",
|
||||
ProjectCards {
|
||||
project_name: "Portfolio Site Version 1.1.0",
|
||||
project_name: "Personal Backend",
|
||||
gitea_link: "https://gitea.bajacloud.duckdns.org/darkicewolf50/darkicewolf50Cloud",
|
||||
dockerhub_link: "https://hub.docker.com/r/darkicewolf50/darkicewolf50cloud",
|
||||
project_img: "https://actix.rs/img/logo.png",
|
||||
techs_used: vec![
|
||||
"Rust",
|
||||
"Actix",
|
||||
"Github Actions",
|
||||
"Docker",
|
||||
"Traefik",
|
||||
"Gitea",
|
||||
"Git",
|
||||
"Github",
|
||||
],
|
||||
project_des: "I find that this is a much better option in compareision to FastAPI as it does not require a post request
|
||||
to input data instead it give the option for the url to give the parameters it needs. I don't have any complains about using Actix, its mature stable and fairly popular.
|
||||
This backend application also uses comrak to convert markdown blogs into html docuemnts that are then seen by you the user.
|
||||
This honestly was a fun challenge getting the blogs previews, ensuring correctness and not allowing for any unknown states,
|
||||
this will serve as a great basis for any future backend requirements that I may have.",
|
||||
}
|
||||
ProjectCards {
|
||||
project_name: "Portfolio Site Version 2.0.1",
|
||||
website_link: "https://darkicewolf50.pages.dev",
|
||||
gitea_link: "https://gitea.bajacloud.duckdns.org/darkicewolf50/personal_site",
|
||||
project_img: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745630861/Portfolio_site_k4mhmj.png",
|
||||
techs_used: vec!["Rust", "CSS", "Dioxus", "Git", "Gitea"],
|
||||
project_des: "This project was a great test of my newly learned Rust.
|
||||
This minor update added functionality for the contact me, the ground work for the blogs part of the site, as well as many minor
|
||||
This major update added functionality for the contact me, the blogs part of the site, as well as many minor
|
||||
UI consistencies to ensure that all of the buttons and links felt like buttons and links.
|
||||
I was surprise how easy it was to set up a discord webhook using the 'reqwest' crate.
|
||||
As I continue on I find myself struggling with how and why to use databases for content I generate.
|
||||
I think using tools like disocrd webhooks and email notifications are great for users but certainly not great for reading data from.
|
||||
The part I am both excited for and deading is going to be the blogs component which I believe I have solved for now.",
|
||||
I was very satisfied with serde, and comrak for converting markdown fiels into html.
|
||||
I use this extensively for the blogs search menu and the blog itself to display the blog itself in a consistent way without needing to write a whole library.",
|
||||
}
|
||||
ProjectCards {
|
||||
project_name: "Portfolio Site",
|
||||
project_name: "Portfolio Site 1.0.0",
|
||||
website_link: "https://darkicewolf50.github.io",
|
||||
github_link: "https://github.com/darkicewolf50/darkicewolf50.github.io",
|
||||
project_img: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745630861/Portfolio_site_k4mhmj.png",
|
||||
@ -44,6 +62,7 @@ pub fn Projects(#[props(default = true)] independent_page: bool) -> Element {
|
||||
ProjectCards {
|
||||
project_name: "UCalgary Baja Backend",
|
||||
project_img: "https://www.svgrepo.com/show/448221/docker.svg",
|
||||
dockerhub_link: "https://hub.docker.com/r/darkicewolf50/uofcbajacloud",
|
||||
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.
|
||||
@ -83,6 +102,7 @@ pub fn ProjectCards(
|
||||
website_link: Option<&'static str>,
|
||||
github_link: Option<&'static str>,
|
||||
gitea_link: Option<&'static str>,
|
||||
dockerhub_link: Option<&'static str>,
|
||||
project_name: &'static str,
|
||||
techs_used: Vec<&'static str>,
|
||||
project_des: &'static str,
|
||||
@ -108,6 +128,11 @@ pub fn ProjectCards(
|
||||
get_tech_logos_from_str { used_tech: "Gitea" }
|
||||
}
|
||||
}
|
||||
if let Some(dockerhub) = dockerhub_link {
|
||||
a { href: "{dockerhub}", id: "dockerhub",
|
||||
get_tech_logos_from_str { used_tech: "Docker" }
|
||||
}
|
||||
}
|
||||
if let Some(site) = website_link {
|
||||
a { href: "{site}",
|
||||
get_tech_logos_from_str { used_tech: "Internet" }
|
||||
|
Loading…
x
Reference in New Issue
Block a user