From 03171c509b7e61c0f41061768697784384d5f403 Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 27 Mar 2023 10:34:27 +0100 Subject: [PATCH 01/16] add an example project --- index.html | 37 +++++++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 7b0d8b5a..b76f5bbc 100644 --- a/index.html +++ b/index.html @@ -59,12 +59,37 @@

My Name

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? -

+

Contact me

From 2b589e7639154274eb4a0eb28807b3a57b316ca1 Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 27 Mar 2023 10:35:15 +0100 Subject: [PATCH 02/16] annotated styles for example page - added some interesting links to explain some concepts used here - an example card layout using grid - my standard rules for images --- style.css | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 98 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index c911f90c..ec5097cb 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,7 @@ -/* Design tokens */ +/* Design tokens. +With tokens, stick to communicating the PURPOSE not the VALUE. +Code should explain, not mystify, your design. +*/ :root { --paper: hsla(251, 28%, 88%, 0.99); --ink: hsla(244, 16%, 17%, 0.95); @@ -6,8 +9,22 @@ --font: "Raleway", system-ui, sans-serif; --gap: 20px; --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); + /* https://web.dev/accessible-tap-targets/ */ + --tap-target: 48px; + --box: clamp(280px, 50vw + 2px, 530px); } -/* General Styles */ + +/* Hey look, dark mode is +so easy with design tokens done this way +*/ +@media (prefers-color-scheme: dark) { + :root { + --ink: hsla(252, 38%, 92%, 0.99); + --paper: hsla(244, 16%, 17%, 1); + } +} + +/* General styles */ html, body { scroll-behavior: smooth; @@ -34,7 +51,12 @@ a:focus { color: var(--brand); border-color: currentColor; } -/* Site header and navigation */ +p a:any-link { + border-color: var(--brand); +} +/* Site header and navigation +https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46 +*/ body > header { background: var(--paper); display: flex; @@ -50,8 +72,80 @@ nav ul { gap: var(--gap); } -/* Text readability */ +/* Text readability +https://baymard.com/blog/line-length-readability +*/ section p { line-height: 1.5; max-width: 55ch; } +/* targeted resets +We're resetting elements with a class - ANY class +- on the grounds that if you added a class, +you added your own styles +*/ +h3[class] { + margin: 0 auto 0 0; +} +ul[class], +li[class] { + margin: 0; + padding: 0; +} + +/* Basic image rules +Don't size images in css, size their containers +Just make images take up the entire space you give them +in every context +*/ +svg { + height: 100%; + width: auto; + min-width: var(--tap-target); +} + +img { + width: 100%; + height: 100%; + max-width: 100%; + object-fit: cover; +} + +picture { + height: auto; + overflow: hidden; +} +/* +I would start breaking this up into component files now btw! +*/ +.showcase { + display: flex; + flex-flow: row wrap; + gap: var(--gap); +} +/* +Here's an example of a grid layout. Notice there's no margin, padding, or sizes given on elements +All the spacing and sizing is set on the template, and the elements +are just slotted in. +The little dots are how we precisely place and size white-space +https://www.interaction-design.org/literature/article/the-power-of-white-space +*/ + +.project { + display: grid; + grid-template: + "picture picture picture" var(--box) + "....... ....... ......." calc(var(--gap) / 2) + "....... heading ......." min-content + "....... blurb ......." auto / + var(--gap) var(--box) var(--gap); +} +.project__picture { + grid-area: picture; +} +.project__heading { + grid-area: heading; +} +.project__blurb { + grid-area: blurb; +} From 23da459d509de0aea16b319ee2e274cea739365d Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 27 Mar 2023 10:35:49 +0100 Subject: [PATCH 03/16] A new challenge for module 1 New readme --- README.md | 46 +++++++++++++++++++++++++++++++++++++--------- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 98549832..bbc02378 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,46 @@ # Portfolio -Your starting portfolio, to iterate on. +Module 1 iteration of your portfolio. We've got a lot of new concepts here so you might want to work through this in your study group, or bring to class for help. ## Learning Objectives -- Customise the starting portfolio with your professional details -- Iterate on your portfolio every module -- Review your colleague's portfolio +- [ ] Branch from a branch in Git +- [ ] PR from a branch to a branch in GitHub +- [ ] Create a personal case study for a project ## Requirements -At Code Your Future, we expect everyone to graduate with a unique professional portfolio. Begin building this portfolio as soon as you begin our Software Development Course. At first, your portfolio will be a simple HTML/CSS page deployed to Github Pages or Netlify. This is your MVP. +We are using a different type of pull request workflow from your main coursework. We're doing this because we need lots of practice with Git to be ready to contribute to shared repos like professional developers. In previous years, we only opened PRs to main all the way through the course, and then in Final Projects it was really hard to learn branching and merging. So let's practice a different workflow now. -Every module, you will _iterate_ on your portfolio, adding a new project and improving your design and presentation. By the time you apply to Final Projects, your portfolio will help you show you are ready to be accepted on to a Final Projects team. +## Git Ready: Putting our code in the right place + +The instructions here are given for the command line, but you could just as easily do this in GitHub Desktop or GitKraken. + +1. Switch into the branch called `git checkout Module-HTML-CSS` to access this Readme +1. From `Module-HTML-CSS`, create a new branch `git checkout -b your-name-portfolio` +1. Make a new directory `mkdir your-name-portfolio` +1. Move your starter files into this directory `mv index.html style.css your-name-portfolio` +1. Change into the new directory `cd your-name-portfolio` +1. Check you are in the right branch `git branch --show-current` + +## Git Set: Making changes + +1. Open the project in your code editor +1. Make your changes +1. Check your changes with `git status` +1. Add your files to the staging area `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._ +1. Commit your changes often `git commit -m "YOUR COMMIT MESSAGE"` + +Your case study should be a short description of the project, including: the problem it solves, the technologies used, the approach taken, a link to the deployed project, and a link to the code on GitHub. + +Explain the problem and your solution in your own words, and don't just copy and paste the project brief. The point of a portfolio is to make _you stand out_, so write in your own voice. It's fine to choose something that you didn't work on all by yourself, but make sure you explain what part you did. + +## Git Go: Making a pull request + +1. Stage your files: `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._ +1. Commit your changes `git commit -m "YOUR COMMIT MESSAGE"` +1. Push your changes to GitHub `git push origin your-name-portfolio` +1. Open a pull request to merge your branch into `Module-HTML-CSS` . If you have the [GitHub CLI](https://cli.github.com/manual/gh_pr_create) installed, you can do this with `gh pr create --base Module-HTML-CSS --head your-name-portfolio`. Otherwise do it in the GitHub UI or your Git client. ## Acceptance Criteria @@ -26,6 +54,6 @@ Every module, you will _iterate_ on your portfolio, adding a new project and imp ## Resources -- [Josh Comeau on building your early career profile](https://www.youtube.com/watch?v=OXiaEXfkAec) -- [How to Build an Effective Dev Portfolio](https://www.joshwcomeau.com/effective-portfolio/) -- [CYF Graduate Module](https://module-graduates.codeyourfuture.io/) +- [Powerful Git Completion with ohmyzsh](https://github.com/ohmyzsh/ohmyzsh) +- [GitKraken](https://www.gitkraken.com/) +- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens/) From 413820e72f14c34efe0fbfbbc3e41610329c3f4a Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 27 Mar 2023 10:42:54 +0100 Subject: [PATCH 04/16] move files into dir as per readme --- index.html => example-name-portfolio/index.html | 0 style.css => example-name-portfolio/style.css | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename index.html => example-name-portfolio/index.html (100%) rename style.css => example-name-portfolio/style.css (100%) diff --git a/index.html b/example-name-portfolio/index.html similarity index 100% rename from index.html rename to example-name-portfolio/index.html diff --git a/style.css b/example-name-portfolio/style.css similarity index 100% rename from style.css rename to example-name-portfolio/style.css From 15d60bfc64453b96010aa84d93129763ab708272 Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 27 Mar 2023 10:50:33 +0100 Subject: [PATCH 05/16] clarify they may use THIS code Just don't want everyone copypasting the Agency theme like usual --- README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index bbc02378..f6e904ca 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,10 @@ Module 1 iteration of your portfolio. We've got a lot of new concepts here so you might want to work through this in your study group, or bring to class for help. +_Keep your changes simple!_ + +We are using a different type of pull request workflow from your main coursework. We're doing this because we need lots of practice with Git to be ready to contribute to shared repos like professional developers. In previous cohorts, we only opened PRs to main all the way through the course, and then in Final Projects it was really hard to learn real branching and merging. So let's practice a different workflow now. + ## Learning Objectives - [ ] Branch from a branch in Git @@ -10,7 +14,9 @@ Module 1 iteration of your portfolio. We've got a lot of new concepts here so yo ## Requirements -We are using a different type of pull request workflow from your main coursework. We're doing this because we need lots of practice with Git to be ready to contribute to shared repos like professional developers. In previous years, we only opened PRs to main all the way through the course, and then in Final Projects it was really hard to learn branching and merging. So let's practice a different workflow now. +Your case study should be a short description of the project, including: the problem it solves, the technologies used, the approach taken, a link to the deployed project, and a link to the code on GitHub. + +Explain the problem and your solution in your own words, and don't just copy and paste the project brief. The point of a portfolio is to make _you stand out_, so write in your own voice. It's fine to choose something that you didn't work on all by yourself, but make sure you explain what part you did. ## Git Ready: Putting our code in the right place @@ -31,10 +37,6 @@ The instructions here are given for the command line, but you could just as easi 1. Add your files to the staging area `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._ 1. Commit your changes often `git commit -m "YOUR COMMIT MESSAGE"` -Your case study should be a short description of the project, including: the problem it solves, the technologies used, the approach taken, a link to the deployed project, and a link to the code on GitHub. - -Explain the problem and your solution in your own words, and don't just copy and paste the project brief. The point of a portfolio is to make _you stand out_, so write in your own voice. It's fine to choose something that you didn't work on all by yourself, but make sure you explain what part you did. - ## Git Go: Making a pull request 1. Stage your files: `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._ @@ -45,7 +47,7 @@ Explain the problem and your solution in your own words, and don't just copy and ## Acceptance Criteria - [ ] My portfolio introduces me and my work -- [ ] The design and code is my own, not a template or tutorial +- [ ] The design and code is my own, not a template or tutorial (you can use this code as a starting point) - [ ] Each project is linked to my code on Github and the deployed project - [ ] I have published my professional contact information on my portfolio - [ ] My Accessibility and SEO scores are 100 on Lighthouse From 5876e29ef56fada35c7d526a322bafe270e106d9 Mon Sep 17 00:00:00 2001 From: Barath Vignarajah Date: Sat, 19 Oct 2024 07:23:57 +0100 Subject: [PATCH 06/16] Adding starter files --- index.html | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 57 ++++++++++++++++++++++++++++++ 2 files changed, 159 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..7b0d8b5a --- /dev/null +++ b/index.html @@ -0,0 +1,102 @@ + + + + + + My Portfolio + + + + + + + + + + +
+

My Name

+ +
+
+
+

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? +

+
+
+

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? +

+
+
+

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? +

+
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..c911f90c --- /dev/null +++ b/style.css @@ -0,0 +1,57 @@ +/* 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); +} +/* General Styles */ +html, +body { + scroll-behavior: smooth; + background: var(--paper); + color: var(--ink); + font-family: var(--font); +} +body { + display: grid; + margin: auto; + min-height: 100vh; + gap: var(--gap); + max-width: var(--container); +} +a, +a:any-link { + color: currentColor; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: border-color ease-in-out 0.3s; +} +a:hover, +a:focus { + color: var(--brand); + border-color: currentColor; +} +/* Site header and navigation */ +body > header { + background: var(--paper); + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + z-index: 1; +} +nav ul { + display: flex; + list-style: none; + gap: var(--gap); +} + +/* Text readability */ +section p { + line-height: 1.5; + max-width: 55ch; +} From 1cda9263a68b56be18f5b429928a6d4cb9849809 Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Wed, 23 Oct 2024 13:35:27 +0100 Subject: [PATCH 07/16] changing about me --- index.html | 102 ----------------------------------------------------- style.css | 57 ------------------------------ 2 files changed, 159 deletions(-) delete mode 100644 index.html delete mode 100644 style.css diff --git a/index.html b/index.html deleted file mode 100644 index 7b0d8b5a..00000000 --- a/index.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - - - My Portfolio - - - - - - - - - - -
-

My Name

- -
-
-
-

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? -

-
-
-

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? -

-
-
-

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? -

-
-
- - - diff --git a/style.css b/style.css deleted file mode 100644 index c911f90c..00000000 --- a/style.css +++ /dev/null @@ -1,57 +0,0 @@ -/* 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); -} -/* General Styles */ -html, -body { - scroll-behavior: smooth; - background: var(--paper); - color: var(--ink); - font-family: var(--font); -} -body { - display: grid; - margin: auto; - min-height: 100vh; - gap: var(--gap); - max-width: var(--container); -} -a, -a:any-link { - color: currentColor; - text-decoration: none; - border-bottom: 2px solid transparent; - transition: border-color ease-in-out 0.3s; -} -a:hover, -a:focus { - color: var(--brand); - border-color: currentColor; -} -/* Site header and navigation */ -body > header { - background: var(--paper); - display: flex; - justify-content: space-between; - align-items: center; - position: sticky; - top: 0; - z-index: 1; -} -nav ul { - display: flex; - list-style: none; - gap: var(--gap); -} - -/* Text readability */ -section p { - line-height: 1.5; - max-width: 55ch; -} From 8138656c9f631d14a76027f46c4455c156e3716a Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Wed, 23 Oct 2024 13:47:24 +0100 Subject: [PATCH 08/16] changing About me section --- AzarAlampanah-portfolio/index.html | 102 +++++++++++++++++++++++++++++ AzarAlampanah-portfolio/style.css | 57 ++++++++++++++++ 2 files changed, 159 insertions(+) create mode 100644 AzarAlampanah-portfolio/index.html create mode 100644 AzarAlampanah-portfolio/style.css diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html new file mode 100644 index 00000000..8e8d68cb --- /dev/null +++ b/AzarAlampanah-portfolio/index.html @@ -0,0 +1,102 @@ + + + + + + My Portfolio + + + + + + + + + + +
+

Azar Alampanah

+ +
+
+
+

About Me

+

+ Ambitious IT Technician whith extensive experience at IT security and networking. + My intense desire to continually learn, grow, and improve has empowered me to start + a new challenging journey toward software engineering, in which I will achieve hands-on + experience and practical knowledge in database management, Programming, and web development tools +

+
+
+

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? +

+
+
+

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? +

+
+
+ + + diff --git a/AzarAlampanah-portfolio/style.css b/AzarAlampanah-portfolio/style.css new file mode 100644 index 00000000..c911f90c --- /dev/null +++ b/AzarAlampanah-portfolio/style.css @@ -0,0 +1,57 @@ +/* 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); +} +/* General Styles */ +html, +body { + scroll-behavior: smooth; + background: var(--paper); + color: var(--ink); + font-family: var(--font); +} +body { + display: grid; + margin: auto; + min-height: 100vh; + gap: var(--gap); + max-width: var(--container); +} +a, +a:any-link { + color: currentColor; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: border-color ease-in-out 0.3s; +} +a:hover, +a:focus { + color: var(--brand); + border-color: currentColor; +} +/* Site header and navigation */ +body > header { + background: var(--paper); + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + z-index: 1; +} +nav ul { + display: flex; + list-style: none; + gap: var(--gap); +} + +/* Text readability */ +section p { + line-height: 1.5; + max-width: 55ch; +} From 3c2f3e7129eef4a56f9c41b5f0643cbd9658382a Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Thu, 24 Oct 2024 04:14:05 +0100 Subject: [PATCH 09/16] add LinkedIn and Email icon in html and style them in css --- AzarAlampanah-portfolio/index.html | 22 +++++++++++++++++----- AzarAlampanah-portfolio/style.css | 19 +++++++++++++++++++ 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html index 8e8d68cb..65ddf2de 100644 --- a/AzarAlampanah-portfolio/index.html +++ b/AzarAlampanah-portfolio/index.html @@ -34,7 +34,10 @@ + /> + + +
@@ -69,10 +72,19 @@

Azar Alampanah

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? +

+ + + +

Email:azaralampanah2@gmail.com

+ + + + + + +

LinedIn:AzarAlampanah

+

diff --git a/AzarAlampanah-portfolio/style.css b/AzarAlampanah-portfolio/style.css index c911f90c..b9728014 100644 --- a/AzarAlampanah-portfolio/style.css +++ b/AzarAlampanah-portfolio/style.css @@ -55,3 +55,22 @@ section p { line-height: 1.5; max-width: 55ch; } +.fab { + font-size: 24px; /* Size of the icon */ + color: #0077B5; /* LinkedIn color */ + text-decoration: none; /* Remove underline */ +} + +.fab:hover { + color: #005582; /* Darker color on hover */ +} +.fas { + font-size: 24px; /* Size of the icon */ + color: #000; /* Color */ + text-decoration: none; /* Remove underline */ +} + +.fas:hover { + color: #555; /* Darker color on hover */ +} + From df9c97a2d5d50b664e97a086e3bdc5fcb9a76a97 Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Thu, 24 Oct 2024 07:10:41 +0100 Subject: [PATCH 10/16] add home Town as project in Project section --- AzarAlampanah-portfolio/index.html | 218 +++++++++++++++-------------- AzarAlampanah-portfolio/style.css | 13 +- 2 files changed, 121 insertions(+), 110 deletions(-) diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html index 65ddf2de..df5ce785 100644 --- a/AzarAlampanah-portfolio/index.html +++ b/AzarAlampanah-portfolio/index.html @@ -1,114 +1,116 @@ - - - - My Portfolio - - - - - - - - - - + } + + + + + + + - - -
-

Azar Alampanah

- -
-
-
-

About Me

-

- Ambitious IT Technician whith extensive experience at IT security and networking. - My intense desire to continually learn, grow, and improve has empowered me to start - a new challenging journey toward software engineering, in which I will achieve hands-on - experience and practical knowledge in database management, Programming, and web development tools -

-
-
-

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? -

-
-
-

Contact me

-

-

- - - -

Email:azaralampanah2@gmail.com

- - + + + +
+

Azar Alampanah

+ +
+
+
+
+

About Me

+
+

+ Ambitious IT Technician whith extensive experience in IT security and networking. + My intense desire to continually learn, grow, and improve has empowered me to start + a new challenging journey toward software engineering, in which I will achieve hands-on + experience and practical knowledge in database management, Programming, and web development tools +

+
+
+
+

Projects Showcase

+
+

+ +

My Home Town

+

+ This webpage is designed for tourists or anyone wanting to explore Tehran. + This is my first project and the most loved one! + HTML and CSS are used as web technology. +

- - - -

LinedIn:AzarAlampanah

-
-

-
-
- - - + + + + +

+
+
+
+

Contact me

+
+

+ + +

+
+ + azaralampanah2@gmail.com
+ + +
+ +
+ +
+ + AzarAlampanah
+
+ +

+
+ + + + + \ No newline at end of file diff --git a/AzarAlampanah-portfolio/style.css b/AzarAlampanah-portfolio/style.css index b9728014..a93b489a 100644 --- a/AzarAlampanah-portfolio/style.css +++ b/AzarAlampanah-portfolio/style.css @@ -56,7 +56,7 @@ section p { max-width: 55ch; } .fab { - font-size: 24px; /* Size of the icon */ + font-size: 1.3rem; /* Size of the icon */ color: #0077B5; /* LinkedIn color */ text-decoration: none; /* Remove underline */ } @@ -65,7 +65,7 @@ section p { color: #005582; /* Darker color on hover */ } .fas { - font-size: 24px; /* Size of the icon */ + font-size: 1.3rem; /* Size of the icon */ color: #000; /* Color */ text-decoration: none; /* Remove underline */ } @@ -74,3 +74,12 @@ section p { color: #555; /* Darker color on hover */ } +h6{ + + font-size: 0.9rem; + margin:1% 0; + +} +#git{ + font-size: 0.9rem; +} \ No newline at end of file From db03a883170e8f1320ae5411cf8a557359cde333 Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Fri, 25 Oct 2024 04:21:06 +0100 Subject: [PATCH 11/16] add Netlify icon and style it --- AzarAlampanah-portfolio/index.html | 39 ++++++++++++++++++++---------- AzarAlampanah-portfolio/style.css | 35 ++++++++++++++++++++++----- homeazara | 0 3 files changed, 55 insertions(+), 19 deletions(-) create mode 100644 homeazara diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html index df5ce785..99de94cc 100644 --- a/AzarAlampanah-portfolio/index.html +++ b/AzarAlampanah-portfolio/index.html @@ -28,7 +28,6 @@ - @@ -60,18 +59,32 @@

About Me

Projects Showcase

- -

My Home Town

-

- This webpage is designed for tourists or anyone wanting to explore Tehran. - This is my first project and the most loved one! - HTML and CSS are used as web technology. -

- - - - + +

My Home Town

+

+ This webpage is designed for tourists or anyone wanting to explore Tehran. + This is my first project and the most loved one! + HTML and CSS are used as web technology. +

+ + + + + + + + + + + + + + + + + + +

diff --git a/AzarAlampanah-portfolio/style.css b/AzarAlampanah-portfolio/style.css index a93b489a..0c879006 100644 --- a/AzarAlampanah-portfolio/style.css +++ b/AzarAlampanah-portfolio/style.css @@ -55,15 +55,27 @@ section p { line-height: 1.5; max-width: 55ch; } -.fab { + .fa-linkedin { font-size: 1.3rem; /* Size of the icon */ color: #0077B5; /* LinkedIn color */ text-decoration: none; /* Remove underline */ -} +} + -.fab:hover { +.fa-linkedin:hover { color: #005582; /* Darker color on hover */ } + .fa-github { + font-size: 1.7rem; + + } + +/* Hover effect */ +.fa-github:hover { + color: #333; /* Change color on hover */ + transform: scale(1.1); /* Slightly enlarge the icon on hover */ +} + .fas { font-size: 1.3rem; /* Size of the icon */ color: #000; /* Color */ @@ -80,6 +92,17 @@ h6{ margin:1% 0; } -#git{ - font-size: 0.9rem; -} \ No newline at end of file +.netlify-icon { + display: inline-block; + width: 24px; + height: 24px; + background-image: url('https://www.netlify.com/v3/img/components/logomark.png'); + background-size: cover; +} + +/* Additional styles */ +.netlify-icon:hover { + filter: brightness(1.2); + +} + diff --git a/homeazara b/homeazara new file mode 100644 index 00000000..e69de29b From 335a5a71bacda0cd73ed423eb1745a31984d0527 Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Fri, 25 Oct 2024 06:05:50 +0100 Subject: [PATCH 12/16] replace Netlify icon with web globe --- AzarAlampanah-portfolio/index.html | 43 ++++++++++++++++-------------- AzarAlampanah-portfolio/style.css | 24 +++++++++-------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html index 99de94cc..8b2d90c3 100644 --- a/AzarAlampanah-portfolio/index.html +++ b/AzarAlampanah-portfolio/index.html @@ -28,7 +28,9 @@ + + @@ -62,30 +64,31 @@

Projects Showcase

My Home Town

- This webpage is designed for tourists or anyone wanting to explore Tehran. + This webpage is designed for tourists or anyone liking to explore Tehran. This is my first project and the most loved one! HTML and CSS are used as web technology.

- - - - - - + + - - - - - - - - +

Form-Control

+

+ This project is designed to get customers' orders and validate the inputs, The form is semantic HTML. + I have boosted my ability to use form controls and tried to get a score of 100 from Lighthouse accessibility. +

+ + + + + + + +

@@ -96,18 +99,18 @@

Contact me

-
+
- azaralampanah2@gmail.com
+ azaralampanah2@gmail.com
-
+
- AzarAlampanah
+ AzarAlampanah

@@ -115,7 +118,7 @@
@@ -65,8 +65,9 @@

Projects Showcase

My Home Town

This webpage is designed for tourists or anyone liking to explore Tehran. + In this project, I learned how to use HTML elements such as class, div, and image to make the fundamental of a webpage and how to set attributes for border, colour, and alignment in CSS to style elements. Java scripts has been used to give interactive and dynamic behaviour to my webpage. This is my first project and the most loved one! - HTML and CSS are used as web technology. +

@@ -78,13 +79,15 @@

My Home Town

Form-Control

- This project is designed to get customers' orders and validate the inputs, The form is semantic HTML. + + This project is designed to get customers' orders by using different types of input, validate the inputs, + and set some attributes such as focus and first child to them. The form is semantic HTML. I have boosted my ability to use form controls and tried to get a score of 100 from Lighthouse accessibility.

- + diff --git a/AzarAlampanah-portfolio/style.css b/AzarAlampanah-portfolio/style.css index 4b8d909f..036aed62 100644 --- a/AzarAlampanah-portfolio/style.css +++ b/AzarAlampanah-portfolio/style.css @@ -76,6 +76,7 @@ section p { transform: scale(1.1); /* Slightly enlarge the icon on hover */ } + .fas { font-size: 1.3rem; /* Size of the icon */ color: #000; /* Color */ @@ -92,6 +93,9 @@ h6{ margin:1% 0; } +h3{ + color: +} .internet-icon { font-size: 1.7rem; /* Set the size of the icon */ @@ -102,6 +106,9 @@ h6{ .internet-icon:hover { filter: brightness(1.2); /* Change color on hover */ } +#contact{ + text-align: center; +} footer{ height: 100px; background-color: black; From c31dbaa679d82dc2468c9d3bf57b9b5efeb1bd7f Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Fri, 25 Oct 2024 07:27:03 +0100 Subject: [PATCH 14/16] using prettier --- AzarAlampanah-portfolio/index.html | 235 +++++++++++++++-------------- AzarAlampanah-portfolio/style.css | 81 ++++++---- 2 files changed, 173 insertions(+), 143 deletions(-) diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html index 7e78c4a7..4b64ba67 100644 --- a/AzarAlampanah-portfolio/index.html +++ b/AzarAlampanah-portfolio/index.html @@ -1,14 +1,13 @@ - - - - - My Portfolio - - - - - - - - - - - - - - - -
-

Azar Alampanah

- -
-
-
-
-

About Me

-
-

- Ambitious IT Technician whith extensive experience in IT security and networking. + + + + + + + + + +

+

Azar Alampanah

+ +
+
+
+
+

About Me

+
+

+ Ambitious IT Technician whith extensive experience in IT security and networking. My intense desire to continually learn, grow, and improve has empowered me to start a new training journey toward software engineering, in which I will achieve hands-on experience and practical knowledge in database management, Programming, and web development tools. -

-
-
-
-

Projects Showcase

-
-

- -

My Home Town

-

- This webpage is designed for tourists or anyone liking to explore Tehran. +

+
+
+
+

Projects Showcase

+
+

+

My Home Town

+

+ This webpage is designed for tourists or anyone liking to explore Tehran. In this project, I learned how to use HTML elements such as class, div, and image to make the fundamental of a webpage and how to set attributes for border, colour, and alignment in CSS to style elements. Java scripts has been used to give interactive and dynamic behaviour to my webpage. This is my first project and the most loved one! - -

- - - - - - - - -

Form-Control

-

- - This project is designed to get customers' orders by using different types of input, validate the inputs, +

+ + + + + + +

Form-Control

+

+ This project is designed to get customers' orders by using different types of input, validate the inputs, and set some attributes such as focus and first child to them. The form is semantic HTML. I have boosted my ability to use form controls and tried to get a score of 100 from Lighthouse accessibility. -

- - - - - - - - -

-
-
-
-

Contact me

-
-

- - -

- - - -

-
-
- - - - \ No newline at end of file +

+ + + + + + +

+
+
+
+

Contact me

+
+

+

+ +

+
+
+ + + diff --git a/AzarAlampanah-portfolio/style.css b/AzarAlampanah-portfolio/style.css index 036aed62..b5439bbf 100644 --- a/AzarAlampanah-portfolio/style.css +++ b/AzarAlampanah-portfolio/style.css @@ -7,6 +7,7 @@ --gap: 20px; --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); } + /* General Styles */ html, body { @@ -15,6 +16,7 @@ body { color: var(--ink); font-family: var(--font); } + body { display: grid; margin: auto; @@ -22,6 +24,7 @@ body { gap: var(--gap); max-width: var(--container); } + a, a:any-link { color: currentColor; @@ -29,11 +32,13 @@ a:any-link { border-bottom: 2px solid transparent; transition: border-color ease-in-out 0.3s; } + a:hover, a:focus { color: var(--brand); border-color: currentColor; } + /* Site header and navigation */ body > header { background: var(--paper); @@ -44,6 +49,7 @@ body > header { top: 0; z-index: 1; } + nav ul { display: flex; list-style: none; @@ -55,63 +61,78 @@ section p { line-height: 1.5; max-width: 55ch; } - .fa-linkedin { - font-size: 1.3rem; /* Size of the icon */ - color: #0077B5; /* LinkedIn color */ - text-decoration: none; /* Remove underline */ -} +.fa-linkedin { + font-size: 1.3rem; + /* Size of the icon */ + color: #0077b5; + /* LinkedIn color */ + text-decoration: none; + /* Remove underline */ +} .fa-linkedin:hover { - color: #005582; /* Darker color on hover */ + color: #005582; + /* Darker color on hover */ } - .fa-github { + +.fa-github { font-size: 1.7rem; - - } +} /* Hover effect */ .fa-github:hover { - color: #333; /* Change color on hover */ - transform: scale(1.1); /* Slightly enlarge the icon on hover */ + color: #333; + /* Change color on hover */ + transform: scale(1.1); + /* Slightly enlarge the icon on hover */ } - .fas { - font-size: 1.3rem; /* Size of the icon */ - color: #000; /* Color */ - text-decoration: none; /* Remove underline */ + font-size: 1.3rem; + /* Size of the icon */ + color: #000; + /* Color */ + text-decoration: none; + /* Remove underline */ } .fas:hover { - color: #555; /* Darker color on hover */ + color: #555; + /* Darker color on hover */ } -h6{ - +h6 { font-size: 0.9rem; - margin:1% 0; - + margin: 1% 0; } -h3{ - color: + +h3 { + color: ; } .internet-icon { - font-size: 1.7rem; /* Set the size of the icon */ - color: #3498db; /* Set the color */ - margin: 10px; /* Add some margin */ - transition: color 0.3s ease; /* Smooth color transition */ + font-size: 1.7rem; + /* Set the size of the icon */ + color: #3498db; + /* Set the color */ + margin: 10px; + /* Add some margin */ + transition: color 0.3s ease; + /* Smooth color transition */ } + .internet-icon:hover { - filter: brightness(1.2); /* Change color on hover */ + filter: brightness(1.2); + /* Change color on hover */ } -#contact{ + +#contact { text-align: center; } -footer{ + +footer { height: 100px; background-color: black; text-align: center; } - From 94abcf1e3b837e98be36e05b79f9242475e8a03a Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Fri, 25 Oct 2024 09:24:03 +0100 Subject: [PATCH 15/16] replace README.md with description about my portfolio --- README.md | 63 ++----------------------------------------------------- 1 file changed, 2 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index f6e904ca..30628fe6 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,2 @@ -# Portfolio - -Module 1 iteration of your portfolio. We've got a lot of new concepts here so you might want to work through this in your study group, or bring to class for help. - -_Keep your changes simple!_ - -We are using a different type of pull request workflow from your main coursework. We're doing this because we need lots of practice with Git to be ready to contribute to shared repos like professional developers. In previous cohorts, we only opened PRs to main all the way through the course, and then in Final Projects it was really hard to learn real branching and merging. So let's practice a different workflow now. - -## Learning Objectives - -- [ ] Branch from a branch in Git -- [ ] PR from a branch to a branch in GitHub -- [ ] Create a personal case study for a project - -## Requirements - -Your case study should be a short description of the project, including: the problem it solves, the technologies used, the approach taken, a link to the deployed project, and a link to the code on GitHub. - -Explain the problem and your solution in your own words, and don't just copy and paste the project brief. The point of a portfolio is to make _you stand out_, so write in your own voice. It's fine to choose something that you didn't work on all by yourself, but make sure you explain what part you did. - -## Git Ready: Putting our code in the right place - -The instructions here are given for the command line, but you could just as easily do this in GitHub Desktop or GitKraken. - -1. Switch into the branch called `git checkout Module-HTML-CSS` to access this Readme -1. From `Module-HTML-CSS`, create a new branch `git checkout -b your-name-portfolio` -1. Make a new directory `mkdir your-name-portfolio` -1. Move your starter files into this directory `mv index.html style.css your-name-portfolio` -1. Change into the new directory `cd your-name-portfolio` -1. Check you are in the right branch `git branch --show-current` - -## Git Set: Making changes - -1. Open the project in your code editor -1. Make your changes -1. Check your changes with `git status` -1. Add your files to the staging area `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._ -1. Commit your changes often `git commit -m "YOUR COMMIT MESSAGE"` - -## Git Go: Making a pull request - -1. Stage your files: `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._ -1. Commit your changes `git commit -m "YOUR COMMIT MESSAGE"` -1. Push your changes to GitHub `git push origin your-name-portfolio` -1. Open a pull request to merge your branch into `Module-HTML-CSS` . If you have the [GitHub CLI](https://cli.github.com/manual/gh_pr_create) installed, you can do this with `gh pr create --base Module-HTML-CSS --head your-name-portfolio`. Otherwise do it in the GitHub UI or your Git client. - -## Acceptance Criteria - -- [ ] My portfolio introduces me and my work -- [ ] The design and code is my own, not a template or tutorial (you can use this code as a starting point) -- [ ] Each project is linked to my code on Github and the deployed project -- [ ] I have published my professional contact information on my portfolio -- [ ] My Accessibility and SEO scores are 100 on Lighthouse -- [ ] My portfolio is deployed -- [ ] I have replaced this README with one that describes my own portfolio - -## Resources - -- [Powerful Git Completion with ohmyzsh](https://github.com/ohmyzsh/ohmyzsh) -- [GitKraken](https://www.gitkraken.com/) -- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens/) +This portfolio webpage includes a brief introduction about me and my projects which I have done during my studying. +Each project includes a brief description of the purpose of designing that webpage and also about the tools and new things, which I learned during working on the project. There is a link to GitHub and to the deployed webpage in each project that can help the viewer to explore more about it. From 732529ac99bad36910829b9506d4a7d84e47d3fb Mon Sep 17 00:00:00 2001 From: azaralampanah2 Date: Fri, 25 Oct 2024 10:43:24 +0100 Subject: [PATCH 16/16] increase accessibility from 85% to 93% --- AzarAlampanah-portfolio/index.html | 38 +++++++++++++++++------------- AzarAlampanah-portfolio/style.css | 17 +------------ 2 files changed, 22 insertions(+), 33 deletions(-) diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html index 4b64ba67..78b2da19 100644 --- a/AzarAlampanah-portfolio/index.html +++ b/AzarAlampanah-portfolio/index.html @@ -74,11 +74,12 @@

My Home Town

In this project, I learned how to use HTML elements such as class, div, and image to make the fundamental of a webpage and how to set attributes for border, colour, and alignment in CSS to style elements. Java scripts has been used to give interactive and dynamic behaviour to my webpage. This is my first project and the most loved one!

- - + + + - - + +

Form-Control

@@ -86,11 +87,13 @@

Form-Control

and set some attributes such as focus and first child to them. The form is semantic HTML. I have boosted my ability to use form controls and tried to get a score of 100 from Lighthouse accessibility.

- - + + + - - + + +

@@ -101,18 +104,19 @@

Contact me

- - + + - azaralampanah2@gmail.com + azaralampanah2@gmail.com
- - + + + - AzarAlampanah + AzarAlampanah

@@ -120,8 +124,8 @@