Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

A personal portifolio website to showcase my work and experience.
https://github.com/michaelbrusegard/personal-website

framer-motion github-pages nextjs personal-website static-website tailwindcss threejs

Last synced: 7 days ago
JSON representation

A personal portifolio website to showcase my work and experience.

Awesome Lists containing this project

README 

        
# Personal website



portifolio

This project showcases my tech skills, work experience and projects as a website. It serves as a central hub for anyone interested in knowing more about me and my work. This repository contains the source code and assets for the website. It is live and accessible at https://www.michaelbrusegard.com.



## Table of Contents



- [Sections](#sections)

- [Features](#features)

- [Technologies Used](#technologies-used)

- [Usage](#usage)

- [License](#license)



## Sections



- **Hero:** A brief introduction and photo of me.

- **About:** A list of my technical skills and expertise.

- **Work:** Summary of my previous work experience.

- **Projects:** Showcase of my notable projects with descriptions and links.

- **Testimonials:** Testimonials from people I have worked with.

- **Contact:** A way for visitors to get in touch with me.



## Features



- **WebGL Fluid Enhanced:** The background has a WebGL fluid simulation that is rendered using my [Fluid Simulation](https://github.com/michaelbrusegard/WebGL-Fluid-Simulation) library.

- **React Parallax Tilt:** The info cards on the website tilt in response to mouse movement using the [Parallax Tilt](https://github.com/mkosir/react-parallax-tilt) library.

- **React Vertical Timeline Component:** The work experience section uses the [Vertical Timeline Component](https://github.com/stephane-monnot/react-vertical-timeline) to display my work experience.

- **Navigation:** The navigation bar is fixed to the top of the page and contains links to sections on the page.

- **Scroll animations:** The website uses the [Framer Motion](https://www.framer.com/motion/) library to animate elements on the page.

- **Dog 3D Model**: There is a 3D model of my dog that I created with my phone, and edited in Blender. It is rendered using [Three.js](https://threejs.org/) with stars in the background.

- **Responsive Design:** The website is designed to work well on various devices and screen sizes.



## Technologies Used



- CSS: Cascading Style Sheets to fill in gaps for where Tailwind couldn't do the job, mostly regarding CSS animations.

- Tailwind CSS: Utility-first CSS framework for faster and easier UI development.

- TypeScript: A typed superset of JavaScript that enhances code quality and tooling.

- React: A JavaScript library for building user interfaces.

- Framer Motion: An animation library for creating smooth and interactive animations in React applications.

- Three.js: A JavaScript library for 3D graphics and animations on the web.

- Next.js: A React framework for building server-side rendered and statically generated websites.

- GitHub Pages: Hosting service to deploy the website to production.

- Google Cloud Platform Functions: Hosting a function to send emails from the contact form.



## Usage



Feel free to explore the website to learn more about me and my projects. The website is straightforward to navigate, and you can click on the different sections in the navigation bar to jump to specific parts of the page.



If you encounter any issues, have suggestions, or want to report bugs, please open an issue on this GitHub repository.



## License



This project is licensed under the Apache License, Version 2.0. See the [LICENSE](LICENSE) file for details.



Thank you for visiting my personal website repository. If you find it useful or have any feedback, I'd love to hear from you. You can also explore my other projects on GitHub at https://github.com/michaelbrusegard.