Skip to content

6nhuseyin/Bootstrap-Portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bootstrap-Portfolio

Introduction

Welcome to my Bootstrap Portfolio! This site showcases my development skills, now enhanced with Bootstrap.

Project Title

Bootstrap Portfolio

Screenshot

Portfolio Screenshot

Motivation

To create an interactive and professionally styled website using Bootstrap's features.

Technical Acceptance Criteria

  • Navigation Bar: Using Bootstrap's navbar component.
  • Hero Section: A jumbotron with personal information.
  • Work Section: Projects displayed in a grid using Bootstrap cards.
  • Skills Section: Listing skills from the bootcamp.
  • About/Contact Section: An "About Me" section with contact details.
  • Footer Section: Includes hyperlinks with hover effects.

Deployment

  • Live URL: Deployed on GitHub Pages.
  • GitHub Repository: Contains all code.

Application Quality

  • Enhancement: Maintains and enhances previous portfolio functionality.

Repository Quality

  • Best Practices: Adheres to file structure and naming conventions.
  • Quality README: Detailed with descriptions, screenshots, and link.

Features

  • Responsive Design: Utilizes Bootstrap's responsive features.
  • Interactive Elements: Hover effects and box shadows on buttons.

Helpful Resources

Review Submission

  1. Deployed Application URL: Deployed Application
  2. GitHub Repository URL: GitHub Repository
  3. URL of Previously Deployed Portfolio: Previous Portfolio

Change Log

Initial Setup

  • Download and Unzip Starter Code: Obtain starter code and prepare a local directory.
  • Environment Setup: Install a code editor (e.g., Visual Studio Code).
  • Create and Clone GitHub Repository: Start a new repository with a unique name and clone it to the local machine.

Understand Requirements and Plan

  • Review Acceptance Criteria: Check grading requirements.
  • Create a Wireframe: Plan the layout of the portfolio.
  • Define Color Scheme, Fonts, and Images: Decide on the aesthetic elements.

HTML Structure

  • Basic HTML Structure: Create a basic HTML structure, including navigation links and Bootstrap integration.
  • Accessibility and Semantic HTML: Ensure compliance with accessibility standards and logical organization of HTML elements.
  • Background Image Setup: Correct the image path and add descriptive alt text.

Navigation Bar

  • Top Navigation Menu: Implement a navigation menu at the top using Bootstrap's navbar code or custom classes.
  • Include Relevant Links: Add links applicable to your portfolio.
  • Navigation Functionality: Ensure links navigate to the appropriate sections.

Hero Section

  • Jumbotron Implementation: Feature a jumbotron with your picture, name, and any additional information.

About/Contact Me Section

  • Content Creation: Write the "About Me" section.
  • Alignment with Contact Section: Place the "About Me" section in the same row as the contact information.
  • Bootstrap Styling: Apply visual appeal with Bootstrap styles.

Work Section

  • Grid Layout Display: Show your work in a grid layout.
  • Bootstrap Cards: Use Bootstrap cards for each project.
  • Project Descriptions: Provide a brief overview of each work.
  • Link to Projects: Ensure images link to deployed class project work.
  • Project Details: Add titled images and brief overviews.

Skills Section

  • List Bootcamp Skills: List the skills you expect to learn from the bootcamp.

CSS and Bootstrap Setup

  • CSS File Setup: Apply basic styling.
  • Refine Responsive Design: Implement responsive design using Bootstrap, minimizing media queries.
  • Consolidate and Organize CSS: Refactor for efficiency.

Testing and Documentation

  • Testing: Check compatibility across devices and browsers.
  • Documentation: Create a detailed README.md file.
  • Submission: Submit URLs of deployed application and GitHub repository.

Deployment

  • Hosting: Deploy the portfolio on GitHub Pages or another platform.
  • GitHub Pages Setup: Configure the settings in the GitHub repository.

Application Quality Checklist

  • Initial Presentation: Ensure the site displays your name, photo, and navigation links upon loading.
  • Navigation Functionality: Check that navigation links scroll to the corresponding sections.
  • Work Section Content: Confirm that the work section showcases titled images of your applications.
  • Responsive Design: Verify the responsiveness and adaptability of the layout across various screens and devices.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published