https://github.com/derektypist/derek-dhammaloka-personal-profile
https://github.com/derektypist/derek-dhammaloka-personal-profile
Last synced: 30 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/derektypist/derek-dhammaloka-personal-profile
- Owner: derektypist
- Created: 2019-12-30T20:06:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-08T13:34:59.000Z (over 6 years ago)
- Last Synced: 2025-07-13T19:42:36.504Z (11 months ago)
- Language: HTML
- Size: 2.18 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Derek Dhammaloka Personal Profile
Welcome to the Derek Dhammaloka Personal Profile. The purpose of this project is to have functionality similar to
https://codepen.io/freeCodeCamp/full/zNBOYG
## UX
This project is a personal portfolio of myself. It contains four sections - about (welcome), work (projects), skills and contact.
The organising principle is biography.
The about (welcome section) is who I am and what I do.
The work (projects section) consists of 9 projects. 4 milestone projects with the Code Institute, where I got my Diploma in Software Development
with Second Class Honours. 1 mini project with the Code Institute about my CV. 4 projects on Responsive Web Design under https://www.freecodecamp.org.
Each project has a screenshot of the live project. When the user clicks on to the screenshot, it opens the live project in a new window.
When a user hovers over the screenshot the border color changes to green and a screentip is provided.
There is a caption with a link to view source code (GitHub Repository). If the user hovers over the GitHub logo, a screentip is displayed as well as changing
the color to orange.
The skills section is in 3 columns - Front End, Back End and Other.
The contact section provides links to my GitHub Profile, social media (Facebook, LinkedIn, YouTube and Pinterest) and Professional Organisations (e.g. British
Computer Society).
When the user hovers on the navbar, the background color changes to seagreen.
### User Stories
User Stories are taken from:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage
Welcome section with id of welcome-section.
Welcome section with h1 element containing text.
Projects section with id of projects.
Project section with at least 1 element with a class of project-tile to hold a project.
Projects section should contain at least 1 link to a project.
Portfolio should have a navbar with an id of navbar.
Navbar with at least 1 link that I can navigate to different sections of the page.
Portfolio should have a link of profile-link, which opens my GitHub or FCC profile in a new tab.
My portfolio should have at least 1 media query.
Height of welcome section should be equal to the height of the viewport.
Navbar should be at the top of the viewport.
Wireframes are supplied.
* [About](wireframes/about.png)
* [Contact](wireframes/contact.png)
* [Skills](wireframes/skills.PNG)
* [Skills - Mobile Version](wireframes/skills-mobile.png)
* [Work](wireframes/work.png)
## Features
This project has a fixed navbar, whatever the section it is on. It has about, work, skills and contact sections.
## Technologies
This project uses HTML5, CSS3 and Bootstrap 4.4.1. Other Technologies used include Font Awesome 4.7.0 and Google Fonts.
## Testing
Resize the width of the browser window to see that the navbar is vertical for mobile versions. Ensure all the links are manually tested
to ensure that they are pointing to the correct destination. External Links (e.g. British Computer Society) open in a new window without
leaving the webpage. Ensure all the user stories have been met. If some of the user stories have not been met, go back and edit the code. Also
run the code. Repeat until all user stories have been met.
## Deployment
This project is deployed on [GitHub Pages](https://derektypist.github.io/derek-dhammaloka-personal-profile) using the master branch.
Remote setup at
git remote add origin https://github.com/derektypist/derek-dhammaloka-personal-profile
Any updates, use the git push command.
## Credits
### Content
The contents in the project were written by me.
### Media
All images in the images folder are screenshots of the projects. They are for illustration purposes only.
### Acknowledgements
Went to www.w3schools.com for ideas on the project.