Portfolio

Introduction

This website is created to show My Portfolio. It has a header, hero text and image, projects preview container, and a footer. The website is built using Bootstrap and Glidejs. The description section under each project is retreived dynamically from GitHub API using fetch. The app features responsive layout on small devices using media queries.

Projects Container

The projects container is built using Glidejs. It is a JavaScript ES6 slider and carousel. It’s designed to slide as a carousel or slider. In this portfolio carousel was used.

Install latest npm

$ npm install @glidejs/glide
Link CDN

https://cdn.jsdelivr.net/npm/@glidejs/glide

https://unpkg.com/@glidejs/glide
Add Style sheet

<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

Mount the glide in script.js

  type: "carousel",
  perView: 1,
  focusAt: "center",
  breakpoints: {
    800: {
      perView: 1,
    },
    480: {
      perView: 1,
    },
  },
}).mount();

imanmansour86/new-portfolio

Portfolio

Introduction

Projects Container

Screenshots of the app

Header

Project card

Footer

Responsive on Mobile

Built With

Resources Used

Links

Author

License