Skip to content
/ dev.pi Public

Code Institute - Milestone Project 3. This is an HTML/CSS/JS/Python/Flask/MongoDB project used for educational purpose. This project represents a developer's personal portfolio.

paulistratoaie.com/

License

MIT license
0 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

pinco227/dev.pi

BranchesTags

Repository files navigation

{π} Dev.PI

Dev.PI is a Developer's Portfolio which also serves as a Milestone Project for the Software Developer Diploma programme of Code Institute.

Table of Contents

Demo

Live website

Screenshot

UX

  • Goals

    • The main goal is to get clients/contracts (job offers).
    • Expand online presence.
    • Present previous work (portfolio).
    • Present biography, skills, education, experience, links and CV.
    • Receive feedback/testimonials from clients/collaborators.

  • User Needs

    • Need to learn about the showcased developer.
    • Need of an up-to-date portfolio with previews and source code (where applicable).
    • Need of an up-to-date list of skills, education, experience.
    • Need to be able to download resume.
    • Need to be able to contact the developer if interested.

  • User Scenarios

    • As a potential employer/recruiter, I need:

      • To learn about the candidate's professional profile without having to click too many times and look too deep.
      • To be able to download the candidate's CV for print/file purposes.
      • To learn about the developer's current status and availability.
      • To be able to contact the candidate to further asses and discuss eventual contract/employment.
      • To see candidate's education, previous work experience and projects (including written code).
      • To find candidate's other relevant social profiles, for a deeper insight (linkedin, github).
      • To find more about the person behind the title, to understand how he got into software development, how passionate and motivated he is.
      • To find what other people say about the developer (testimonials).

    • As a potential collaborator, I need:

      • To be able to explore developer's work, written code and skill set to understand if he is fit to my project idea.
      • To learn about the developer, personally, to see if he is compatible to work with.
      • To be able to contact the developer.
      • To connect with developer on other relevant social platforms.

    • As a user (of any kind), I need:

      • To easily understand the purpose of the website.
      • To easily navigate throughout the website on any device/platform.
      • To be able to write a testimonial

    • As the developer, I need:

      • To be able to add, update and delete skills, education, work experience, portfolio projects and links.
      • To be able to update my current status, availability and contact information.
      • To be able to post, edit and delete personal blogs.
      • To be able to manage (approve, remove) user's testimonials.
      • To be able to update hero name, short bio, photo and CV.
      • To be able to update website's metadata and admin password.

  • Structure

    The website is designed to be consistent, intuitive and learnable.
    • Interaction design
      • For predictability, the interface interacts with user actions as the user expects. The scroll/swipe actions respond with the normal behaviour and buttons acts instantly on press.
      • For consistency, the interface offers a subtle visual feedback to the user (on hover, focus and press of buttons and fields) which is similar throughout the application and helps the user to quickly learn the functionality.
    • Information architecture
      • The content is organised and prioritised by importance from top to bottom and left to right.
      • For consistency, the information is presented in the rule of 3 on large screens and individual on small screens.
      • The information is structured mostly in nested lists.

  • Skeleton

    • Initial wireframes

    • Improvements

      • Client Side:

        • All pages: Breadcrumbs between header and content

          Breadcrumbs

        • Landing page: Icons for education and experience items, but no icon for testimonials.

        • Blog Post page: The post cover photo is displayed on the left.

        • Contact page: Profile Picture is displayed instead of person icon and is not hidden on mobile.

      • Admin Panel:

        • All pages:

          • The layout is completely separate and different from the client side, different navbar which only includes App and Logout buttons and the menu panel is now a full height sidebar, no footer.
          • On mobile, the menu is expandable from the navbar, and it covers the whole page.
          • A svg image on the top right of every page (centred on mobile), representing the page's subject.

        • Dashboard:

          • Login page.

            Login

          • Notifications panel is displayed in yellow and only if there are notifications.

          • Extra panel with quick links.

            Dashboard

        • Get Items (list) page

          • Preview button for blogs and projects and no edit button for testimonials, skills and links.

        • Update (item) page and Settings page

          • There is a new panel for the drag&drop photo upload on blog and project edit page and on settings page, displayed beside the initial form.

            Dashboard

  • Design Choices

    • Colours

      • The colour palette consists of different shades of blue inspired by the "Colours of Santorini".
        Colour Palette
      • According to The Psychology of Color, the chosen colours represent optimism, loyalty and reliability. Colour Psychology Wheel
      • The 60-30-10 Rule was also taken into consideration when building the project. The light shades which are used mostly for background are considered neutral and makes up to 60% of the palette. The dark shades are complementary and makes up to 30%, while the accent colours completes the remaining 10% of the design. The landing page is an exception to this rule, as it is divided into multiple sections and uses all colours to create contrast between these.

    • Typography

      There are three fonts used throughout the project. Two main fonts used for content and headings, both having a sans-serif typeface and fallback. These font-faces inspire a clean and modern aspect. The third font is a monospace typeface used for brand text (logo) only to make it look like a piece of code:

    • Media

      The only media used on building this project are svg (inline html paths) section separators on the client side, svg minimalistic images on admin panel on top of every page and a "no-photo" image used as a fallback for any image issue. Any other media found on the app is added through the admin panel and is relevant to its container.

    • Iconography

      Icons are used throughout the project to help the user understand more efficiently the meaning of the content. They are a very good asset to improve UX.

Features

  • Planned features

    • Navigation Bar

      • Allows users to navigate through the website. The navigation will be fixed to top and visible all the time. Links will be collapsed on small screens.

    • Landing Page

      • Hero featuring a title (dev's name), a short bio, current status and availability and two Call-to-Action buttons: Download CV and Learn more.
      • Skill set section where dev's skills will be presented as progress bars.
      • Education section.
      • Work Experience section.
      • Testimonials.

    • Projects Page

      • Projects will be listed on a different page, as a detailed gallery, with quick access links and link to an individual project page for each.

    • Blog

      • Blogs will be presented on a different page, with a further individual page for each post.

    • Contact Page

      • Contact details, social links and a contact form.

    • Write Testimonial

      • Individual page with a simple form to write testimonials, accessible to all users.

    • Admin panel

      • Hidden dashboard and buttons, only accessible when logged as admin.

        Dashboard

  • Extra Features

    • Navigation is hidden off-canvas on small screens and is opening full screen.

    • Footer is displayed on every page of the main app, and it features a © copyright message, a list of social links and two columns of app links, including the Download CV CTA and the Write Testimonial link.

    • Landing Page

      • Hero section extra features: Profile Picture, title (profession), social links and the CTA buttons act as follows:
        • Learn More opens a modal dialogue containing a long bio.
        • Download CV opens an auto-generated PDF attachment containing all the relevant information extracted from the database.
      • Project individual page features a photo gallery.

    • Admin panel

      • Login Page asks for user and password when trying to access any /admin url. While admin is logged in and until is logged out, the main app features quick links for each item/section to Add new, Edit and Delete. It also displays a Dashboard and Log out buttons in both navbar and footer for quick access.
      • Dashboard page features a stand-out (yellow) Notifications panel for new (unapproved) testimonials, a Quick Links panel and a Statistics panel which shows count tiles for each item in the database.
      • Full height collapsible (for small screen) Sidebar Navigation.
      • Testimonials page allows admin to approve/disapprove and delete testimonials.
      • Blogs and Projects shows a list of items and allows admin to access they're individual edit page, to delete any item on the list or to preview them on the main app. Also gives access to [+ Add new] item page and preview the list page on the app. Add New and Edit existing pages features a drag&drop multiple photo upload section. The first uploaded photo will be displayed as the main photo of the item. For Projects, the rest of the photos will be displayed as a gallery on they're individual page. For Blogs, the rest of the photos can be used while writing/editing the post as inserted objects from the rich text editor field.
      • Education and Experience shows a list of items and allows admin to update they're order, access they're individual edit page and delete any of them from the database. Also gives access to [+ Add new] item page.
      • Skills and Links shows a list of items and allows admin to update they're data directly to the list, multiple items at once. It also allows admin to delete any of the items from database and gives access to [+ Add new] item page.
      • The Settings page features a form and a drag&drop single photo upload section where admin can update any information about the showcased developer or dynamic site data as META information.
      • Log out button, which logs the admin out and deletes the session item.

    • Contact email template: This is how the contact email appears on the recepient's inbox:

      Contact email

Database

All the information in the database is only in relation with showcased developer. Therefore, the database used for this project is the document-based database MongoDB as a relational database is not needed.

  • Schema

    DB Schema

    This database schema is mostly self-explanatory. For a better understanding:

    • settings document: cover field is for the long bio (or cover letter) text.
    • blogs document: slug field is a unique identifying string, generated from title, used for accessing the document from URL.
    • education and experience documents: order field is for sorting purposes when displaying records.
    • projects document: slug field is an unique identifying string, generated from title, used for accessing the document from URL. brief is the short description, displayed on project lists, while description is the long rich-text description, containing html tags as well.
    • links document: icon field is for the bootstrap icon name extracted from the class, e.g.: github from <i class="bi bi-github"></i>.

Technologies used

Testing

Click Here for Full Testing Process

Overview

Deployment

  • Forking the GitHub Repository

    By forking the GitHub Repository you make a copy of the original repository on your GitHub account to view and/or make changes without affecting the original repository by using the following steps:
    1. Log in to GitHub and locate the Dev.PI repository.
    2. At the top right of the Repository just above the "Settings" Button on the menu, locate and click the "Fork" Button.
    3. You should now have a copy of the original repository in your GitHub account.

  • Local Machine

    1. Log in to GitHub and locate the Dev.PI repository (or the forked repo into your profile).
    2. At the top of the Repository just above the list of files, locate and click the "Code" dropdown.
    3. To clone the repository using HTTPS, under "Clone", make sure "HTTPS" is selected and copy the link.
    4. Open Git Bash.
    5. Change the current working directory to the location where you want the cloned directory to be made.
    6. Type git clone, and then paste the URL you copied in Step 3. 
      git clone https://github.com/pinco227/dev.pi.git
    7. Press Enter. Your local clone will be created. 
      $ git clone https://github.com/pinco227/dev.pi.git
Cloning into 'dev.pi'...
remote: Enumerating objects: 408, done.
remote: Counting objects: 100% (408/408), done.
remote: Compressing objects: 100% (258/258), done.
remote: Total 408 (delta 156), reused 368 (delta 116), pack-reused 0
Receiving objects: 100% (408/408), 24.92 MiB | 15.71 MiB/s, done.
Resolving deltas: 100% (156/156), done.

      Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

    8. Create accounts:
      • MongoDB account, project, cluster and database.
      • Cloudinary User (retrieve access keys).
      • SendGrid API key or edit mail_settings in app.py for use of other mail server/provider.
      • ReCaptcha: create site and retrieve keys.
    9. Create env.py file and include the following code (note that the values should be replaced with your own credentials) 
      import os

# App IP and PORT
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
# Generate a secret key, use https://randomkeygen.com/
os.environ.setdefault("SECRET_KEY", "<secret_key>")
# Mongo DB credentials
os.environ.setdefault("MONGO_URI", "<mongo_uri>")
os.environ.setdefault("MONGO_DBNAME", "<db_name>")
# Admin panel user and password
os.environ.setdefault("ADMIN_USERNAME", "<username>")
os.environ.setdefault("ADMIN_PASSWORD", "<password>")
# Cloudinary Keys
os.environ.setdefault('CLOUDINARY_NAME', '<account_name>')
os.environ.setdefault('CLOUDINARY_KEY', '<api_key>')
os.environ.setdefault('CLOUDINARY_SECRET', '<api_secret>')
# Email credentials. See mail_settings in app.py for more email settings
os.environ.setdefault("SENDGRID_API_KEY", "<api_key>")
os.environ.setdefault("MAIL_DEFAULT_SENDER", "<sender_email>")
# Recaptcha keys. Go to https://www.google.com/recaptcha/admin/create and create a new site
os.environ.setdefault("RC_SITE_KEY", "<recaptcha_site_key>")
os.environ.setdefault("RC_SECRET_KEY", "<recaptcha_secret_key>")

      Make sure you add this file to .gitignore file so it will not be published.

    10. Install required python packages by running the following command into terminal: 
      pip3 install -r requirements.txt
    11. Run app by typing the following into terminal: 
      python3 app.py
    12. Browse app by accessing 0.0.0.0:5000 into a browser. At this point, if configured right, the app will automatically build the database.

  • Heroku

    1. Make sure the requirements.txt and Procfile are created. If not, type the followings into terminal: 
      pip3 freeze --local > requirements.txt
      and 
      echo web: python app.py > Procfile
    2. Commit and push changes to forked repository.
    3. Create a Heroku account and click New on top right of the dashboard to Create a new app.
    4. Within the newly created app go to Settings tab and press Reveal Config Vars. Here you can add the variables initially stored into local env.py file: IP, SECRET_KEY, MONGO_URI, MONGO_DBNAME, ADMIN_USERNAME, ADMIN_PASSWORD, CLOUDINARY_NAME, CLOUDINARY_KEY, CLOUDINARY_SECRET, SENDGRID_API_KEY, MAIL_DEFAULT_SENDER, RC_SITE_KEY, RC_SECRET_KEY.
    5. Go to Deploy tab and under the Deployment method click on the Github icon.
    6. Right under this section, type the dev.pi and search for the forked repository into your GitHub account. Select the right repository and click Connect.
    7. Under the Automatic deploys section, click Enable Automatic Deploys. The deployment will be now automatic with every github push command.
    8. Under the Manual deploy section, click Deploy Branch for initial deploy.
    9. You can now browse the deployed app by clicking Open app button on top right of the dashboard.

Credits

Acknowledgements

  • My Mentor: Nishant Kumar for continuous helpful feedback.
  • Tutor support at Code Institute for their support.
  • Slack Code Institute community for feedback.
  • Peer student: Alexandru Valentin Grapa for helpful feedback along the coding progress and for help with testing.

About

Code Institute - Milestone Project 3. This is an HTML/CSS/JS/Python/Flask/MongoDB project used for educational purpose. This project represents a developer's personal portfolio.

paulistratoaie.com/

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Languages