Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migracode | Delwin Bawa | Portfolio #133

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Migracode | Delwin Bawa | Portfolio #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0962cb9
improved website
DelwinMansur Oct 10, 2024
431d7ad
updated links
DelwinMansur Oct 10, 2024
481e46b
links update
DelwinMansur Oct 10, 2024
fc3c33e
improving the text
DelwinMansur Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 45 additions & 28 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,12 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My Portfolio</title>
<title>Delwin Mansur A. Bawa | Portfolio</title>
<meta
name="description"
content="The technical portfolio of trainee name"
content="The technical portfolio of Delwin Mansur A. Bawa"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- suppress FOUC-->
<style>
html {
animation: fade-in 1s;
Expand All @@ -23,12 +22,7 @@
}
}
</style>
<link
rel="stylesheet"
href="style.css"
media="print"
onload="this.media='all'"
/>
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
Expand All @@ -38,7 +32,7 @@
</head>
<body>
<header>
<h1>My Name</h1>
<h1>Delwin Mansur A. Bawa</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
Expand All @@ -48,37 +42,60 @@ <h1>My Name</h1>
</nav>
</header>
<main tabindex="0">
<!-- About Section -->
<section id="about">
<header><h2>About Me</h2></header>
<p>
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.
</p>
</section>
<section id="projects">
<header><h2>Projects Showcase</h2></header>
<p>
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.
</p>
</section>

<!-- Projects Section -->
<section id="projects">
<header><h2>Projects</h2></header>

<div class="project-item">
<h3>Cakes & Co</h3>
<p>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.</p>
<a href="https://github.com/DelwinMansur/Module-HTML-CSS" target="_blank">View Code on GitHub</a> |
<a href="https://cakescodelwin.netlify.app/" target="_blank">Live Demo</a>
</div>

<div class="project-item">
<h3>Bikes for Refugees</h3>
<p>A fully responsive bikes for refugees website designed with HTML and CSS, Providing donated bikes and accessories to refugees and asylum seekers in Scotland.</p>
<a href="https://github.com/DelwinMansur/bikes-for-refugees" target="_blank">View Code on GitHub</a> |
<a href="https://bikes4refugees.netlify.app/" target="_blank">Live Demo</a>
</div>

<div class="project-item">
<h3>Personal Portfolio Website</h3>
<p>A redesigned website for Karma that provides Wifi services with HTML and CSS, showcasing projects and contact form.</p>
<a href="https://github.com/DelwinMansur/HTML-CSS-Module-Project" target="_blank">View Code on GitHub</a> |
<a href="https://storepaged.netlify.app/" target="_blank">Live Demo</a>
</div>
</section>

<!-- Contact Section -->
<section id="contact">
<header><h2>Contact me</h2></header>
<header><h2>Contact Me</h2></header>
<p>
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!
</p>
<ul>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>LinkedIn: <a href="https://www.linkedin.com/in/delwin-mansur-bawa-137788112?lipi=urn%3Ali%3Apage%3Ad_flagship3_messaging_conversation_detail%3Bri0fFvU6SzqIetMeS2HDLQ%3D%3D" target="_blank">My LinkedIn</a></li>
<li>GitHub: <a href="https://github.com/DelwinMansur" target="_blank">My GitHub</a></li>
</ul>
</section>
</main>

<footer>
<h3>
<a href="https://github.com/CodeYourFuture/Portfolio"
<a href="https://github.com/DelwinMansur"
><svg
focusable="false"
role="presentation"
Expand All @@ -94,7 +111,7 @@ <h3>
fill="currentColor"
/>
</svg>
Read me</a
My GitHub</a
>
</h3>
</footer>
Expand Down
155 changes: 140 additions & 15 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,182 @@
/* 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;
align-items: center;
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;
}
}