medusa/the_information_nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

site updates

Browse Source
This commit is contained in:
Whisker Jones
2024-05-05 10:38:02 -06:00
parent 0d2386870d
commit 7d794ad2f9
19 changed files with 7376 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
tech_docs/webdev/eleventy_structure.md Normal file
View File

@@ -0,0 +1,28 @@
```markdown
my-eleventy-project/
│
├── _includes/
│ ├── layouts/
│ │ └── base.njk
│ └── partials/
│ ├── header.njk
│ └── footer.njk
│
├── media/
│ ├── images/
│ └── videos/
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
├── pages/ (or just place *.md files here)
│ ├── about.md
│ ├── projects.md
│ └── contact.md
│
├── .eleventy.js
└── package.json
```

168
tech_docs/webdev/webdev_training.md Normal file
View File

@@ -0,0 +1,168 @@
## Feedback on Plans for Learning
Your plans for learning are detailed and purposefully directed towards achieving your goal of becoming a web developer. Here are some refined suggestions for enhancing your strategy:
- **Daily Practice:** Dedicate a minimum of 30 minutes daily to learn and practice. Consistent effort accumulates over time.
- **Community Engagement:** Seek help and share your progress in online communities such as [Stack Overflow](https://stackoverflow.com/) and [Reddit's r/webdev](https://www.reddit.com/r/webdev/) to foster learning through collaboration.
- **Patience:** Web development is intricate and may sometimes be frustrating. Remember, every expert was once a beginner. Persist with your efforts.
## SMART Goals for Training Plan
Refine your SMART goals as follows:
- **Specific:** Craft a basic webpage using HTML and CSS, incorporating at least one CSS framework by the end of the sixth week.
- **Measurable:** Complete all assignments in your ongoing [mention the specific course name] web development course.
- **Achievable:** Allocate a fixed 30 minutes daily for web development learning.
- **Relevant:** Stay focused on acquiring skills pivotal to web development, keeping abreast with the latest industry trends.
- **Time-bound:** Finish your web development course within a span of six months, setting a steady pace for learning.
## Weekly Training Schedule (Week 1)
Below is a more structured weekly schedule with practical tasks:
### Day 1
- **Objective:** Grasp the role and fundamental features of HTML in web development.
- **Resources:**
- [HTML Tutorial](https://www.w3schools.com/html/)
- [HTML Crash Course](https://www.theodinproject.com/lessons/foundations-introduction-to-html-and-css)
### Day 2
- **Objective:** Learn about the structural elements of an HTML document, focusing on <!DOCTYPE>, <html>, <head>, and <body>.
- **Resources:**
- [HTML Document Structure](https://www.w3.org/TR/html401/struct/global.html)
- [HTML Document Structure Tutorial](https://www.reddit.com/r/webdev/comments/q9f82u/i_made_a_detailed_walkthrough_of_the_odin/)
### Day 3
- **Objective:** Acquaint yourself with common HTML tags used to format a webpage.
- **Resources:**
- [HTML Tags](https://www.w3schools.com/tags/tag_html.asp)
- [HTML Tags Tutorial](https://www.theodinproject.com/lessons/foundations-elements-and-tags)
### Days 4-5
- **Practice:** Create a simplistic HTML webpage utilizing the tags learned. Share it with friends or online communities for feedback.
- **Resources:**
- [HTML Tutorial](https://www.w3schools.com/html/)
- [HTML Crash Course](https://www.theodinproject.com/lessons/foundations-introduction-to-html-and-css)
## Tips for a Fruitful Training Plan
Here are some actionable tips to augment your learning journey:
- **Prioritize Tasks:** Utilize the Eisenhower Matrix or ABCDE method to focus on high-priority tasks, optimizing your learning path.
- **Breaks:** Regular short breaks can prevent burnout and enhance focus. Ensure to take breaks during your learning sessions.
- **Mentorship:** Seek a mentor through platforms such as [LinkedIn](https://www.linkedin.com/) or local web development communities. A mentor can provide constructive feedback and guidance.
Remember to track your progress regularly to identify strengths and areas needing improvement. Wishing you the best in your web development learning journey!
and the following training plan:
## 24-Week Training Plan
### Step 1: Divide your training into smaller, manageable sections.
Break down your 24-week training plan into smaller, more manageable sections. For example, you could divide it into three 8-week phases, or four 6-week phases.
### Step 2: Assign specific weekly topics and objectives.
Once you have divided your training plan into sections, assign specific weekly topics and objectives. For example, in Week 1, you might focus on learning the basics of HTML and CSS. In Week 2, you might focus on building a simple webpage.
### Step 3: Create a Google Calendar for your training plan.
Create a new Google Calendar specifically for your 24-Week Training Plan. Set up all-day events for each week, and include reminders at the beginning of the week to help you stay focused.
### Step 4: Use Todoist to break down weekly objectives into daily tasks.
Use Todoist to break down your weekly objectives into daily tasks. Create a new project called "24-Week Training Plan" and set up sections for each week.
### Step 5: Allocate time for learning, practicing, and reviewing your progress.
Allocate time for learning new concepts, practicing, and reviewing your progress. Use time blocking or the Pomodoro Technique to allocate focused time to tasks and avoid multitasking.
### Step 6: Prioritize tasks based on importance and urgency.
Prioritize your tasks based on importance and urgency using the Eisenhower Matrix or ABCDE method. Focus on high-impact tasks first and address lower-priority tasks when time permits.
### Step 7: Set up a Trello board for your training plan.
Set up a Trello board for your 24-week training plan. Create lists for workflow stages (e.g., To Do, In Progress, Review, Completed), and add cards for tasks and objectives. Move cards between lists as you progress.
### Step 8: Organize your learning materials in Google Drive.
Organize your learning materials in Google Drive by creating folders for each week and adding documents, resources, and project files as needed.
### Step 9: Use automation tools to automate repetitive tasks or sync data.
Use automation tools like Zapier or Integromat to automate repetitive tasks or sync data between Google Calendar, Todoist, Trello, and Google Drive.
### Step 10: Use browser extensions to quickly add tasks or cards.
Use browser extensions like Todoist for Chrome or Trello for Chrome to quickly add tasks or cards without leaving your current webpage.
### Step 11: Set SMART goals and track your progress.
Set SMART goals for your training plan and track your progress regularly. Use tools like RescueTime or Clockify to monitor your time spent on tasks and identify areas for improvement.
### Step 12: Schedule regular breaks and leisure activities.
Schedule regular breaks and leisure activities to maintain a healthy work-life balance and prevent burnout.
### Step 13: Collaborate with others and seek feedback.
If you are working with others, use tools like Slack or Microsoft Teams to streamline communication and collaborate effectively. Schedule regular check-ins or meetings to discuss progress and share feedback.
### Step 14: Periodically review and adjust your workflow.
Periodically review your workflow and make adjustments based on your experiences, new tools, or changing priorities. Seek feedback from others who have successfully completed similar training programs or have expertise in the field.
**Additional tips:**
- Find a learning method that works best for you. Some people learn best by reading, while others learn best by watching or doing.
- Don't be afraid to ask for help. If you are struggling with a particular concept or task, reach out to a mentor, friend, or online community for assistance.
- Celebrate your successes. As you progress through your training plan, take the time to celebrate your accomplishments. This will help you stay motivated and on track.
## 24-Week Training Plan
**Week 1-4:**
- Introduction to web development history and terminology
- HTML fundamentals
- CSS fundamentals
- Web design principles
**Week 5-10:**
- CSS frameworks (e.g., Bootstrap, Tailwind CSS)
- JavaScript fundamentals
- DOM manipulation
- Asynchronous JavaScript
- Web accessibility and performance
**Week 11-14:**
- Svelte framework fundamentals
- State management and routing in Svelte
- Building small projects with Svelte
- Website project planning and collaboration
**Throughout the plan:**
- Allocate adequate time for practice and project work
- Schedule regular breaks and leisure activities
**Additional suggestions:**
- Use a learning management system (LMS)
- Join a study group or online community
- Seek out mentors or coaches
**Tips for success:**
- Be dedicated and hardworking
- Focus on learning the core concepts
- Practice regularly
- Build projects to apply your skills
- Get feedback from others

291
tech_docs/webdev/wp_kadence_wireframe.md Normal file
View File

@@ -0,0 +1,291 @@
# **Homepage Structure Using Kadence Blocks**
---
## **Hero Section**
### **Group:** Hero Introduction
- **Block:** Row Layout (Single Row)
- **Background:** Video or Image (16:9 aspect ratio) with `alt` text including primary keyword.
- **Block:** Advanced Heading
- **Content:** Main heading with primary keyword. Secondary keyword in the subheading.
- **Meta Description:** Informative description with the primary keyword.
- **Block:** Button
- **Action:** "Book an Event" with a descriptive `aria-label` for accessibility.
**Kadence Row Layout (Single Row)**
- **Background Settings**: Choose from color, gradient, image, or video. If using an image or video, ensure it's web-optimized.
- **Padding & Margin**: Adjust to create space and center content.
**Kadence Advanced Heading**
- **Font Settings**: Use H1 for main heading. Adjust font size, weight, and line-height for clarity.
- **Content**: Main heading with primary keyword. Add a secondary keyword in the subheading.
**Kadence Button**
- **Design**: Use Kadence’s styling options for button size, color, border-radius, and hover effects.
- **Link**: "Book an Event". Ensure the link directs to the booking section or page.
- **Row Layout (Single Row)**: This is appropriate for creating a hero section, as Kadence's Row Layout provides flexibility for both background and content settings.
- **Advanced Heading**: The Advanced Heading block in Kadence is suitable for hero section headings due to its extensive customization options.
- **Button**: The standard Gutenberg Button block is ideal for CTAs, especially in hero sections.
- **Video**: Consider adding a short video showcasing the chef's work for an engaging visitor experience.
> - Provides an immediate visual impact and introduces visitors to the chef's main offering.
> - Call to Action: "Book an Event"
> - Ensure the hero image loads quickly to reduce bounce rate.
> - Position the main heading and CTA (Call to Action) button above the fold for immediate visibility.
> - Use high-contrast colors for text and CTA to make them stand out against the background.
---
## **About the Chef**
### **Group:** Chef's Background
- **Block:** Row Layout (Two Columns: 1/3 + 2/3)
- **Column 1:**
- **Block:** Image (1:1 or 3:2 aspect ratio) with `alt` text describing the chef.
- **Column 2:**
- **Block:** Advanced Heading
- **Content:** Chef's name (with keyword) and bio. Include chef's relevant keywords in the bio.
- **Links:** Chef's social media profiles.
**Kadence Row Layout (Two Columns: 1/3 + 2/3)**
- **Column Gap**: Adjust to create a harmonious space between image and text.
**Kadence Image Block (1/3 column)**
- **Image Settings**: Choose a high-quality portrait of the chef and ensure it's web-optimized.
- **Alt Text**: Briefly describe the chef.
**Kadence Advanced Heading (2/3 column)**
- **Font Settings**: Use H2 tag and adjust font size, weight, and line-height.
- **Content**: Chef's name followed by a concise bio, ensuring a natural flow with keyword integration.
**Kadence Social Links (2/3 column)**
- **Design**: Customize icon size and colors.
- **Links**: Directly link to the chef's profiles on different platforms.
- **Row Layout (Two Columns: 1/3 + 2/3)**: This layout is effective for combining an image with textual content. The 1/3 column is suitable for the chef's image, while the 2/3 column can house the textual content.
- **Social Media**: Include links to the chef's social media profiles for increased engagement.
> - A brief introduction to the chef can help personalize the website and establish credibility.
> - Include a short bio and portrait.
> - Use a high-quality image of the chef. This helps in establishing trust.
> - Ensure the bio is concise and highlights the chef's achievements or specialties.
> - Include relevant keywords in the bio without keyword stuffing.
> - Use schema markup for the chef's bio to improve search engine visibility.
---
## **Services Offered**
### **Group:** Services Overview
- **Block:** Row Layout (Three Columns)
- **Each Column:**
- **Block:** Info Box with image (16:9 or 4:3 aspect ratio) with `alt` text (include service-specific keywords).
- **Content:** Heading with service-specific keywords, concise description, and Button ("Learn More" or "Book Now" with `aria-label`).
**Kadence Row Layout (Three Columns)**
- **Column Gap**: Adjust for even spacing between columns. Ensure columns stack on mobile for responsiveness.
**Kadence Info Box (Each Column)**
- **Image**: Use service-specific images that are web-optimized.
- **Heading**: Integrate service-specific keywords. Adjust font for clarity.
- **Description**: Provide concise service details.
- **Button**: Link to detailed service pages or booking options, using Kadence button styling.
- **Row Layout (Three Columns)**: This layout is suitable for showcasing multiple services side by side. For mobile views, ensure that the columns stack for responsiveness.
- **Info Box**: The Info Box block in Kadence is versatile and combines an image, heading, and button, making it ideal for service descriptions.
> - Showcase the primary services to give visitors an idea of what the chef specializes in.
> - Use concise descriptions and visuals.
> - Call to Actions: "Learn More" or "Book Now"
> - Highlight the most popular or signature services to capture interest.
> - Use clear and descriptive alt texts for service images.
> - Include CTAs within each service to drive user action.
---
## **Testimonials Slider**
### **Group:** Client Testimonials
- **Block:** Testimonial with Ratings
- **Content:** Rotating testimonials with name, designation, company, testimonial text, and ratings.
- **Link:** "Read All Testimonials" with `title` attribute for more context.
**Kadence Testimonial Carousel**
- **Layout**: Choose a design that allows for image, name, designation, and testimonial text.
- **Images**: Use uniform size, web-optimized images of the testimonial giver.
- **Content**: Display a curated list of impactful testimonials.
- **Navigation**: Adjust arrow and dot settings for user-friendly navigation.
- **Testimonial**: The Testimonial block provided by Kadence is apt for rotating testimonials and can also display associated images.
- **Ratings**: Integrate a rating system for testimonials to enhance credibility.
> - Social proof is powerful. Displaying a few select testimonials can build trust.
> - Call to Action: "Read All Testimonials"
> - Display testimonials with photos to increase credibility.
> - Rotate the most impactful testimonials.
> - Ensure the slider doesn’t move too fast, allowing users to read comfortably.
> - Use schema markup for testimonials to increase their visibility in search engines.
---
## **Upcoming Events/Classes**
### **Group:** Events Schedule
- **Block:** Row Layout (Single Row)
- **Block:** Advanced Button (for viewing all events with `title` attribute)
- **Block:** Calendar with Link to Detailed Events Page
**Kadence Advanced Button**
- **Design**: Customize size, color, and hover effects.
- **Link**: Direct to a page with more comprehensive event details.
**Embed Block**
- **Integration**: Embed Google Calendar or another interactive system. Ensure it's styled to match the site's theme.
- **Calendar Integration**: Since neither Kadence nor Gutenberg provides a dedicated "Calendar" block, consider integrating Google Calendar, especially if it's linked with Calendly on the backend.
- **Detailed Events Page**: Include a link to a page with more comprehensive event details.
> - Inform visitors of any upcoming events or classes they can attend or book.
> - Call to Action: "View All Events"
> - Highlight limited-time or special events to create a sense of urgency.
> - Ensure the calendar is interactive and mobile-responsive.
> - Optimize event descriptions with relevant keywords.
> - Use schema markup for events to improve search engine visibility.
---
## **Gallery**
### **Group:** Image Gallery
- **Block:** Gallery with Lightbox
- **Content:** Images from past events/classes with descriptive `alt` texts.
- **Caption:** Write captions for each image with keywords.
**Kadence Gallery Block**
- **Layout**: Choose between grid or masonry layout. Enable lightbox feature for enhanced image viewing.
- **Images**: Upload web-optimized images with consistent aspect ratios.
- **Captions**: Provide concise descriptions with keyword integration.
- **Gallery Block**: Kadence's Gallery block is recommended due to advanced features like lightbox and masonry grid options.
- **Lightbox**: Implement a lightbox feature for an enhanced viewing experience.
> - A visual representation of past events, dishes, or classes can be enticing.
> - Call to Action: "View Full Gallery"
> - Optimize images for quick loading and mobile responsiveness.
> - Use descriptive alt texts for each image for SEO benefits.
> - Consider adding a lightbox feature for a larger view of images upon clicking.
---
## **Newsletter Signup**
### **Group:** Newsletter Subscription
- **Block:** Row Layout (Single Row)
- **Block:** Advanced Heading (for the section's title with primary or secondary keyword)
- **Subtitle:** Offer such as "Sign up and receive a 10% discount on your next booking or a free recipe."
- **Block:** Form (with `aria-label` for the email input field and "Subscribe" button).
**Kadence Form Block**
- **Fields**: Add fields for name and email. Customize placeholder texts.
- **Button**: Style the "Subscribe" button using Kadence settings.
- **Notifications**: Set up email notifications for each signup.
- **Forms**: While Kadence offers a form block, for specialized forms, especially newsletter sign-ups and detailed contact forms, consider linking to Google Forms for more functionality and flexibility.
> - Engage visitors by offering them a chance to stay updated with news, recipes, or special offers.
> - Call to Action: "Subscribe"
> - Position this near the footer but ensure it's visually distinct.
> - Make the sign-up process simple with minimal fields.
> - Ensure GDPR compliance if collecting emails from European visitors.
---
## **Contact & Booking**
### **Group:** Contact Details
- **Block:** Row Layout (Two Columns)
- **Column 1:**
- **Block:** Form (with fields for name, email, event type, date, and message, all with proper `aria-label` attributes for accessibility).
- **Column 2:**
- **Block:** Advanced Heading (for contact details, include keywords like "Contact [Chef's Name] for Corporate Cooking Events").
**Kadence Row Layout (Two Columns)**
- **Column Gap**: Adjust to create an even space between form and contact details.
**Kadence Form Block (1/2 column)**
- **Fields**: Include fields for name, email, event type, date, and message. Customize placeholders.
- **Button**: Style the "Submit" button using Kadence settings.
**Kadence Advanced Heading (1/2 column)**
- **Content**: Display contact details with keyword integration, ensuring natural readability.
> - Provide an easy way for visitors to reach out or book an event.
> - Call to Action: "Submit"
> - Make the form fields intuitive and easy to fill.
> - Use clear error messages and confirmations.
> - Ensure the form is mobile-responsive and loads quickly.
> - Consider adding a map showing the chef's location or primary service area.
---
## **Footer**
### **Group:** Footer Information
- **Block:** Row Layout (Multiple Rows)
- **Row 1:**
- **Block:** Navigation Menu (with `title` attributes for each link for more context).
- **Row 2:**
- **Block:** Icon List (for social media icons with proper `aria-label` attributes).
- **Row 3:**
- **Block:** Advanced Heading (for contact information with Schema Markup for local SEO).
**Kadence Navigation Menu**
- **Design**: Create a simple footer menu with essential links.
**Kadence Icon List**
- **Design**: Customize icon sizes, colors, and hover effects.
- **Links**: Directly link icons to respective social media profiles.
**Kadence Advanced Heading**
- **Content**: Display contact information and any necessary disclaimers.
- **Navigation Menu**: Utilize Kadence's Navigation block for a more customized menu experience in the footer.
- **Mobile Responsiveness**: Ensure that all blocks, especially those with columns, are set to stack or rearrange appropriately on mobile views.
> - Include essential links, contact information, and social media icons.
> - Keep the footer organized with clear categories or columns.
> - Ensure links are easy to click, especially on mobile devices.
> - Include an SEO-friendly sitemap link in the footer to aid search engine crawling.
---