Skip to content

Commit

Permalink
Merge pull request #9 from ZuliusRoolf/define-code-structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZuliusRoolf
ZuliusRoolf authored Aug 5, 2024
2 parents 00eae7b + 6251db9 commit 3498ce9
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 194 deletions.
46 changes: 46 additions & 0 deletions JOURNAL.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ This is a quick journal on how I develop this website. It will be used for docum
- [Best practices](#best-practices)
- [The last lesson](#the-last-lesson)
- [HTML templates and JSON pre-fetching](#html-templates-and-json-pre-fetching)
- [August 04](#august-04)
- [Applying everything I've learned from August 02](#applying-everything-ive-learned-from-august-02)
- [HTML Biography Template](#html-biography-template)
- [HTML Portfolio Template](#html-portfolio-template)
- [August 05](#august-05)
- [JSON Conversion](#json-conversion)

## July 13

Expand Down Expand Up @@ -529,3 +535,43 @@ document.addEventListener('DOMContentLoaded', () => {
]
}
```

## August 04

- [x] Change HTML to be more of a template
- [ ] Change JavaScript to use updated template
- [x] Prefetch JSON files
- [x] Update style classes to follow BEM

### Applying everything I've learned from [August 02](#august-02)

First and foremost is to add HTML code to prefetch JSON files for the `script.js` to load. According to the [JSON Content Structure](#json-content-structure) there is supposed to be three files, so I'll preemptively add [`experiences.json`](/website/content/experience.json) to the `content` folder. This might not be necessary, considering I could write a script that inserts all JSON values into HTML before deployment. On the other hand I have learned a lot about fetching resources and the inner workings of websites by doing it this way.

Doing a quick google search on CV examples to verify my terminology The standard title for experiences is "*work history*" or "*work experience*". Some exceptions of course, one said something like "*previous employment*".
I wanted to call mine timeline, as that is more of what it should represent. It includes education, work experiences and achievements. The term "*history*" would fit much better than experiences or timeline as previously suggested. However, "*experience*" is more professional sounding and I personally connect that term to a CV context.
I'll keep the experience term but make it singular. Right now the JSON was referred to [`experiences.json`](/website/content/experience.json) instead of simply [`experience.json`](/website/content/experience.json).

#### HTML Biography Template

I've completed the biography to become more of a template as well as changed classes to follow [BEM methodology](https://getbem.com/). I had to rethink some stuff, but in the end it is much more structured now, and I can read the HTML without being confused now.

Trying to get if statements into HTML was not an easy task. Of course HTML doesn't have if statements, but I wanted an easy way to identify which elements should be removed if the JSON is missing information. For example, the company you're working at. Right now the HTML is pre-formatted with "*profession* at *company*". But what if you are unemployed? Unemployment is more of a profession than a company, so the company needs to be removed, and so does the "at" which ties the company and profession together.

My solution is to use ID of whatever class that is supposed to be deleted if irrelevant. A tricky one is the "About" link whenever there is no "about text" to be display. As the "About" link is the first in the biography__links it is supposed to be the template for all other biography links, but those can't have IDs as they won't be unique.
Perhaps another solution will rise when I process the template in JavaScript, but for now it is still a bit of a hassle.

#### HTML Portfolio Template

Now the portfolio template is done! It was much harder to give names to as everything is a `project__<insert name>` relation, but I got some good names at the end. I marked the "[Update style classes to follow BEM](#august-04)" as done even though there is no style classes that are updated. The intention was to update class names in HTML to make CSS the next step in development. Don't think I have enough time for JavaScript today, unfortunately. Will aim to fix it tomorrow :)

## August 05

- [x] Change JavaScript to use updated template

### JSON Conversion

Started to convert biography JSON into HTML using JavaScript. I feel the about and links section can be made better, but it should work for now. The full conversion is not complete, I think the portfolio is easier, so I'll aim to finish it this evening.

Portfolio conversion was much easier. Mostly because I don't have a bullshit "about" link that points to a later HTML element which are dependent to create more links. I am not that clever. There is probably a much smarter way of doing it, but it works, and I am not going to complain. The next on the agenda is to style everything with CSS.

On a similar note, there is not much JavaScript to be written as well, only when the "about" is clicked and animations I guess.
7 changes: 4 additions & 3 deletions website/content/biography.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{
"portrait": "URL_to_portrait_image",
"name": "Zulius Roolf",
"title": "Software Engineer Student",
"profession": "Software Engineer Student",
"workplace": "BTH",
"workplaceLink": "http://bth.se/eng",
"about": "I am a Jack of all trades with strong proficency in the art of software development. This website has been created to track and showcase the different projects I have worked on over the years. I am always looking for new opportunities to learn and grow as a developer.",
"links": [
{
"name": "LinkedIn",
Expand All @@ -19,6 +21,5 @@
"link": "https://github.com/ZuliusRoolf",
"icon": "content/icons/github.svg"
}
],
"aboutMeText": "I am a Jack of all trades with strong proficency in the art of software development. This website has been created to track and showcase the different projects I have worked on over the years. I am always looking for new opportunities to learn and grow as a developer."
]
}
10 changes: 10 additions & 0 deletions website/content/experience.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"experience": [
{
"year": "2024"
},
{
"year": "2023"
}
]
}
10 changes: 5 additions & 5 deletions website/content/portfolio.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
"video": "URL_to_video",
"companyLogo": "content/icons/github.svg",
"companyName": "GitHub",
"collaborators": "John Doe",
"collaborators": "Mr. Ranedeer",
"descriptiveTitle": "A project that does something",
"reason": "This project was created to solve a problem.",
"projectHostName": "GitHub",
"projectLink": "http://github.com"
"sourceName": "GitHub",
"sourceLink": "http://github.com"
},
{
"title": "Project 2",
Expand All @@ -23,8 +23,8 @@
"collaborators": "",
"descriptiveTitle": "A project that does something",
"reason": "This project was created to solve a problem.",
"projectHostName": "GitHub",
"projectLink": "http://github.com"
"sourceName": "GitHub",
"sourceLink": "http://github.com"
}
]
}
128 changes: 61 additions & 67 deletions website/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,101 +4,95 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zulius Roolf</title>
<link rel="icon" href="favicon.svg">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<link rel="preload" href="content/biography.json" as="fetch" type="application/json" crossorigin="anonymous">
<link rel="preload" href="content/portfolio.json" as="fetch" type="application/json" crossorigin="anonymous">
<link rel="preload" href="content/experience.json" as="fetch" type="application/json" crossorigin="anonymous">

<title>My Portfolio</title>
<link rel="icon" href="favicon.svg">
</head>

<body>
<div class="container">
<div class="main">

<!-- Biography -->
<div class="column" id="biography">
<div class="biography-container">
<div class="profile-picture">
<img src="favicon.svg" alt="Profile Picture" height="128">
<div class="main__column">
<div class="biography" id="biography__template">
<div class="biography__picture">
<img src="" alt="Profile Picture" height="128">
</div>
<div class="profile-introduction">
<span id="name">Zulius Roolf</span>,
<div class="biography__introduction introduction">
<span class="introduction__name">Zulius Roolf</span>,
<br>
<span id="profession">software engineer student</span>
at
<span id="company">BTH</span>
<span class="introduction__profession">software engineer student</span>
<span id="if__introduction__workplace">
at
<a class="introduction__workplace" href="https://www.bth.se/eng/">BTH</a>
</span>
</div>
<div class="profile-links">
<a class="link-column" href="https://github.com/">
<img src="content\icons\github.svg" alt="GitHub" height="64">
</a>
<a class="link-column" href="https://apple.com/">
<img src="content\icons\apple.svg" alt="Apple" height="64">
</a>
<div class="biography__links">
<a class="biography__link" href="#" id="if__biography__about">About</a>
<a class="biography__link" href="https://github.com/ZuliusRoolf">GitHub</a>
</div>
<div class="profile-information">
Hello! <br> Seems like JavaScript was unable to load the content of this website.
The information is stored in a <a href="content/biography.json">JSON file</a> for the JavaScript to load.
You can either refresh or click the GitHub icon above to see the source code.
<div class="biography__about">
Hello! <br> Seems like JavaScript was unable to load the content of this website. <br>
The information is stored in JSON files located <a href="content/">here</a> for the JavaScript to load. <br>
You can either refresh to try again or click <a href="https://github.com/ZuliusRoolf/website">here</a> to see
the source code.
</div>
</div>
</div>

<!-- Portfolio -->
<div class="column" id="portfolio">
<div class="collection-list">
<div role="list">
<div role="listitem" class="portfolio-item">
<div class="portfolio-title navbutton">
<div class="title">Portfolio Website</div>
<div class="year">2024</div>
<div class="main__column" id="portfolio">
<div class="portfolio">
<div class="portfolio__project project" id="portfolio__project__template">
<div class="project__button">
<div class="project__button__title">Portfolio Website</div>
<div class="project__button__year">2024</div>
</div>
<div class="project__detail detail">
<div class="detail__video">
<video>
<source src="content/portfolio-website.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="portfolio-content">
<div class="video">
<video>
<source src="content/portfolio-website.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="island">
<img src="content/icons/github.svg" height="16">
<text class="company">
GitHub
<span class="if-collaborators">· with</span>
<span class="collaborators">John Doe</span>
</text>
<div class="detail__contribution contribution">
<img class="contribution__company__logo" src="content/icons/github.svg" height="16">
<text class="contribution__company">GitHub</text>
<span id="if__contribution__collaborators">· with
<span class="contribution__collaborators">John Doe</span>
</span>
</div>
<div class="detail__description">
<div class="detail__description__title" style="font-weight: bold;">Creating Static Website from Scratch
</div>
<div class="text">
<div class="descriptive-title" style="font-weight: bold;">Creating Static Website from Scratch</div>
<div class="reason">Always had issues with web development.
I've tried React, Django, Vite, Node, Next, and anytime I try to build anything I get bugs I don't
understand.
Then attemting to debug code I don't understand is getting me nowhere.
To hopefully resolve this I decided to learn the basics and build a website with just HTML, CSS, and
JavaScript.
</div>
<a class="project-redirect" href="https://github.com/ZuliusRoolf/website">
View Project on GitHub
</a>
<div class="detail__description__text">Always had issues with web development.
I've tried React, Django, Vite, Node, Next, and anytime I try to build anything I get bugs I don't
understand.
Then attemting to debug code I don't understand is getting me nowhere.
To hopefully resolve this I decided to learn the basics and build a website with just HTML, CSS, and
JavaScript.
</div>
</div>
<a class="detail__redirect" href="https://github.com/ZuliusRoolf/website">
View Project on <span class="detail__source">GitHub</span>
</a>
</div>
</div>
</div>


<script>
fetchBiography();
fetchPortfolio();
</script>
</div>
</div>

<!-- Timeline -->
<div class="column" id="timeline">

<!-- Experience -->
<div class="main__column" id="experience">
</div>
</div>



<script src="script.js"></script>
</body>

</html>
Loading

0 comments on commit 3498ce9

Please sign in to comment.