Week Three: Jan 12th - Jan 19th

Here’s everything that I worked on this week!

From our priority list last week…

1. Style Blog and Portofolio Pages
   • Links in content (Tutorials, Guides, Discussion Posts, etc.)
   • Proofread + Edit Posts and Pieces
   • “You might be interested…” links in portfolio
   • Add a preview box for Resource Hub
   • Add Photos to Blog Week1 post
2. Make pages responsive
   • Images in blogposts and portfolio
3. Create/Update content
   • Visual Design for Educators
     • Flesh out the content more
     • Finish storyboarding, wireframes, and mockups
   • More Resources
   • Update Resume to new draft
4. Refactor Code
5. JavaScript + TypeScript Basics

For later:

1. Add testimonial
2. Learn Figma Shortcuts
3. Web Accessibility
4. Blog Post Preview Image
5. Posts appear in reverse order on blog page
6. Search bar for blog
   • Search by tag, title, date

Styled Blog and Portfolio Pages

This week, I changed all of my markdown posts to .mdx in order to gain access to the <Image> component in Astro. Having access to the <Image> compenent allowed me to input photos into my blog post and assign a class to them so that I could style them in my Astro layout. I did a little bit of research on how to make this more efficient, as this took a LONG time to go back in and import every single photo I wanted to use, but most of the solutions went over my head.

For this reason, I decided to change the priority of my tasks from last week so that learning more about JavaScript and TypeScript was higher. I’m hoping that this allows me to understand documentation better, make it easier to refactor my site, and to include interactive elements in the future. For example, instead of using a pdf viewer on the page, (Formative and Summative Assessments Example)[https://matthewleepugh.com/pieces/piece2/], I would rather use a carosel that allows the user to click on the slides. Another example is to have a hamburger bar in the header for mobile screens.

Added Responsive Design to Pages

I used Wix’s post, (How to make a responsive website in 4 steps)[https://www.wix.com/blog/how-to-make-a-responsive-website#viewer-qc48p426], as a guide to making all of my pages responsive.

Like in previous weeks, I started with a mockup. I created a mobile and tablet mockup for each page.

Mobile mockup for the about page

Tablet mockup for the home page

I then decided on my breakpoints for each page. I settled on 3 (1,001+px, 1000 - 751px, and 750 - 350px) which were the default ones that Wix has in place for their sites.

From there, I went in and added media queries for each breakpoint and added the appropriate styling.

What’s Next

1. Create/Update Content
   • Visual Design for Educators
     • Shrink Scope
     • Flesh out content more
     • Finish storyboarding, wireframes, and mockups
     • Add Needs assessments
     • Add Kanban board screenshots
     • Add action map
   • More Resources
   • Update Resume
   • Add testimonial to homepage
2. JavaScript + TypeScript Basics
3. Build Interactive Features
   • Hamburger bar
   • “Jump to” component for portfolio pages
   • Carousel on Formative and Summative Assessments page
   • Migrate content to content collection
     • Blog Post Preview Image
   • Add buttons to portfolio and blog pages
   • Add return to top button on mobile
   • Search bar for blog (tag, title, date)
4. Refactor Code
5. Web Accessibility

For later:

1. Fix known bugs
   • CSS stylings not working on ipad 3rd gen on safari (more testing needed)
   • Boxes on homepage are too short on mobile landscape
   • Need same height for preview boxes on Blog
   • Overflow-y cutting off content on mobile
   • Images + Preview text are scolling on mobile (chrome Iphone X and chrome browser width: 638 and height: 2206)
2. Google Search Console
3. Style updates
   • Fonts and font sizes on different screens
   • Images in blogpost and portfolio
     • Add and center captions
4. Learn Figma Shortcuts