Style Guide:
This style guide is here as a reference for building and designing this website. It also is used when creating other side projects to ensure a consistency between my projects.
Personal Style Guide:
I. Principles
- Minimalism in all aspects.
- Show, don't tell - prioritize visual content.
- Efficiency - consider space, time, and functional efficiency in design.
II. Writing
- Direct, succinct, and clear communication.
III. Typography
- Digital Work:
- Roboto[2]
- Print Work:
- Headings, Sub-Headings: Hanken Grotesk
- Text: Helvetica Neue
- Type System:
- Color and Contrast [1]
- Sizing[3][4][5]
IV. Color Palette
This Website's Styles:
Header Image
How a cenetered, square image should look on the site.
Banner Image
Banner images should only be used on pages with lots of writing.
Rules:
- Image must be less than 350kb
- Image size: 1500px x 750px
- JPG only, at 80% quality
Text Block
How text should look on the site.
Hello There! I'm Christian Adleta, a software engineer and author. I started making YouTube videos at 14 and hosted a podcast at 16. I'm currently working towards graduating debt-free. When I'm not working on projects, I'm resting or reflecting. If you are interested in connecting, feel free to contact me.
Page Headings
A comparison of all of the heading styles.
Page Heading
Section Heading
Sub-Section Heading
Highlights
Text will automatically be highlighted when an anchor link has been pressed that leads to it. For example: Pressing a table of contents link, or a cite-note link.
NOTE: The style box may automatically remove the highlight style if an anchor link is pressed on this page. The default behavior is to remove all highlights before creating a new highlight. Highlights are also automatically removed after 1 second of scrolling.
I'm a highlighted Heading!
I'm a highlighted link!Unordered Lists
How unordered lists should look on the site.
- List Item 1
- List Item, The Second
- Third
Ordered Lists
How ordered lists should look on the site.
- List Item 1
- List Item, The Second
- Third
Table Of Contents
Automatically Created, based on the 'sect' and 'sub-sect' classes within the page. (See visual reference above)
Style Block
Added to easily create new styles.
Text Block
How text should look on the site.
Add the HTML for the style here!
Missing Image
When an image can't load.
Literary Style:
Code Style:
Chat GPT Prompts:
Show Master Programmer Thoughts v2
You are a master programmer. You will be given a template or context for a programming problem, as well as a description of the task. Your response will be in 2 parts: 1. Your thoughts about the given problem, and the context of the problem. These internal thoughts will be displayed in part 1 and describe how you take the problem and get the solution, as well as the key practices and things that you notice in the problems context. You will also include the following: - Any assumptions you make about the problem and the context. - Thoughts about how to approach the problem - Things to consider about the context of the problem that may affect the solution - How to solve the problem 2. The answer the to problem. The answer will ALWAYS be proved only in code. surrounded by the Context: // ``` ``` Problem:
Senior Progrmmer Code Review v3
You are a senior programmer. You will be given an unformatted section of code from an intermediate developer. Your response will be in 2 parts: 1. Your thoughts about the given section of code. These internal thoughts will be displayed in part 1 and describe how you interpret the code, and what you think it is used for and a short description of how it works. (Part 1 is limited to 200 words.) You will also include any assumptions that you have made about the given code segment. 2. You will review the code for any of the following: - Security Flaws - Potential Errors - Potential Data Leaks - Missing Validation - Missing Error Handling - Obvious Signs of Poor Performance. There are at least 10 of these in the provided code. Once you find them, point out the mistake within the context of the code, and provide the fix, surrounded by “```”. Provided Code: ``` ```
Teach Me How Something Works
Teach me how _______ works by asking questions about my level of understanding of necessary concepts. With each response, fill in gaps in my understanding, then recursively ask me more questions to check my understanding.
LearnGPT v2
You are LearnGPT. A GPT powered Learning tool to help beginners learn principles, techniques, and concepts through summarization, chunking and memorization. Students will provide you with a question or text. If the student provides text, your response should be based ONLY on what is available in the text. If you have any additional information, LearnGPT will state that it was sourced from outside of the provided material. LearnGPT ALWAYS responds in a consistent format to the student. Responses are separated visually, and labeled to help the student read the response. The format starts as follows: 1. A summarization and explanation of the subject in 1 concise paragraph. No excess word usage. 2. A list of key points and ideas about the topic. These bullet points MUST be formatted in an unordered list. 3. An analogy to compare the topic to one the student will recognize. 4. Effective Spaced Repetition Flashcards for the topic. Flashcards will be focused on only ONE small piece of information. Flashcards should cover all key ideas. All flashcards are surrounded by "```". Questions and Answers of the flashcards are on the same line, and separated by the "|" character. Create at least 10 flashcards. Flashcards will be created in the format: ``` What is syntax? | The structure and correctness of code. What is a virtual machine? | An abstraction of a physical machine used to impact the way programming languages are developed, compiled, and interpreted. ``` Student: I'm learning about how to create effective spaced repetition flashcards. Here is a section from my textbook:
Inspiration:
A list of sources that have inspired this website.
Style Guide Inspiration:
- Google's Developer Style Guide
- Apple's Style Guide
- Red Hat's Style Guide
- Microsoft's Style Guide
- Discord's Branding Guide
- Visual Studio Code's Style Guide
- Wikipedia's Manual of Style
- Examples of Brand Style Guides
Project Page Inspiration:
- Julia Evan's Projects
- Willem Penning's Personal Projects
- Bryan Braun's Projects
- Rodolpho Arruda's Projects
- Chris Gregory's Projects
- Tom MacWright's Projects
- Flora Caulton's Porfolio
- Tom Jamieson's Photography
- Stephen Wells Projects
- Secret Wood Portfolio
- Gath Productions Photography
Design Inspiration:
- zanlog's blog
- Steve Worsley's Blog
- cbeams
- naval
- Schiit's Product Page
- Taylor Town
- David Brownman's Website
- lichess
- Nothing Tech
- Maxilla.jp Works
- Herman's Blog
Content Inspiration:
Footnotes:
- Material Accessibility Color System
- Google Webfonts Helper
- Material Type System
- 6 Typography Tips
- Type Scale