Kick-StartDev · latifa-wakili · Jun 1, 2024 · Jun 1, 2024 · Jun 1, 2024 · Jun 1, 2024
diff --git a/.github/workflows/linters.yml b/.github/workflows/linters.yml
@@ -0,0 +1,56 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Lighthouse
+        run: npm install -g @lhci/[email protected]
+      - name: Lighthouse Report
+        run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Webhint
+        run: |
+          npm install --save-dev [email protected]
+          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc
+      - name: Webhint Report
+        run: npx hint .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev [email protected] [email protected] [email protected] [email protected]
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
+  nodechecker:
+    name: node_modules checker
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - name: Check node_modules existence
+        run: |
+          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,18 @@
+{
+  "connector": {
+    "name": "local",
+    "options": {
+      "pattern": ["**", "!.git/**", "!node_modules/**"]
+    }
+  },
+  "extends": ["development"],
+  "formatters": ["stylish"],
+  "hints": [
+    "button-type",
+    "disown-opener",
+    "html-checker",
+    "meta-charset-utf-8",
+    "meta-viewport",
+    "no-inline-styles:error"
+  ]
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,22 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen"
+        ]
+      }
+    ]
+  },
+  "csstree/validator": true,
+  "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
+}
+
diff --git a/Portfolio-Webpage b/Portfolio-Webpage
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# Portfolio-Webpage
+readme
diff --git a/images/landing.png b/images/landing.png
diff --git a/images/survey (1).png b/images/survey (1).png
diff --git a/images/tribut.png b/images/tribut.png
diff --git a/index.html b/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  </head>
+  <body>
+    <div class="container">
+      <header class="header" id="navbar">
+        <div class="title-name">
+          <p class="first-letter-of-title">P</p>
+        <p>ortfolio</p>
+        </div>
+        <ul>
+          <li id="one"><a href="#welcome-section">About</a></li>
+          <li><a href="#projects">Work</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#content">Content</a></li>
+        </ul>
+      </header>
+      <div class="info" id="welcome-section">
+        <p>I am a  web developer</p>
+        <h1>Latifa Wakili</h1>
+        <button>Learn More</button>
+      </div>
+      <div class="content" id="projects">
+        <h2>SOME OF MY PROJECTS</h2>
+        <div class="column-one-project">
+          <div class=" project-tile">
+            <a href="#">
+              <img src="images/landing.png" alt="">
+              <p> Tribute page</p>
+            </a>
+          </div>
+          <div class=" project-tile">
+            <a href="#">
+              <img src="images/survey (1).png" alt="">
+              <p> Survey Form </p></a>
+          </div>
+          <div class=" project-tile">
+            <a href="#">
+            <img src="images/tribut.png" alt="">
+            <p> Landing page</p></a>
+          </div>
+        </div>
+          <div class="click-show">
+            <a href="#">
+            <button>Show all ></button></a>
+          </div>
+        </div>
+      </div>
+      <div class="service" id="services">
+        <h3 class="title">My <span> Services</span></h3>
+        <div class="info-service">
+          <div>
+            <i class="fa fa-laptop" aria-hidden="true"></i>
+            <h3>Website Design</h3>
+            <p>Offer to design and create custom websites for individuals or small businesses. You can emphasize your skills in HTML and CSS, ensuring that the websites you create are visually appealing and functional across different devices.</p>
+          </div>
+          <div>
+            <i class="fa fa-mobile-phone" aria-hidden="true"></i>
+            <h3>Responsive Design</h3>
+            <p>Highlight your ability to create responsive websites that adapt to various screen sizes, ensuring an optimal viewing experience for users on desktops, laptops, tablets, and smartphones.</p>
+          </div>
+          <div>
+            <i class="fa fa-refresh" aria-hidden="true"></i>
+            <h3>Website Maintenance</h3>
+            <p>Offer ongoing maintenance services to keep clients' websites up-to-date with content changes, security updates, and bug fixes. This could include updating text, images, or adding new features as needed.</p>
+          </div>
+      </div>
+    </div>
+      <div class="footer" id="content">
+        <h2>Work With Me </h2>
+        <div class="social-media">
+          <a href="#"><i class="fa fa-facebook"></i> Facebook</a>
+          <a href="#"><i class="fa fa-github"></i> GitHub</a>
+          <a href="#"><i class="fa fa-twitter"></i> Twitter</a>
+          <a href="#"><i class="fa fa-at"></i> Send a mail</a>
+          <a href="#"><i class="fa fa-phone"></i> Call me</a>
+        </div>
+        <div class="portfolio">
+          <p>© [Latifa] 2024 | This website is a practice/portfolio project and all projects and contact details are for demonstration purposes only.
+          </p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/linters.yml b/linters.yml
@@ -0,0 +1,56 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Lighthouse
+        run: npm install -g @lhci/[email protected]
+      - name: Lighthouse Report
+        run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Webhint
+        run: |
+          npm install --save-dev [email protected]
+          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc
+      - name: Webhint Report
+        run: npx hint .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev [email protected] [email protected] [email protected] [email protected]
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
+  nodechecker:
+    name: node_modules checker
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - name: Check node_modules existence
+        run: |
+          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
diff --git a/portfolio.png b/portfolio.png