Portfolio

Description

This is the repository of my personal Portfolio, with the aim of making something that is not just a static portfolio, but that can however be changed via the API.

FRONTEND

A SPA front-end made with the Angular framework version 16, chosen by best compatibility with the NGX-Translate translation library, following a small pre-defined component structure and Styled Components technique.

Tech Stack:

Angular@16

Libraries:

NGX-Translate, Swiper@8, AOS, Remix Icon, Flag-Icons, DEVICON

Color Reference:

• --primary-color-light: #b421ce;
• --primary-color: #8e24aa;
• --primary-color-dark: #6a1b9a;
• --bkg-color: #f5f5f5 | #212121;
• --text-color: #000 | #fff;
• --btn-color: --primary-color;
• --btn-text-color: #fff;
• --modal-color: #FFFFFFBF | #000000BF;

Components:

• AppComponent:
  • HeaderComponent:
    • Logo:
      • TipewriterComponent
    • Nav:
      • CheckButtonComponent
  • HomeComponent:
    • HeroText
    • HeroImage:
      • ProfileImageComponent
  • ResumeButtonComponent:
    • GlowButtonComponent
  • SocialComponent:
    • SocialLinks
    • SocialEmail
  • AboutComponent:
    • AboutDesc
    • SkillsIcons
  • ProjectsComponent:
    • SwipeContainer:
      • CardComponent
  • ContactComponent:
    • ContactInfo
    • FormComponent
      • StateButtonComponent
  • ReturnButtonComponent
  • FooterComponent
    • Copyuser
    • GithubStarComponent

Images:

BACKEND

This is an API developed in NestJS with two main endpoints: 'Page Content' (GET method only), 'Email Form' (POST method only) to feed the frontend and some other endpoints developed to populate the 'Page Content' main endpoint, in addition, 'Page Content' uses MongoDB as the main database and a memory cache. The 'Email Form' does not use a bank, it just sends the POST directly to the application's email via SMTP.

Tech Stack:

NestJS@10, PostgreSQL, Redis, Docker

Libraries:

Swagger, NodeMailer, TypeORM, Cache-Manager

Tables:

classDiagram
    Social *-- SocialLink
    About *-- Skill
    Contact --> Github
    class HomeImage {
        String url
        String altEn
        String altPt
    }
    class Social {
        List~SocialLink~ links
        String email
    }
    class SocialLink {
        uuid id
        String name
        String url
    }
    class About {
        String descEn
        String descPt
        List~Skill~ skills
    }
    class Skill {
        uuid id
        String techName
        String altEn
        String altPt
    }
    class Project {
        uuid id
        String title
        String repoUrl
        String webUrl
        String apiUrl
        String imageUrl
        String descEn
        String descPt
    }
    class Certificate {
        uuid id
        String title
        String webUrl
        String imageUrl
        String descEn
        String descPt
    }
    class Contact {
        String mobile
        String waEN
        String waPT
        String resumeURL
        Github github
    }
    class Github {
        String username
        String repoName
        String url
        String token
    }

    note for Form "POST method only"
    class Form {
        String firstName
        String lastName
        String email
        String message
    }

Loading

JSON:

{
  "home_image": {
    "url": "",
    "alt_en": "",
    "alt_pt": ""
  },
  "social": {
    "links": [
      {
        "id": "uuid",
        "name": "",
        "url": ""
      }
    ],
    "email": ""
  },
  "about": {
    "desc_en": "",
    "desc_pt": "",
    "skills": [
      {
        "id": "uuid",
        "tech_name": "",
        "alt_en": "",
        "alt_pt": ""
      }
    ]
  },
  "projects": [
    {
      "id": "uuid",
      "title": "",
      "repo_url": "",
      "web_url": "",
      "api_url": "",
      "image_url": "",
      "desc_en": "",
      "desc_pt": ""
    }
  ],
  "certificates": [
    {
      "id": "uuid",
      "title": "",
      "web_url": "",
      "image_url": "",
      "desc_en": "",
      "desc_pt": ""
    }
  ],
  "contact": {
    "mobile": "",
    "wa_en": "",
    "wa_pt": "",
    "resume_url": "",
    "github": {
      "username": "",
      "repo_name": "",
      "url": "",
      "token": ""
    }
  },
  "form": {
    "first_name": "",
    "last_name": "",
    "email": "",
    "message": ""
  }
}

Running the app

Prerequisites:

• Node.js version 18.19 or higher (Check your version: node -v)

Steps:

1. Front-end:

cd front
npm install
ng serve

2. Back-end:

cd back
npm install
nest start

That's it! Now you can access the app:

• Front-end: http://localhost:4200
• Back-end: http://localhost:3000

License

This project is MIT licensed.