Portfolio: Mock

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.9", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Return Home Report An Issue

Styled Portfolio

So far, we’ve focused on functionality for the portfolio site. It’s time to plan some personal and customized styles.

Use Figma to create a mock for your portfolio site.

Ensure to include the following:

• A Home Page
• A Blog Page
• Custom Navigation with links to
  • The Home Page
  • The Blog Page
  • Your socials (GitHub, Linkedin, etc)

Bonus (Project Section)

Create a projects section for your portfolio site. Include images for each project with a title and summary of the project.

Bonus (Project Show Page)

Include a project show page that will display all of the details for each project. You might choose to include:

• The project name
• The project description
• links to the project github and website

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, file_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(progress_path, Jason.encode!(Map.put(existing_progress, file_name, completed)))
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout solutions
$ git checkout -b portfolio-mock-exercise
$ git add .
$ git commit -m "finish portfolio mock exercise"
$ git push origin portfolio-mock-exercise

Create a pull request from your portfolio-mock-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your instructor by including @BrooklinJazz in your PR description to get feedback. You (or your instructor) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.