chimchooree/blessfrey-bottle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reordered entries; proofread with a spellchecker

Browse Source
This commit is contained in:
chimchooree
2020-11-30 20:40:32 -06:00
parent 3277413f5b
commit 4aa64b14cc
16 changed files with 214 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/diary/entries/201015
+6 -6
View File
@@ -6,7 +6,7 @@ october 15, 2020<br>
blessfrey.me is a personal website I use to showcase projects + blog my process. I originally wrote it in PHP, but now it's written in <a href="https://bottlepy.org/docs/dev/">Bottle</a>, a Python web framework. <br>
<br>
<br>
<h2>why not use a pre-made blogging platform like WordPress? </h2><br>
<h2>why not use a premade blogging platform like WordPress? </h2><br>
blessfrey.me's needs are fairly simple - just some static pages and a blog page. Generalized blogging platforms are overkill. I don't need support for multiple users, localization, e-commerce, and so on. Unused features only bog down the website, potentially contributing to poor performance + security vulnerabilities. <br>
<br>
Also, it's just fun to write my own. I'm learning a lot as I take my website from initial sketches, to Hello World, to various prototypes, to something polished enough to show my friends. Also, since it can be considered a programming portfolio, it just makes sense that it itself should be something I programmed. <br>
@@ -42,7 +42,7 @@ The Bottle script sends the max number of snippets per page (the <code>limit</co
<br>
<br>
<h3>Bottle </h3><br>
Bottle takes URLs and generates the corresponding webpage upon request. Each URL is tied to a method, which returns a template and a dictionary of data to be used in the template. Since Bottle is a Python framework, you have access to all the Python libraries you need. <br>
Bottle takes URLs and generates the corresponding web page upon request. Each URL is tied to a method, which returns a template and a dictionary of data to be used in the template. Since Bottle is a Python framework, you have access to all the Python libraries you need. <br>
<br><center>
<img src="/static/img/ent/blessfrey_website_diaryscript.png" alt="(image: Bottle script excerpt for diary routes.)" width="500" height="288"><br>
</center>
@@ -53,16 +53,16 @@ This is what the methods for specific routes look like. So every time you go to
<br>
<br>
<h3>CSS </h3><br>
The website is styled using CSS, heavily relying on the CSS Grid and a bit of Flexbox. CSS grids can be used inside CSS grids, so my pages are generally blocked out, with smaller internal grids managing specific content. <br>
The website is styled using CSS, heavily relying on the CSS Grid and a bit of Flexbox. CSS Grids can be used inside CSS Grids, so my pages are generally blocked out, with smaller internal grids managing specific content. <br>
<br><center>
<img src="/static/img/ent/blessfrey_website_cssgrid.png" alt="(image: css grid traced over screenshot of projects page.)" width="500" height="491"><br>
<img src="/static/img/ent/blessfrey_website_cssgrid.png" alt="(image: CSS Grid traced over screenshot of projects page.)" width="500" height="491"><br>
</center>
<br>
The projects page is an example of nested grids. Almost every page uses the yellow general layout. The content unique to the projects page is mapped out in green, with a section for the header, featured content, and unfeatured content. The unfeatured content uses a 2-column grid in blue to evenly space out all the little thumbnails. <br>
The projects page is an example of nested grids. Almost every page uses the yellow general layout. The content unique to the projects page is mapped out in green, with a section for the header, featured projects, and other projects. The other projects use a 2-column grid in blue to evenly space out all the little thumbnails. <br>
<br>
The CSS code for project's general grid + the nested unfeatured grid are shown below.<br>
<br><center>
<img src="/static/img/ent/blessfrey_website_projectcss.png" alt="(image: projects css code.)"><br>
</center>
(The code can be found on <a href="https://pastebin.com/pVgkmT5k">Pastebin</a>, but you can always see a webpage's CSS by right-clicking and viewing the source.) <br>
(The code can be found on <a href="https://pastebin.com/pVgkmT5k">Pastebin</a>, but you can always see a web page's CSS by right-clicking and viewing the source.) <br>
<br>