professor-oats / Websites

Different websites made by me

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Websites

Different websites made by me.

How-to

To view them just update the path in the header of .html file and then open in your Browser.

ReferralGreece

!!! Disclaimer: Comments in .css are kept from the learning and development stage. Porque perezoso. !!!

Website I created as a landing page when I worked as Sales Agent for Customer's Service in Crete. The company I worked for announced bonuses for personnel acting as 'referrers' to their recruiters.

This was originally done within two weeks on par with working full time. The original version was functional and worked well apart from one visual issue where mobile users experienced red background to the text in the ulist content.

I used the landing page when marketing through Facebook to have people from any European countries apply through me so I would in turn refer them directly to the recruiters. This was a very efficient way to do it until I mismarketed in a post on Facebook and got flagged as 'spam'/'untrusted'.

For this website I picked Namecheap as host providers to save development time, and also because of their cheap prices and great support.

As of now I revisited the 'code' and gave it proper touches. I kind of believe I fixed the visual issue at one point and I also did some other tidying of functionally. I put an updated log about it and now it's a fully operational landing page without any issues. There may be some Browser related compatibility uncalled for issues that still may are yet to be found.

Code is up-to-date modern and still have a lot of improvement for SEO when in want. It shall be somewhat A11y compliant in its current form.

Working in Firefox and Microsoft Edge without issues.

What I learnt

As first functioning hosted website I learnt on how to do simple Javascripting to control the Dom and I learnt about hired hosting environments, in this case Namecheap. As putting this up on Git much time later I have forgotten about the specific key challenges. I started to learn about the importance of A11y and to keep websites 'clean coded' to up the SEO.

Platanas

This is the first website made as a part of the Responsive Web Design courses on FCC. It is supposed to be a simple form without any other functions than pure cosmetics. Useful as a starting point for registering of membership.

What I learnt

Mainly using different hacks for CSS cosmetics and to make a roller to cover a website as well as switching background images on different conditions. During the process I have also went through what it takes to do private hosting so have learnt the basics of nginx and to run it in one of my jails on FreeBSD and updated so the website runs on a local network.

LandingConnect

This is the exercise in creating a landing page with a navbar, a video and some pricing plan options under FCC Responsive Web Design.

What I learnt

Gotten better to structure website with sections. I also put all necessary elements wanted in a header - in the header, and I had some fun playing with the display:flex; styling and using a lot of percent-based spacing - which naturals responsiveness. Did some puzzling to get the transform properties done in JS and to have the transform being applied correctly.

Stable media queries and also made a conditional breakpoint for JS to change the habits depending on the viewport size.

I also learnt on how some elements fixed widths or heights can make it so the body stops occupying 100 % of viewport in favor/strictness related to the fixed widths or heights of children.

Overall the tidiest and most structured code so far.

Tribute

This is the local version of the ffc exercise to make a tribute page. I used my sublime humour as always to do something less serious. For this assignment I wanted to practice animating pictures and experimenting with them overlapping with different animations and change it mid run. Worked out some great solutions.

It was little tricky getting the delays working properly for the animation and I had some tinkering to do the flex proper to fit the images to the grid.

For the long run I'd like to add some snow, and/or atleast colorswitches/inverting and also add some music to it. For the short term this is proper enough.

What I learnt

Practicing animations of images with keyframes. I made good use of opacity 0 -> 1 to show the pictures overlapping through the Javascript. Made a simple delay function and did 4 different animation running.

Got the idea that instead of buffering all the images from the start we could be more clean and add them with scripts but for simplicity it works well in this case.

TechnicalDoc

This is an instructional website in how to easily make your own website with HTML/CSS. I focused on having it clean and simple and it has a very neat and retro style over it.

What I learnt

First instructional guide written, ever, so it was a nice experience in putting effort providing structure and basic knowledge for others. Thankfully this made me repeat some knowledge of basic HTML/CSS and I followed the assignment in using sections HTML5 accordingly. I practiced different ways of showing text within < pre >< code >< /code >< /pre > tags and got to know the good uses of overflow:. Very straightforward and clean experience.

SimpleZombie

Just a simple splash page to use for the funz

What I learnt

Played around with new usage of doing linear gradients to form a kind of brickwall effect. Set the foundation for doing animation switching the color over the text.

PacMan

PacMan is a Javascript app that uses the canvas to create a simple PacMan game. This is a part of following a tutorial by Coding With Adam on YouTube. Usage of this can be either standalone or be applied as is as script to any website.

What I learnt

I refined some knowledge about game programming and started to get in first contact with having a gameloop and making plots/draws on canvas through it. The knowledge gained will be very helpful with other active rendering projects where a gameloop will be implemented as well. Got more knowledge about creating constants in Javascript and some good uses of lambda functions. Learnt about how to make private functions to a class using '#'.

Futhermore knowledge in how to arrange and regard tiles on the canvas.

About

Different websites made by me


Languages

Language:HTML 41.0%Language:TypeScript 29.1%Language:CSS 18.6%Language:JavaScript 10.7%Language:Sass 0.5%Language:Python 0.1%