Powered by AppSignal & Oban Pro
Would you like to see your link here? Contact us
Notesclub
Sign in with GitHub
created by hec & contributors
terms privacy

Portfolio: Home Page

deprecated_portfolio_home_page.livemd

avatar
avatar
avatar
More notebooks
0

Portfolio: Home Page

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

Home Page

You’re going to create a portfolio project that you will continue to expand throughout the course.

In this exercise, you’ll focus on setting up the project and creating a home page.

First, create a new Phoenix project.

$ mix phx.new portfolio

Start your Phoenix server from the project folder.

$ mix phx.server

Then build a home page under the "/" route.

You may take inspiration from the previous Home Page exercise.

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

Try to match the document above as best you can, however you may exercise your creativity and do not have to follow the example so long as you have:

  • Navigation with a link to your github. Ideally use a ` tag for navigation. * 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) ## Bonus: Projects Include a projects section on your portfolio project. Each project should be a card component which includes the project name, a description of the project, and a link to the project GitHub. Include all of the projects you have worked on in this course so far. Consider using paper/pencil or [Figma](https://www.figma.com/) to create a design of your projects section before implementing it. ## Mark As Completed ```elixir 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 runninggit statusor by checking the source control tab in Visual Studio Code. ``` $ git checkout solutions $ git checkout -b portfolio-home-page-exercise $ git add . $ git commit -m "finish portfolio home page exercise" $ git push origin portfolio-home-page-exercise ``` Create a pull request from yourportfolio-home-page-exercisebranch to yoursolutionsbranch. 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.

Other notebooks:

Back