PortfolioWithBrython

A portfolio based on the Brython ( designed to replace Javascript as the scripting language for the Web. As such, it is a Python 3 implementation (you can take it for a test drive through a web console), adapted to the HTML5 environment, that is to say with an interface to the DOM objects and events ).

Posted by Praveen Chaudhary on 16 March 2021

Topics -> brython, html, css, web-assembly, python, webdevelopment

Preview Link -> PortfolioWithBrython

Source Code Link -> GitHub

What We are going to do?

  1. Creating a basic template using HTML
  2. Request the profile data using ajax request and loads it into json serailizer.
  3. Then inject that data into html using python snippets.

Intialising the variables then loading the required libraries

from browser import document,ajax,console,window,html
from browser.template import Template
import json

# Intialising the local storage
storage = window.localStorage

# Make changes Here Only
your_name = 'Praveen Chaudhary'
first_profession = 'Full Stack Developer'
second_profession = 'Data Analsyt'
company_name = 'BinaryBeast'
web_creator = 'Praveen Chaudhary'
project_container = document['ProjectContainer']
footer_element = document.select('.profile-footer')[0]

profile_endpoint = "https://raw.githubusercontent.com/chaudharypraveen98/PortfolioWithGatsby/master/src/data/GithubProfile.json"

Requesting data through Ajax

From where data is loaded ?

You can load data from anywhere from the web,but tries to maintain the structure like Sample Data 

def get_project():
    req = ajax.ajax()
    req.open('GET',profile_endpoint, True)
    req.bind('complete',on_complete)
    #document['joke'].text = 'Loading...'
    req.send()

Loading in Json Serializer

It will take the response text as input and gives JSON data.

def on_complete(req):
    project_list = json.loads(req.responseText)
    storage['projects']=project_list
    add_project(project_list)

Adding Data into HTML

How the data is loaded in frontend?

Brython has sepcial methods to put data into html tags , see how it works

def add_project(project_list):
    for project in project_list:
        title= html.H1(project['title'],Class="singleProjectTitle")
        if project['desc']!=None:
            project_desc= html.P(project['desc'],Class="project-desc")
        else:
            project_desc= html.P("This project is made by Praveen Chaudhary",Class="project-desc")
        if project['programming_language'] !=None:
            programming_language= html.H3(project['programming_language'],Class="programming-language")
        else:
            programming_language= html.H3("Html-Css-Js",Class="programming-language")

        projectNumber= html.P(project['id'],Class="projectNumber")
        project_container <= html.DIV(title+projectNumber+project_desc+programming_language,Class="singleProject")
Fun Fact - Brython is designed to replace Javascript as the scripting language for the Web.

Add some stylings to make it look impressive.

Deployment

For deployment, We are using the GitHub Pages. For More Info

Web Preview / Output

web preview Web preview on deployment

Placeholder text by Praveen Chaudhary · Images by Binary Beast