diff --git a/assets/css/baseof.css b/assets/css/baseof.css index 0f83f60..dbfe1f2 100644 --- a/assets/css/baseof.css +++ b/assets/css/baseof.css @@ -57,7 +57,9 @@ body { #links .github, #links .cv-paper-flip, #links .mail, -#nav-toggler svg path { +#nav-toggler svg path, +.arrow, +.eye { stroke: var(--text); } diff --git a/assets/css/page/contact.css b/assets/css/contact.css similarity index 100% rename from assets/css/page/contact.css rename to assets/css/contact.css diff --git a/assets/css/list.css b/assets/css/list.css new file mode 100644 index 0000000..f6e8745 --- /dev/null +++ b/assets/css/list.css @@ -0,0 +1,14 @@ +main section { + margin-top: 2rem; +} + +main h2 { + font-size: 3rem; + margin-bottom: 1rem; +} + +@media only screen and (max-width: 1024px) { + main h2 { + font-size: 1.75rem; + } +} diff --git a/assets/css/partials/footer.css b/assets/css/partials/footer.css index d898586..92d1f54 100644 --- a/assets/css/partials/footer.css +++ b/assets/css/partials/footer.css @@ -1,5 +1,5 @@ :root { - --footer-light-background: #ececec; + --footer-light-background: #ECECEC; --footer-dark-background: #131212; } diff --git a/assets/css/partials/header.css b/assets/css/partials/header.css index 5194eac..54e93a4 100644 --- a/assets/css/partials/header.css +++ b/assets/css/partials/header.css @@ -1,7 +1,7 @@ :root { - --header-light-background: var(--white); + --header-light-background: #ECECEC; --header-dark-background: #676666; - --nav-light-background: var(--white); + --nav-light-background: #ECECEC; --nav-dark-background: #121212; } diff --git a/assets/css/partials/project-card.css b/assets/css/partials/project-card.css new file mode 100644 index 0000000..f8b4da9 --- /dev/null +++ b/assets/css/partials/project-card.css @@ -0,0 +1,60 @@ +:root { + --project-card-light-background: #f2f2f2; + --project-card-dark-background: #131212; +} + +article { + background-color: var(--project-card-background); + color: var(--text); + border-radius: 1.875rem; + padding: 3.5rem 2.5rem; +} + +article h3 { + font-size: 2rem; + margin-bottom: 1.75rem; + text-transform: capitalize; +} + +article p { + margin-bottom: 4rem; +} + +article #links { + display: flex; + align-items: center; + justify-content: space-between; +} + +article .read-more, +article .demo { + display: inline-flex; + align-items: center; +} + +article .read-more svg, +article .demo svg { + margin-left: 0.5rem; +} + +article .demo { + background-color: #353535; + color: var(--white); + border-radius: 0.4375rem; + text-decoration: none; + padding: 0.5rem 1rem; +} + +article .demo .eye { + stroke: var(--white); +} + +@media only screen and (max-width: 1024px) { + article h3 { + font-size: 1.5rem; + } + + article p { + margin-bottom: 1.75rem; + } +} diff --git a/assets/icons/arrow.svg b/assets/icons/arrow.svg index 0c17470..62cd45e 100644 --- a/assets/icons/arrow.svg +++ b/assets/icons/arrow.svg @@ -1,4 +1,4 @@ - - + + diff --git a/assets/icons/eye.svg b/assets/icons/eye.svg index d1d2ed5..45f8ec2 100644 --- a/assets/icons/eye.svg +++ b/assets/icons/eye.svg @@ -1,4 +1,4 @@ - - + + diff --git a/assets/js/baseof.js b/assets/js/baseof.js index f3bcf9c..60b2170 100644 --- a/assets/js/baseof.js +++ b/assets/js/baseof.js @@ -49,6 +49,12 @@ function loadTheme() { ? 'var(--button-light-background)' : 'var(--button-dark-background)' ); + root.style.setProperty( + '--project-card-background', + theme === 'light' + ? 'var(--project-card-light-background)' + : 'var(--project-card-dark-background)' + ); root.style.setProperty( '--footer-background', theme === 'light' diff --git a/content/blog/_index.md b/content/blog/_index.md new file mode 100644 index 0000000..f7d3816 --- /dev/null +++ b/content/blog/_index.md @@ -0,0 +1,8 @@ +--- +title: "Blog" +date: 2023-10-18T20:03:43+01:00 +--- + +## Blog + +These are articles about things I learned about software engineering. \ No newline at end of file diff --git a/content/blog/test-blog.md b/content/blog/test-blog.md new file mode 100644 index 0000000..4d1c6d9 --- /dev/null +++ b/content/blog/test-blog.md @@ -0,0 +1,5 @@ +--- +title: "Test blog" +description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." +date: 2023-10-18T20:03:43+01:00 +--- diff --git a/content/projects/_index.md b/content/projects/_index.md new file mode 100644 index 0000000..cfb64a6 --- /dev/null +++ b/content/projects/_index.md @@ -0,0 +1,8 @@ +--- +title: "Projects" +date: 2023-10-18T20:03:43+01:00 +--- + +## Projects + +These are all the projects I worked on personally and professionally. \ No newline at end of file diff --git a/content/projects/react-weather-app/index.md b/content/projects/react-weather-app/index.md new file mode 100644 index 0000000..adc6cf7 --- /dev/null +++ b/content/projects/react-weather-app/index.md @@ -0,0 +1,21 @@ +--- +title: 'React Weather App' +description: 'Weather app made with React, TypeScript and OpenWeatherMap API' +demo: "https://hazemkrimi.github.io/react-weather-app" +date: 2023-09-19 +--- + +# About the project + +This is a project that I made as a step in the interview process for my final year internship. + +# Technologies + +- React +- TypeScript +- Styled Components +- OpenWeatherMap API + +# Screenshots + +![Desktop](https://res.cloudinary.com/dun9hhyz1/image/upload/v1643548378/personal-website/portfolio/react-weather-app/screenshot_ueu2a4.png) diff --git a/content/projects/react-weather-app/react-weather-app-screenshot.png b/content/projects/react-weather-app/react-weather-app-screenshot.png new file mode 100644 index 0000000..c5f9ae9 Binary files /dev/null and b/content/projects/react-weather-app/react-weather-app-screenshot.png differ diff --git a/layouts/page/contact.html b/layouts/_default/contact.html similarity index 71% rename from layouts/page/contact.html rename to layouts/_default/contact.html index 8397eb8..940882b 100644 --- a/layouts/page/contact.html +++ b/layouts/_default/contact.html @@ -1,5 +1,5 @@ {{ define "styles" }} - {{ $styles := resources.Get "css/page/contact.css" | toCSS | minify }} + {{ $styles := resources.Get "css/contact.css" | toCSS | minify }} {{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..fe36d88 --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,15 @@ +{{ define "styles" }} + {{ $styles := resources.Get "css/list.css" | toCSS | minify }} + + +{{ end }} + +{{ define "main" }} + {{ .Content }} + +
+ {{ range .Pages }} + {{ partial "project-card.html" . }} + {{ end }} +
+{{ end }} diff --git a/layouts/partials/project-card.html b/layouts/partials/project-card.html new file mode 100644 index 0000000..6ff3074 --- /dev/null +++ b/layouts/partials/project-card.html @@ -0,0 +1,20 @@ +{{ $styles := resources.Get "css/partials/project-card.css" | toCSS | minify }} + + + +
+
+

{{ .Title }}

+

{{ .Params.description }}

+ +
+