Hello, my name is Andras Egyed
I'm a
I am a self-trained web developer with a growing repertoire of projects ranging from
beginner to advanced level. I am ambitious to put my skills into the field in a junior
web developer role where I can support high-end web and app solutions, bring in my
strong drive to push through challenges, and grow my knowledge in a team of experts.
On this site, you will find details about me and all my work and expertise.
![profile-pic](images/me.webp)
![profile-pic](images/me2.webp)
About Me
I'm Andras Egyed a Web Developer
Throughout the last four years, besides my full-time job, my daily routine contained a dedicated slot of self-training and practicing web development. Now I have the knowledge, project-based practice, and confidence to set foot in the field of web development as a junior developer.
HTML / CSS / BOOTP
JS
REACT
REDUX / RTK
REACT - NATIVE
Experience
2023 - Present
Rota Coordinator
In my current role, I am managing and monitoring the company's complex rota system. This covers a wide range of responsibilities, including the coordination of the GP and ANP appointment rota up to 500 clinicans, liaising with the patient experience team and HR to further optimise processes, managing teams and supporting short- and mid-term action plans, as well as handling the service level agreement to ensure compliance. For all tasks, I am using different management tools, predominantly Quinyx, Dynamics, Jira, Power BI, and a complex Miro board for team leadership.
2021 - 2023
Deputy manager / Care Coordinator
As a Deputy Manager, I was overseeing the daily and long-term business, being responsible for the maintenance of a consistent quality in the care & service support delivered to clients whilst staying aligned with business objectives and economical consistency. My daily tasks range from monitoring and analysing workflow and client satisfaction, handling all internal CRM and workflow systems using a combination of PASS and Staffplan.
2020 - Present
Care Coordinator
As a next step in my career at Caremark, I transitioned into a Care Coordinator role, focusing planning and organizing the daily business, handling digital record of all workstreams, employees and clients, and ensuring compliance with all internally used systems and implemented procedures. Besides this, I supported the senior management with reports around budget allocation, staff development and client growth.
2018 - 2019
Field Care Supervisor
I started at Caremark as a Field Care Supervisor. In this position I was mainly responsible for monitoring and supervising the Care workers in the field, but I also took over a mentoring function to support workers in daily business challenges or general development. Another essential part of my work scope was running trainings and practical inductions to ensure the quality of work we provided as a business.
2012 - 2018
Various Positions
The decision and execution in moving to the United Kingdom came with multiple challenges, particularly in regards to language and transferable skills and education. So I set foot in this new country by trying a variety of generic service and logistical jobs, such as working as a shop assistant, gardener, support worker and many more.
2010 - 2011
School Teacher
My initial profession was teaching, inspired by my grandparents who were teachers themselves. I taught fifth and sixth graders in arts and crafting and helped them develop their creative skills. I was in a leading role in the organization and execution of school events, which covered idea collection, event preparation and management, supporting pupils in the different activities provided, security management, and more.
Education
2023-present
Studies
After finishing the Udemy Web Dev course, I started working on own projects to build up my practical expertise. I kicked off with a React project with a Firebase backend covering multiple authentication options, including OTP text confirmation, then transitioned to building this portfolio page, practicing CSS, JS selectors, and DOM-manipulation. I further enriched my scope by completing two fundamental courses on TypeScript and Redux, which then helped me create a calculator using React and RTK. Early this year, I finished my (so far) most complex project: a React native real-time chat app with authentication, user settings, and push notifications. Recently, I started working on my first client project, designing and optimising the website of a tattoo artist using React and integrating an automated booking system.
2022-2023
The Complete 2022 Web Development Bootcamp
This comprehensive course covers a strong range of tools and technologies. Front-end: HTML5, CSS3, Bootstrap4, Javascript ES6, DOM Manipulation, jQuery, Bash Command Line, Git, GitHub and Version Control. Back-end: Node.js, NPM, Express.js, EJS, REST APIs, Databases, SQL, MongoDB, React.js, React Hooks, GitHub Pages, Heroku, and MongoDB Atlas. See more
2019 - 2020
Managment & Leadership in Health Care (Level 5)
My ambition was to gain a higher qualification that would enable me to adequately manage not only teams, but also businesses. These 1.5 years were focussed on leadership and management within a health and social care setting. This qualification requires to demonstrate an in-depth understanding and effective practice in leadership and management for adult care services. This diploma can be used towards an CQC (Care Quality Commission) application which enables to work as a state qualified manager in health care.
2016 - 2017
Diploma in Health & Social Care (Level 3)
I went through this degree course for Senior positions to further develop in my career and to gather valuable additional knowledge in team leadership and team development. It educated me on subjects around Duty of Care, diversity and inclusion, communication, and safeguarding. It helped me to demonstrate occupational competence and enhance professional development in health care and business overall.
2005 - 2009
Primary Teacher BA
On my initial journey in becoming a teacher, I achieved this Bachelor in Primary Teaching with a focus on Pedagogy and Psychology. The credit-based course also included core subjects like Language, Mathematics, Science, RE, Humanities, Music, Design as well as Technology and Computing. This BA certifies me to teach any subject to children between 7 and 11 years old and Arts to teens between 11 and 13 years.
2004 - 2005
Mathematics and Informatics (2 semester)
I started studying mathematics and informatics based on my personal interest for these subjects and any logical tasks. However, during my year of studying at university, I realized that these subjects on a scientific level were too hard for me at the time and considered it not the profession for me to strive forward to.
Expertise
My experiences with coding languages, libraries and managers.
Within my training studies, I could accumulate practical and theoretical knowledge in various coding languages like HTML, CSS, Java Script and React which has given me a robust foundation to set foot in the industry of web development. I am now looking forward to building up on this and to work in a supportive team of experts who can help me develop and grow.
Contact
Do you have any questions?
Please feel free to contact me!
Send me an email!
I will get back to you as soon as possible.
Us-App
React Native chat app
After intensively studying React Native and watching countless hours of tutorials, I created this fully functional Android chat app using React Native Cli. Feel free to install it and try it out! Below the video, you will find the link for the apk-file, which you can install on your Android device (you will need to enable 3rd-party installation). You can also add me as a friend in the app and address any questions directly in a chat (search for user “egyeand”). As soon as the user clicks on the application icon, a splash screen welcomes them. While the animation of this screen takes place, there are many things happening in the background. Firstly, the app checks if the user has previously logged in; if so, it will be persistent. If either this is a first-time log-in or the user was logged out before, the user will be redirected to the login screen. User settings (theme and text size) saved on the device will be passed on to the application; if they were not set before, it will load with a default option. Once the user is logging in for the first time, the app captures a few essential data points (name, mail address, profile picture), which will then be used to create an entry in the database with the username set to the email address before the @ symbol. This will be passed onto the app; if the user has previously logged in, it will be present in the database, and we can capture a snapshot of the belonging details and serve it to the app. Later on, the database gets updated when we add friends or send messages. The user will also be subscribed to OneSignal services and logged into the OneSignals database in order to allow push notifications to be sent to them.
If you wish, you can read about this project more in detail on
Github
or in the apps about section, which you can also access without installing the application
here.
React-Redux-Calculator
React & Rtk Calculator with dynamic flow and other quirks.
After some studying in the realm of Redux and ReduxToolKit I decided to create my own project. Its using a combination of React useStates and Redux-Rtk for statemanagment. To upskill the project and combine it with advanced elements, I re-created the Windows calculator`s logic including having access to calculation history and having a dynamic flow of ongoing calculations. I also added theme & sound settings, and finally, to give it a unique touch, I upgraded the calculator with an own theme and design, also adding sound elements and motivating action hero GIFs that reference the one and only Chuck Norris via API integration.
Packages used:
![calc-example1](images/calc-example1.webp)
![calc-example2](images/calc-example2.webp)
![calc-example3](images/calc-example3.webp)
Portfolio
Dynamic webpage using only vanillaJS and CSS with Lazy-loading
Let me start with a DISCLAIMER before we dive in. This webpage is not solely built by me. I was searching for different animated web-designs that offer me valuable assets and functionalities to learn from. I found a very fascinating tutorial on YouTube that sparked my interest and that I considered a good fit for my goal in creating a functional, smooth but also elegant webpage (this). I wanted to learn more in-depth on how to use divs and classes more efficiently. By writing the code parallel I understood the structural and design aspects of the site, which I was so keen to learn. Once I finished, I started tailoring the site more to my needs and own ideas and added some extra features to it. This also makes one of the highest share in time I spent on a project. Although the site overall doesn't look very different to the original one, there are a lot more elements and features I brought to it. You can find a detailed report in the read more-section below.
Crud
Crud, Auth and Fire
I wanted to create a simple CRUD (create, read, update, delete) React App with a backend. Trying multiple options for this approach, I finally considered Firebase as the most feasible service for this. Once I had realized the project essentials, I wanted to experiment more and added an authentication feature to the project, aiming that only registered users can interact with the database. For this I used firebse authentication and also a context-provider & protected routes. When visitor arrives on the landing-site an object gets created and unless the authentication has taken place it won't let user go any further and gets redirected to login/register. In Firebase itself, I built the set up in a way that only registered users can manipulate the database. You can read about this project a lot more in details by going to the actual webAPP and click on the logo and read more. I wanted to keep this project as simple as possible. As an additional nuance, I am planning to add sessions (cookies) to the app and limiting content manipulation only to the user for their own content only. Please click the button below the video to see Crud.
Secrets
MongoDB, Node, Express with EJS
It was a barebone project using MongoDB in the back-end with simple crud operations and
EJS. I added an authentication feature and session cookies to the project (Express).
Users only can interact with their own content (secrets) but are able to read other
user's posts. Once a user has run through this authentication process, he/she will
remain logged in unless the cookie is expired, or the users exits the browser. You can
aslo read more in details at the about/read more section of the page. Overall, I am very
proud of the project outcome, in regard to how I successfully experimented with features
but also in regards to user engagement, seeing that quite a good number of “secrets”
have been shared after I posted the project link in a study group to share my
experience. You can find a very detailed report of the Secrets-Project in the read
more-section. To see Secrets please click the button below the video.
Deployed on Heroku's eco-dyno, please allow a few seconds wait for the server to
ramp up.
To-do list
A challenge with React
This started off as a coding-challenge during my studies. It was about creating a simple react-app where we practiced the correct use of props and the spread operator. I love using React, finally I have something that is instant and doesn't require refresh or redirect. That is the reason why, after completing the challenge, I wanted to take this further and have a back-end for it. The idea of CRUD started to appear to me and eventually this project was the base for it. This app has never been deployed, but with the help of embedding I'm still able to share it with you. Please click the button to see.
Blog
Basic operations using Node, Express, Ejs with MongoDB
This App was a coding-challenge and part of my studies on Udemy. After finishing it, it also served as a base to the Secrets App above. It uses EJS (Embedded JavaScript Templating). EJS let us embed JavaScript code into HTML. It can come very handy in many different ways: Firstly, it can reduce the repetition of the code. For example you have a website with 2-3 redirects to different sections of the page. You can simply write the header/footer or any other parts of the webpage only once and inject it to your HTML code like follows:
<%=header=%> |
<==   unchanged |
Secondly, it can be used to allocate the content to the site. In this App's case it
receives the data from the backend using MongoDB and runs a
forEach
loop to display all the blogs line by line. This enables us to display content that is
not hard-coded in the html. When the backend database gets updated the changes get
displayed automatically. When you add or delete a blog, the APP will send this
information back to the back-end database, make the changes and as soon as the page
refreshes, these changes will be visible to you as the loop re-run using the updated
database.
This was the first time I actually could truly engage with my own creation, which took
everything to a whole new and very exciting level for me. Furthermore, the database is
located on Amazon's free tier server in West-Virginia. Any changes you make will
actually be sent there and back to you. Even now looking back to this project, it is
fairly amazing.
The app deployed on Cyclic free tier server. Please allow a few seconds for it to
spin up to load the page.
WeatherApi
Openweather Api calls with Bodyparser, Express and Ejs
This project was part of my studies on
Udemy. We were studying RESTful Api creating api-calls with the use of
body-parser and get the information
back from Openweathermap.org.
I liked the idea, so I added a styling with Bootstrap 5. As I wanted to cover more
possible outcomes (typo etc.) I added Ejs to it.
With a pretty background and some transparencies set it was ready to be deployed as a
tiny stand alone project. I think it looks great!
In the future I'm planning to repeat this project with React and React-native with 5
days forecast. I think it would be very handy to have all these information available
on a click of a button.
Frost-tattoo
My first paid project using React
M will be creating and designing a React webpage for a tattoo studio. I would like this to be intuitive and fluid, with some cool animations. There will be a section on the most recent works and planning to implement an appointment-booking options for potential guests showing the currently available timeslots in the schedule. Once it will be completed I will share more information about it.
T-B-A
In the meantime, please feel free to try one of my first apps I made in the beginning of my coding journey.
Andras
A little about me and my journey
Thank you for checking out my webpage! I thought I would share some information about my
coding-journey and about me
as a person.
I've always been interested in IT and Electronics in general, but I started to
develop keen interest in coding
about four years ago and started committing myself to study it daily. It came with
sacrifices (gave up gaming, and some of my
gym classes) as I have a full-time job and limited amount of free time to spare, but I
haven't regretted it once.
Something about researching a topic and finding solutions give me such a boost to my
studies that I just haven't
stopped since I started. The creation itself and coming up with answers for challenges
are very satisfying.
In my personal life I like to be active. I do thai-boxing, longboarding and
photography every now and then. In
my remaining time I follow the IT/Hardware news. It's amazing how far the word has come
since commodore 64! I also like
following topics in astronomy (really excited about the James Webb telescope), physics,
psychology related to
deviant behaviours and occasionally chemistry. I have been an avid music collector since
I was a child, and also learned to play the drums when I was a teenager. At some point I
really
believed I'll be a professional drummer. I'm passionate about music and new releases and
join concerts whenever I can. As you can see I have broad interests,
probably it might be related to being an INFJ personality type.
Thank you for reading, I wish you all the best for now!
Portfolio project
Lazyload, swipe and much more
I absolutely loved the design as it is clean, fresh and looks dynamic. I really thought by finishing the code following the tutorial will pretty much wrap up this project, but I was wrong. Very wrong!
Sections
As you can see on the site there are slides coming right to left for each link you click
on. These are sections, although it looks that they are all different components of the
page, but they are really not!
Just imagine a standard webpage as a roll of paper. As you scroll down you go through
different segments of the same paper. Now imagine this roll to be cut up into a certain
number of dimensions (sections) and start piling up these "card/sections" on top of each
other. They all exist the same time, in front of each other, but most of them get hidden
away by the first card. As the new section slides in, the previous one stays in the
back. Each slide will have classes such as "hidden", "back-section" or "active" when
required.
When I finished the initial project, I realized there is an issue while loading the
page. The last slide that loads will be visible for a second and kind of ruining the
initial animation. An easy fix would be to add an empty black section (without any
characters, pictures or other elements) as the last card. When the
DOM
(document object model) gets loaded it will be the last card on top. The Home section is
"active" so will slide over it - that makes it look pretty neat. The problem with this
solution is that as the DOM (Document Object Model) grows bigger and starts running the
project not only locally, it will require more time for the DOM to load in, so for the
trace of the second flashing-up some of the sections will come back. By the time we load
the last sections, which is now set as a blank section won't load fast enough for us
anymore. We pack the sections on top of each other, but by the time we reach the last
section some of the other cards will get displayed again as we have more content to
display and each section will get much bulkier and requires more time to load in.
Only the next solution to the problem was to set all not needed sections to be hidden
until the DOM loaded. That worked again for a while, but every now and then it seemed
the issue came back with a flash. The reason being is that the DOM loads first (line by
line) and styling is after. You start putting the cards on top of each other, but you
haven't yet learnt the trick to hide what you are doing. Its because DOM is partially
built by the time the CSS (which contains this trick) is loaded. I realised I need to
find a more feasible solution.
Rather than leave a blank section as the last slide, I should make it the first and add
it as "back-section" right away. Like this, when the HTML starts loading followed by the
CSS it will eliminate the issue. By the time it finishes the load the whole DOM (put the
cards down) the back-section is already set (lesson learnt) and the rest of the page
would not be visible. Trickery! Although it works for this small/medium sized webpage,
it would not be recommended to use this approach to larger sized webpages. It would need
to be either set up component-based (React) or there needs to be an
intersection-observer set up. But I will come back to this later on.
Jpeg vs. Webp
Out of interest, I wanted to see how else I can make the page load faster. I have around
5-6 pictures added to the project. By checking out in the network tab in dev mode I saw
that each picture (Jpeg) takes around 600-700ms to load. Webp images have around 15-30%
less data than Jpeg as it compresses more. But I also read on Stackoverflow that they
are harder to decode, so the gain is not as significant. This answer was posted on the
blog about four years ago, so I was not sure about its validity today. So in the end I
had to make my own testrun for it as I really wanted to overcome this problem.
My original Jpegs were not that heavy, but in turning them into a Webp the size got
reduced even further. I compared the page load time using Jpeg vs Webp. The result was a
small reduction in loading time of around 0.0x seconds, however an improvement. Although
the improvement is small, it would make a significant difference when using much larger
and therefore heavier images. So it is still worth sharing my findings after I invested
in researching and testing the topic.
Component-tree / think before you do!
I mentioned above the DOM and how these "cards" get loaded on top of each other. Maybe
it looks like there are only 5-6 cards in this pack, but I have much more to show. This
is why the problem started to evolve. Here is the component tree if you would like to
see.
Component tree
You can see we have over 10 cards. Each of them gets classified in "active" or
"back-section" or in some cases to be temporarily "hidden". It wouldn't be a problem at
all if I leave the project simple as it started. But I didn't find it sufficient as I
wanted it to have multiple layers to it. It means you can click on the logo which is not
part of the navigation section but still brings up a section. Same with the
project-section, there are examples and even inside the examples are more links to
further slides.
Is this a problem? Not really, but what we need to understand is that each click calls
an event-listener. It means you click on something and will execute a function. The
navigation panel is relatively straight forward: If someone clicks on a link on the
navigation panel, it sets the current card as a background section and the new card as
active. Simple and works smoothly. Now imagine that you are not part of this "chosen
navigation panel-group" or you may just be part of one of the sections. The original
functions wouldn't know what should be the back-section and which is the active. I need
to further specify it. If this and this gets clicked, do this and that. But if you are
already there and something else gets clicked if this and that is true/false then do
this or that. What I'm trying to say with all this salad? It means that I had to cover a
whole list of scenarios to make this happen. I have five navigation links (the easy
part), about four project examples with four more sections to link to them and around
two to three buttons to do similar actions on the page. Now getting a bit more
complicated you think? Yes and no!
Now imagine that each of your clicks not just slides in a new section, but also
highlights on the side section of the page what the current content is. Wait a minute!
How about each click closes the theme-toggle section on the right of the page when any
of this gets clicked? Let's do that as well, totally! How about making the web page more
responsive, when it's on mobile let the navigation side overflow the content, but when
it's around tablet size, let the navigation side push the content on the right, it looks
cool after all! You know that I want the page to be responsive to swipes - we all want
that!
And here we are now with a whole lot of arrays of different outcomes. We have
if-statements within if-statements and functions in functions.
Here is an example.
Now we have to cover a lot. What shows on the navigation panel, what will happen on
small/medium/large screens, what happens if the style toggle is already open, what
happens when we swipe the navigation panel to be open (all screen sizes) but we close it
with the button and swipe back.
What to learn from this? One thing for certain, plan what you do! If I have had set up
the page differently from the start, knowing that I want so much more from it, I could
have prepared it from the beginning. That doesn't mean I am not happy with the outcome
of the page, in fact I am very happy - it does look and feel nice and all grounds are
covered! But if I had all these learnings and this fantastic knowledge beforehand, I
would have been able streamline some of the functions and make it more simple to
understand. It's a great learning curve and a valuable lesson for me. I want to return
to this project and rewrite the JS for it. I'm certain I'll be able to reduce the code
by 30%.
UPDATE: I have realized this objective and was able to actually reduce the script by
more than 40%. Let me go into depth on this at the bottom of this page.
Hammer.js (swipe)
I used Hammer.js before in my Secrets project, so using it this time around was pretty much straight forward. The only issue I had is that although it worked well desktop, anytime I tried to use it responsively (mobile/tablet) it didn't fire the required functions. I needed to find the solution to overwrite the touch-input/mouse-input's initial behaviour. I leave the code here as it was a bit tricky to find, might offer a solution for someone who comes across similar issues.
const hammer = new Hammer(document.getElementById('gesture-element'), {inputClass: Hammer.TouchMouseInput});
Lazy-loading
Welcome to the realm of Lazy-loading! If you are unfamiliar with the term: "Lazy-loading
is the practice of delaying load or initialization of resources or objects until they're
actually needed to improve performance and save system resources."
Just imagine you are scrolling through Facebook/Instagram and that at the initial start
of the app it would need to load in all the content for you. Would be quite a long ride!
Furthermore you might just open the site for a second or two, but it's taking over all
of your bandwidth and loading all the content even if you won't need them later on.
A solution exists! Many sites use an intersection observer. It's basically passing the
message to the app what section of the site the user is currently "consuming". You can
tell it "if the viewport is less than 500pixels away", start loading in the images,
videos etc. If you never reach that far on the site, it shall never load. A win-win-win
solution.
The reason I dive into this subject is because as I mentioned above I wanted to keep
this project as light-weight as possible. As soon as I embedded a few YouTube videos, it
went all over the place in the network tab. YouTube/Google started to bombard the site
with their scripts, figuring out which ads to load plus loading all the videos in.
Remember, all sections are existing at the same time in this project. You might not look
at the section where the video got embedded, but it will still load up.
I could use an intersection observer, but I didn't want to add an external library for
this, especially if my only concern was the embedded videos. I went to find different
solutions for this but I ended up creating my own one. Here is the work of others:
Solutions: Example-1 Example-2
I liked the idea, but if you try it out, you can see that somehow it is not really
elegant. Many times the YouTube autoplay won't even work, so you basically need to click
twice for the video to start. I also didn't like that a custom icon has to be used on
top of the pictures. So here is my take on this subject:
Before I dive into this, we need to know what is
Iframe.
Iframe is (it is in its name) a frame which lets you embed another HTML page into the
current one. It has its own properties like style, history and document. It does not
interact with the parent HTML. So what the guys were doing on these two examples is
putting an image into the iframe with some icon on top which serves as a play button
using srcdoc property.
This lets you pretty much put the whole page as an inline element within the iframe.
Anyways, let's not go too deep. There is a picture once it gets clicked will start to
play the YouTube video as long autoplay works..
As I mentioned, I didn't like that it looks different and you need to double click a lot
of times, but my main concern was that I would have to put a lot of lengthy inner
styling in my HTML and I really like the clean look of the code as it was. I started to
develop an idea to move everything to the JS to later being injected into the iframe
when needed. But I still didn't like that there is a lot of HTML and CSS in my JS. And
playing around hit me with the simplest idea.
There is something called
innerHTML.
This can be set. I've done it before! What I did is that I prepped an empty div which
will be injected using this innerHTML. What happens when the page loads, we have empty
divs (containers if you like). But when you click on a certain project it will call a
function which will set the innerHTML to the iframe we need. It works perfectly, but as
YouTube is not messing around and right away starts to bombard you with the video and
ads, it messed up my animation. What I did was writing another function with a loading
gif image. When you click on the project, it's setting that image, but after 0.5s it's
resetting the iframe again, now to the actual video. No double click or misleading
icons, and furthermore my code remained clean!
I also had to write a function to stop Youtube continue playing in the background a when
you click away from the section that embeds the video. In this case the iframe will be
set back to the gif I just mentioned. Pretty nice solution, I'm proud of it, it's my
child!
Bits and bobs'
I covered most of the real challenges above, but there were quite a few minor-ish things
I wanted to sort out. I needed to set what happens when the form on the contact section
gets sent off. As this project doesn't have a backend and neither I wanted to have one I
found few free services that can be used. I ended up using
formsubmit.co. Easy peasy!
I also wanted to make the styling more appealing. For example if you are in
tablet/mobile you cant open the navigation section and the theme toggler together and
even if one of them is open, if you click away to do something else it will close them.
Originally it would have remained on the screen regardless what section you are heading
to, blocking the content. I have done this to work by both clicks and swipes among other
things.
I also wanted the page to be more responsive. Originally it was sort of responsive, but
a lot of times the content got squeezed in too much, or just the space wasn't enough to
fit all in. On portrait mode it was straight forward as the project had a good base, but
I also needed to convert it into landscape mode as well. For example open the website on
mobile, open the navigation menu and now tilt your phone into landscape mode. You will
be able to see what I'm talking about.
I also added an About me section, using the logo which also animates on click and when
the section is active, and I changed the style-toggler here. I think it looks pretty
nice. Previously it wasn't obvious right away which particular colour you had selected.
So I went the extra mile to fix this and make it look better. The colours are kind of
see-trough, but when you click on it turns into solid colour with a border. Oh yes, one
more thing, double tap changes the dark theme to light and back.
Takeaway
I've learnt a lot during these past few weeks. The project-tutorial was amazing, it
taught me a lot about how to structure a website properly. I already used most of the
technique he used, but definitely it helped me to reassure the proper use of
css-selectors.
Furthermorepreviously I mostly used grids or flexboxes to design and this is the first
time using
flex
property. It was also the first time that I used
before/after
pseudo elements as part of the design.
I had a lot of practice creating custom functions and adding
event-listeners.
It was really valuable and helped me to work out the logic time and time again. This
also taught me where I did go wrong with the project. I should have thought about what I
really want from this prior to the work I invested. It would have made my work so much
easier. Don't get me wrong, I'm not disappointed by this. I just had ideas on the way
started to execute them bit by bit.
For now I say goodbye to this lovely project. We had some good times together! I plan to
return and sort out the JS a bit at some point. I shall see you again soon friend! bye
UPDATE
Since I wrote What's about, I made a number of changes to the page. And I was right, I
could significantly reduce the amount of lines I coded, but most importantly I made it
far easier to understand. I made everything as nice and tidy as I could. What I wrote in
the Takeaway section is completely right. I wanted to make It happen so badly that I
didn't stop and think about it. Instead of writing several for each loop and separate
functions and trying to counter the unwanted side effects each of their own, I simply
linked section-links to the corresponding section regardless if it is a navigation
element or button or even an image. TThis way all works within one foreach loop and
hardly any unwanted animation mishaps I needed to counter.
But apart from this very valuable lesson, I made several other changes as well. I
rewrote my lazy-load function, it both starts and stops the videos if needed,
furthermore I made a codesandbox embed as well with it. I wrote some animation to make
it more sleek. I'm happy with the outcome. I also embedded a tiny beginner project I
had, which I also rewrote so it fits the iframe correctly using @media queries.
Now I consider this project to be done! It was a pleasure!