feature: initial commit
This commit is contained in:
Danilo Cesa
@@ -0,0 +1,61 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const ECHO_CSS: Asset = asset!("/assets/styling/echo.css");
|
||||
|
||||
/// Echo component that demonstrates fullstack server functions.
|
||||
#[component]
|
||||
pub fn Echo() -> Element {
|
||||
// use_signal is a hook. Hooks in dioxus must be run in a consistent order every time the component is rendered.
|
||||
// That means they can't be run inside other hooks, async blocks, if statements, or loops.
|
||||
//
|
||||
// use_signal is a hook that creates a state for the component. It takes a closure that returns the initial value of the state.
|
||||
// The state is automatically tracked and will rerun any other hooks or components that read it whenever it changes.
|
||||
let mut response = use_signal(|| String::new());
|
||||
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: ECHO_CSS }
|
||||
|
||||
div {
|
||||
id: "echo",
|
||||
h4 { "ServerFn Echo" }
|
||||
input {
|
||||
placeholder: "Type here to echo...",
|
||||
// `oninput` is an event handler that will run when the input changes. It can return either nothing or a future
|
||||
// that will be run when the event runs.
|
||||
oninput: move |event| async move {
|
||||
// When we call the echo_server function from the client, it will fire a request to the server and return
|
||||
// the response. It handles serialization and deserialization of the request and response for us.
|
||||
let data = echo_server(event.value()).await.unwrap();
|
||||
|
||||
// After we have the data from the server, we can set the state of the signal to the new value.
|
||||
// Since we read the `response` signal later in this component, the component will rerun.
|
||||
response.set(data);
|
||||
},
|
||||
}
|
||||
|
||||
// Signals can be called like a function to clone the current value of the signal
|
||||
if !response().is_empty() {
|
||||
p {
|
||||
"Server echoed: "
|
||||
// Since we read the signal inside this component, the component "subscribes" to the signal. Whenever
|
||||
// the signal changes, the component will rerun.
|
||||
i { "{response}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Server functions let us define public APIs on the server that can be called like a normal async function from the client.
|
||||
// Each server function needs to be annotated with the `#[server]` attribute, accept and return serializable types, and return
|
||||
// a `Result` with the error type [`ServerFnError`].
|
||||
//
|
||||
// When the server function is called from the client, it will just serialize the arguments, call the API, and deserialize the
|
||||
// response.
|
||||
#[server]
|
||||
async fn echo_server(input: String) -> Result<String, ServerFnError> {
|
||||
// The body of server function like this comment are only included on the server. If you have any server-only logic like
|
||||
// database queries, you can put it here. Any imports for the server function should either be imported inside the function
|
||||
// or imported under a `#[cfg(feature = "server")]` block.
|
||||
Ok(input)
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn Hero() -> Element {
|
||||
rsx! {
|
||||
// We can create elements inside the rsx macro with the element name followed by a block of attributes and children.
|
||||
div {
|
||||
class: "content container mb6t29",
|
||||
div {
|
||||
class: "col self-center flex-1 md:flex-row md:self-stretch justify-center lg:justify-between items-center p-y-0px p-x-10px",
|
||||
div {
|
||||
class: "md:flex-1 gap-10px",
|
||||
h1 {
|
||||
class: "font-[var(--title-f)] font-black tracking-[4px] text-center text-2.5em sm:text-[3em] md:text-[3.5em] lg:text-[4em] md:text-left",
|
||||
style: "background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: text; background-color: ; -webkit-background-clip: text;",
|
||||
"Danilo"
|
||||
" "
|
||||
"Cesa"
|
||||
}
|
||||
p {
|
||||
class: "text-[var(--tertiary-text)] text-center md:text-left text-[1.2em] font-extralight",
|
||||
"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, rerum. Debitis accusantium deleniti enim iste dignissimos? Similique, exercitationem! Odit vero, numquam quae ratione maxime sunt reiciendis laudantium quaerat iure ipsum!"
|
||||
}
|
||||
}
|
||||
// h1 {
|
||||
// class: "text-4xl md:text-6xl font-bold mb-4",
|
||||
// "Hey, I'm Dan"
|
||||
// }
|
||||
// p {
|
||||
// class: "text-lg md:text-xl text-gray-400",
|
||||
// "Full Stack Developer"
|
||||
// }
|
||||
}
|
||||
// div {
|
||||
// class: "p-4 rounded-lg hover:border-cyan-500 transition duration-300",
|
||||
// p {
|
||||
// class: "text-gray-400",
|
||||
// "I'm a passionate software developer with a background in computer science and a keen interest in frontend technologies."
|
||||
// }
|
||||
// }
|
||||
// div {
|
||||
// class: "row justify-center md:justify-start p-y-15px p-x-0px gap-2",
|
||||
// a {
|
||||
// class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition duration-300",
|
||||
// href: "#contact",
|
||||
// svg {
|
||||
// class: "inline-block",
|
||||
// view_box: "0 0 24 24",
|
||||
// fill: "var(--accent-text)",
|
||||
// height: "20px",
|
||||
// width: "20px",
|
||||
// path {
|
||||
// d: "M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// a {
|
||||
// class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition duration-300",
|
||||
// href: "#contact",
|
||||
// svg {
|
||||
// class: "inline-block",
|
||||
// view_box: "0 0 16 16",
|
||||
// fill: "var(--accent-text)",
|
||||
// height: "20px",
|
||||
// width: "20px",
|
||||
// path {
|
||||
// d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
//! The components module contains all shared components for our app. Components are the building blocks of dioxus apps.
|
||||
//! They can be used to defined common UI elements like buttons, forms, and modals. In this template, we define a Hero
|
||||
//! component and an Echo component for fullstack apps to be used in our app.
|
||||
|
||||
mod hero;
|
||||
pub use hero::Hero;
|
||||
|
||||
// mod echo;
|
||||
// pub use echo::Echo;
|
||||
@@ -0,0 +1,15 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn Search() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
class: "w-100% row",
|
||||
input {
|
||||
class: "text-[inherit] bg-transparent border-[1px] border-solid border-[var(--border)] px-[20px] py-[10px] rounded-[15px] flex-1 text-[1.15em] c0g44u",
|
||||
type: "text",
|
||||
placeholder: "Search..."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
// The dioxus prelude contains a ton of common items used in dioxus apps. It's a good idea to import wherever you
|
||||
// need dioxus
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use views::{Blog, Home, Navbar, Skills, Projects, Experiences};
|
||||
|
||||
/// 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;
|
||||
|
||||
/// 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.
|
||||
///
|
||||
/// Each variant represents a different URL pattern that can be matched by the router. If that pattern is matched,
|
||||
/// the components for that route will be rendered.
|
||||
#[derive(Debug, Clone, Routable, PartialEq)]
|
||||
#[rustfmt::skip]
|
||||
enum Route {
|
||||
// The layout attribute defines a wrapper for all routes under the layout. Layouts are great for wrapping
|
||||
// many routes with a common UI like a navbar.
|
||||
#[layout(Navbar)]
|
||||
// The route attribute defines the URL pattern that a specific route matches. If that pattern matches the URL,
|
||||
// the component for that route will be rendered. The component name that is rendered defaults to the variant name.
|
||||
#[route("/")]
|
||||
Home {},
|
||||
|
||||
#[route("/skills")]
|
||||
Skills {},
|
||||
|
||||
#[route("/projects")]
|
||||
Projects {},
|
||||
|
||||
#[route("/experiences")]
|
||||
Experiences {},
|
||||
// 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")]
|
||||
// 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 },
|
||||
}
|
||||
|
||||
// We can import assets in dioxus with the `asset!` macro. This macro takes a path to an asset relative to the crate root.
|
||||
// The macro returns an `Asset` type that will display as the path to the asset in the browser or a local path in desktop bundles.
|
||||
const FAVICON: Asset = asset!("/assets/favicon.ico");
|
||||
// The asset macro also minifies some assets like CSS and JS to make bundled smaller
|
||||
const MAIN_CSS: Asset = asset!("/assets/styling/main.css");
|
||||
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
|
||||
const ICONS_CSS: Asset = asset!("/assets/styling/icons.css");
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
/// App is the main component of our app. Components are the building blocks of dioxus apps. Each component is a function
|
||||
/// that takes some props and returns an Element. In this case, App takes no props because it is the root of our app.
|
||||
///
|
||||
/// Components should be annotated with `#[component]` to support props, better error messages, and autocomplete
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
// The `rsx!` macro lets us define HTML inside of rust. It expands to an Element with all of our HTML inside.
|
||||
let is_dark_theme = false;
|
||||
rsx! {
|
||||
// In addition to element and text (which we will see later), rsx can contain other components. In this case,
|
||||
// we are using the `document::Link` component to add a link to our favicon and main CSS file into the head of our app.
|
||||
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: ICONS_CSS }
|
||||
|
||||
// The router component renders the route enum we defined above. It will handle synchronization of the URL and render
|
||||
// the layouts and components for the active route.
|
||||
div {
|
||||
class: "body contents mb6t29",
|
||||
"data-Theme": if is_dark_theme { "dark" } else { "light" },
|
||||
Router::<Route> {}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
use crate::Route;
|
||||
use dioxus::{html::{div, input}, prelude::*};
|
||||
|
||||
// const SKILL_CSS: Asset = asset!("/assets/styling/blog.css");
|
||||
|
||||
#[component]
|
||||
pub fn Experiences() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
class: "content container mb6t29",
|
||||
div {
|
||||
class: "flex-1 col gap-5 px-2 sm:px-4 md:px-6 py-4 sm:py-8 md:py-12",
|
||||
h1 {
|
||||
class: "font-[var(--title-f)] font-black tracking-[4px] text-center text-2.5em sm:text-[3em] md:text-[3.5em] lg:text-[4em]",
|
||||
"Experiences"
|
||||
}
|
||||
|
||||
div {
|
||||
class: "col gap-5 flex-1",
|
||||
|
||||
div { class: "w-100% col flex-1",
|
||||
div { class:"col items-center relative mt-10 flex-1",
|
||||
div {class:"w-[0.5px] hidden lg:flex top-0 bottom-0 py-50px bg-[var(--border)] absolute rounded"}
|
||||
div { class: "flex flex-row-reverse relative items-center w-full my-[10px]",
|
||||
div { class: "flex-1 hidden lg:flex"}
|
||||
div { class: "hidden lg:inline p-15px bg-[var(--main)] rounded",
|
||||
i { class: "i-carbon-condition-point"}
|
||||
}
|
||||
div { class:" flex-1 col items-stretch",
|
||||
a { class:" card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative d1441skb",
|
||||
style:" margin: 0px 0px 20px; --border-color: #ff000080; --drop-color: #ff000026; --bg-color: #ff000003;",
|
||||
div { class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
|
||||
div { class: "col md:flex-row items-start gap-5 md:gap-1",
|
||||
div{ class: "col ml-0 md:ml-[20px] gap-3 w-full",
|
||||
div { class: "col ",
|
||||
h3 { class: "flex text-[0.9em] flex-col items-start sm:flex-row sm:items-center justify-between sm:gap-5 md:flex-col md:items-start md:gap-0 lg:flex-row lg:items-center",
|
||||
h3 { class: "font-[var(--title-f)] text-1.25em",
|
||||
"Experience 1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {class: "text-[var(--text)] text-[0.9em]",
|
||||
div {class: "row items-center gap-2",
|
||||
i { class: "i-carbon-calendar text-1.25em"}
|
||||
"Jan 2025 - Present"
|
||||
}
|
||||
|
||||
div { class: "bg-[var(--border)] h-1px m-y-10px"}
|
||||
|
||||
div { class: "row items-center gap-2",
|
||||
i { class: "i-carbon-time text-1.25em" }
|
||||
"4 Years"
|
||||
}
|
||||
|
||||
div { class: "bg-[var(--border)] h-1px m-y-10px"}
|
||||
}
|
||||
|
||||
div { class: "experience-description text-[0.9em]",
|
||||
"Creating awesome tools for developers."
|
||||
}
|
||||
|
||||
div { class: "flex flex-row flex-wrap mt-5",
|
||||
a { class: "chip-icon row-center relative text-inherit decoration-none p-10px m-r-5px m-b-5px border-1px border-solid border-[var(--border)] hover:border-[var(--border-hover)] rounded-10px hover:z-5 cursor-pointer grayscale-65 hover:grayscale-0 d1m94jop",
|
||||
"data-Help": "Rust",
|
||||
img {class: "w-15px h-15px d1m94jop",
|
||||
alt: "Rust"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "flex flex-row relative items-center w-full my-[10px]",
|
||||
div { class: "flex-1 hidden lg:flex"}
|
||||
div { class: "hidden lg:inline p-15px bg-[var(--main)] rounded",
|
||||
i { class: "i-carbon-condition-point"}
|
||||
}
|
||||
div { class:" flex-1 col items-stretch",
|
||||
a { class:" card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative d1441skb",
|
||||
style:" margin: 0px 0px 20px; --border-color: #ff000080; --drop-color: #ff000026; --bg-color: #ff000003;",
|
||||
div { class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
|
||||
div { class: "col md:flex-row items-start gap-5 md:gap-1",
|
||||
div{ class: "col ml-0 md:ml-[20px] gap-3 w-full",
|
||||
div { class: "col ",
|
||||
h3 { class: "flex text-[0.9em] flex-col items-start sm:flex-row sm:items-center justify-between sm:gap-5 md:flex-col md:items-start md:gap-0 lg:flex-row lg:items-center",
|
||||
h3 { class: "font-[var(--title-f)] text-1.25em",
|
||||
"Experience 1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {class: "text-[var(--text)] text-[0.9em]",
|
||||
div {class: "row items-center gap-2",
|
||||
i { class: "i-carbon-calendar text-1.25em"}
|
||||
"Jan 2025 - Present"
|
||||
}
|
||||
|
||||
div { class: "bg-[var(--border)] h-1px m-y-10px"}
|
||||
|
||||
div { class: "row items-center gap-2",
|
||||
i { class: "i-carbon-time text-1.25em" }
|
||||
"4 Years"
|
||||
}
|
||||
|
||||
div { class: "bg-[var(--border)] h-1px m-y-10px"}
|
||||
}
|
||||
|
||||
div { class: "experience-description text-[0.9em]",
|
||||
"Creating awesome tools for developers."
|
||||
}
|
||||
|
||||
div { class: "flex flex-row flex-wrap mt-5",
|
||||
a { class: "chip-icon row-center relative text-inherit decoration-none p-10px m-r-5px m-b-5px border-1px border-solid border-[var(--border)] hover:border-[var(--border-hover)] rounded-10px hover:z-5 cursor-pointer grayscale-65 hover:grayscale-0 d1m94jop",
|
||||
"data-Help": "Rust",
|
||||
img {class: "w-15px h-15px d1m94jop",
|
||||
alt: "Rust"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
use crate::components::{Hero};
|
||||
use dioxus::prelude::*;
|
||||
|
||||
/// The Home page component that will be rendered when the current route is `[Route::Home]`
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
//! The views module contains the components for all Layouts and Routes for our app. Each layout and route in our [`Route`]
|
||||
//! enum will render one of these components.
|
||||
//!
|
||||
//!
|
||||
//! The [`Home`] and [`Blog`] components will be rendered when the current route is [`Route::Home`] or [`Route::Blog`] respectively.
|
||||
//!
|
||||
//!
|
||||
//! The [`Navbar`] component will be rendered on all pages of our app since every page is under the layout. The layout defines
|
||||
//! a common wrapper around all child routes.
|
||||
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
|
||||
mod navbar;
|
||||
pub use navbar::Navbar;
|
||||
|
||||
mod skills;
|
||||
pub use skills::Skills;
|
||||
|
||||
mod projects;
|
||||
pub use projects::Projects;
|
||||
|
||||
mod experiences;
|
||||
pub use experiences::Experiences;
|
||||
@@ -0,0 +1,121 @@
|
||||
use crate::Route;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
|
||||
const MAIN_CSS: Asset = asset!("/assets/styling/main.css");
|
||||
|
||||
/// The Navbar component that will be rendered on all pages of our app since every page is under the layout.
|
||||
///
|
||||
///
|
||||
/// This layout component wraps the UI of [Route::Home] and [Route::Blog] in a common navbar. The contents of the Home and Blog
|
||||
/// routes will be rendered under the outlet inside this component
|
||||
#[component]
|
||||
pub fn Navbar() -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: NAVBAR_CSS }
|
||||
|
||||
div {
|
||||
class: "nav-menu jdc7ud",
|
||||
nav {
|
||||
class: "container flex flex-row items-center text-sm",
|
||||
Link {
|
||||
to: Route::Home {},
|
||||
class: "nav-menu-left decoration-none w-auto md:w-150px lg:w-auto row flex flex-row items-center cursor-pointer px-4 text-[var(--secondary-text)] self-stretch hover:bg-[color:var(--main-hover)]",
|
||||
i {
|
||||
class: "i-carbon-code text-2em"
|
||||
}
|
||||
span {
|
||||
class: "ml-2 text-md font-bold hidden md:inline overflow-hidden whitespace-nowrap text-ellipsis",
|
||||
"Danilo"
|
||||
" "
|
||||
"Cesa"
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "flex-1 block overflow-hidden md:hidden whitespace-nowrap text-ellipsis text-center",
|
||||
"Danilo"
|
||||
" "
|
||||
"Cesa"
|
||||
}
|
||||
div {
|
||||
class: "flex-row flex-1 self-center h-full justify-center hidden md:flex",
|
||||
Link {
|
||||
to: Route::Skills {},
|
||||
class: "nav-menu-item !text-[var(--secondary-text)] jdc7ud",
|
||||
i {
|
||||
class: "i-carbon-software-resource-cluster text-1.3em"
|
||||
}
|
||||
span {
|
||||
class: "nav-menu-item-label jdc7ud",
|
||||
"Skills"
|
||||
}
|
||||
}
|
||||
|
||||
Link {
|
||||
class: "nav-menu-item !text-[var(--secondary-text)] jdc7ud",
|
||||
to: Route::Projects {},
|
||||
i {
|
||||
class: "i-carbon-cube text-1.3em"
|
||||
}
|
||||
span {
|
||||
class: "nav-menu-item-label jdc7ud",
|
||||
"Projects"
|
||||
}
|
||||
}
|
||||
|
||||
Link {
|
||||
class: "nav-menu-item !text-[var(--secondary-text)] jdc7ud",
|
||||
to: Route::Experiences {},
|
||||
i {
|
||||
class: "i-carbon-development text-1.3em"
|
||||
}
|
||||
span {
|
||||
class: "nav-menu-item-label jdc7ud",
|
||||
"Experiences"
|
||||
}
|
||||
}
|
||||
|
||||
Link {
|
||||
class: "nav-menu-item !text-[var(--secondary-text)] jdc7ud",
|
||||
to: Route::Home {},
|
||||
i {
|
||||
class: "i-carbon-result text-1.3em"
|
||||
}
|
||||
span {
|
||||
class: "nav-menu-item-label jdc7ud",
|
||||
"Resume"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// div {
|
||||
// class: "row h-full justify-center items-stretch m-l-auto md:m-l-0 w-auto md:w-150px gap-1 text-1.15em",
|
||||
// div {
|
||||
// class: "row hidden md:flex",
|
||||
// // a {
|
||||
// // class: "text-inherit col-center self-stretch px-2 hover:bg-[color:var(--main-hover)]"
|
||||
// // }
|
||||
// // button {
|
||||
// // class: "bg-transparent text-1em border-none cursor-pointer hover:bg-[color:var(--main-hover)] text-[var(--secondary-text)] px-2",
|
||||
// // i {
|
||||
// // class: "i-carbon-moon"
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
|
||||
// div {
|
||||
// class: "col-center md:hidden h-full hover:bg-[var(--main-hover)] cursor-pointer",
|
||||
// div {
|
||||
// class: "nav-bar-mobile-btn col-center jdc7ud"
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// The `Outlet` component is used to render the next component inside the layout. In this case, it will render either
|
||||
// the [`Home`] or [`Blog`] component depending on the current route.
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
use crate::Route;
|
||||
use dioxus::{html::input, prelude::*};
|
||||
|
||||
// const SKILL_CSS: Asset = asset!("/assets/styling/blog.css");
|
||||
|
||||
#[component]
|
||||
pub fn Projects() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
class: "content container mb6t29",
|
||||
div {
|
||||
class: "flex-1 col gap-5 px-2 sm:px-4 md:px-6 py-4 sm:py-8 md:py-12",
|
||||
h1 {
|
||||
class: "font-[var(--title-f)] font-black tracking-[4px] text-center text-2.5em sm:text-[3em] md:text-[3.5em] lg:text-[4em]",
|
||||
"Projects"
|
||||
}
|
||||
|
||||
div {
|
||||
class: "col gap-5 flex-1",
|
||||
div {
|
||||
class: "w-100% row",
|
||||
input {
|
||||
class: "text-[inherit] bg-transparent border-[1px] border-solid border-[var(--border)] px-[20px] py-[10px] rounded-[15px] flex-1 text-[1.15em] c0g44u",
|
||||
type: "text",
|
||||
placeholder: "Search skills..."
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "w-100% col flex-1",
|
||||
div { class:"projects-list mt-5 df4z73x",
|
||||
a {class: "card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative d1441skb",
|
||||
style: "margin: 0px; --border-color: #5e95e380; --drop-color: #5e95e326; --bg-color: #5e95e303; --drop-x: 493.2045202255249px; --drop-y: 32.51171875px; --rot-x: 4.36deg; --rot-y: 4.82deg;",
|
||||
div { class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
|
||||
|
||||
div { class: "m-t-20px row justify-between items-center",
|
||||
h3 { class: "font-[var(--title-f)] text-1.25em",
|
||||
"Project 1"
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "bg-[var(--border)] h-1px m-y-10px" }
|
||||
|
||||
div { class: "col m-b-15px justify-between text-[var(--secondary-text)] text-0.85em",
|
||||
div { class: "row items-center gap-2",
|
||||
i { class: "i-carbon-assembly-cluster text-1.25em" }
|
||||
p { "Website Template"}
|
||||
|
||||
}
|
||||
|
||||
div { class: "bg-[var(--border)] h-1px m-y-10px"}
|
||||
|
||||
div { class: "row items-center gap-2",
|
||||
i { class: "i-carbon-time text-1.25em"}
|
||||
p { "1 day"}
|
||||
}
|
||||
|
||||
div { class: "bg-[var(--border)] h-1px m-y-10px"}
|
||||
}
|
||||
|
||||
div { class: "col sm:h-100px md:h-160px",
|
||||
p { class: "text-[0.9em] text-[var(--secondary-text)] m-t-20px m-b-40px flex-1 line-clamp-3",
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore non dolores voluptatibus vitae praesentium aperiam, iure laboriosam repellendus sunt explicabo pariatur totam enim, nihil animi quisquam. Sit vero quod laborum!"
|
||||
}
|
||||
}
|
||||
|
||||
div { class:"row justify-between text-0.8em font-400",
|
||||
button { class: "row-center cursor-pointer py-[5px] px-[15px] m-[2.5px] decoration-none inline-block border-[1px] border-solid border-[var(--border)] rounded-[20px] tracking-wider text-[0.9em] text-[var(--tertiary-text)] duration-[150ms] font-light bg-transparent hover:bg-[var(--main-hover)]",
|
||||
"May 2025"
|
||||
}
|
||||
button { class: "row-center cursor-pointer py-[5px] px-[15px] m-[2.5px] decoration-none inline-block border-[1px] border-solid border-[var(--border)] rounded-[20px] tracking-wider text-[0.9em] text-[var(--tertiary-text)] duration-[150ms] font-light bg-transparent hover:bg-[var(--main-hover)]",
|
||||
"now"
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "bg-[var(--border)] h-1px m-y-10px"}
|
||||
|
||||
div { class: "row flex-wrap",
|
||||
a { class: "chip-icon row-center relative text-inherit decoration-none p-10px m-r-5px m-b-5px border-1px border-solid border-[var(--border)] hover:border-[var(--border-hover)] rounded-10px hover:z-5 cursor-pointer grayscale-65 hover:grayscale-0 d1m94jop",
|
||||
img { class: "w-15px h-15px d1m94jop",
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
use crate::Route;
|
||||
use dioxus::{html::input, prelude::*};
|
||||
|
||||
// const SKILL_CSS: Asset = asset!("/assets/styling/blog.css");
|
||||
|
||||
#[component]
|
||||
pub fn Skills() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
class: "content container mb6t29",
|
||||
div {
|
||||
class: "flex-1 col gap-5 px-2 sm:px-4 md:px-6 py-4 sm:py-8 md:py-12",
|
||||
h1 {
|
||||
class: "font-[var(--title-f)] font-black tracking-[4px] text-center text-2.5em sm:text-[3em] md:text-[3.5em] lg:text-[4em]",
|
||||
"Skills"
|
||||
}
|
||||
|
||||
div {
|
||||
class: "col gap-5 flex-1",
|
||||
div {
|
||||
class: "w-100% row",
|
||||
input {
|
||||
class: "text-[inherit] bg-transparent border-[1px] border-solid border-[var(--border)] px-[20px] py-[10px] rounded-[15px] flex-1 text-[1.15em] c0g44u",
|
||||
type: "text",
|
||||
placeholder: "Search skills..."
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "w-100% col flex-1",
|
||||
div { class: "col mt-5 gap-7",
|
||||
div { class: "col gap-5 mb-7",
|
||||
div { class: "row items-center gap-5",
|
||||
div { class: "bg-[var(--main-hover)] h-[1px] w-[20px]"}
|
||||
p {
|
||||
class: "text-[var(--main-close)]",
|
||||
"Programming Languages"
|
||||
}
|
||||
div { class: "flex-1 bg-[var(--main-hover)] h-[1px]"}
|
||||
}
|
||||
|
||||
div {
|
||||
class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-3 lg:gap-5",
|
||||
a {
|
||||
class: "card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative cursor-pointer decoration-none d1441skb",
|
||||
style: "margin: 0px; --bg-img: url(.png); --border-color: #ffff0080; --drop-color: #ffff0026; --bg-color: #ffff0003;",
|
||||
div {
|
||||
class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
|
||||
div {
|
||||
class: "text-[var(--tertiary-text)]",
|
||||
"Javascript"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
class: "card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative cursor-pointer decoration-none d1441skb",
|
||||
style: "margin: 0px; --bg-img: url(.png); --border-color: #ffff0080; --drop-color: #ffff0026; --bg-color: #ffff0003;",
|
||||
div {
|
||||
class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
|
||||
div {
|
||||
class: "text-[var(--tertiary-text)]",
|
||||
"PHP"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user