From 0962cb9703826d2d0b641b3c4b7f72934d048fa5 Mon Sep 17 00:00:00 2001 From: DelwinMansur Date: Thu, 10 Oct 2024 11:23:39 +0200 Subject: [PATCH 1/4] improved website --- index.html | 71 ++++++++++++++---------- style.css | 155 +++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 184 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 7b0d8b5a..7f1f633a 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,12 @@ - My Portfolio + Delwin Mansur A. Bawa | Portfolio - - +
-

My Name

+

Delwin Mansur A. Bawa

+

About Me

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi - excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi - commodi minima ullam necessitatibus, cumque blanditiis, nihil magni - amet consectetur? + Hi, I’m Delwin Mansur A. Bawa, a passionate web developer currently pursuing training at Migracode Barcelona. I have a strong foundation in HTML, CSS, and JavaScript, with experience building responsive and user-friendly websites. As the co-founder of Future for Africa, I am committed to using technology to drive social impact and community development. +

+

+ My journey in web development is focused on creating solutions that solve real-world problems, and I am excited to continue learning and growing in this field.

+ +

Projects Showcase

-

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi - excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi - commodi minima ullam necessitatibus, cumque blanditiis, nihil magni - amet consectetur? -

+ +
+

Cakes & Co

+

This project, I recreated a multi-page website for a cake shop using HTML and CSS, focusing on responsive design, clean UI, and user-friendly navigation.

+ View Code on GitHub | + Live Demo +
+ +
+

Bikes for Refugees

+

A fully responsive bikes for refugees website designed with HTML and CSS, Providing donated bikes and accessories to refugees and asylum seekers in Scotland.

+ View Code on GitHub | + Live Demo +
+ +
+

Personal Portfolio Website

+

A fully responsive portfolio website designed with HTML and CSS, showcasing my projects and contact details.

+ View Code on GitHub | + Live Demo +
+ +
-

Contact me

+

Contact Me

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi - excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi - commodi minima ullam necessitatibus, cumque blanditiis, nihil magni - amet consectetur? + I’m always open to exciting opportunities or collaborations. Feel free to reach out!

+
+ diff --git a/style.css b/style.css index c911f90c..9de287c8 100644 --- a/style.css +++ b/style.css @@ -1,41 +1,61 @@ /* Design tokens */ :root { - --paper: hsla(251, 28%, 88%, 0.99); - --ink: hsla(244, 16%, 17%, 0.95); - --brand: hsla(0, 79%, 63%, 0.9); - --font: "Raleway", system-ui, sans-serif; - --gap: 20px; - --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); + --paper: hsla(251, 28%, 88%, 0.99); /* Background color */ + --ink: hsla(244, 16%, 17%, 0.95); /* Text color */ + --brand: hsla(0, 79%, 63%, 0.9); /* Accent color */ + --font: "Raleway", system-ui, sans-serif; /* Font stack */ + --gap: 20px; /* Base gap for layout */ + --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); /* Max width for container */ + --radius: 10px; /* Border radius */ + --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Box shadow */ + --transition: all 0.3s ease-in-out; /* Transition effect */ + --heading-size: clamp(1.8rem, 2.5vw, 2.5rem); /* Responsive headings */ } + /* General Styles */ html, body { scroll-behavior: smooth; - background: var(--paper); + background: rgb(63, 62, 139); color: var(--ink); font-family: var(--font); + font-size: 16px; + margin: 0; + padding: 0; } -body { + h1 { + margin-left: 20px; + } +body { + + + display: grid; margin: auto; min-height: 100vh; gap: var(--gap); max-width: var(--container); } + +h2 { + margin-left: 20px; + } a, a:any-link { - color: currentColor; + color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; - transition: border-color ease-in-out 0.3s; + transition: var(--transition); } + a:hover, a:focus { color: var(--brand); - border-color: currentColor; + border-color: var(--brand); } + /* Site header and navigation */ -body > header { +header { background: var(--paper); display: flex; justify-content: space-between; @@ -43,15 +63,120 @@ body > header { position: sticky; top: 0; z-index: 1; + padding: 10px 0; + box-shadow: var(--shadow); } + +header h1 { + font-size: var(--heading-size); + font-weight: 800; +} + nav ul { display: flex; list-style: none; gap: var(--gap); + padding: 0; + margin: 20px; +} + +nav ul li { + display: inline-block; +} + +nav ul li a { + padding: 10px; + border-radius: var(--radius); + transition: var(--transition); +} + +nav ul li a:hover, +nav ul li a:focus { + background-color: var(--brand); + color: var(--paper); +} + +/* Main content */ +main section { + padding: 60px 20px; + border-radius: var(--radius); + box-shadow: var(--shadow); + margin-bottom: var(--gap); + background: white; +} + +section h2 { + font-size: var(--heading-size); + margin-bottom: 20px; } -/* Text readability */ section p { - line-height: 1.5; - max-width: 55ch; + line-height: 1.7; + margin: 20px; +} + +/* Project Section */ +.project-item { + padding: 20px; + border: 2px solid var(--ink); + border-radius: var(--radius); + transition: var(--transition); + margin: 20px; +} + +.project-item:hover { + border-color: var(--brand); + box-shadow: var(--shadow); +} + +.project-item h3 { + font-size: 1.5rem; + color: var(--brand); +} + +.project-item a { + font-weight: bold; + color: var(--brand); + border-bottom: 2px solid transparent; +} + +.project-item a:hover { + color: var(--ink); + border-color: var(--ink); +} + +/* Footer Styles */ +footer { + background: var(--paper); + padding: 20px; + text-align: center; + font-size: 0.9rem; +} + +footer h3 { + font-size: 1.2rem; +} + +footer svg { + fill: var(--ink); +} + +/* Responsive Design */ +@media (max-width: 768px) { + header h1 { + font-size: 1.5rem; + } + + nav ul { + flex-direction: column; + gap: 10px; + } + + section h2 { + font-size: 1.5rem; + } + + main section { + padding: 40px 15px; + } } From 431d7ad7812164b5c6bd930aaf12c4d69faac0a6 Mon Sep 17 00:00:00 2001 From: DelwinMansur Date: Thu, 10 Oct 2024 19:02:57 +0200 Subject: [PATCH 2/4] updated links --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 7f1f633a..c68a3feb 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@

Delwin Mansur A. Bawa

About Me

- Hi, I’m Delwin Mansur A. Bawa, a passionate web developer currently pursuing training at Migracode Barcelona. I have a strong foundation in HTML, CSS, and JavaScript, with experience building responsive and user-friendly websites. As the co-founder of Future for Africa, I am committed to using technology to drive social impact and community development. + Hi, I’m Delwin Mansur A. Bawa, a passionate web developer currently pursuing training at Migracode Barcelona. I have a strong foundation in HTML and CSS, with experience building responsive and user-friendly websites. As am passionate solving social issues through tech, I am committed to using technology to drive social impact and community development.

My journey in web development is focused on creating solutions that solve real-world problems, and I am excited to continue learning and growing in this field. @@ -60,22 +60,22 @@

Delwin Mansur A. Bawa

Cakes & Co

This project, I recreated a multi-page website for a cake shop using HTML and CSS, focusing on responsive design, clean UI, and user-friendly navigation.

- View Code on GitHub | + View Code on GitHub | Live Demo

Bikes for Refugees

A fully responsive bikes for refugees website designed with HTML and CSS, Providing donated bikes and accessories to refugees and asylum seekers in Scotland.

- View Code on GitHub | + View Code on GitHub | Live Demo

Personal Portfolio Website

-

A fully responsive portfolio website designed with HTML and CSS, showcasing my projects and contact details.

- View Code on GitHub | - Live Demo +

A redesigned website for Karma that provides Wifi services with HTML and CSS, showcasing projects and contact form.

+ View Code on GitHub | + Live Demo
From 481e46b354e931d1673c19feeba28fd3dd0ab061 Mon Sep 17 00:00:00 2001 From: DelwinMansur Date: Thu, 10 Oct 2024 20:21:54 +0200 Subject: [PATCH 3/4] links update --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index c68a3feb..593ce9eb 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@

Delwin Mansur A. Bawa

-

Projects Showcase

+

Projects

Cakes & Co

@@ -86,7 +86,7 @@

Personal Portfolio Website

I’m always open to exciting opportunities or collaborations. Feel free to reach out!

@@ -95,7 +95,7 @@

Personal Portfolio Website