diff --git a/Cargo.lock b/Cargo.lock index 264478b..0a52c0c 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1098,6 +1098,15 @@ dependencies = [ "tracing-wasm", ] +[[package]] +name = "dioxus-material-icons" +version = "3.0.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ccf38d89d3100bb3dbe38c7c08eef9d87fb81fcec49a4e33ead63fdcf4e67f01" +dependencies = [ + "dioxus", +] + [[package]] name = "dioxus-mobile" version = "0.6.2" @@ -1112,6 +1121,34 @@ dependencies = [ "once_cell", ] +[[package]] +name = "dioxus-motion" +version = "0.3.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "05b22f47699c0f8cdba183906f4ff9dd633d0bc36ddd57db370000e79d123917" +dependencies = [ + "dioxus", + "dioxus-motion-transitions-macro", + "easer", + "futures-channel", + "futures-util", + "instant", + "tokio", + "wasm-bindgen", + "web-sys", +] + +[[package]] +name = "dioxus-motion-transitions-macro" +version = "0.1.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "5db137c096960ce1d6465f2ee88bc4eb953f79b16e76d426751cc22025e1a215" +dependencies = [ + "proc-macro2", + "quote", + "syn 2.0.101", +] + [[package]] name = "dioxus-router" version = "0.6.3" @@ -1311,6 +1348,15 @@ version = "1.0.5" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "92773504d58c093f6de2459af4af33faa518c13451eb8f2b5698ed3d36e7c813" +[[package]] +name = "easer" +version = "0.3.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "fba524f8b83c9c5bde02c2bb1627de9d1f81980489a6d54168cdfd08c258f917" +dependencies = [ + "num-traits", +] + [[package]] name = "endi" version = "1.1.0" @@ -2259,6 +2305,9 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "e0242819d153cba4b4b05a5a8f2a7e9bbf97b6055b2a002b395c96b5ff3c0222" dependencies = [ "cfg-if", + "js-sys", + "wasm-bindgen", + "web-sys", ] [[package]] @@ -4703,6 +4752,8 @@ name = "website" version = "0.1.0" dependencies = [ "dioxus", + "dioxus-material-icons", + "dioxus-motion", ] [[package]] diff --git a/Cargo.toml b/Cargo.toml index 854e10b..e70d53e 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -8,12 +8,18 @@ edition = "2021" [dependencies] dioxus = { version = "0.6.0", features = ["router", "fullstack"] } +dioxus-material-icons = "3.0.0" +dioxus-motion = { version = "0.3.1", optional = true, default-features = false } [features] default = ["web"] -web = ["dioxus/web"] -desktop = ["dioxus/desktop"] -mobile = ["dioxus/mobile"] +web = ["dioxus/web", "dioxus-motion/web", "dioxus-motion/transitions"] +desktop = [ + "dioxus/desktop", + "dioxus-motion/desktop", + "dioxus-motion/transitions", +] +mobile = ["dioxus/mobile", "dioxus-motion/desktop", "dioxus-motion/transitions"] [profile] diff --git a/README.md b/README.md index f185d04..bb1cc9e 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets. -``` +```bash project/ ├─ assets/ # Any assets that are used by the app should be placed here ├─ src/ @@ -13,8 +13,9 @@ project/ ``` ### Tailwind -1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm -2. Install the Tailwind CSS CLI: https://tailwindcss.com/docs/installation + +1. Install npm: +2. Install the Tailwind CSS CLI: 3. Run the following command in the root of the project to start the Tailwind CSS compiler: ```bash @@ -30,7 +31,7 @@ dx serve --platform web ``` To run for a different platform, use the `--platform platform` flag. E.g. + ```bash dx serve --platform desktop ``` - diff --git a/assets/card.png b/assets/card.png new file mode 100644 index 0000000..a5f5e04 Binary files /dev/null and b/assets/card.png differ diff --git a/assets/header.svg b/assets/header.svg deleted file mode 100644 index 59c96f2..0000000 --- a/assets/header.svg +++ /dev/null @@ -1,20 +0,0 @@ - \ No newline at end of file diff --git a/assets/logo192.png b/assets/logo192.png new file mode 100644 index 0000000..6500108 Binary files /dev/null and b/assets/logo192.png differ diff --git a/assets/logo512.png b/assets/logo512.png new file mode 100644 index 0000000..f25ae92 Binary files /dev/null and b/assets/logo512.png differ diff --git a/assets/main.css b/assets/main.css index 4314613..177740d 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1,107 +1,103 @@ -/* App-wide styling */ +@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap"); +@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); + +:root { + --rosewater: #dc8a78; + --flamingo: #dd7878; + --pink: #ea76cb; + --mauve: #8839ef; + --red: #d20f39; + --maroon: #e64553; + --peach: #fe640b; + --yellow: #df8e1d; + --green: #40a02b; + --teal: #179299; + --sky: #04a5e5; + --sapphire: #209fb5; + --blue: #1e66f5; + --lavender: #7287fd; + --text: #434f69; + --subtext1: #5c5f77; + --subtext0: #6c6f85; + --overlay2: #7c7f93; + --overlay1: #8c8fa1; + --overlay0: #9ca0b0; + --surface2: #acb0be; + --surface1: #bcc0cc; + --surface0: #ccd0da; + --base: #eff1f5; + --mantle: #e6e9ef; + --crust: #dce0e8; +} + +::selection { + background-color: var(--overlay0); +} + +html, body { - background-color: #0f1116; - color: #ffffff; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - margin: 20px; -} - -#hero { margin: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + width: 100%; + background-color: var(--base); + color: var(--text); + font-family: "Schibsted Grotesk", sans-serif; + overflow: auto; + overflow-anchor: none; } -#links { - width: 400px; - text-align: left; - font-size: x-large; - color: white; - display: flex; - flex-direction: column; -} - -#links a { - color: white; +a { + color: var(--text); + transition: + 0.1s color ease-in-out; 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; +a:hover, +a:active, +a:focus { + color: var(--subtext0) } -#header { - max-width: 1200px; -} - -/* Navbar */ #navbar { display: flex; - flex-direction: row; - } - -#navbar a { - color: #ffffff; - margin-right: 20px; + justify-content: space-between; + align-items: center; + margin: 1em 3em; +} + +.navbar-main { text-decoration: none; - transition: color 0.2s ease; + font-size: 1.6em; } -#navbar a:hover { +.navbar-theme { + width: 2em; + height: 2em; + font-size: 1em; + border: 1px solid var(--overlay0); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + color: var(--yellow) +} + +.navbar-theme:hover, +.navbar-theme:active, +.navbar-theme:focus { cursor: pointer; - color: #91a4d2; } -/* Blog page */ -#blog { - margin-top: 50px; - } - -#blog a { - color: #ffffff; - margin-top: 50px; +.navbar-end { + display: flex; + align-items: center; + gap: 1em; } -/* Echo */ -#echo { - width: 360px; - margin-left: auto; - margin-right: auto; - margin-top: 50px; - background-color: #1e222d; - padding: 20px; - border-radius: 10px; -} - -#echo>h4 { - margin: 0px 0px 15px 0px; -} - - -#echo>input { - border: none; - border-bottom: 1px white solid; - background-color: transparent; - color: #ffffff; - transition: border-bottom-color 0.2s ease; - outline: none; - display: block; - padding: 0px 0px 5px 0px; - width: 100%; -} - -#echo>input:focus { - border-bottom-color: #6d85c6; -} - -#echo>p { - margin: 20px 0px 0px auto; +.content-wrapper { + margin: 2em 3em; + display: flex; + justify-content: center; + align-items: center; + height: 100%; } \ No newline at end of file diff --git a/assets/manifest.json b/assets/manifest.json new file mode 100644 index 0000000..243b83a --- /dev/null +++ b/assets/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "Mike Czyż", + "name": "Michał Czyż's Website", + "icons": [ + { + "src": "assets/favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "assets/logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "assets/logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#363a4f", + "background_color": "#24273a" +} \ No newline at end of file diff --git a/assets/mike-czyz-public.gpg b/assets/mike-czyz-public.gpg new file mode 100644 index 0000000..8cff96c --- /dev/null +++ b/assets/mike-czyz-public.gpg @@ -0,0 +1,109 @@ +-----BEGIN PGP PUBLIC KEY BLOCK----- + +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 +aw== +=ZqUc +-----END PGP PUBLIC KEY BLOCK----- diff --git a/assets/mike-czyz.webp b/assets/mike-czyz.webp new file mode 100644 index 0000000..5b8a2f5 Binary files /dev/null and b/assets/mike-czyz.webp differ diff --git a/assets/tailwind.css b/assets/tailwind.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/main.rs b/src/main.rs index d8bff6e..1069365 100644 --- a/src/main.rs +++ b/src/main.rs @@ -1,19 +1,43 @@ -use dioxus::prelude::*; +use crate::pages::about::About; +use crate::pages::certifications::Certifications; +use crate::pages::contact::Contact; +use crate::pages::education::Education; +use crate::pages::home::Home; +use crate::pages::projects::Projects; -#[derive(Debug, Clone, Routable, PartialEq)] +use dioxus::prelude::*; +use dioxus_material_icons::{MaterialIcon, MaterialIconStylesheet}; +use dioxus_motion::prelude::*; + +mod pages; + +#[derive(Debug, Clone, Routable, PartialEq, MotionTransitions)] #[rustfmt::skip] enum Route { #[layout(Navbar)] - #[route("/")] - Home {}, - #[route("/blog/:id")] - Blog { id: i32 }, + #[route("/")] + #[transition(Fade)] + Home {}, + #[route("/about")] + About {}, + #[route("/projects")] + Projects {}, + #[route("/education")] + Education {}, + #[route("/certifications")] + Certifications {}, + #[route("/contact")] + Contact {}, } const FAVICON: Asset = asset!("/assets/favicon.ico"); const MAIN_CSS: Asset = asset!("/assets/main.css"); -const HEADER_SVG: Asset = asset!("/assets/header.svg"); -const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css"); + +fn PageNotFound(_route: Vec) -> Element { + rsx! { + div { "404 Not Found" } + } +} fn main() { dioxus::launch(App); @@ -23,112 +47,32 @@ fn main() { fn App() -> Element { rsx! { document::Link { rel: "icon", href: FAVICON } - document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: TAILWIND_CSS } + document::Link { rel: "stylesheet", href: MAIN_CSS } + MaterialIconStylesheet {} Router:: {} } } -#[component] -pub fn Hero() -> Element { - rsx! { - div { - id: "hero", - img { src: HEADER_SVG, id: "header" } - div { id: "links", - 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://discord.gg/XgGxMSkvUM", "👋 Community Discord" } - } - } - } -} - -/// Home page -#[component] -fn Home() -> Element { - rsx! { - Hero {} - Echo {} - } -} - -/// Blog page -#[component] -pub fn Blog(id: i32) -> Element { - rsx! { - 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 - Link { - to: Route::Blog { id: id - 1 }, - "Previous" - } - span { " <---> " } - Link { - to: Route::Blog { id: id + 1 }, - "Next" - } - } - } -} - /// Shared navbar component. #[component] fn Navbar() -> Element { rsx! { - div { - id: "navbar", - Link { - to: Route::Home {}, - "Home" + div { id: "navbar", + div { class: "navbar-start", + Link { class: "navbar-main", to: Route::Home {}, "Michał Czyż" } } - Link { - to: Route::Blog { id: 1 }, - "Blog" - } - } - - Outlet:: {} - } -} - -/// Echo component that demonstrates fullstack server functions. -#[component] -fn Echo() -> Element { - let mut response = use_signal(|| String::new()); - - rsx! { - div { - id: "echo", - h4 { "ServerFn Echo" } - input { - placeholder: "Type here to echo...", - oninput: move |event| async move { - let data = echo_server(event.value()).await.unwrap(); - response.set(data); - }, - } - - if !response().is_empty() { - p { - "Server echoed: " - i { "{response}" } + div { class: "navbar-end", + Link { to: Route::Home {}, "Home" } + Link { to: Route::About {}, "About" } + Link { to: Route::Projects {}, "Projects" } + Link { to: Route::Education {}, "Education" } + Link { to: Route::Certifications {}, "Certifications" } + Link { to: Route::Contact {}, "Contact" } + button { class: "navbar-theme", + MaterialIcon { size: 24, name: "light_mode" } } } } + div { class: "content-wrapper", AnimatedOutlet:: {} } } } - -/// Echo the user input on the server. -#[server(EchoServer)] -async fn echo_server(input: String) -> Result { - Ok(input) -} diff --git a/src/pages/about.rs b/src/pages/about.rs new file mode 100644 index 0000000..db7a9c9 --- /dev/null +++ b/src/pages/about.rs @@ -0,0 +1,9 @@ +use dioxus::prelude::*; + +/// About page +#[component] +pub fn About() -> Element { + rsx! { + div { "About" } + } +} diff --git a/src/pages/certifications.rs b/src/pages/certifications.rs new file mode 100644 index 0000000..c72ed40 --- /dev/null +++ b/src/pages/certifications.rs @@ -0,0 +1,9 @@ +use dioxus::prelude::*; + +/// Certifications page +#[component] +pub fn Certifications() -> Element { + rsx! { + div { "Certifications" } + } +} diff --git a/src/pages/contact.rs b/src/pages/contact.rs new file mode 100644 index 0000000..9b216c0 --- /dev/null +++ b/src/pages/contact.rs @@ -0,0 +1,9 @@ +use dioxus::prelude::*; + +/// Contact page +#[component] +pub fn Contact() -> Element { + rsx! { + div { "Contact" } + } +} diff --git a/src/pages/education.rs b/src/pages/education.rs new file mode 100644 index 0000000..077a11a --- /dev/null +++ b/src/pages/education.rs @@ -0,0 +1,9 @@ +use dioxus::prelude::*; + +/// Education page +#[component] +pub fn Education() -> Element { + rsx! { + div { "Education" } + } +} diff --git a/src/pages/home.rs b/src/pages/home.rs new file mode 100644 index 0000000..57dd127 --- /dev/null +++ b/src/pages/home.rs @@ -0,0 +1,26 @@ +use dioxus::prelude::*; + +/// Home page +#[component] +pub fn Home() -> Element { + rsx! { + div { class: "home-card", + div { class: "home-card-image", "Image" } + div { class: "home-card-content", + div { class: "home-card-hi", "Hi, I'm ..." } + div { class: "home-card-name", "Michał Czyż" } + div { class: "home-card-bio", "Information about me..." } + div { class: "home-card-buttons", + button { "Download CV" } + button { "Contact" } + } + div { class: "home-card-social", + button { "LinkedIn" } + button { "GitHub" } + button { "YouTube" } + button { "Email me!" } + } + } + } + } +} diff --git a/src/pages/mod.rs b/src/pages/mod.rs new file mode 100644 index 0000000..aacabfe --- /dev/null +++ b/src/pages/mod.rs @@ -0,0 +1,6 @@ +pub mod about; +pub mod certifications; +pub mod contact; +pub mod education; +pub mod home; +pub mod projects; diff --git a/src/pages/projects.rs b/src/pages/projects.rs new file mode 100644 index 0000000..135c8cc --- /dev/null +++ b/src/pages/projects.rs @@ -0,0 +1,9 @@ +use dioxus::prelude::*; + +/// Projects page +#[component] +pub fn Projects() -> Element { + rsx! { + div { "Projects" } + } +} diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 2a69d58..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,9 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - mode: "all", - content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"], - theme: { - extend: {}, - }, - plugins: [], -}; diff --git a/tailwind.css b/tailwind.css deleted file mode 100644 index bd6213e..0000000 --- a/tailwind.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; \ No newline at end of file