inesoaresilva/my-website

Developing my website using ember

my-website

This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here.

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with npm)
• Ember CLI
• Google Chrome

Installation

• git clone <repository-url> this repository
• cd my-website
• npm install

Running / Development

• ember serve
• Visit your app at http://localhost:4200.
• Visit your tests at http://localhost:4200/tests.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Linting

• npm run lint
• npm run lint:fix

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox

my-website's Issues

Make the Title of Blogpost Clickable

For a better UX I should enable the user to go for the full blogpost by clicking right away in the title.

Questions:

• Should I make the whole blogpost preview div clickable instead of only the title?

Get something to optimize photos

Running the lighthouse, I get the worst performance on rendering images.
I don't need to be using the original photo size.
I could be using webp format.
I could render different sizes for my images and show the size most optimized for my current screen:

• For rendering the different sizes, I'll use https://github.com/simonihmig/ember-responsive-image.
• For switching the images in my markdown for code that considers the usage of webp format (when supported by the browser), and the best size, I'll use an initializer with a showdown extension (https://github.com/empress/ember-cli-showdown#showdown-extensions).

Write my First Blogpost

There is no better way to fully test how the page will look than to do a blog post that I would be happy to share on my website.

Do a button to go all the way up

The Post Are Rendering From the Oldest to the Newest

it should be the other way around

Organize the Architecture of the Full Blogpost for Larger Screens

I need to fix the organization of the content on larger screens.

It should look like this:

(the sections table is out of the scope of this task)

TODOs

• Turn the full blogpost into a block div
• Apply float: right CSS rule to the figure

Dates from Blogpost Preview and Full Blogpost are not coherent

Process the date in <PolaroidImage> description

Right now, the date in description is looking like:

We want something like:

Make the buttom go below the float elements

I would prefer to see the buttom under the polaroid

Buy a domain

Buy inesoaresilva.com domain

websites:
namecheap.com
gandi.com

Add Date under the Post Title

When clicking for the full post, I want to show the date under the title:

• I need to add Montserrat light font

Add Images to the PolaroidImage component

I want the images I add in the post markdown file to be shown as a with a suitable description.

Center Polaroid Image Description

Right now:

I want it to be in the center:

Buy a domain

Add reactions

I would like to work on a little animation for my users to react:

inspired by josh comeau website

• draw a sun smiling and export it as SVG
• draw a sun with a bigger smile and add that smile with a CSS class to the previous SGV
• using the CSS class, make the big smile get displayed when the user hovers the SVG
• when hovering the sun should grow - transform scale(1.2)
• add a sun svg mask
• add a yellow rectangle
• wrap the sun has a button
• when the user clicks, we should render the sun mask on top of the sun, and the yellow rectangle should be placed as the background and it should grow with every click (5 clicks to achieve the max height)
• when completely fulfilled I would like to display another animation in the background with sun rays rotating
• add the votes logic

Fix routing issue from deployment

Make <PostPreview> responsive

In Desktop version, we want:

In Mobile, we want:

The design of the button changes, the order of elements also changes: mobile - column display; desktop - row display

Refactor <PolaroidImage>

Right now, I have:

I want to have:

Deploy

Make my website public by deploying it :D

Get a design for links

Try another website analytics

I decided to use the 30 days free trial from plausible.
I can try to check clicky - it says it is free up to 3k visits per day (I think I'm safe ahah)
https://www.smartlook.com/blog/google-analytics-alternative/

Create a 'Text Me' screen

Add Subtitles Design

A fullpost will have sections that are open with a subtitle:

The same design as the post title but with yellow color and a smaller font size (16px).

Refactor Underline Solution for Headings

Right now, the solution passes by wrapping my headings in an <span> element.

This is not an ideal solution since it increases the complexity of writing blog posts in markdown files.

If the <span> is removed, the underline stops working as expected in the case of multiple lines:

The idea is to try to find a way of making this work without the <span>
If no better solution is found, the alternative is to create an addon that wraps all my headings of the .md file in <span> elements.

Change Image Preview

When we click on a post, there is an image preview associated with it:

Add comments functionality