diff --git a/index.html b/index.html index 7b0d8b5a..315c2ce5 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 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.

-
-
-

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? + My journey in web development is focused on creating solutions that solve real-world problems, leveraging technology to make a meaningful impact. I am passionate about exploring innovative ideas, collaborating with others, and delivering user-centered designs. I am excited to continue learning and growing in this dynamic and ever-evolving field.

+ + +
+

Projects

+ +
+

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 redesigned website for Karma that provides Wifi services with HTML and CSS, showcasing projects and contact form.

+ 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; + } }