Builder of my own web site
Project 21
Caracteristics
- Date : Fall 2021
- State : Finished (regularly updated)
- Themes : scripts python, python scripts, use of object-oriented programming to represent page builders.
- Tags : Web, Web front-end, Python, Javascript, Object oriented programmation
Description
My project to automate website creation of my own came from my difficulty in maintaining my site with its dozens of project pages. I also wanted to add an English version of my site so that my work can also be valued and juged for abroad internships. I decided to make my website builder which will be working on python scripts.
The first step to successfully carry out this project was, for each type of page (index / portfolio / project page / ...), to identify the parts that will figure in a template file, and the parts that will be generated. For each page, we can already separate the content, the body of the page, from its navigation bar and footer. These last two parts will have their own template. Then I wrote the template version for each type of page. I established that for each page, the python script will have a dictionary replacing all occurrences of keywords found in patterns like this : {keyWords}, with what will be in the dictionary. Then I made sure to generate the same pages for the number of languages I had defined (for now two: French, English). I made sure that all links from a page in one language lead to the desired page in the correct language.
La deuxième étape de mon projet fut de réécrire tout le contenu du site, dans les différentes langues, dans des fichiers json, afin que mon constructeur utilise ces contenus pour remplir les mots-clés du site. J'ai donc déplacé le contenu des anciennes pages de projet dans leur fichier json respectif. J'ai également ajouté une partie information commune pour chaque projet pour y stocker des informations. Notamment le numéro de projet, les tags associés (Modification de 2023) et l'année. J'ai créé un constructeur qui lirait tous les fichiers de projets, créerait les pages associées et ferait une liste pour une page portfolio. The second step of my project was to rewrite all the content of the site, with all different languages, in json files, so that my builder will use these files to fill in the site's pattern keywords. So I moved the content from the old project pages into their respective json file. I also added a common information section for each project to store information. Specifically the project number, associated tags (Modification of 2023) and the year. I created a type of builder for each type of page which will part of my web site. A builder for simple pages. A builder for my porfolio page. And one special which will read all project's file and create the associated file.
Finally, I made some other small changes. I added to the old portfolio page, a filtering system, allowing to only display projects related to the selected tags. I also added a special html tag in the contact section to display my resume. In terms of content, I also rewrote the paragraphs on the home page, the biography page content and the contact page.
(Site update, end of project 24, catch-the-ufo) I updated the javascript part of the project pages to be able to include a view of another page of my site. I therefore made my project run on a web page on the site, and created a view on the catch the ufo project page so that a potential visitor to the site could play it.
(Site update, start 2023) I found that the presentation of projects was not very clear. I therefore added more filters and a display of projects by theme Projects can be displayed by year (by default) or by interest (personal, internship, school). In addition, a table of content with links is generated by selecting a type of project display. These links facilitate the user to access to a certain section. I also reviewed the site's style to fix small heterogeneous style issues for the same objects. Finally, I replaced links to project images that led to the imaged resource on a separate page with a carousel. When the user clicks on an image, the carousel displays. When the image is displayed in full, the user can use the arrow keys or buttons to change the displayed image. They can also close the carousel by pressing the 'escape' key or the associated button.
Visuals (Click on one pick to enlarge it)
Hey test test