Personal Website

This is a website with multiple functionalities using Bootstrap 4, a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS, and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Combined with the Ruby on Rails application, a server-side web framework written in Ruby, the website hosts many different pages including a photography portfolio, programming portfolio, information about the host, and a contact center. It was created as a basis for my own website, but everyone is welcome to use it. The implementation strives to be simple and free of unnecessary dependencies.

Resources

Software: VS Code 1.71.0
Code Sources:
Programming Languages: JavaScript, CSS, HTML, Ruby

Website Overview

An easy way to create a simple, secure website with a portfolio.
Support for text-based and photo-based organization.
Easy authoring in HTML, Markdown (with code formatting, or JSON).
Access to changing portfolio images.
High-resolution support for photo images.
Support for tagging posts & images by category within a portfolio.
Ability to format different buttons and headings.
Quick access to other pages using the navigation bar.
Highly compatible with many devices, including mobile.
Quick access to contact information via social or professional media.

Website Structure

[assets] - Entry point for the application, hosts all the static content.
[assets/fonts] - Imported different fonts for webpage access.
[assets/images] - Imported photography portfolio items.
[assets/pdf] - Imported PDF items for the webpage.
[css] - Entry point for all CSS files for website styling in HTML.
[css/bootstrap.min.css] - Bootstrap 4 documentation for the webpage template.
[css/styles.css] - Personal HTML styling documentation.
[docs] - Code of Conduct, Contributing, and Support files.
[favicons] - Hosts the favicon of the webpage.
[js] - Entry point for all JavaScript files for website functionality.
[js/bootstrap.bundle.min.js] - Bootstrap 4 documentation for the webpage functionality.
[js/filter.js] - Functionality to organize portfolio items.
[js/load-mathjax.js] - Functionality to mathematical documentation.
[js/template.js] - Navbar and footer template for all pages.
[projects] - Implementation of all programming projects.
[CNAME] - Domain name for the webpage.
[Gemfile] - Package manager for libraries that contains a specific piece of functionality.
[about.html] - Access to the About page code.
[contact.html] - Access to the Contact page code.
[gallery.html] - Access to the Gallery page code.
[index.html] - Access to the Root/Home page code.
[portfolio.html] - Access to the Portfolio page code.
[robots.txt] - Tells search engine crawlers which URLs the crawler can access on the site.
[sitemap.xml] - A file that lists a website's essential pages, making sure Google can find and crawl them all.

Website Results

The deployed webpage is accessible here.