Portfolio_v3
My current personal website
Overview
The personal website source code of a Staff Frontend Engineer is an open-source project that showcases the developer's technical learnings over a 5-month period. It features animations powered by CSS variables without the use of libraries. The website serves as a portfolio, focusing on the code rather than image showcases, and was built using Svelte (Sapper) for development, PostCSS for styling, Cypress for testing, and deployed on Netlify.
Features
- CSS-Based Animations: All animations on the website are CSS-based, utilizing CSS variables for dynamic effects.
- No Image Showcase: Instead of traditional project showcases, the focus is on the code itself and Codepen for demonstration.
- Svelte (Sapper) Development: The website is built using Svelte (Sapper) framework for efficient and reactive web development.
- PostCSS Styling: Styling is done using PostCSS, providing extended features for writing maintainable CSS.
- Cypress Testing: Cypress is used for testing the website, ensuring functionality and performance.
- Netlify Deployment: The website is deployed on Netlify for easy and scalable hosting.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Personal
A personal website is an online platform that showcases an individual's work, interests, and personality. It can include a range of content, such as a bio, resume, portfolio, blog, and contact information, and is often used to promote one's personal brand or professional services.
- Portfolio
A portfolio website is a type of website that showcases an individual's or a company's work, skills, and accomplishments. It typically includes a gallery of images or videos, case studies, and client testimonials to provide potential clients or employers with a comprehensive overview of their experience and expertise.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
