diff --git a/README.md b/README.md
index 98549832..00875bf0 100644
--- a/README.md
+++ b/README.md
@@ -1,31 +1,30 @@
-# Portfolio
+# Fatma Arslantas - Portfolio
-Your starting portfolio, to iterate on.
+📜 Overview
-## Learning Objectives
+The portfolio showcases my journey as a developer, my projects, and a bit about me.
-- Customise the starting portfolio with your professional details
-- Iterate on your portfolio every module
-- Review your colleague's portfolio
+🖥️ Project Structure
-## Requirements
+The portfolio is divided into the following sections:
-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.
+About Me - A brief introduction to my background, interests, and skills.
+Projects Showcase - A collection of projects I’ve worked on, including descriptions and links to live demos.
+Contact Information - Details on how to reach me, including my email and LinkedIn profile.
-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.
+🛠️ Technologies Used
-## Acceptance Criteria
+HTML
+CSS
+Git
-- [ ] 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
+🚀 How to Run Locally
-## Resources
+Clone the repository:
+git clone https://github.com/AFatmaa/Portfolio
-- [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/)
+Open index.html in your web browser to view the portfolio locally.
+
+🤝 Contributing
+
+Feedback and contributions are welcome! If you’d like to suggest improvements or report issues, feel free to open an issue or submit a pull request.
diff --git a/example-name-portfolio/index.html b/example-name-portfolio/index.html
new file mode 100644
index 00000000..b76f5bbc
--- /dev/null
+++ b/example-name-portfolio/index.html
@@ -0,0 +1,127 @@
+
+
+
+
+
+ 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?
+
This was exactly as it says: a t-shirt order form, in HTML and CSS. This text is copy-pasted.
+
+ 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 validate that data client-side 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 Lighthouse, and meet some other validation constraints.
+
+
+ I spent a lot of time testing my code with Devtools and thinking
+ carefully about the semantics of the copy pasted DOM. I also explored the
+ Coverage evaluator and used it to improve my CSS: only delivering
+ precisely what my design needed and no excess code.
+
+
+
+
+
+
+
+
+
+
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/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/fatma-arslantas-portfolio/index.html b/fatma-arslantas-portfolio/index.html
new file mode 100644
index 00000000..80c6f0fc
--- /dev/null
+++ b/fatma-arslantas-portfolio/index.html
@@ -0,0 +1,116 @@
+
+
+
+
+
+ My Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
Fatma Arslantas
+
+
+
+
+
About Me
+
+ I am a student at Code Your Future, learning essential skills in HTML, CSS, JavaScript, SQL, and Python. My goal is to become a software developer, and I enjoy turning ideas into tangible projects. Outside of coding, I practice yoga and love exploring new places. My strengths are responsibility, organization, and active listening. I'm eager to connect with others and deepen my knowledge in tech!
+
+
+
+
Projects Showcase
+
+
+ Hometown-HomePage: A personal homepage showcasing my hometown, with details on local attractions, history, and favorite spots. Focused on user-friendly navigation and visual appeal.
+
+ Git Website: A beginner's guide website to understanding Git. This project explains the basics of Git, including its importance for developers, how it enables efficient collaboration, and the concept of branching for managing different versions of a project. The website demonstrates my ability to present technical information clearly and showcase practical skills in version control.
+
+ T-Shirt Form: A customizable t-shirt order form. Users can choose size, color, and design, showcasing my skills in form design and user interaction.
+
+
+