Skip to content
This repository contains a portfolio about myself.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.sass-cache
docs
images
ppt
s
CNAME
README.md
index.html

README.md

brasscapon.github.io responsiveness

The website can be viewed live at the same name as this repository: brasscapon.github.io.

Table of Contents

About

This repository contains a portfolio about myself. The purpose of the website is to broadcast my personality, skills, and abilities to curious peers, potential employers, and other industry contacts.

There are three pages to the website - a homepage which includes a brief aboutme, my education, work experience, interests, and technology skills. It also contains a works page which features my completed dev projects, and an essays/blog page which links to my noteworthy online writings.

It was created using HTML, CSS (Flexbox), and some JS. I utilised the Mobile Design First methodology (using media queries) to make it fully responsive with mobile and tablet devices.

An animated image showcasing Adam Demirel's portfolio website.

Internet Technologies

Another component of the assignment that this portfolio was motivated by was to complete answers to some internet related questions. The answers can be found here.

Installing

If you would like to have a look at the code for this portfolio and play around with it, feel free to download it by doing the following.

git clone git@github.com:brasscapon/brasscapon.github.io.git <foldername>

Change foldername to whatever you would like the repository to be called on your machine.

Then navigate to the directory with the commandline.

cd ~/code/portfolio

Your directory will likely be different.

Then to load up the homepage

open index.html

Project Management

  • To begin planning how I would like my website to look, I overviewed a large amount of web developer portfolios and noted down which aspects I found unifying and wanted to include.
  • I then began by freehand drawing some wireframes for my desired layout and modifying them as new ideas were generated.
  • After I had decided what the website would roughly look like, I sketched out my wireframes into the wireframing software Balsamiq. Wireframes were created for all 3 pages - home, works, and blog. Here are the wireframes for the homepage on mobile, tablet, and desktop displays:

An image of the portfolio's homepage as display on a mobile device

An image of the portfolio's homepage as displayed on a tablet device

An image of the portfolio's homepage as display on a desktop

  • I then created as many user stories (in the style of Agile project management methodology) as we needed to meet all of the needs of our project and placed them all in Trello so that we could keep track of the progress on each task.

A screenshot of the portfolios project management on Trello

  • After defining the main purposes the website set out to achieve, I created a high level structure of the HTML and CSS code and how I would implement it.
  • I then separated the concerns into different SCSS partial files.
  • The HTML structure was filled out first, followed by the CSS styling.

Project Timeline

Students of the project were given 7 days to complete the project.

  • Day 1: I prioritised essential features of the website to be completed first - wireframing, basic visual structure, basic styling (typography, colors, and images), navigation bar, and clickable links.
  • Day 2: I completed any leftover priorities from day 1 and then began padding out the code for other css styles and features that were auxillary, such as positioning things in more appropriate places, scrollbars, favicons, bullet points, etc.
  • Day 3-4: Essays and works pages were added and related gif images were recorded. Alt text was added to images for accessibility, and tags were substituted to be semantic where applicable.
  • Day 5-6: A handful of bugs were identified that had popped up whilst trying to add features and they were cleaned up.
  • Day 7: Documentation was written and code was refactored to be cleaner. Answers were written to assignment related internet questions.

Built With

  • HTML5
  • CSS3
  • Balsamiq (for wireframing)
  • Visual Studio Code (text editor)
  • Canva for choosing color palette
  • Trello (for project management)
  • Git
  • GIMP (image editor)
  • ttyrec & ttygif (linux gif recording and conversion)
  • LICEcap (mac gif recording)
  • I deployed the website using Github Pages
  • Flat Icons
  • Google Fonts

Authors

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE.md file for details.

You are permitted to modify, alter, create copies, and distribute this project freely. We would love to see it expanded by other developers to include a larger dataset of questions and answers and improve on the application's functionality.

Acknowledgments

  • Thanks to my peers and educators for helping me to identify and fix bugs when all hope seemed lost - In particular Ryan Sickle, David Armour, and Bianca Power.
  • To StackExchange and IRC for providing additional support.

Share my Portfolio

You can’t perform that action at this time.