Merge branch 'template' into personal

README.md

@@ -1,6 +1,51 @@
-# Portfolio Website
+# Portfolio Template (Instructions NOT Validated)
+
+This template is designed to showcase your projects in the form of a portfolio. It features two main sections: a biography container and a portfolio container. The biography container displays your photo, name, profession, social links, and a short bio. The portfolio container provides a list of projects with dates. Clicking on a project reveals more details, such as an image or video, contributors, a description, and a link to more details.
+
+---
+
+## Features
+
+- **Biography Section**: Share your personal information with a professional touch.
+- **Portfolio Section**: Highlight your projects interactively with descriptions and media.
+
+## Prerequisites
+
+This template is hosted on GitHub Pages, so the only requirement is a GitHub account.
+
+## Installation Instructions
+
+1. **Clone the Template Repository**:
+   - Navigate to the template repository on GitHub.
+   - Click the **"Use this template"** button (visible when signed in to GitHub).
+   - Follow the prompts to create a new repository based on this template.
+
+2. **Set Up GitHub Pages**:
+   - Go to your repository’s **Settings**.
+   - Under **Pages**, configure GitHub Pages to use the `main` branch (or your preferred branch).
+   - Enable GitHub Actions if necessary.
+
+## Usage Instructions
+
+1. **Host the Portfolio**:
+   - After setting up GitHub Pages, your portfolio will be live at `https://<your-username>.github.io/<repository-name>/`.
+
+2. **Customize Your Portfolio**:
+   - Switch to the `personal` branch.
+   - Edit the following files:
+     - `website/content/biography.json`: Update this file with your personal details, such as your name, photo, bio, and social links.
+     - `website/content/portfolio.json`: Add or update your projects, including names, dates, media (images or videos), contributors, descriptions, and links.
+   - Push your changes to the repository. The portfolio will automatically update via GitHub Actions.
+
+## License
+
+This template is distributed under the MIT License. This permissive license allows you to use, modify, and distribute the template freely.
 
 ## Shoutouts
 
 - [Seyit Yilmaz](https://www.seyityilmaz.com/) for being such an amazing UX designer and creating the inspiration source for my implementation.
 - [Loading Artist](https://loadingartist.com/) for making the duck animation available on [giphy.com](https://giphy.com/stickers/happy-dance-cartoon-NdfUg7dmNlUOafGeW0).
+
+## Creator's Commentary
+
+For more information check out the [personal branch from the creator](https://github.com/ZuliusRoolf/portfolio-template/tree/personal). There is a [development journal](https://github.com/ZuliusRoolf/portfolio-template/blob/personal/JOURNAL.md) with documentation throughout the design process.

website/content/biography.json

@@ -2,6 +2,7 @@
   "portrait": "content/photos/portrait_template.png",
   "name": "Zulius Roolf",
   "profession": "Software Engineer Student",
+  "workplacePreface": "at",
   "workplace": "BTH",
   "workplaceLink": "http://bth.se/eng",
   "about": "I am a Jack of all trades with strong proficency in the art of software development.\nThis website has been created to track and showcase the different projects I have worked on over the years.\nI am always looking for new opportunities to learn and grow as a developer.",

website/content/portfolio.json

@@ -1,5 +1,6 @@
 {
   "lastModified": "Dec 2024",
+  "defaultPreloadImage": "content/graphic_assets/fetching_video.gif",
   "portfolio": [
     {
       "title": "Website",

website/index.html

@@ -21,10 +21,10 @@
         <div class="biography__introduction introduction">
           <span class="introduction__name">Zulius Roolf</span>,
           <br>
-          <span class="introduction__profession">software engineer student</span>
+          <span class="introduction__profession">template creator</span>
           <span id="if__introduction__workplace">
-            at
-            <a class="introduction__workplace" href="https://www.bth.se/eng/" target="_blank">BTH</a>
+            <span class="introduction__workplace__preface">at</span>
+            <a class="introduction__workplace" href="https://github.com/ZuliusRoolf/portfolio-template" target="_blank">GitHub</a>
           </span>
         </div>
         <div class="biography__social">
@@ -34,15 +34,15 @@
         <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/" target="_blank">here</a> for the JavaScript to load. <br>
-          You can either refresh to try again or click <a href="https://github.com/ZuliusRoolf/website" target="_blank">here</a> to see
+          You can either refresh to try again or click <a href="https://github.com/ZuliusRoolf/portfolio-template" target="_blank">here</a> to see
           the source code.
         </div>
       </div>
       <div class="project__container hide" id="deselect__project__container">
         <!--  -->
       </div>
       <div class="project__container" id="select__project__container">
-        <img src="content/icons/back_button.svg" loading="lazy" alt="Close button" id="close__project__button" height="48">
+        <img src="content/graphic_assets/back_button.svg" loading="lazy" alt="Close button" id="close__project__button" height="48">
       </div>
       <div class="project__container" id="hover__project__container">
         <!--  -->
@@ -56,7 +56,7 @@
           <div class="portfolio__project" id="project0">
             <div class="project__content__hover">
               <div class="project__video">
-                <video class="video" preload="preload" loop="loop" muted="muted" playsinline="playsinline" poster="content/graphic_assets/happy_dance_sticker_4_3_background_by_loading_artist.gif">
+                <video class="video" preload="preload" loop="loop" muted="muted" playsinline="playsinline" poster="content/graphic_assets/fetching_video.gif">
                   <source src="" type="video/mp4">
                   Your browser does not support the video tag.
                 </video>
@@ -66,7 +66,7 @@
                 <span class="project__contribution__company">GitHub</span>
                 <div id="if__project__contribution__collaborators">
                   <span class="project__contribution__collaborators__seperator">·</span><span>with</span>
-                  <span class="project__contribution__collaborators">Mr. Ranedeer</span>
+                  <span class="project__contribution__collaborators">Zulius' Template</span>
                 </div>
               </div>
             </div>
@@ -78,7 +78,7 @@
                 The template uses JSON files, which makes it simple to maintain and easy to update.
               </div>
               <div class="project__redirect__container">
-                <a class="project__redirect" href="https://github.com/ZuliusRoolf/website" target="_blank" data="View Template on GitHub"></a>
+                <a class="project__redirect" href="https://github.com/ZuliusRoolf/portfolio-template" target="_blank" data="View Template on GitHub"></a>
               </div>
             </div>
           </div>

website/scripts/load_content.js

@@ -14,6 +14,7 @@ export function populateBiography(document) {
 
             //Workplace
             if (biography.workplace !== '') {
+                template.querySelector('.introduction__workplace__preface').textContent = biography.workplacePreface;
                 template.querySelector('.introduction__workplace').textContent = biography.workplace;
                 template.querySelector('.introduction__workplace').href = biography.workplaceLink;
             }
@@ -49,6 +50,9 @@ export function populatePortfolio(document) {
             const portfolioContainer = document.getElementById('portfolio__container');
             const projects = document.getElementById('projects');
 
+            if (data.defaultPreloadImage !== '')
+                projects.querySelector('#project0 .project__video video').poster = data.defaultPreloadImage;
+
             //Portfolio Projects
             data.portfolio.forEach(project => {
                 var index = projects.childElementCount;
@@ -59,7 +63,7 @@ export function populatePortfolio(document) {
                 button.querySelector('.project__button__title').textContent = project.title;
                 button.querySelector('.project__button__year').textContent = project.year;
                 portfolioContainer.appendChild(button);
-
+                
                 const template = projects.querySelector('#project0').cloneNode(true);
                 template.setAttribute('id', 'project' + index);
                 template.querySelector('.project__video video source').src = project.video;
@@ -94,10 +98,10 @@ export function populatePortfolio(document) {
         });
 };
 
-export function populateExperience(document) {
-    fetch('content/experience.json')
-        .then(response => response.json())
-        .then(data => {
+// export function populateExperience(document) {
+//     fetch('content/experience.json')
+//         .then(response => response.json())
+//         .then(data => {
 
-        });
-};
+//         });
+// };

website/styles.css

@@ -290,13 +290,13 @@ body {
 }
 @media (min-width: 768px) {
     .video {
-        box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
     }
     .project__video {
         padding: 0px;
     }
     .portfolio__project {
-        overflow: visible;
+        overflow: scroll;
         scrollbar-width: none;
     }
 }