diff --git a/README.md b/README.md index 98549832..5fc296b3 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,61 @@ # Portfolio -Your starting portfolio, to iterate on. +Module 2 iteration of your portfolio. We're adding a new case study for another project you've worked on. You can choose anything. + +_Keep your changes simple!_ + +We are going to use the same Git workflow as Module 1, which you can read by checking out the `Module-HTML-CSS` branch or by going to the [tree view on Github](https://github.com/CodeYourFuture/Portfolio/tree/Module-HTML-CSS). ## 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 +- [ ] Merge a branch into another branch in Git +- [ ] Create a second 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. +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: Getting our code together + +Our changes have disappeared! That's because we made them on another branch. We're going to grab those changes and put them on our new branch. + +1. Checkout the `Module-JS-1` branch `git checkout Module-JS-1` +1. Make a new branch `git checkout -b your-name-portfolio-js-1` +1. Merge your changes from your last branch `git merge your-name-portfolio` + +Whoa! Did your README disappear? That's because you overwrote it. But you can access specific files in the terminal any time you like, like this: `git checkout Module-HTML-CSS README.md`. Or you can do this in your Git GUI. + +## 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"` Do not wait until your PR is done to commit. Commit early and often. + +## Git Go: Making a pull request -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. +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-js1` +1. Open a pull request to merge your branch into `Module-JS-1`. _Add a link to your deployed project in the description._ ## 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 -- [ ] My portfolio is deployed +- [ ] My portfolio is deployed and I have included the link in my pull request - [ ] 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/) +- [GitHub Desktop Merge](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/keeping-your-local-repository-in-sync-with-github/syncing-your-branch#merging-another-branch-into-your-project-branch) +- [GitKraken Merge](https://www.youtube.com/watch?v=mS8oUqqc2G8) +- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens/) + change html and css diff --git a/example-name-portfolio/index.html b/example-name-portfolio/index.html new file mode 100644 index 00000000..71df6217 --- /dev/null +++ b/example-name-portfolio/index.html @@ -0,0 +1,87 @@ + + + + + + + + Saba Farjamfard - Portfolio page + + + + +
+
+

Welcome to Saba's coding journey

+ +
+
+ +
+

Welcome to My Coding World

+

Explore my work, projects, and passion for coding

+ View My Work +
+ +
+ +
+

About Me

+

+ Hi, I'm Saba Farjamfard, a passionate IT enthusiast and aspiring full-stack developer. With a solid foundation in web design and programming, I have completed various projects that showcase my skills and dedication. +

+

+ Currently, I am honing my skills at CodeYourFuture, where I work on real-world projects and collaborate with other developers. I enjoy learning new technologies and applying them to solve meaningful problems. +

+
+ + +
+

Projects

+
+
+ Birthday card +

Birthday Card

+

Birthday card

+

This is a beautiful and digital birthday card with birthday surprises hidden.

+
+ +
+ Hometown page +

Hometown Homepage

+

Hometown Homepage

+

This is the Homepage of my city, featuring beautiful photo with description about one of the provinces of Tehran.

+
+ +
+ Form control +

Form Control

+ Form Control +

This is a project I designed with html and css.

+
+
+
+ + +
+
Contact Me
+ +
+
+ + + + + \ No newline at end of file diff --git a/example-name-portfolio/style.css b/example-name-portfolio/style.css new file mode 100644 index 00000000..41f19161 --- /dev/null +++ b/example-name-portfolio/style.css @@ -0,0 +1,148 @@ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: #f9f9f9; + color: #333; +} + +header { + text-align: center; + padding: 20px; + background-color: #4CAF50; + color: white; + border-bottom: 4px solid #388E3C; +} +.hero-section { + text-align: center; + margin: 0; + padding: 20px; +} +.hero-section h2{ + font-size: 2em; + margin-bottom: 10px; +} +.hero-section p { + font-size: 1.2em ; + margin-bottom: 10px; +} + +.navbar { + display: flex; + flex-direction: column; + align-items: center; + background-color: #333; + padding: 10px; +} + +.navbar ul { + display: flex; + justify-content: center; + gap: 20px; + list-style: none; + margin: 0; + padding: 0; +} + +.navbar li { + display: inline; +} + +.navbar a { + text-decoration: none; + color: white; + font-weight: bold; + padding: 5px 10px; + transition: color 0.3s; +} + +.navbar a:hover { + color: #00ff00; +} + +.navbar a:hover { + color: #00ff00; +} +main { + padding: 20px; + max-width: 1200px; + margin: 0 auto; +} + +section { + margin-bottom: 30px; + padding: 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h2 { + text-align: center; + margin-bottom: 20px; +} +h5{ + text-align: left; + margin-bottom: 40px; + padding: 20px; + font-family: Arial, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + + +} + +.project-list { + display: flex; + justify-content: center; + align-items: flex-start; + flex-wrap: wrap; + gap: 20px; + margin: 20px auto; +} + +.project-item { + width: 300px; + text-align: center; + border: 1px solid #ddd; + border-radius: 8px; + padding: 15px; + background-color: #fff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.project-item img { + width: 23%; + height: auto; + border-bottom: 1px solid #ddd; + margin-bottom: 10px; +} + +.project-item h3 { + font-size: 1.2rem; + margin-bottom: 10px; +} + +.project-item p { + font-size: 0.9rem; + line-height: 1.5; +} + +footer { + text-align: center; + padding: 10px; + background-color: #333; + color: white; + margin-top: 20px; +} + +footer a { + color: #4CAF50; + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +} \ No newline at end of file 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; -}