TJH Puunkaato ja metsänhoitopalvelut
Company Website Version 2.0
Update

Introduction

This is update for my first project that I did for my entrepreneur friend. The idea behind the update was to make the site more interactive using JavaScript and to use the new skills I have learned.

To view the site, click on the logo or click on this link.

Tools

While working, I used the MacOs system, wrote code in the Visual Studio Code program. The programming languages HTML, CSS and JavaScript were used in this project. For processing photos and pictures I used Photshop program. In this project, I used the Bash console, in it I used Git to make commits, Node.js to check the work of JavaScript codes, and also to publish the site on GitHub. And used Google Chrome Dev Tools, to test the site's performance.

Process

At the very beginning, before I started working to add interactivity, I made adjustments to the style, removing the table of contents, removing icons, as well as the social media section. Also small adjustments like changing colors and positions.

After that, I started working with buttons and links, since in the previous version there were problems, when user hovered over a button or link, the content around it also moved, which did not look very professional. There was also a problem, when user clicked on a button or link, the styles changed and remained in this form until you reloaded the page. All problems were resolved during the update.

After that I started writing scripts for interactivity

JS Script | Element-swap

About Script

A script that changes one element to another element within 10 seconds, the switching occurs smoothly within 2 seconds. This code used the idea of having one element on top of a second element, which could be achieved by using display: grid and adding grid-row: 1 and grid-column: 1 to both elements.

I used this script for bookTimeSection in the mobile version, every 10 seconds the companyShortDescription class changes to the companyLargeDescription class

JS Script | Slideshow

About Script

A script that makes slides from elements. This code uses 4 Divs, 4 Headers, 4 Text Lines, and 4 Dot Triggers. Using triggers you can switch between 4 slides. Also added to the code a timer that swaps through the slides every 10 seconds. Has also been added a script that changes slides using swipe to left or right with finger on the mobile version. When manually switching a slide by pressing the trigger or swiping with your finger, the timer resets for 10 seconds. After the last slide, the script returns the slide to the first and swapping continues.

This script I used for a jobSection, desktop version is left/right and mobile version top/bottom

JS Script | Scrolling-page

About Script

A script that has a button that, when pressed, starts scrolling the page until a certain element appears in visibility, the scrolling stops when the element is fully visible.

I used this script for buttons that go to contactSection

JS Script | Emerging-element

About Script

A script that, while scrolling the page when it notices a certain ID, uses Opacity for 2 seconds to make the element smoothly visible, and also when scrolling the page, when a certain ID disappears from the view, using Opacity for 2 seconds makes the element smoothly invisible.

I used this script for contactSection and bookTimeSection

Outcome

The site owner and I were very satisfied. After the update, the site is more lively and more practical.

To compare, here is website before update, and here is website after update.

7.11.2023

iNalsur Portfolio Website

Introduction

This is the site you are currently on, for me it was the first project where I used JavaScript, Node.js, Git, GitHub and Bash. During the studying, I had to make a portfolio project and use in it all the skills that I learned during the studying.

Tools

While working, I used the MacOs system, wrote code in the Visual Studio Code program. The programming languages HTML, CSS and JavaScript were used in this project. For processing photos and pictures I used Photshop program. In this project, I used the Bash console, in it I used Git to make commits, Node.js to check the work of JavaScript codes, and also to publish the site on GitHub. And used Google Chrome Dev Tools, to test the site's performance.

Process

To begin with, I drew wireframes, this wasn't hard for me, because for many months I have been imagining what my portfolio site would look like.

The site was made with a simple scheme, first I assembled the bones, added style to them, then added movement to the site using CSS and JavaScript, and at the end proceeded to adjust/corrections.

The site is made simply, it consists of one page, the page has a sections of navigation and content. The site consists of 4 sectors, about me, projects, blog and contacts. At the very beginning, the sector “about” is activated, if the user moves to another sector, then the activated sector disappears, this was done using the JavaScript [onclick] method. In different sectors there are buttons that redirect to other sectors, there are buttons that direct to other sites (social media, projects) and a button through which you can send an email to the site owner. When clicking on a project in the blog sector, a back button will appear that will be glued to the user's screen so that the user can return to the blog sector anywhere on the screen. The site has a different look, when the screen is compressed, for example, when compressing in which the words in the navigator no longer fit, the words disappear and a navigation button appears, it is glued to the screen position, when you click on it, a menu will open where you can find buttons with special sectors. The menu is closed if the user presses the button to close the menu or if the user enters another sector. The [.getElementById] functions were used for the buttons and the [onclick] activator was used to make them work. Also in the projects menu, if the user swipes over the project logo, the logo will be replaced by another logo with changed colours, this was also done using [.getElementById] and the activator [onmouseover, onmouseout].

A lot of different things have also been added to the head, for example, when sharing a site on a smartphone, the link will have important fact-finding information like a photo, a mini-text about the company. Also, the site has a theme color and an icon working on the iOS platform, etc.

At the end, the site was published on GitHub, you can see the content and commits by clicking on the link.

Outcome

I was very satisfied with the site, it turned out to be the way I imagined it, I got a lot of experience and continued my education.

19.07.2023

TJH Puunkaato ja metsänhoitopalvelut
Company Website

Introduction

This is my first big project that I did for my entrepreneur friend. During my studying in Codecademy, I needed to make a project called “Company Home Page” using the Flexbox method to understand how the site changes when the screen is resized.

During the task, I could use a fictitious company, but I preferred to do a project for an existing company, as this would help me gain experience with working with a client as well.

To view the site, click on this link.

Tools

While working, I used the MacOs system, wrote code in the Visual Studio Code program. The programming languages HTML and CSS were used in this project. For processing photos and pictures I used Photshop and WebP Converter. For the first release, I used GitHub, unfortunately at that moment I was not familiar with the work of Git, because of this I did not use commits. Using Google Chrome Dev Tools, I tested the site's performance.

Process

After I discussed the details with a friend/client, I got to work.

I first drew the wireframes and after that discussed it again with a friend/client, after we were satisfied I got to work writing the site.

The site is made simply, it consists of one page, the page has a sections of navigation, content and footer. The site consists of 3 sectors, introduction with the company, introduction with the work and contact information. Also in different sectors there are buttons that redirect the user to special sectors on the website, there are also buttons that redirect to other sites (social media), a button through which you can immediately call the entrepreneur, and also a button through which you can immediately send an email message to the entrepreneur. The site has a different look, when the screen is resized, for example, on a tablet, the words in the navigation disappear and icons appear instead, the long name of the company becomes short. In the sector with introduction with the company, the photo on the left side goes to the center, and the text on the right side lies on the photo, and for the phone version, a lot of things change as well. For this, was used the code in CSS [@media only screen and…].

A lot of different things have also been added to the head, for example, when sharing a site on a smartphone, the link will have important fact-finding information like a photo, a mini-text about the company. Also, the site has a theme color and an icon for home screen on the iOS platform, etc.

At the end, the site was shown to a friend / client, after which we found a hosting hotel together, a friend bought a domain address and I helped him set up the site to work on his own domain (this was my first experience).

Outcome

A friend/client and I were satisfied with the result, I got a lot of experience and continued studying.

12.10.2022