Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
leoha committed Dec 18, 2024
1 parent 93d6585 commit 5c0cad3
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 35 deletions.
78 changes: 45 additions & 33 deletions src/components/projects.rs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
use yew::prelude::*;
use crate::models::Project;
use yew::prelude::*;

#[derive(Properties, PartialEq)]
pub struct ProjectsProps {
Expand All @@ -8,54 +8,66 @@ pub struct ProjectsProps {

#[function_component(Projects)]
pub fn projects(props: &ProjectsProps) -> Html {
let projects = props.projects.clone();

html! {
<section id="projects" class="text-custom-main px-4 py-16 max-w-6xl mx-auto">
<h2 class="text-2xl mb-8">{"Projects I'm proud of"}</h2>
<div class="grid gap-8">
{ for props.projects.iter().map(|project| {
{ for projects.into_iter().map(|project| {
let links = project.links.clone();
let technologies = project.technologies.clone();

let (text_col_start, image_col_start, text_align_class, border_class) = if project.reverse {
(
"col-start-1",
"col-start-6",
"sm:text-left",
"border-l sm:border-t border-t sm:border-b-0 border-l-custom-add border-t-custom-add sm:border-t-custom-add p-4"
)
("col-start-1", "col-start-6", "sm:text-left", "border-l sm:border-t border-t sm:border-b-0 border-l-custom-add border-t-custom-add sm:border-t-custom-add p-4")
} else {
(
"col-start-5",
"col-start-1",
"text-right",
"border-r border-t sm:border-b-0 sm:border-t border-r-custom-add border-t-custom-add sm:border-t-custom-add p-4"
)
("col-start-5", "col-start-1", "text-right", "border-r border-t sm:border-b-0 sm:border-t border-r-custom-add border-t-custom-add sm:border-t-custom-add p-4")
};

html! {
<article class="sm:grid gap-4 sm:grid-cols-10 relative">
<div class={format!("col-span-6 {} row-start-1 row-end-2 order-2 {} relative z-10", text_col_start, text_align_class)}>
<h3 class="text-sm">{ &project.subtitle }</h3>
<h4 class="text-lg text-custom-add">{ &project.title }</h4>
<p class="text-base mb-4 p-4 bg-custom-bg-add rounded-lg">{ &project.description }</p>
<h4 class="font-semibold">{"Technologies used include:"}</h4>
<ul class={format!("flex gap-3 text-base{}", if project.reverse { "justify-start" } else { "justify-end justify-end" })}>
{ for project.technologies.iter().map(|tech| {
html! {
<li class="hover:text-custom-active">
<a href={tech.url} target="_blank" rel="noopener noreferrer">
{ tech.name }
</a>
</li>
}
})}
</ul>
</div>
<div class={format!("col-span-6 {} row-start-1 row-end-2 order-2 {} relative z-10", text_col_start, text_align_class)}>
<h4 class="text-base font-mono">{ &project.subtitle }</h4>
<h3 class="text-2xl font-bold text-custom-add mb-2">
{ &project.title }
{ links.into_iter().map(|link| html! {
<a href={link.url.clone()} target="_blank" class="">
{ if let Some(icon_url) = link.icon_url {
html! {
<img
src={icon_url}
alt={link.sr_text.clone()}
class="w-4 h-4 m- inline-block ml-2 mb-[2px] filter invert brightness-0"
/>
}
} else {
html! {}
}}
<span class="sr-only">{ link.sr_text.clone().unwrap_or_default() }</span>
</a>
}).collect::<Html>() }
</h3>

<p class="text-base mb-4 p-4 bg-custom-bg-add rounded-lg">{ &project.description }</p>
<h4 class="font-semibold">{"Technologies used include:"}</h4>
<ul class={format!("flex gap-3 text-base {}", if project.reverse { "justify-start" } else { "justify-end" })}>
{ technologies.into_iter().map(|tech| html! {
<li class="hover:text-custom-active">
<a href={tech.url} target="_blank" rel="noopener noreferrer">
{ tech.name }
</a>
</li>
}).collect::<Html>() }
</ul>
</div>
<img
src={project.image_url.clone()}
src={project.image_url}
alt={format!("Screenshot of {}", project.title)}
class={format!("rounded-3xl col-span-5 {} row-start-1 row-end-2 {}", image_col_start, border_class)}
/>
</article>
}
})}
}) }
</div>
</section>
}
Expand Down
4 changes: 2 additions & 2 deletions src/services/project_service.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ use crate::models::{LinkItem, Project, Technology};
pub fn get_projects() -> Vec<Project> {
vec![
Project {
subtitle: "Workki AI".to_string(),
title: "Web pages".to_string(),
description: "To date, I have successfully added end-to-end tests with Cypress, significantly enhancing application reliability. I adapted the frontend to meet evolving business needs and migrated static data and blog content to the Sanity CMS, optimizing content management workflows. Additionally, I updated SEO practices to align with the latest standards, resulting in improved search engine visibility and traffic. I continue to contribute to ongoing development and optimization efforts.".to_string(),
technologies: vec![VUE, NUXT, CYPRESS, SANITY],
Expand All @@ -18,9 +19,9 @@ pub fn get_projects() -> Vec<Project> {
// ("GitHub".to_string(), "https://github.com/example".to_string()),
],
reverse: true,
subtitle: "Workki AI".to_string(),
},
Project {
subtitle: "Thesis Project".to_string(),
title: "Thesis Project".to_string(),
description: "Designed and developed a web application for managing device content across LAB UAS.".to_string(),
technologies: vec![REACT, REDUX, NEST],
Expand All @@ -33,7 +34,6 @@ pub fn get_projects() -> Vec<Project> {
}
],
reverse: false,
subtitle: "Thesis Project".to_string(),
},
]
}
Expand Down
84 changes: 84 additions & 0 deletions styles/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -636,6 +636,30 @@ body {
margin-top: 2rem;
}

.mb-2 {
margin-bottom: 0.5rem;
}

.ml-2 {
margin-left: 0.5rem;
}

.mb-1 {
margin-bottom: 0.25rem;
}

.mb-\[1px\] {
margin-bottom: 1px;
}

.mb-\[2px\] {
margin-bottom: 2px;
}

.ml-1 {
margin-left: 0.25rem;
}

.inline-block {
display: inline-block;
}
Expand All @@ -656,10 +680,18 @@ body {
height: 0.15rem;
}

.h-4 {
height: 1rem;
}

.w-full {
width: 100%;
}

.w-4 {
width: 1rem;
}

.max-w-6xl {
max-width: 72rem;
}
Expand Down Expand Up @@ -771,6 +803,22 @@ body {
background-image: linear-gradient(90deg, rgba(143, 96, 213, 1) 0%, rgba(0, 212, 255, 1) 100%);
}

.fill-white {
fill: #fff;
}

.fill-red-300 {
fill: #fca5a5;
}

.fill-current {
fill: currentColor;
}

.stroke-slate-700 {
stroke: #334155;
}

.p-4 {
padding: 1rem;
}
Expand Down Expand Up @@ -819,6 +867,10 @@ body {
text-align: right;
}

.align-middle {
vertical-align: middle;
}

.font-mono {
font-family: Oxygen mono, monospace;
}
Expand Down Expand Up @@ -892,6 +944,14 @@ body {
font-weight: 600;
}

.font-bold {
font-weight: 700;
}

.font-normal {
font-weight: 400;
}

.leading-6 {
line-height: 1.5rem;
}
Expand All @@ -914,6 +974,30 @@ body {
color: rgb(247 248 250 / var(--tw-text-opacity, 1));
}

.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.brightness-0 {
--tw-brightness: brightness(0);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@font-face {
font-family: 'Oxygen';

Expand Down

0 comments on commit 5c0cad3

Please sign in to comment.