diff --git a/JOURNAL.md b/JOURNAL.md index 61a87ed..d3c49be 100644 --- a/JOURNAL.md +++ b/JOURNAL.md @@ -12,7 +12,6 @@ This is a quick journal on how I develop this website. It will be used for docum - [July 14](#july-14) - [Playing around](#playing-around) - [July 15](#july-15) - - [Today's To-Do List](#todays-to-do-list) - [GitHub Pages using GitHub Actions](#github-pages-using-github-actions) - [CSS](#css) - [JavaScript](#javascript) @@ -20,6 +19,13 @@ This is a quick journal on how I develop this website. It will be used for docum - [Some small things I've learned](#some-small-things-ive-learned) - [JSON Content Structure](#json-content-structure) - [Reflection](#reflection) + - [July 16](#july-16) + - [Biography Template](#biography-template) + - [Graphical Assets are Difficult](#graphical-assets-are-difficult) + - [Git Cherry Pick Tangent](#git-cherry-pick-tangent) + - [July 19](#july-19) + - [Portfolio UI](#portfolio-ui) + - [JSON creation](#json-creation) ## July 13 @@ -76,8 +82,6 @@ While I'm committing my work so far, I wanted to take the opportunity and see if ## July 15 -### Today's To-Do List - - [x] Setup GitHub actions to work with static builds - [x] Reach step 1.4 in the website curriculum - [ ] Reach step 1.16 in the website curriculum @@ -88,14 +92,14 @@ While I'm committing my work so far, I wanted to take the opportunity and see if Finally, did it! GitHub Actions now successfully publish a static website to [zulius.me](https://zulius.me) correctly. -I find it fascinating that it is so difficult to find resources on this kind of matter. If I search for "GitHub pages HTML action" on Google I get [peaceiris' action](https://github.com/peaceiris/actions-gh-pages) for github pages. That is not the one I am using. I use the official static website action provided by GitHub, but I can't find a link for it as they are only accessable through `github.com///actions/new`. +I find it fascinating that it is so difficult to find resources on this kind of matter. If I search for "GitHub pages HTML action" on Google I get [peaceiris' action](https://github.com/peaceiris/actions-gh-pages) for GitHub pages. That is not the one I am using. I use the official static website action provided by GitHub, but I can't find a link for it as they are only accessible through `github.com///actions/new`. I also took the opportunity to add a grammatical linter for my markdown files. Because, I noticed some grammatical errors and wished to get them corrected for me instead of manually skimming through. ### CSS -I can already tell by the deceptible huge amount of functionality CSS brings with Attribute and Pseudo-Classes Selectors that it will be very easy to confuse how CSS works. +I can already tell by the deceptively huge amount of functionality CSS brings with Attribute and Pseudo-Classes Selectors that it will be very easy to confuse how CSS works. Overall I think classes is the way to go when it comes to CSS, it is not often you want a singular element for style using ID Selector. @@ -105,7 +109,7 @@ I found out that IDs of HTML elements is more used for scripts rather than CSS. The difference between `var` and `let` is subtle. What I understand so is `let` a more restricted `var`, if it is in a block it will be restricted while `var` would keep a value after a block ends (except for functions). I should probably just use var to make it simple. -Comparison Operators have been a bit confusing for me as JavaScript has triple `===` operator. I now finally understand what it means as the triple `===` is strict and is a regular double `==` in many other languages. The difference is that double `==` in JavaScript means the language automatically performs type conversion. In other words I can see if the integer `5` is equal to the string `"5"`, e.g. `5 == "5";` results in `true`. What I should keep in mind is that this applies to `0 == false` as well, meaning bolean is not represented as an int like the C languages does. +Comparison Operators have been a bit confusing for me as JavaScript has triple `===` operator. I now finally understand what it means as the triple `===` is strict and is a regular double `==` in many other languages. The difference is that double `==` in JavaScript means the language automatically performs type conversion. In other words I can see if the integer `5` is equal to the string `"5"`, e.g. `5 == "5";` results in `true`. What I should keep in mind is that this applies to `0 == false` as well, meaning Boolean is not represented as an int like the C languages does. Arrays are more linked list types. `pop()` & `push()` and `shift()` & `unshift()` removes and adds elements from the back and front respectively. @@ -113,7 +117,7 @@ Objects are python dictionaries, they work the same, support both period and str #### DOM Modification -You can retrive and edit HTML and CSS elements using these following fucntions: +You can retrieve and edit HTML and CSS elements using these following functions: ```js let element = document.getElementById("myId"); @@ -142,9 +146,9 @@ When you add an alt text for an image in HTML, like this `` element. It can load, but it is not stylable by CSS afterwards. + +The solution I came up with is to take the defined icon path in the JSON, open the SVG file and then copy its contents to the appropriate HTML element. + +The proposed solution has not been implemented yet. Did not have enough time until my laundry was due. +Anyway, I am also a bit torn over the biography description as it can easily overwhelm the visitor. [Seyit Yilmaz](https://www.seyityilmaz.com/) designed his portfolio to be as clean as possible, using the principle of "show, don't tell". I feel a bit like an over-explainer, so perhaps I should avoid information as much as possible. I could potentially show more information if the user clicked "About" or a "Show more..." button, so that the very least it is hidden when you first visit the site. That sounds like a good idea. + +### Git Cherry Pick Tangent + +I got annoyed that my current profile picture in the HTML template is just my logo. The logo is good now, but I want a professional photo when the website gets deployed. An image has already been uploaded to the git, on commit 9a0ce500 specifically. I wondered how to go back in history and get the `cv-picture.jpg` back without re-uploading. + +Today I found out that you can cherry-pick commits into your branch and just get the changes. This is a very nice feature of git I never knew existed nor how it could be done. I will keep this in mind when creating commits, as every commit should be a complete feature so that you can remove and add features easily. Very cool. + +## July 19 + +- [x] Cleanup Biography Template +- [x] Portfolio Template +- [ ] JavaScript convert JSON to HTML +- [ ] Upload 2 videos to portfolio (hopefully) +- [ ] Reach step 1.10 in Mr. Ranedeer website curriculum + +### Portfolio UI + +I am not too sure how to make the portfolio UI. I thought about a way to maybe make clickable links to redirect to the source code. The mobile UI always ruins my ideas though, unfortunately. At the same time; I also need to get myself together that this is a showcase of my work. + +The reason I am so worried about clickable links is to be able to showcase the entire project. One example is my high school graduation documentary. It is already a video to begin with, so I could just embed the entire YouTube video instead. + +A solution could be that you can in fact click on the portfolio items and they "open up" or rather persist after the mouse stopped hovering. This would also be easy to integrate into mobile view because they already click on the items. + +An extension to the idea would be to show the descriptive text only when the user clicks on the portfolio item. Hover will still be in effect for the other portfolio items, but the selected portfolio item will persist. Essentially it will replace the Biography section until the user clicks 'x' in the upper right corner. + +### JSON creation + +I made [JSON content structure](#json-content-structure) on the 15 of July. I'll use that to make templates for both Biography and Portfolio. diff --git a/website/content/biography.json b/website/content/biography.json new file mode 100644 index 0000000..cd2e578 --- /dev/null +++ b/website/content/biography.json @@ -0,0 +1,24 @@ +{ + "portrait": "URL_to_portrait_image", + "name": "Zulius Roolf", + "title": "Software Engineer Student", + "workplace": "BTH", + "links": [ + { + "name": "LinkedIn", + "link": "https://www.linkedin.com/in/johndoe", + "icon": "linkedin" + }, + { + "name": "Twitter", + "link": "https://twitter.com/johndoe", + "icon": "twitter" + }, + { + "name": "GitHub", + "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." +} \ No newline at end of file diff --git a/website/content/icons/github.svg b/website/content/icons/github.svg new file mode 100644 index 0000000..cb58bb4 --- /dev/null +++ b/website/content/icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/portfolio.json b/website/content/portfolio.json similarity index 100% rename from website/portfolio.json rename to website/content/portfolio.json diff --git a/website/index.html b/website/index.html index af59664..3ed4f92 100644 --- a/website/index.html +++ b/website/index.html @@ -1,57 +1,99 @@ + - - - Zulius Roolf - - + + + Zulius Roolf + + + + -

My Portfolio

-
- - +
+ + +
+
+
+ Profile Picture +
+
+ Zulius Roolf, +
+ software engineer student + at + BTH +
+
+ + GitHub + +
+
+ Hello!
Seems like JavaScript was unable to load the content of this website. + The information is stored in a JSON file for the JavaScript to load. + You can either refresh or click the GitHub icon above to see the source code. +
+
+
+ + +
+
+
+
+
+
Portfolio Website
+
2024
+
+
+
+ +
+
+ + GitHub + ยท with + John Doe + +
+
+
Creating Static Website from Scratch
+
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. +
+ + View Project on GitHub + +
+
+
+
+
+ + + +
+ + +
+ +
+
+ + + - + + \ No newline at end of file diff --git a/website/script.js b/website/script.js index 6ef4625..b5f152c 100644 --- a/website/script.js +++ b/website/script.js @@ -1,8 +1,42 @@ -function changeContent() { - document.getElementById("title").textContent = "Hello, JavaScript!"; - document.querySelector(".content").innerHTML = "This paragraph has been changed."; -} - -function toggleHighlight() { - document.getElementById("title").classList.toggle("highlight"); -} +function fetchPortfolio() { + // Fetch the JSON data + fetch('content/portfolio.json') + .then(response => response.json()) + .then(data => { + const portfolioContainer = document.getElementById('portfolio'); + + // Iterate over the portfolio items and create HTML elements + data.portfolio.forEach(item => { + const portfolioItem = document.createElement('div'); + portfolioItem.classList.add('portfolio-item'); + + const title = document.createElement('h2'); + title.textContent = item.title; + portfolioItem.appendChild(title); + + const date = document.createElement('p'); + date.textContent = `Date: ${item.date}`; + portfolioItem.appendChild(date); + + const description = document.createElement('p'); + description.textContent = item.description; + portfolioItem.appendChild(description); + + const technologies = document.createElement('ul'); + item.technologies.forEach(tech => { + const techItem = document.createElement('li'); + techItem.textContent = tech; + technologies.appendChild(techItem); + }); + portfolioItem.appendChild(technologies); + + const link = document.createElement('a'); + link.href = item.link; + link.textContent = 'View Project'; + portfolioItem.appendChild(link); + + portfolioContainer.appendChild(portfolioItem); + }); + }) + .catch(error => console.error('Error fetching the JSON data:', error)); +} \ No newline at end of file diff --git a/website/styles.css b/website/styles.css index b3a4cf7..583e8bb 100644 --- a/website/styles.css +++ b/website/styles.css @@ -1,16 +1,80 @@ - .portfolio-item { border: 1px solid #ccc; padding: 10px; margin: 10px 0; + max-width: 300px; } + .portfolio-item h2 { margin: 0; } + .portfolio-item p { margin: 5px 0; } + .portfolio-item ul { list-style-type: none; padding: 0; +} + +.icon { + width: 100%; + height: 100%; + align-self: center; + object-fit: contain; +} + +.container { + display: flex; +} + +#portfolio { + order: 1; +} + + +#biography { + order: 2; +} + +#timeline { + order: 3; +} + +#biography .profile-links { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 20px; +} + +#biography .profile-links a { + background-color: #007bff; + /* Background color of the button */ + fill: #ffffff; + /* Color of the SVG icon */ + border: none; + border-radius: 50%; + /* Makes the button circular */ + width: 60px; + /* Adjust size as needed */ + height: 60px; + /* Adjust size as needed */ + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + /* Adds space around the SVG */ + cursor: pointer; +} + +#biography .profile-links a:hover { + background: #149ddd; + color: #fff; + text-decoration: none; +} + +#biography .profile-information { + max-width: 300px; } \ No newline at end of file