DEV Community

Enjeck C.
Enjeck C.

Posted on

Personal site built with pure HTML, CSS and JS

What I built

Hello! This is my final submission of my personal portfolio as part of the DO Hackathon. I have tried to make this project creative and original. As a part of the series, I have documented my progress and provided some snippets of code explaining how some effects were made.

Category Submission:

Personal Portfolio

App Link

Deployed on Digital Ocean: https://personal-website-nkadw.ondigitalocean.app

Screenshots

Desktop

Alt Text

Mobile

Alt Text

Description

This personal site contains many effects and animations, made with pure CSS and JS. I use bold fonts and large text because I think it makes the site stand out, compared to the tiny font sizes used on many websites today.

I have tested the site on mobile devices, and I believe it's responsive. I spent a lot of time writing media queries to ensure the elements and animations work on various screen sizes.

Link to Source Code

https://github.com/PROTechThor/personal-website

Permissive License

MIT License

Background

Like I mentioned in my first post in the series, I had been intending to build a personal site for the past year. Being busy with school and work, I didn't have time to dedicate to it. Now that I finally have a little bit a time, I decided to use the opportunity to finally do this project.

How I built it

I built this site using pure HTML, CSS, and JavaScript. No frameworks or libraries were used. I didn't use any boilerplate code either. Almost everything was built from scratch. Most of the code is made up of CSS. I spent a lot of time writing CSS for the animations and responsitivity.

I deployed the app on Digital Ocean's App Platform. I like how the platform automatically deploys my changes when I make additions to the GitHub repo.

Additional Resources/Info

I used CSSdesignawards.com for website design inspiration.

Blender 3d was used to design the 3d images used on the first page.

Top comments (0)