Skip to content

Latest commit

 

History

History
339 lines (271 loc) · 10.8 KB

README.md

File metadata and controls

339 lines (271 loc) · 10.8 KB
Raw

CircleCI

Summary

  • this is my portfolio website made with the latest UX/UI

Features include

  • a plotly.js wheel of my skills
  • a resume page
  • a contact me page

Stack

Frontend

  • Angular v 12.1.4
  • CSS Animations
  • Plotly.js v 2.3.0
  • html2canvas v1.1.4
  • jspdf v2.3.1
  • primeng v12.0.1

Backend

Testing

  • Docker, (tes in docker containers from linux VM) v20.10.7

Unit

  • rspec v3.10.0
  • capybara v3.35.3

Integration

  • rspec v3.10.0
  • capybara v3.35.3

E2E

  • rspec v3.10.0
  • capybara v3.35.3
  • puffing billy v2.4.1

Hosting

  • Firebase v9.16.0

CI/CD

  • CircleCI
  • Docker v20.10.7
  • Virtual Box v 6.1.22
  • Ubuntu VM 20.04.1

Structure

Linting Rules

  • if a previous commit had a big mark by saying "PREVIOUS BUG COMMIT"
  • for responsive try to keep rules localized to a top level target
  • for "container" we use "pods" for brevity
  • for each commit, we append "WORKING COMMIT" so we know the commit is free of bugs
  • ruby indentation 2 lines
  • ts indentation 4 lines
  • for events use ev as the varialbe how we do nested loops
item
forEach((x,i)=>{
    x.forEach((y,j)=>{
        y.forEach((z,k)=>{
            z.forEach((w,h)=>{
                w.forEach((xx,ii)=>{
                    ...
                })
            })
        })
    })
})
  • if you see a_p_p_Specific in the scss that means we know of modern practices however we could not properply implement it and we needed to use a_p_p_Specific to help achieve the task

Project Directory Mapping

Frotend

Configurations

  • the intro is handled in AngularApp/src/app/intro
    • slider is a component which was supposed to be part of intro, ng g ran to soon it was a pleasure to still make the app work desipte
  • the home is handled in AngularApp/src/app/home
  • the resume is handled in AngularApp/src/app/resume
    • the plotly sunburst chart is handled in AngularApp/src/app/resume/directive/skills-sun-chart.directive.ts
    • resume printing is handled in AngularApp/src/app/resume/directive/download-pdf.directive.ts
    • skills
      • AWS Amplify
      • AWS Route53
      • AWS S3
      • CI/CD deploy to Amplify and Heroku
      • Basic Java
      • python news api
      • trello
      • python scheduler
      • ngx-translate
      • Spring Boot
      • log4j2
      • DigitalOcean
      • Google maps js sdk v3.0.0
      • socket.io-client: 4.2.0
      • flask 2.0.1
      • Flask-SocketIO==5.1.1
      • gunicorn==20.1.0
      • pyngrok==5.1.0
      • gevent 21.8.0
      • netlify

Backend

Configurations

  • refer to README.md in ignore

Testing

  • in AngularApp/testing/TESTS.md we have where we write pseudo code for our unit,e2e and integration tests later
  • AngularApp/testing/e2e/social-e2e-circleci.rb - is where all of our e2e tests live, we test on docker in a ubuntu 20.04 to closely represent the circleCI env and write the code
  • in the local testing env we use a gui browser, to oberserve to make sure the tests work properly, however in circleci we have the browsers run in headless mode.

CI/CD

  • IN .circle is our config.yml, we make use of the company's Docker image as well as the circleci browser-build tools orb, as a general practice we packages our dependencies into the orb so we dont have to increased build times

Issues

  • say we have issues and we are looking for support with a library language or other 3rd party found here AngularApp/misc/issues

Future Plans

refer to README.md in ignore

Libraries

  • all utility fn located in AngularApp/src/app/customExports.ts

Site Navigation

  • the end user is greeted with an intro presentation that can freely proceed through the website

Home Page

  • the menu slowly appears, then I appear.
  • the short bio is alreadly on the page

Resume Page

  • my resume appears on the page its scrolls up to be made availbe
  • there is a download resume button which will not use html2canvas, and jspdf instead will be downloaded from the assets, since we cant get it to download properly if there is an animation on it
  • there is an interactive plotly.js sunburst chart at the bottom of the screen
  • urls should lead to places accordingly

Testimony Page

*the testimonials are on the page of all the people I have worked with and progress so far

Contact Page

  • here is the contact page contact me via all means necessary

Aspects

Challenges

  • too much time on resume scss Its not even fully responsive, its just going to get to a certiain width then resize
  • in the contact me section the flex was 0 1 50% for both however flexbox manageed to put the div on the second line making 0 1 49% 50% smh

Mistakes/Failures

  • forgot to generate the slider component to the intro module
  • apparently padding has slight issues with flex where you have to correct everything
    • either decrease the flex-basis or manually modify the padding
    @media (max-width: map.get($media_breakpoint,1)){
        flex: 1 0 90% ;
        // padding:10px;
        // @include outline;

        // & *{
        //     margin: 10px;
        // }

        // & .a_p_p_Specific0{
        //     margin:0 10px !important;
        // }
    }

Enjoyed

  • admiring the final product
  • working with html2canvas and jspdf

Leadership

  • after zoom of 300% were not going to support responsiveness
    • after zoom 200% not on the stories page

Conflict

  • we been having a lot of issues with primeng
    • remplement component best you can
  • can't achieve the effect on vercel without plently of implementation
    • cant even get the gradients to transition
    • good codebut not enough to get to the point of making it work
    &::before{
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom, red, orange);
        z-index: 1;
        opacity: 0;
        transition: opacity 0.4s linear;

    }

    &:hover::before {
        opacity: 1;
    }

Done Different

  • navigation should be its own module component, along with the background image
  • test all components I want to use are working properly

Issues

  • everything needs lazyloading,
  • the page has a margin of white space,determine whats going on the app should bee 100vh 100vw
  • on prod html2canvas or jspdf doesnt print properly

TODO

  • replace stories with certificates
  • e2e test facebook popup make test fail do something about it
  • decide on keeping projects and adding a testimonials page
    • Allison Gould
    • (Friends)
  • provide full url in expandable for contact or setup python backend
  • testing

Suggestions

  • for each project, problem, issue, solution

Notes

  • if responsive issues with the project in resume find and umcomment
& > a,p{
    word-break: break-word;
}

Terminal Workspace

Session 1 (Frontend) $(npx ng serve) configure frontend Session 2 (Backend) $(python tornado_server.py) configure backend (like heroku push) Session 3 (Testing) configure testing env ssh session to vm to instianiate docker vm Session 4 (Github) git push Session 5 (Logging) ssh session to vm to instianiate docker vm

Resources

sucessful circle ci build firebase login token for ci css word break iconfinder vercel google fonts ng generate lazy load modules router jspdf css media queries css units animationend event css animations rspec path of current url

Capybara test file download

HTML TO PDF

* https://www.youtube.com/watch?v=toBdhXwWajY   
* https://codingshiksha.com/angular/angular-9-tutorial-to-convert-html-to-pdf-using-jspdf-html2canvas-library-full-project-for-beginners/

Snippets

  • download-pdf.directive.ts html to pdf
    • place in 'transform the online resume to be ready for printing' link
  • generate a new module
npx ng g module resume --routing=true
  • generate a new component
npx ng g component intro/main --change-detection=OnPush --export=true --module=intro --style=none
  • generate a new directive
npx ng g directive contact/directive/links --module=contact

Media

[testimony_5.jpg]

[testimony_4,jpg]

[testimony_3.jpg]

spotlight.jpg

[intro_1.jpg]

<div>Icons made by <a href="https://www.flaticon.com/authors/kiranshastry" title="Kiranshastry">Kiranshastry</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

[intro_2.jpg]

<div>Icons made by <a href="https://creativemarket.com/eucalyp" title="Eucalyp">Eucalyp</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

[intro_3.jpg]

<div>Icons made by <a href="" title="Pause08">Pause08</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

Planning

  • responsiveness
  • lets aim for 1075px
    • intro should center everything
    • navigation should turn to dropdown