Hello, and welcome to my personal portfolio documentation! In this documentation I will cover the process and mechnism to create linking between front end and the backend.
Front end is created in Javascript using React JS framework while backend is created in JAVA using Spring Boot framework
If you have any questions please feel free to reach out on my email [email protected] or contact me using my phone number: +92 331 504 15 93.
API Url
http://zohairportfolio-env.eba-psgpkwd4.ap-south-1.elasticbeanstalk.com/zohair_portfolio
Swagger Url
http://zohairportfolio-env.eba-psgpkwd4.ap-south-1.elasticbeanstalk.com/zohair_portfolio/swagger-ui/index.html#
The first page is the home. Below is the full image of the page. Home page shows the introduction of the profile and floating icons of the tech stack which I use. I will discuss each components one by one in the later paragraphs.
End Point: [GET] /api/v1/home-page/
{
"cvDownload": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"flags": [
{
"flagId": "string",
"flagTitle": "string",
"flagValue": true
}
],
"floatingIcons": [
{
"iconId": "string",
"iconTitle": "string",
"pictureUrl": "string"
}
],
"introPicture": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"introTexts": [
{
"colorCode": "string",
"fontName": "string",
"isBold": true,
"isItalic": true,
"isUnderlined": true,
"sortingOrder": 0,
"textData": "string",
"textId": "string",
"textTitle": "string"
}
],
"punchLineTexts": [
{
"colorCode": "string",
"fontName": "string",
"isBold": true,
"isItalic": true,
"isUnderlined": true,
"sortingOrder": 0,
"textData": "string",
"textId": "string",
"textTitle": "string"
}
],
"scheduleMeeting": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"socialMediaIcons": [
{
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
}
]
}code snippet 1.0.0
At the top you can see there is a menu bar This is static text which needs to be hard coded from the frontend side.
Figure 1.2.0
The login and signup button images/text is static and needs to be hard coded while the visibility of this component has to be handled from the backend API as show in the code snippet 1.2.1.
"flags": [
{
"flagId": "string",
"flagTitle": "string",
"flagValue": true
}
]code snippet 1.2.0
Figure 1.3.0
Intro Picture
"introPicture": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
}code snippet 1.3.0
Intro Text
"introTexts": [
{
"colorCode": "string",
"fontName": "string",
"isBold": true,
"isItalic": true,
"isUnderlined": true,
"sortingOrder": 0,
"textData": "string",
"textId": "string",
"textTitle": "string"
}
]code snippet 1.3.1
Please note that the intro text is an array of text and needs to be handled accordingly as you can see that the Intro text "Hello World" is of diffrent color then "I am" is of different color, similarly "Muhammad Zohair" is of different color and bold text. These texts are divided into text blocks with text styling.
Figure 1.4.0
This text and icon is as a whole clickable and will open a form as shown in figure 1.4.1 below.
Figure 1.4.1
Following is the data which is available in API to make Schedule Meeting & Download CV functional.
"cvDownload": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"scheduleMeeting": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
}code snippet 1.4.0
Name & Email field is mandatory for the user to enter, Once the user clicks on submit following data will be passed to API
End Point: [POST] /api/v1/home-page/submit-query
{
"name":"String",
"email":"String",
"message":"String"
}code snippet 1.5.0
Following icons are gifs and should be moving not static in the code.
Figure 1.6.0
Please download the gifs from Here
The icons which will be floating in the background of home page should only be floating behind home screen boundaries and should back bounce from the corners Following is the code snippet for icons
"floatingIcons": [
{
"iconId": "string",
"iconTitle": "string",
"pictureUrl": "string"
}
]code snippet 1.7.0
Social Media Icons on the right end will be sticky with scrolling as showin in the figure below. These icons are clickable and their click action URL is also given in the json file.
End Point: [GET] /api/v1/home-page/
Figure 2.0.0
Hyperlinks for these icons is available in the home api as per following json code snippet
"socialMediaIcons": [
{
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
}
]code snippet 2.0.0
The second page is the projects. Below is the full image of the page. Project section displays the top picks of the categories. Right now there are in total 3 categories, each will show at max of 6 projects and will be scrollable horizontally.
End Point: [GET] /api/v1/projects/
Figure 3.0.0
As you can see in the figure 2.0.0 there are in total 3 categories of projects; Crown jewels (also referred as top-projects), Long-standing(also referred as legacy) and Probono.
To fetch top projects:
End Point: [GET] /api/v1/projects/{tag}/{limit}
Tag refers to the category mentioned above and the limit will be 6 by default, so for example if we want to fetch Crown jewels, the end point will be:
[GET] /api/v1/projects/top-projects/6
- For legacy:
[GET] /api/v1/projects/legacy/6
- For probono:
[GET] /api/v1/projects/probono/6
The API response will be as follows. There is an array of projects and each project will have attributes (not all attributes will be required in this screen)
[
{
"briefDesc": "string",
"clientName": "string",
"detailedDesc": "string",
"duration": "string",
"endDate": 0,
"projectAppGalleryUrl": "string",
"projectAppStoreUrl": "string",
"projectCategory": "string",
"projectId": "string",
"projectLocation": "string",
"projectMedia": [
{
"fileLink": "string",
"height": 0,
"mediaId": "string",
"size": 0,
"width": 0
}
],
"projectName": "string",
"projectPlayStoreUrl": "string",
"projectTitle": "string",
"projectUrl": "string",
"startDate": 0,
"tags": "string"
}
]code snippet 3.0.0
The third page is the expertise. Below is the full image of the page. Expertise section displays the all the skills and technologies which I have used or have hands on experience on. The image scroller will NOT auto scroll instead the user will be able to scroll by the buttons or the holding the cursor and moving left or right animation. Also if any tab is selected/ clicked then its data will be displayed.
To fetch expertise:
End Point: [GET] /api/v1/expertise
API response:
[
{
"briefDesc": "string",
"detailedDesc": "string",
"expTitle": "string",
"experience": "string",
"expertiseId": "string",
"isEnabled": true,
"pictureUrl": "string"
}
]code snippet 4.0.0
To fetch work timeline:
End Point: [GET] /api/v1/work-history
API response:
[
{
"briefDesc": "string",
"companyName": "string",
"companyWebsite": "string",
"designation": "string",
"detailedDesc": "string",
"endingDate": "string",
"endingYear": 0,
"isEnabled": true,
"location": "string",
"pictureUrl": "string",
"startingDate": "string",
"startingYear": 0,
"workHistoryId": "string"
}
]code snippet 5.0.0
To fetch education and certifications:
End Point: [GET] /api/v1/academics
API response:
[
{
"academicId": "string",
"academicType": 0,
"dateCreated": 0,
"dateUpdated": 0,
"degreeName": "string",
"endingDate": "string",
"institutionName": "string",
"isEnabled": true,
"pictureUrl": "string",
"sortingOrder": 0,
"startingDate": "string",
"validationUrl": "string"
}
]code snippet 6.0.0
This section have a lot of data inside and is the most important of all. The page can be divided into 2 sections mainly. On the left there are buttons with dynamic links which are being given in the API response. Firstly there is the Image, the URL for that image is "myPictureUrl". Then Buy me a coffee for that you have to get json from object "buyMeCoffee". All the naming convention is self explainatory.
To fetch about-me:
End Point: [GET] /api/v1/about-me
API Response:
{
"aboutMeDesc": [
{
"colorCode": "string",
"fontName": "string",
"isBold": true,
"isItalic": true,
"isUnderlined": true,
"sortingOrder": 0,
"textData": "string",
"textId": "string",
"textTitle": "string"
}
],
"buyMeCoffee": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"coreSkillsText": [
{
"colorCode": "string",
"fontName": "string",
"isBold": true,
"isItalic": true,
"isUnderlined": true,
"sortingOrder": 0,
"textData": "string",
"textId": "string",
"textTitle": "string"
}
],
"cvDownload": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"designationText": [
{
"colorCode": "string",
"fontName": "string",
"isBold": true,
"isItalic": true,
"isUnderlined": true,
"sortingOrder": 0,
"textData": "string",
"textId": "string",
"textTitle": "string"
}
],
"developmentStats": {
"dailyAverage": "string",
"totalDevelopmentHours": "string"
},
"fiverr": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"freelancer": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"hackerRankStats": {
"totalSolved": 0
},
"leetCodeStats": {
"acceptanceRate": 0,
"contributionGraph": {
"additionalProp1": {},
"additionalProp2": {},
"additionalProp3": {}
},
"contributionPoints": 0,
"leetCodeUrl": "string",
"message": "string",
"ranking": 0,
"reputation": 0,
"totalSolved": 0
},
"myPictureUrl": "string",
"nameText": [
{
"colorCode": "string",
"fontName": "string",
"isBold": true,
"isItalic": true,
"isUnderlined": true,
"sortingOrder": 0,
"textData": "string",
"textId": "string",
"textTitle": "string"
}
],
"scheduleMeeting": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
},
"upwork": {
"linkId": "string",
"linkName": "string",
"linkUrl": "string",
"pictureUrl": "string"
}
}code snippet 7.0.0
On the right side there are in total 4 type of texts:
- Name (nameText)
- Designation Text (designationText)
- Core Skills (coreSkillsText)
- AboutMe Description (aboutMeDesc)
Each text block has its own array of text, this is very similar to the text logic in the home-page, please refer to that if you have any confusion.
🔴❗ **Not available right now (Still underdevelopment)**❗🔴
Development stats are the circles which are showin in the figure 7.0.0 Right now it is only 2 circles which shows HackerRank and LeetCode but later on there will be more and will be scrolling within the view. These circles shows the total number of solved questions and can be fetched from the API with the key hackerRankStats & leetCodeStats respectively. Adjacent to these circles there are two text blocks which shows total development hours and daily average. These can be fetched from the same API with the key developmentStats.
In the footer there are two buttons, Let's connect and Back to Top Lets connect shows the same popup showed in figure 1.4.1. While Back to Top scrolls user to top of the page with a speedy animation.