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).
Topics → brython, HTML, CSS, web-assembly, python, web development
Preview Link → PortfolioWithBrython
Source Code Link → GitHub
What We are going to do?
- Creating a basic template using HTML
- Request the profile data using AJAX request and loads it into Jason serialized.
- Then inject that data into HTML using python snippets.
Initializing 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 special 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 styling to make it look impressive.
Deployment
For deployment, We are using the GitHub Pages. For More Info
Placeholder text by Praveen Chaudhary · Images by Binary Beast