Giter Site home page Giter Site logo

portfolio's Introduction

Portfolio Project using HTML, CSS and Vanilla Javascrpt

This project was made for an introductory web development course. The code repository can be found here The live site is deployed here.

Styles

The color scheme was selected from the Canva theme "Middle Eastern Empire" The font is called Lekton from Google Fonts

I used media queries to apply different styles and structures to mobile, tablet and desktop views. Some of the main differences are the use of grids for the desktop view, the presence or absence of the stylized initials in the contact form div and the size of images.

I made heavy use of class and id names, but also choose to use tag names occasionally when I really did want all related tag elements to have a certain style.

Navigation

The navigation bar also changes depending on the mobile or desktop view. This was the a navbar tempalte provided by the instructor of a previous web dev class I took. I reused it here because it is highly responsive. My intrsuctor was Greg Kerr. His web and teaching portfolio can be found here. (You'll notice a similar navbar is used on his site, particularly in the mobile view.) I took his CAS 206 Principles of HTML5 and CSS3 and CAS 215 Advanced CSS3 and Pre-Processors classas. More about the navbar. It uses Bootstrap CSS and jQuery. It uses classes such as navbar-brand and navbar-collapse. To learn more about Bootstrap Navbars here is their Navbar Documentation It's important to note that I am using version 3.3.5 of Bootstrap which is still supported but there are newer versions out there. The navbar in mobile also relies on jQuery, here I'm using version 1.11.3. Again, this is an older but supported version. You can find jQuery hosted here

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.