From 7aa6f66050b3731c10baa2b02e8d2e0dba474a7e Mon Sep 17 00:00:00 2001 From: RihannaP <114884466+RihannaP@users.noreply.github.com> Date: Thu, 31 Oct 2024 17:12:29 +0000 Subject: [PATCH 1/3] add info --- Rihanna-portfolio/index.html | 129 +++++++++++++++++++++++++++++++++++ Rihanna-portfolio/style.css | 57 ++++++++++++++++ 2 files changed, 186 insertions(+) create mode 100644 Rihanna-portfolio/index.html create mode 100644 Rihanna-portfolio/style.css diff --git a/Rihanna-portfolio/index.html b/Rihanna-portfolio/index.html new file mode 100644 index 0000000..4cd2647 --- /dev/null +++ b/Rihanna-portfolio/index.html @@ -0,0 +1,129 @@ + + + + + + My Portfolio + + + + + + + + + + +
+

Rihanna Poursoltani

+ +
+
+
+

About Me

+

+ Welcome! My name is Rihanna, +

+

+ I am a motivated and friendly professional with a strong interest in technology and education. My career has taken me + from teaching subjects like math and digital skills to learning software development and project management. + + Currently, I am a Full Stack Developer Trainee at CodeYourFuture, where I enjoy working with others and tackling + challenges together. After successfully passing the Intro to the Digital and Fundamentals courses, I started the software development course + in Sep 2024. During this course, as well as developing the softer skills (such teamwork, problem solving, collaboration, + presenting skills), I learned; +

+

+

+ My previous experience in digital marketing and project management has helped me become organized + and communicate well with my team. +

+

+ I believe in continuous learning and always look for ways to improve my skills while building good relationships with my + colleagues. My various roles have taught me to be adaptable and resilient when facing new challenges. +

+
+
+

Projects Showcase

+

1- My Hometown Page

+

+ A personal project that showcases my hometown, including its culture, history, and notable places. This project + demonstrates my ability to create engaging content and design user-friendly interfaces. +

+

+ Technologies Used: HTML, CSS, JavaScript +

+

2-T-shirt Order Form

+

+ An interactive project that implements form controls for data input and validation +

+

+ Technologies Used: HTML, CSS, JavaScript +

+
+
+

Contact me

+

+ Email: Rihanna.poursoltani.com +

+

+ LinkedIn: Rihanna Poursoltani +

+
+
+ + + diff --git a/Rihanna-portfolio/style.css b/Rihanna-portfolio/style.css new file mode 100644 index 0000000..5c8d60a --- /dev/null +++ b/Rihanna-portfolio/style.css @@ -0,0 +1,57 @@ +/* Design tokens */ +:root { + --paper: #eff6e0; + --ink: #01161e; + --brand: #1006d77; + --font: "Itim", 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: var(--brand); + 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 7a243ad44660385bb3feba05267c1c6e2d010418 Mon Sep 17 00:00:00 2001 From: RihannaP <114884466+RihannaP@users.noreply.github.com> Date: Sat, 2 Nov 2024 00:45:36 +0000 Subject: [PATCH 2/3] Ass styling --- Rihanna-portfolio/index.html | 11 ++-- Rihanna-portfolio/style.css | 36 ++++++++++--- index.html | 102 ----------------------------------- style.css | 57 -------------------- 4 files changed, 35 insertions(+), 171 deletions(-) delete mode 100644 index.html delete mode 100644 style.css diff --git a/Rihanna-portfolio/index.html b/Rihanna-portfolio/index.html index 4cd2647..8299efe 100644 --- a/Rihanna-portfolio/index.html +++ b/Rihanna-portfolio/index.html @@ -29,10 +29,7 @@ media="print" onload="this.media='all'" /> - - - +
@@ -55,7 +52,7 @@

Rihanna Poursoltani

I am a motivated and friendly professional with a strong interest in technology and education. My career has taken me from teaching subjects like math and digital skills to learning software development and project management. - Currently, I am a Full Stack Developer Trainee at CodeYourFuture, where I enjoy working with others and tackling + Currently, I am a Full Stack Developer Trainee at CodeYourFuture, where I enjoy working with others and tackling challenges together. After successfully passing the Intro to the Digital and Fundamentals courses, I started the software development course in Sep 2024. During this course, as well as developing the softer skills (such teamwork, problem solving, collaboration, presenting skills), I learned; @@ -85,6 +82,7 @@

1- My Hometown Page

Technologies Used: HTML, CSS, JavaScript

+

2-T-shirt Order Form

An interactive project that implements form controls for data input and validation @@ -92,6 +90,7 @@

2-T-shirt Order Form

Technologies Used: HTML, CSS, JavaScript

+

Contact me

@@ -105,7 +104,7 @@

2-T-shirt Order Form

- header { - background: var(--paper); + background: var(--header); display: flex; justify-content: space-between; - align-items: center; position: sticky; - top: 0; + padding: 2rem; z-index: 1; + border-radius: 4%; + } nav ul { display: flex; @@ -50,8 +59,23 @@ nav ul { gap: var(--gap); } +/* subheader style*/ +header { + background: var(--header); + padding: 1rem; + border-radius: 4%; + +} + /* Text readability */ section p { line-height: 1.5; - max-width: 55ch; } + +/* button style*/ +button{ + padding: 0.8rem; + margin: 1rem; + border-radius: 15%; + background-color: var(--header); +} \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 7b0d8b5..0000000 --- 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 c911f90..0000000 --- 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 c0647032c749719e28cb84b4b57ad76029d8a7ae Mon Sep 17 00:00:00 2001 From: RihannaP <114884466+RihannaP@users.noreply.github.com> Date: Sat, 2 Nov 2024 02:02:17 +0000 Subject: [PATCH 3/3] add readme --- README.md | 64 ++++++------------------------------ Rihanna-portfolio/index.html | 20 ++++++++--- Rihanna-portfolio/style.css | 18 ++++++---- 3 files changed, 36 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index f6e904c..049dbaf 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,17 @@ -# Portfolio +# Rihanna Poursoltani 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. +Welcome to my portfolio! This website showcases my work and skills as a full-stack web developer, emphasizing my expertise in HTML and CSS. -_Keep your changes simple!_ +## Overview +This portfolio is designed to present my projects and demonstrate my abilities in full-stack development using HTML and CSS. +Technologies Used +HTML5 +CSS3 -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 +## Getting Started +To view my portfolio, visit the following link: -- [ ] Branch from a branch in Git -- [ ] PR from a branch to a branch in GitHub -- [ ] Create a personal case study for a project +Live Portfolio -## 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/) diff --git a/Rihanna-portfolio/index.html b/Rihanna-portfolio/index.html index 8299efe..bc04820 100644 --- a/Rihanna-portfolio/index.html +++ b/Rihanna-portfolio/index.html @@ -82,15 +82,25 @@

1- My Hometown Page

Technologies Used: HTML, CSS, JavaScript

- -

2-T-shirt Order Form

+ +

2- T-shirt Order Form

An interactive project that implements form controls for data input and validation

Technologies Used: HTML, CSS, JavaScript

- + +

3- Git and GitHub Introduction

+

+ Introduced users to the essential concepts of Git and GitHub, demonstrating their importance as version control tools in + professional web development. Utilized form features and the first child pseudo-class to create a user-friendly + interface. Successfully addressed layout issues by applying relative positioning to the footer +

+

+ Technologies Used: HTML, CSS, JavaScript +

+

Contact me

@@ -98,13 +108,13 @@

2-T-shirt Order Form

Email: Rihanna.poursoltani.com

- LinkedIn: Rihanna Poursoltani + LinkedIn: Rihanna Poursoltani