Git Product home page Git Product logo

my-portfolio's Introduction

๐Ÿ“— Table of Contents

๐Ÿ“– My Portfolio Mobile Version

My Portfolio Mobile Version This project involves creating a responsive website layout using HTML and CSS based on a design provided in Figma. The website should include two sections and use flexbox to layout the elements on the page. The website should also implement button interactions and be responsive, with minimum screen sizes of 375px for mobile and 768px for desktop. The implementation should match the design in Figma, including font, colors, images, text, and margins.

Tech Stack

Client
  • HTML and CSS

Key Features

  • Configured Linters
  • Added an HTML File
  • Added a CSS file

(back to top)

๐Ÿš€ Live Demo

(back to top)

๐Ÿ’ป Getting Started

Prerequisites

In order to run this project you need:

  1. git
  2. VS Code or any code editor
  3. NPM intalled

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone [email protected]:rubydevi/my-portfolio.git
  cd my-portfolio

Install

Install this project with:

Weblint

  1. Run this code:
 npm install --save-dev [email protected]
  1. Don't forget to copy .hintrc to the root directory of your project.

  2. Run this code after you write your html code.

 npm hint .
  1. It will show you errors, fix all the errors shown.

Stylelint

  1. Run this code:
  1. Don't forget to copy .stylelintrc.json to the root directory of your project.

  2. Run this code after you write your html code.

 npx stylelint "**/*.{css,scss}"
  1. It will show you errors, fix all the errors shown.

Usage

To run this project in the browser, simply open the index.html file in your preferred browser.

Run tests

To run tests, run the following command:

 npm hint .

(back to top)

๐Ÿ‘ฅ Authors

๐Ÿ‘ค Chongtham Ruby Devi

(back to top)

๐Ÿ”ญ Future Features

  • Desktop version of the project
  • List of my works
  • More Forms

(back to top)

๐Ÿค Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

โญ๏ธ Show your support

If you like this project please leave a star, I'd really appreciate it.

(back to top)

Acknowledgments

  • I'd like to thank Microverse for this wonderful README template.

๐Ÿ“ License

This project is MIT licensed.

(back to top)

my-portfolio's People

Contributors

rubydevi avatar h-ramalan avatar mariamosman11 avatar

Stargazers

Ansar Ibrahim avatar Abdourahmane Jalloh avatar rod. avatar Kamran Asif avatar Musangamfura Emmanuel  avatar

Watchers

 avatar

my-portfolio's Issues

Portfolio Mobile Menu Pop up.

  • It is noticed that some stylings in the modalContainer and modalSettings are duplicated, it will be nice if it is looked into.
  • It is advisable also to use "use strict" at the beginning of any javascript file.

Incorrect ID Used for Modal Container Selection

Issue Description:

The current code block provided for displaying a modal container seems to have an error in selecting the correct element by ID. The code tries to select the modal container using the incorrect ID, which leads to unexpected behavior.

Proposed Solution:

To resolve the issue, the ID used for selecting the modal container should be updated to the correct value which is modalSetting

Form Validation.

  • HTML and CSS best practice was followed
  • Proper GitHub workflow
  • Proper JavaScript best practice and use of syntax.
    Keep up the good work Ruby...

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.