No longer live.
version 2.0.0
- Contents
Portfolio website for my software development projects and artwork. It is a .Net Core app built in Visual Studio with C# and deployed on Azure. All of the sites front facing data, including text fields and portfolios, are handled with a built in admin GUI available on each page when authenticated.
There is more information about the languages, technologies, tools, and site architecture below.
|
This is a .Net Core project written in C# using Razor pages. Login and authentication is handled by Microsoft Identity. |
|
Front end built and styled with HTML5 markup and CSS3 style. The site is fully responsive with mobile/tablet and laptop/desktop break points. |
|
JavaScript and jQuery are used for browser side user interactions. |
|
The website is deployed on Azure, using AzureSQL for the database, an Azure Key Vault for storing keys and other secret data, and an Azure Storage Blob for storing uploaded images. |
|
I used Bootstrap for the main navigation drop down menus and breakpoint, the collapsing accordion galleries, and the carousel image viewers. The request form on the Art/Booking page uses Twilio SendGrid to email the form. |
|
Git and GitHub used for version control. |
|
C# and HTML written in Visual Studio. JavaScript, CSS and, Markdown written in VS Code. |
|
Image assets created and/or edited with Adobe Photoshop. |
HomePage1:manyHomePageTechnologymany:1TechnologyProject1:manyProjectTechnologymany:1TechnologyProject1:manyProjectImagemany:1ImageGallery1:manyGalleryImagemany:1Image
Each page on the site has it's own popup admin GUI, visible to authenticated users, that controls the CRUD actions for its content.
The index page admin controls the home page's profile image, title, and intro paragraph.
Index admin screenshot
This form updates the profile photos on each page. It removes the previous file from the blob, uploads the new one, and creates a new record in the database.
This form updates the general information on each page.
The code page has three separate admin panels. One for the basic page information, which is the same pattern as the index admin. The second is an admin GUI with a dropdown <select> menu containing a broad list of languages and technologies. The selected icons appear on the page.
The third GUI is what controls the portfolio section of the page. It has CRUD actions to create, update, and delete projects, as well as add and remove images from projects.
I've included domain models for the add and remove projects methods. The general page admin is same as the index page. The add and remove image methods will be detailed below under the Art Page section.
Project admin screenshot
The add project form takes in a new project title. Because the title will be used for class names to control the Bootstrap accordion dropdown they need to be unique. The CheckProjectTitle method validates the input. When the project is created the title is normalized and used to assign several class names for use with dropdowns. The project is saved to the database with the title and classnames. Then a list of technologies is attached to the project for display in portfolio view.
The delete project form sends the project Id to the model. First the join table records for the ProjectImages are removed. Then the respective Image records are removed and the file is deleted from blob storage. Lastly the ProjectTechnology records are removed and then the Project record.
The art page has an admin for the general page content just like the index and code page. The galleries have their own GUI that can add and remove galleries, similar to adding and removing projects from the code page, and add and remove images from galleries.
Gallery admin screenshot
The add images form sends an array of IFormFiles to the AddImages handler. Each image is resized for gallery view and a copy is made and resized for thumbnail view. Both file names have the white space stripped and the date and time attached to ensure a unique name in the blob. Once stored in the blob the filename and blob.uris are used to create and save an Image in the database. Then the image is added to the gallery with an ImageGallery join table and the page is refreshed.
The delete image form removes the image from the gallery by deleting the GalleryImage join table record. Then the image and thumbnail are removed from the blob by filename. And finally the image record is removed from the database.
-
11/28/2021 : Removed the Booking page from the Art section of the site.
- Bootstrap
- Microsoft Docs
- Google and Stack Overflow