diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html new file mode 100644 index 00000000..78b2da19 --- /dev/null +++ b/AzarAlampanah-portfolio/index.html @@ -0,0 +1,148 @@ + + + + + + My Portfolio + + + + + + + + + + + + +
+

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. + 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, + 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

+
+

+

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

+
+
+ + + diff --git a/style.css b/AzarAlampanah-portfolio/style.css similarity index 61% rename from style.css rename to AzarAlampanah-portfolio/style.css index c911f90c..31510abe 100644 --- a/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,3 +61,63 @@ section p { line-height: 1.5; max-width: 55ch; } + +.fa-linkedin { + font-size: 1.3rem; + color: #0077b5; + text-decoration: none; +} + +.fa-linkedin:hover { + color: #005582; +} + +.fa-github { + font-size: 1.7rem; +} + +.fa-github:hover { + color: #333; + transform: scale(1.1); +} + +.fas { + font-size: 1.3rem; + color: #000; + text-decoration: none; +} + +.fas:hover { + color: #555; +} + +h6 { + font-size: 0.9rem; + margin: 1% 0; +} + +h3 { + color: ; +} + +.internet-icon { + font-size: 1.7rem; + color: #3498db; + margin: 10px; + transition: color 0.3s ease; +} + +.internet-icon:hover { + filter: brightness(1.2); +} + +#contact { + text-align: center; +} + +footer { + height: 100px; + background-color: black; + text-align: center; + color: white; +} diff --git a/README.md b/README.md index 98549832..30628fe6 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,2 @@ -# Portfolio - -Your starting portfolio, to iterate on. - -## Learning Objectives - -- Customise the starting portfolio with your professional details -- Iterate on your portfolio every module -- Review your colleague's portfolio - -## 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. - -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. - -## Acceptance Criteria - -- [ ] My portfolio introduces me and my work -- [ ] The design and code is my own, not a template or tutorial -- [ ] 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 - -- [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/) +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. diff --git a/index.html b/example-name-portfolio/index.html similarity index 64% rename from index.html rename to example-name-portfolio/index.html index 7b0d8b5a..b76f5bbc 100644 --- a/index.html +++ b/example-name-portfolio/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

diff --git a/example-name-portfolio/style.css b/example-name-portfolio/style.css new file mode 100644 index 00000000..ec5097cb --- /dev/null +++ b/example-name-portfolio/style.css @@ -0,0 +1,151 @@ +/* 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); + --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); + /* https://web.dev/accessible-tap-targets/ */ + --tap-target: 48px; + --box: clamp(280px, 50vw + 2px, 530px); +} + +/* 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; + 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; +} +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; + 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 +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; +} diff --git a/homeazara b/homeazara new file mode 100644 index 00000000..e69de29b