CodeYourFuture · azaralampanah2 · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023
diff --git a/AzarAlampanah-portfolio/index.html b/AzarAlampanah-portfolio/index.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en-gb">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>My Portfolio</title>
+        <meta name="description" content="The technical portfolio of trainee name">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- suppress FOUC-->
+        <style>
+    html {
+      animation: fade-in 1s;
+    }
+
+    @keyframes fade-in {
+      0% {
+        opacity: 0;
+      }
+
+      100% {
+        opacity: 1;
+      }
+    }
+        </style>
+        <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 href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;800&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    </head>
+    <body>
+        <header>
+            <h1>Azar Alampanah</h1>
+            <nav>
+                <ul>
+                    <li>
+                        <a href="#about">About Me</a>
+                    </li>
+                    <li>
+                        <a href="#projects">Projects</a>
+                    </li>
+                    <li>
+                        <a href="#contact">Contact</a>
+                    </li>
+                </ul>
+            </nav>
+        </header>
+        <main tabindex="0">
+            <section id="about">
+                <header>
+                    <h2>About Me</h2>
+                </header>
+                <p>
+                    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.
+                </p>
+            </section>
+            <section id="projects">
+                <header>
+                    <h2>Projects Showcase</h2>
+                </header>
+                <p>
+                    <h3> My Home Town</h3>
+                    <p>
+                        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!
+                    </p>
+                    <a href="https://github.com/azaralampanah2/home2" target="_blank" aria-hidden="false">
+                        <i class="fab fa-github" alt="link to  github repository"></i>
+
+                    </a>
+                    <a href="https://azar-hometown.netlify.app/" target="_blank" aria-hidden="false">
+                        <i class="fas fa-globe internet-icon" alt="link to netlify"></i>
+                    </a>
+                    <h3> Form-Control</h3>
+                    <p>
+                        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.
+                    </p>
+                    <a href="https://github.com/azaralampanah2/Module-User-Focused-Data/tree/Form-control/Form-Controls" target="_blank" aria-hidden="false">
+                        <i class="fab fa-github" alt="link to github repository"></i>
+
+                    </a>
+                    <a href="https://azaralampanah-formcontrol.netlify.app/" target="_blank" aria-hidden="false">
+                        <i class="fas fa-globe internet-icon" alt="link to  netlify"></i>
+
+                    </a>
+                </p>
+            </section>
+            <section id="contact">
+                <header>
+                    <h2>Contact me</h2>
+                </header>
+                <p>
+                    <div>
+                        <h6>
+                            <a href="mailto:[email protected]" target="_blank" aria-hidden="false">
+                                <i class="fas fa-envelope" alt="link to email"></i>
+                            </a>
+                            <a href="mailto:[email protected]" target="_blank" aria-hidden="false">[email protected]</a>
+                        </h6>
+                    </div>
+                    <div>
+                        <h6 id="h">
+                            <a href="https://www.linkedin.com/in/azar-alampanah-a9a71a279/" target="_blank" aria-hidden="false">
+                                <i class="fab fa-linkedin"  alt="link to linkedin"></i>
+
+                            </a>
+                            <a href="https://www.linkedin.com/in/azar-alampanah-a9a71a279/" target="_blank" aria-hidden="false">AzarAlampanah</a>
+                        </h6>
+                    </div>
+                </p>
+            </section>
+        </main>
+        <footer>
+            <h4>
+                <a href="https://github.com/azaralampanah2/Portfolio" aria-hidden="false">
+                    <svg 
+                        focusable="false"
+                        role="presentation"
+                        viewbox="0 0 98 96"
+                        width="48"
+                        height="48"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                            fill="white"
+                        />
+                    </svg>
+                    Read me
+                </a>
+            </h4>
+        </footer>
+    </body>
+</html>
diff --git a/style.css → AzarAlampanah-portfolio/style.css b/style.css → 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,25 +16,29 @@ body {
   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);
@@ -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
@@ -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 → example-name-portfolio/index.html b/index.html → example-name-portfolio/index.html
@@ -59,12 +59,37 @@ <h1>My Name</h1>
       </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?
-        </p>
+        <ul class="showcase">
+          <li class="showcase__item project">
+            <h3 class="project__heading"><a href="https://github.com/CodeYourFuture/HTML-CSS-Challenges-Solution">T-Shirt Order Form</a></h3>
+            <div class="project__blurb">
+              <p>This was exactly as it says: a t-shirt order form, in HTML and CSS. This text is copy-pasted.</p>
+            <p>
+              In this project I learned a whole bunch of foundational principles
+              for front end: I learned how to structure data formally with
+              modern native form inputs, and how to <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">validate that data client-side</a> with HTML5
+              attributes. The brief was fairly open - the design is all mine,
+              but the Acceptance Criteria was strict: I had to deliver a perfect
+              score in <a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a>, and meet some other validation constraints.
+            </p>
+            <p>
+              I spent a lot of time testing my code with <a href="https://developer.chrome.com/docs/devtools/">Devtools</a> and thinking
+              carefully about the semantics of the copy pasted DOM. I also explored the <a href="https://developer.chrome.com/docs/devtools/coverage/">
+              Coverage</a> evaluator and used it to improve my CSS: only delivering
+              precisely what my design needed and no excess code.
+            </p>
+            </div>
+            <picture class="project__picture">
+              <source
+                srcset="https://picsum.photos/seed/picsum/600/600"
+                type="image/webp"
+              />
+              <img
+                src="https://picsum.photos/seed/picsum/600/600"
+                alt="Screenshot of my page showing a form for ordering t-shirts"
+              />
+          </li>
+        </ul>
       </section>
       <section id="contact">
         <header><h2>Contact me</h2></header>