Portfolio

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

Navigation

Return Home Report An Issue

Mastery

Mastery assignments are bonus projects designed to incorporate curriculum concepts at an advanced level. You have complete freedom with how you complete mastery assignments, and may change requirements as you see fit. Each mastery assignment serves as an independent project you may choose to include on your portfolio of projects.

Overview

You’re going to create a Portfolio project that you can expand upon as you learn more throughout the course.

You’re going to setup a portfolio project that you will expand upon throughout the course. For an example project, see https://www.elixirnewbie.com/.

First, create a new Phoenix project.

$ mix phx.new portfolio

You can start your Phoenix server from portfolio folder.

$ mix phx.server

Consider using using paper/pencil or Figma to design your portfolio project before building it.

Configure Tailwind

Follow the Phoenix + Tailwind Installation Guide and configure your project with Tailwind. Use Tailwind utility classes for all of your styling.

Home Page

The home page should be visible when you visit http://localhost:4000/

You may use the following design for inspiration.

Ensure you include:

• Navigation with a link to your GitHub and any social media such as Linkedin.
• A heading saying your name.
• A paragraph that describes who you are and what you do.
• An image (it can be any image if you would prefer to not use a personal photo)

Projects and Accomplishments

Include a list of your projects and any accomplishments you would like to highlight. Each project should have a title, description, and link to the GitHub. For example, you might include your Games project or any other projects from this course or outside of it.

You can also add to this section as you build more projects.

You may use the following design for inspiration.

Mark As Completed

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

save_name =
  case Path.basename(__DIR__) do
    "reading" -> "portfolio_reading"
    "exercises" -> "portfolio_exercise"
  end

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

default = Map.get(existing_progress, save_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, save_name, completed), pretty: true)
    )
  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 -b portfolio-exercise
$ git add .
$ git commit -m "finish portfolio exercise"
$ git push origin portfolio-exercise

Create a pull request from your portfolio-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 teacher by including @BrooklinJazz in your PR description to get feedback. You (or your teacher) 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.

Up Next