Giter Club home page Giter Club logo

obrymec / gitlab_home_page_clone Goto Github PK

View Code? Open in Web Editor NEW
8.0 1.0 1.0 60.95 MB

The old home page clone of GitLab website made with html, css and javascript.

Home Page: https://obrymec.github.io/gitlab_home_page_clone/

License: MIT License

HTML 0.99% JavaScript 78.95% SCSS 20.06%
front-end front-end-development gitlab graphical-interface graphical-user-interface home-page user-interface web-application web-development gitlab-home-page-clone

gitlab_home_page_clone's Introduction

GitLab Home Page Clone

Front-end Development Web Development Web Application User Interface GitLab

The project is academic. It's made to evaluate my level in native web development languages; test my capacity to build advanced user interfaces with HTML, CSS and JavaScript only and learn more things about those technologies. It's a front-end project only. No any back-end API is called. The main goal of this project is to reproduce the old GitLab home page only.

Table of contents

  1. Access links
  2. Reference
  3. Final result
    1. Video
    2. Screenshots
  4. Project installation
    1. Nodejs installation
    2. Sources code cloning
    3. Dependencies installation
    4. Project execution

Access links

The project is already hosted on web and can be accessible through one of these links below :

Reference

The project can be found via the link below :

Final result

This is the final result of the project :

Video

Watch the project's video

Screenshots

First render Second render Third render Fourth render

Project installation

โš ๏ธ This project uses some nodejs packages for code minification, css purge and auto prefixer for his production phase. If you want to use vscode to open the project sources, you can skip all steps before clone the project sources code and also dependencies installation whether you want. Otherwise, it's mandatory to follow the steps below.

Nodejs installation

cd ~;\
sudo apt install curl;\
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash;\
source ~/.bashrc;\
nvm --version;\
nvm install --lts;\
node --version;\
npm install yarn --global;\
yarn --version

Sources code cloning

git clone [email protected]:obrymec/gitlab_home_page_clone.git gitlab_home_page/

Dependencies installation

Go to the root folder of the project sources and run :

yarn install

Project execution

Whether the project sources is opening with vscode, follow the steps below :

  • Make sure that your computer is connected to Internet;

  • Go to extensions section and tap live server within extensions search bar;

  • Then, install it. After installation, close your vscode and open it again;

  • When that is done, open index.html file inside ./public/index.html and make a right click;

  • In the displayed contextual menu, click on Open with Live Server...

Whether you don't using vscode, go to the root folder of the project and run :

yarn start

Then, open your favorite browser and tap on the search bar, the following link :

http://localhost:5000/

Enjoy :)

gitlab_home_page_clone's People

Contributors

obrymec avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

saakshij

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.