It's been almost a year since I've added to this log! I can't believe when I started this project and what it's become. I recently cleaned up the CSS for the site. Minor changes were made in terms of design, e.g., showing my face on the index page so people know who I am. I switched the logo out for a blue version to match the color scheme, as well. Further responsive css was added to strengthen device support and correct rendering bugs. Lastly, images were adjusted to the devices view height to project them appropriately.
As for technical changes, I added another category for projects: Updates. This category is for posts that don't necessarily fall within coding, writing, and photography. Thanks to the original design of the database, it was very easy to add another category and most of the work was done on the front-end to accommodate the change.
I definitely want to redecorate the design for the winter, but for now I'm happy with the product and will post more on the site in an attempt to attract employers attention. Wish me luck!
A user system has been implemented to manage just myself using flask-login; I needed a way to securely ensure I could be the only one to add posts. I also included the ability to update and delete posts that were made; I'm working on the image file system for new uploads. The database had to accommodate flask-login and therefore I had to create a User model (the password saved is hashed for anyone that cares to try brute force). This seemed excessive to me at first, but I soon realized that the built-in login manager monitors currently logged in users exclusively through a super class that my User model inherited (UserMixin). There is no capability of registering a new user: it's lonely at the top :D. I'm to add java script and modify the CSS as a last step before deployment.
I wanted to start off with giving due credit to css-tricks.com for the snippets on different device sizes for media queries, as well as w3 schools for their comprehensive tutorial on how to make a responsive navigation bar. The majority of this session was spent on finding breakpoints on my website when viewed from different screen size. The most challenging and important one was the navigation bar which I can now proudly say is fully responsive to the device. Next I'm to implement Bootstrap's carousel to handle possible uploaded project images. Lastly, I added a rendering of images that cover a bootstrap card proportionally for the page that displays all photography projects as they might not include content. Before concluding the project, I'd like to decide if any variable and function names can be more concise and clear; comment anything that isn't idiomatic.
Identified CSS breakpoints to use media queries for and will implement in next installment; images must be dynamically scaled as well. I've designed the website's add post page and nav bar link to be viewable from my local machine only and tested with a device connected to the network: BINGO. Changed the site to be hosted on local network instead of local machine to check for viewport sizing on a list of popular devices. I'm going to keep it basic and focus on the general phone and tablet sizes. Deployment is on the horizon!
I've adjusted the way that project image files are saved to the system to ensure it is done relatively, as well as the way said files are passed into the HTML file. More effort has to be put into commenting; it wasn't easy trying to figure out what me from 5 months ago was thinking, off the bat.
I've finally returned to this project after taking a much needed break. I needed to focus on my wrapping up my first semester I've ever done from home. With school now over, I found the time to tackle the long list of features I want for my site. Over the last three days, I've redesigned the landing page to fit with the look of more modern sites. I've stuck to a particular color scheme, found appropriate fonts, and made minor changes to the layout of some elements. After I decided on what to do with the main page, I shifted focus from design to functionality. I fixed the file uploader entry for the form to allow for multiple files to be uploaded rather then one, for projects that may benefit from including images or code. I'm currently deciding on how to manage laying out images on pages. I might totally redesign the form section to allow for me to have more customizability around how a post looks, e.g. adding a photo between paragraphs. After I've finished with most of the functionality, before I clean the code up for launch, I'll implement dynamic scaling for different device sizes in the CSS.
I decided on two models for the database: Project and HomePost. Since the home page serves as showing a preview for the different projects that are posted, there is a 1:1 relationship between the two tables, with the Project serving as the parent, and the HomePost as the child. The HTML was updated for the home page and add post page. I also added routes and HTML for each project type, filtering posts based on that. Individual routes and pages were given to every project, inheriting from one project.html file as of now. Added three icons to correspond with the project type for the home page posts. I linked to the artist in the notes.md file, as I will eventually design my own icons in Adobe Illustrator. Next, I will allow for myself to upload a zip file of images which will automatically instantiate a new directory under images, with the project's name, and link that to the project table in the database; the images, if there are any, will be displayed on a carousel on the project's page. I need to allow for myself to login on a private url (for my ip) so I may be the only person allowed to add, update, and delete posts (the latter two abilities are to be added in following days).
I've added SQLAlchemy support for the posts. I'm not sure if there will be different models for the different type of projects, then a relationship between them and the main page posts, or if I can manage using only one model. I've added an add post page, which will only be accessible by me, to easily add posts to the db and subsequently throughout the site. Pagination has been added to handle for the main pages article postings. Photography page added. I had to take a break from coding the site so I could further follow Corey Schaefer's tutorial (linked in a previous entry) as the demands of my site expanded. Not sure if the different project types logos will be sourced or created on Adobe Illustrator by myself. Planning to add a feature so that when I'm logged in (via a secret page) I can access the add post page, as well as have the ability to update and delete posts.
I made the decision to overhaul the design of the website using Bootstrap. The responsive elements that Bootstrap makes easy is what sold me. I'm using a Jumbotron for the home page's immediate info and a grid of cards to showcase the posts; eventually I will hook said cards up to the SQLAlchemy database and make updates to them via a private page, Add Post. The only thing holding up db implementation is deciding what each data structure should hold. I think I only need 'home page post' and 'project' tables, the latter being what holds further information on projects that are briefly explained the in home page posts; their will definitely be a relationship between the tables. Note: a table for the writings will be needed. I've begun work on the About page. I also changed the navbar's logo (my logo) to SVG format, as it makes sense in scaling to other screen sizes. A custom scrollbar was added. Lastly, I added a favicon.ico to have a page icon. It's just a different rendition of my logo, the one I'm printing stickers of.
I've been learning the Bootstrap framework by implementing their own examples as well as the incredibly helpful site, w3schools. I've decided to work with their card components for my home page's media postings, as the cards serve this purpose well. I also discovered that using the built-in browser tool, "inspect", I can easily debug the CSS. I changed some of the page's formatting as well as began to use Google Fonts to find a nice font for my text.
As I've played around with the CSS styling of the website, I realized that it lacked something I was looking for, a modern feel to the user experience and overall look. The CSS I was implementing was base at best, with most of what I was coding coming from a 2012 textbook. I consulted a friend who recently made his website, that of which I really enjoyed the look of. I asked him what he'd used to create something so modern with such little front-end experience. He told me to look into Bootstrap. As of yesterday, I have been learning the ins and outs of Bootstrap; it is vast and powerful. Updates to the repository will be delayed while I do most of the Bootstrap testing on separate HTML files. Check in soon.
Since my last entry I've taken a break from coding the site as I had the vision to include a logo on the navigation bar. Having a personal logo has been something I've always wanted since I was a kid; something that represents my namesake, instantly marking my doings with a personal touch. This was the next stage in the project: design a logo for my site that's scalable in size with no loss in quality. This is where I was recommended to use Adobe Illustrator; its objects are measured in vectors rather than pixels, allowing the image to be scaled to whatever dimensions desired, losslessly. However, like any new software, Illustrator proved to have a learning curve which I've spent the days since my last update learning. I went through my first rendition of the logo:
I wasn't content with how linear it was and I rarely go with my first mock up. Where the fun really began is when I learned how to import scanned images into Illustrator. I drew my idea for the new logo in my sketchbook as can be seen here:
From there, I scanned it and loaded it into Illustrator, made it the background of my art board, and turned the opacity down. I then used the Illustrator tools to draw over my sketch, ensuring perfect symmetry and centeredness. After that, I tweaked the original design a bit, added a background, played with the colors, and arrived at the final logo which I'm very proud to have finished. The result can be seen below. The logo will serve as a mark for my website as well as being made into physical stickers for my personal use. All in all, learning Illustrator proved an entertaining and rich exercise, and I intend to further my abilities in it for other applications.
This project is serving two purposes: sharpening my coding abilities and providing me an outlet during the Coronavirus quarantine. My intention was simple, to create a website to showcase my programming and hardware projects, as well as my personal writings. However, upon the realization that I wouldn't be satisfied with paying for a website design tool in light of being a programmer, I soon entered into a much larger project I didn't foresee.
I began with learning HTML elements for a basic template for the site. I've had experience with Flask and its HTML inheritance ability served by Jinga got me started on making a layout template for all other pages to inherit. Once I got the site functional is when the real fun began. I wanted to customize the design of the pages, and this of course meant I had to learn CSS. Once I got a grip on how CSS worked, I implemented my first design which I'm currently using, as of March 27th, 2020. As of now, I'm diving deeper into CSS attributes and properties to enhance the site's design to my liking.