
[Use it here](https://www.bellalee.com/kindle-highlight-formatter)

---

## the tool

I'm a hardcore [Obsidian](https://obsidian.md/) user and have been using the
[Kindle sync plugin](https://github.com/hadynz/obsidian-kindle-plugin) to import
my highlights since August. However, my 12-year-old, first-generation Kindle
started crashing my whole computer whenever I accessed its files, so I had to
find other ways to import them. The plugin supports importing from your online
Kindle library, but I get my ebooks from external sources, so, unfortunately,
this method doesn't work for me. I like the way the plugin formats the
highlights, so I made this tool to help me do that quickly using notebooks
exported from the app instead of manually finding and replacing every time.
Before I made this, I had been using the
[highlighted app](https://highlighted.app/) for its OCR (I highly recommend it,
it's great for digitizing excerpts from print books, for personal use only, of
course).

This is just a silly little thing I made on a whim to make my life and
note-taking process easier, but if it can help someone else too, that would be
super neat!

Although a [Kindle formatter](https://kindle-formatter.com/) already exists, I
found its customization features somewhat challenging to navigate. I decided to
build my own since it would double as good
[coding practice](https://github.com/bellaslee/personal-website-2023/blob/main/src/pages/kindle-highlight-formatter.js).
While writing this, I realized that it allows the user to upload a file, so I
might try to integrate that in the future. But for now, what I made works super
well for me!

## a bit on my note-taking process

![Demo of note system](/img/posts/kindle-highlight-formatter/1.gif)

No matter if I'm reading an ebook or print book, I always take notes in a
[Field Notes](https://fieldnotesbrand.com/) notebook. I have multiple lying
around my house and in my bag so I'm never caught without a place to jot down my
ideas. I started this habit when I was reading _The Count of Monte Cristo_ since
I didn't want to ruin the 1946 library copy with sticky notes (I really thought
it was going to disintegrate in my hands at one point). Now, I have a shoebox
full of finished notebooks that are my pride and joy.

After reading the book, I digitize my notes and thoughts. I've been trying to
process my thoughts on by writing mini
[essays](https://www.bellalee.com/blog/tags/essay) so I don't forget what I read
(at the time of writing this post, I haven't refined any enough to a point where
I'd be satisfied with others seeing them; this is a new habit). By doing so, I
hope to move from an attitude of mindless consumption that's encouraged by
social media today to a thoughtful, lifelong learner approach. Through writing,
I slow down my thoughts and distill them into something clear, memorable, and
applicable to my life.

In my writing process, I import Kindle highlights (or highlights from physical
books) into the bottom of my document. I usually split my notes into four
sections: notes, thoughts, questions, and highlights. After reading, I compose a
short summarizing essay that addresses my questions using evidence from my notes
and highlights, then wrap up with broader implications and connections from my
thoughts section.

Anyways, this gives some context for my rationale behind making this tool. I
just started reading
_[The Eternal Drama: The Inner Meaning of Greek Mythology](https://www.goodreads.com/en/book/show/589743)_
by [Edward F. Edinger](https://www.jungstudycenter.org/Edward-F-Edinger) and
wasn't in the mood to force restart my computer trying to extract files from my
Kindle ٩(｡•́‿•̀｡)۶


A self-indulgent tool I use to import my Kindle highlights into Obsidian.

Kindle Highlight to MD Formatter — Web Development


This exerpt is from a project vision and scope document for a drone fleet
management system, written for the INFO 380: Product and Information System
Management.

---

## Non-Functional Requirements

### Scalability

We aim to develop a system with future growth in mind. Therefore, the system
must have a modular architecture and optimized performance and meet the
following requirements:

- **SCA-1**: The system shall be able to accommodate annual growth of 10% new
  drone fleets a year across different wind farm locations without
  user-perceptible performance degradation.
- **SCA-2**: The system shall scale to handle simultaneous maintenance on at
  least 50% of the wind turbines at any given location for at least 60 minutes.

### Availability

During working hours, maintenance technicians and other stakeholders must access
the system to schedule maintenance, deploy drones, and view real-time data to
make relevant decisions. Thus, the system must be highly available during
working hours, and at least available most of the time beyond working hours in
case of emergencies. The system does not have to be as strictly available
outside of working hours, as technicians are not actively scheduling and
analyzing maintenance. Since 100% availability would be unrealistic and put
unnecessary strain on WindTech’s budget, we instead strive for at least 99%
availability during critical hours to balance the request for “high
availability” and resource constraints. The system must be able to meet the
following availability requirements:

- **AVL-1**: The system must be at least 99% available on weekdays between 8
  a.m. and 5 p.m. GMT+1 on weekdays, and at least 95% available on weekdays
  between 5 p.m. and midnight GMT+1.
- **AVL-2**: Scheduled maintenance scheduled for Sundays between 8 p.m. and 3
  a.m. GMT+1 does not count toward the calculation of availability.
- **AVL-3**: WindTech shall inform employees one week before scheduled
  maintenance.
- **AVL-4**: A user shall not be able to access the system during maintenance
  and downtime, and shall instead be shown a message indicating when the system
  is expected to resume operation.

### Interoperability

The DFMS will be integrated with existing WindTech systems, thus we must ensure
compatibility and functionality across different platforms. Since employees must
sign into different systems depending on their tasks, single sign-on (SSO)
support is necessary for consistency and security (see "Security Needs"). The
DFMS must integrate with maintenance scheduling, weather forecasting, inventory
management, reporting, training, and more. Therefore, data exchange capabilities
and API compatibility are crucial.

- **IOP-1**: Requests made to APIs outside of the DFMS to other WindTech systems
  shall return results within 5 seconds 99% of the time.
- **IOP-2**: The DFMS API shall respond to external requests within 5 seconds
  99% of the time.
- **IOP-3**: The DFMS API shall throw specific error codes, messages, and
  appropriate responses.
- **IOP-4**: A user shall log into the DFMS using the same single sign-on login
  information to access WindTech system information.
- **IOP-5**: The system shall be able to export data in CSV and JSON formats.
- **IOP-6**: The DFMS API shall keep an audit trail of API transactions for up
  to one week.
- **IOP-7**: The DFMS API and related systems shall adhere to RESTful API
  standards (see "RESTful APIs").
- **IOP-8**: In the case of concurrent data updates, the DFMS shall check for
  inconsistencies and, if found, throw an error requesting the user to conduct
  manual verification.

### Sustainability

See "Environment and Noise Regulations" for more environmental sustainability
requirements; this section will focus on sustainable IT (SIT) practices.

Green IT practices are increasingly crucial, as cloud computing produces up to
3.7% of global greenhouse gas emissions, exceeding that of commercial flights
(Lavi, 2022). To ensure sustainability, the DFMS must meet the following
requirements:

- **SIT-1**: The system shall use a data center that can achieve a power usage
  efficiency (PUE) of 1.2 or less and is located in a region with abundant
  access to renewable energy (National Renewable Energy Laboratory, n.d.).
- **SIT-2**: The system shall prohibit consecutive transmissions of redundant
  data within 10 seconds to minimize network usage.
- **SIT-3**: Drones shall not be operated in inclement weather or harsh
  conditions, and shall be regularly maintained (see also SEC-8), to maximize
  their lifespan.

### Security

Data security is crucial for the DFMS to ensure the integrity and
confidentiality of operational data, prevent unauthorized access, protect
against cyber threats, comply with local and federal regulations, and enable
future capability expansions.

To secure data, the DFMS should adhere to the following requirements:

- **SEC-1**: Data transmission between drones, ground control stations, and
  services within the DFMS, such as scheduling and maintenance logs, shall be
  encrypted end-to-end.
- **SEC-2**: The system shall back up data daily at midnight.
- **SEC-3**: A user shall only be able to log into the DFMS if they have
  two-factor authentication.
- **SEC-4**: A user shall be able to log into the DFMS using WindTech SSO.
- **SEC-5**: Only users who have Maintenance Technician or Operation Manager
  permissions shall be able to operate the DFMS.
- **SEC-6**: Only users who have Maintenance Technician or Operation Manager
  permissions shall be able to unlock doors to drone storage areas using a
  security badge.
- **SEC-7**: The VP of Operations shall conduct compliance checks and audits
  once every three months.
- **SEC-8**: Operation Managers shall update drone firmware and software and
  conduct physical maintenance monthly to mitigate risks of malfunction.
- **SEC-9**: Drones shall be authenticated before being integrated into the
  DFMS.
- **SEC-10**: Drones shall not be able to fly further than the geographical
  boundaries of WindTech wind farms.
- **SEC-11**: Maintenance technicians shall conduct spectrum monitoring every 30
  minutes when drones are deployed.
- **SEC-12**: If external interference is detected, drone operations shall be
  paused until the source of interference is verified and removed.

Doing so will protect data and prevent unauthorized drone operations. In
addition to the above requirements, WindTech should:

- Use secure, cloud-based solutions, such as Amazon Web Services (AWS) or
  Microsoft Azure, for storing and analyzing sensitive data such as inspection
  reports, maintenance logs, and data collected during drone operations.
- Establish contingency plans in the case of drone malfunctions or external
  threats with the collaboration of the Chief Security Officer and VP of
  Operations.

## Standards and Compliance

### RESTful APIs

REST stands for Representational State Transfer, and following RESTful API
standards can help ensure system scalability, flexibility, and independence.
Compliant APIs adhere to the following principles:

- Uniform interface, where the server returns information in a standardized
  format
- Statelessness, where client requests are completed independently
- Layered system, where the API can work with several servers with multiple
  components
- Cacheability, where the client can store some server responses to improve
  response time
- Code on demand, where the software code can be temporarily transferred to the
  client (Amazon, n.d.).

### Accessibility Guidelines

To ensure the accessibility of materials relating to the DFMS project,
developers must address the following requirements:

- **USE-1**: All drone pilot training materials in audiovisual formats must have
  transcripts and closed captions.
- **USE-2**: The information hierarchy in human-machine or human-system
  interfaces must be programmatically determinable through proper formatting,
  tagging, and labeling such that they are navigable by screen-reader or other
  access technologies.
- **USE-3**: Crucial information, such as warnings and confirmation dialogues,
  shall be delivered with textual identification in addition to sensory
  characteristics, like size, color, and sound.
- **USE-4**: Text and images shall have a contrast ratio of at least 4.5:1.
- **USE-5**: Text shall be able to be resized up to 200% without additional
  assistive technologies.

Since system warnings are crucial to upholding the safety of wind turbine
operations, warning messages and confirmation dialogues must be completely
accessible to individuals of all abilities. Additionally, computer interfaces
shall adhere to basic accessibility guidelines as dictated by the Web Content
Accessibility Guidelines (WCAG) 2 (Web Accessibility Initiative, 2023).

### Drone Regulations & Safety Requirements

Drones are considered unmanned aircraft systems. Because drones used for wind
turbine maintenance fly close to large structures and may require complex flight
patterns, they are classified under the “Specific” category. Operations in this
category are regulated by Unmanned Aircraft System (UAS) Regulation (EU)
2019/947 Annex A Part B. To comply with the requirements, we must ensure the
following:

- **SAF-1**: WindTech shall apply for operational authorization with the
  registration number of the drone operator, the name of the accountable manager
  or operator, an operational risk assessment, a list of measurable risk
  mitigation measures proposed by the operator, an operations manual, and a
  confirmation of appropriate insurance coverage.
- **SAF-2**: Drone pilots shall complete training before operating drones in
  areas such as situational awareness and error management; organizational
  safety culture, operational procedures, and organizational structure; stress
  management, fatigue, and vigilance; decision-making; automation and philosophy
  of the use of automation; specific UAS type-related differences; case-based
  studies; and drone piloting basic skills.
- **SAF-3**: WindTech shall keep records of drone pilots’ training courses and
  qualifications for at least three years after they cease employment.
- **SAF-4**: Interfaces for drone operations shall minimize the risk of pilot
  error by providing clear, intuitive, and distinguishable labeling and cause
  minimal fatigue.

The regulation outlines more guidelines that WindTech shall adhere to in its
operations, but the above constraints are most relevant to the scope of our DFMS
project (European Union Aviation Safety Agency, 2022, pp. 309–320).

### Environment and Noise Regulations

The EU defines 55 dB as the threshold for noise exposure, measured as an annual
average between day, evening, and night. However, noise levels above 40 dB are
known to harm wildlife. Regulations do not impose limit values but rather
dictate reporting thresholds. Governments must map noise levels, create action
plans, and designate quiet areas. Most established guidelines and regulations
focus on transport and industry sources, though some countries also have
specific regulations for wind turbines (European Environment Agency, 2020).

Though there are no formal regulations for drone noise levels, these guidelines
serve to help WindTech anticipate future policy developments and operate in good
faith to protect the environment.

To best adhere to these guidelines, the DFMS shall adhere to the following
constraints:

- **ENV-1**: Drones deployed for wind turbine inspections shall not fly through
  government-designated quiet areas.
- **ENV-2**: Drones operated by WindTech should not generate noise that exceeds
  55 dB at ground level, measured following the European Union Aviation Safety
  Agency’s (EASA) noise measurement guidelines.

#### EASA Noise Measurement Guidelines

Typically, drone manufacturers can measure drone noise levels according to EASA
guidelines and voluntarily provide the data. However, if the manufacturer does
not provide compliant noise ratings for its product, WindTech can refer to the
EASA’s Guidelines on Noise Measurement of Unmanned Aircraft Systems Lighter than
600 kg Operating in the Specific Category (Low and Medium Risk) for testing
conditions, including terrain, obstacles, temperature, humidity, precipitation,
windspeeds, and procedures (European Union Aviation Safety Agency, 2023).

### General Data Protection Regulation (GDPR)

Besides employee data, the drone project may also inadvertently collect civilian
personal data, such as faces, house fronts, and vehicle registration plates
(DroneRules.eu, 2018). To comply with the EU’s GDPR, the DFMS project must
adhere to the following requirements:

- **SEC-13**: DFMS administrators shall maintain detailed documentation of
  collected data to present to regulatory authorities if necessary.
- **SEC-14**: Only users with Operation Manager and Safety Officer permissions
  shall have access to employee training histories.
- **SEC-15**: In addition to safety training, drone operators shall also
  complete data privacy training (Wolford, n.d.).
- **SEC-16**: Drone operators shall delete any footage that collects personal
  data irrelevant to wind turbine inspection, including, but not limited to,
  faces, house fronts, and vehicle registration plates.

---

Photo by
[Karsten Würth](https://unsplash.com/@karsten_wuerth?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
on
[Unsplash](https://unsplash.com/photos/white-windmills-on-green-grass-field-under-white-clouds-and-blue-sky-ZKWgoRUYuMk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)


Non-functional requirements for a drone fleet management system (DFMS)

WindTech DFMS — Technical Writing


![Banner for Umwelt](/img/posts/umwelt/thumbnail.png)

[View the project website here](https://umwelt.vercel.app/) — I designed and
implemented this website, it was really fun to do these animations with GSAP!

## Inspiration

Burnout is a prevalent issue in today’s fast-paced society, as highlighted by
Byung-Chul Han in his book The Burnout Society. Burnout is not a medical
diagnosis. Rather, it is characterized by intense emotional exhaustion. This is
caused by the productivity-focused, auto-exploitative society, as well as the
information overload that comes with social media. Space today seems to be less
“grounded” and more “virtual”. To combat this, we hope to provide uninterrupted
time through Umwelt to help people recenter and revitalize. We provide small
milestones for people to accomplish in a gamified manner. We chose walking
through nature as an activity due to its accessibility and effectiveness,
though, if we had more time, we would like to consider the design question of
“how can we accommodate those who are not able-bodied or do not have safe
communities to walk in?” Though we recognize that this is a systematic issue, we
hope to make incremental changes through micro-interventions like Umwelt.

## What it does

Block out distractions with Umwelt and enjoy a hero’s journey through nature.
During your walk, you will unlock various encounters in your surroundings. Look
out for and capture these moments and absorb the beauty of the spaces around
you.

Burnout is the opposite of vitality — it is utter exhaustion. Through Umwelt, we
hope to reshape individual perceptions of experiences and reality to revitalize
daily life. In doing so, we hope to drive transformation in modern productivity
culture and curb the development of a burnout society.

## Mission

To revitalize society by finding little moments of magic in nature

## Vision

Encouraging sustainable and balanced lifestyles It can be difficult to swim
against the currents of social media in an age of constant information overload.
With Umwelt, we can embark on an adventure of mindset transformation to move
towards a balanced life.

## Transforming experiences to enhance our collective vitality

Let’s take a moment to reshape our interactions with the spaces we inhabit to
nourish our physical, mental, and spiritual vitality.

## Becoming able to simply exist

What does it mean to live a “good” life? Taking a walk in nature is
“unproductive” by societal standards, which is precisely why we should do it: to
relish in the art of lingering and of simply being.

## How we built it

Our team collaborated on the low-fidelity design process, then began to branch
off into high-fidelity design (Annie and Stephanie), research and web
development (Bella), and iOS development (Sean). Annie and Stephanie worked with
Figma and Adobe Illustrator; Bella worked with Next.js, GSAP, SASS, and
Bootstrap; and Sean worked with Swift. We maintained open communication and
discussion throughout the process to ensure we stayed on the right track and
adhered to our initial visions.

## Challenges we ran into

As a team, our main challenge was brainstorming ways to use technology to
encourage independence from it. For Sean, it was challenging to learn how to use
iOS frameworks for the camera and map under time constraints. For Annie and
Stephanie, the linear user flow was challenging due to being different from what
you’d expect from a typical app.

## Accomplishments that we're proud of

This is our first in-person hackathon experience, so we are proud of coming this
far under immense time pressure. Our ideation process was highly enjoyable, and
we are proud of stepping out of our comfort zones to design an experience rather
than a tool. We also figured out our strengths quickly and adapted to fit them
into the creation process.

## What we learned

So much… The design team learned how to animate boxes, Sean learned iOS
animation and frameworks, Bella learned new front-end animation and interaction
techniques, and we all learned how to collaborate within a cross-functional
team.

## What's next for Umwelt

We hope to expand Umwelt further as a personal project. After developing an MVP,
we would like to have people test it and start gathering user feedback.

## Development report

### 1. brainstorming

We kicked off our hackathon session by first identifying the track, and then the
related problem spaces that we were interested in. We decided to approach
vitality from four perspectives: physical, mental, emotional, and spiritual. We
realized, however, that many of these areas overlap, and that vitality extends
to all areas of life. Our favorite ideas were burnout society, time in nature,
and sustainable knowledge, so we discussed these areas more in-depth, then
proceeded to research and design.

![Brainstorming](/img/posts/umwelt/brainstorm.jpg)
![Narrowing down](/img/posts/umwelt/narrowing-down.jpg)

### 2. problem space

Burnout is a prevalent issue in today’s fast-paced society, as highlighted by
Byung-Chul Han in his book _The Burnout Society_. Burnout is not a medical
diagnosis. Rather, it is characterized by intense emotional exhaustion. This is
caused by the productivity-focused, auto-exploitative society, as well as the
information overload that comes with social media. Space today seems to be less
“grounded” and more “virtual”. To combat this, we hope to provide uninterrupted
time through _Umwelt_ to help people recenter and revitalize. We provide small
milestones for people to accomplish in a gamified manner, as maps and
gamification are proven to be effective design choices to incentivize activity.
We chose walking through nature as an activity due to its accessibility and
effectiveness, though, if we had more time, we would like to consider the design
question of “how can we accommodate those who are not able-bodied or do not have
safe communities to walk in?” Though we recognize that this is a systematic
issue, we hope to make incremental changes through micro-interventions like
_Umwelt_.

### 3. process

#### 3.1 design

[View our Figma wireframes here](https://www.figma.com/file/9X5AabfVYMBYkwerbrBOYy/DubHacks-23'?type=design&node-id=32%3A1400&mode=design&t=Ziw28LGMl86lQXhO-1)

We were inspired by Taiwan Design Expo and other minimalistic, whimsical designs
for our branding.

![Design inspiration](/img/posts/umwelt/inspiration.jpeg)

#### 3.2 iOS development

We worked on design and development simultaneously to cover more ground as a
team.

![Development](/img/posts/umwelt/development.jpeg)

### annotated bibliography

Key: 💡= applications to our intervention

Powell, K. Work–life balance: Break or burn out. Nature 545, 375–377 (2017).
https://doi.org/10.1038/nj7654-375a

- Burnout is not a medical diagnosis
  - Overwhelming fatigue
  - Loss of motivation
  - Chronic stress
  - Frustration
- Can lead to depression
- “The type of break doesn’t matter”

Grant, Adam. “Feeling Blah During the Pandemic? It's Called Languishing.” The
New York Times, 3 December 2021,
https://www.nytimes.com/2021/04/19/well/mind/covid-mental-health-languishing.html.

- Languishing
  - Stagnation
  - Emptiness
- Mental health as a spectrum from depression to flourishing
- Languishing: middle point, absence of well-being
- Coined by Corey Keyes
- Combat through flow
  - Dissolving sense of time, place, and self
  - Enjoyable experiences, meaningful work
  - Created through focus
    - → 💡 Umwelt aims to do this by allowing users to recenter
      - Uninterrupted time
      - Small goals

Danell J. Haines PhD , Liz Davis MA, CPT , Patrice Rancour MS, RN, CS , Marianne
Robinson BS, CHES , Trish Neel-Wilson BSN, CDE, CES & Susan Wagner DVM, MS,
DACVIM (2007) A Pilot Intervention to Promote Walking and Wellness and to
Improve the Health of College Faculty and Staff, Journal of American College
Health, 55:4, 219-225, DOI: 10.3200/JACH.55.4.219-225

- Walking can positively impact BMI, blood glucose, and cholesterol levels
  - Easy and sustainable way to promote health and well-being
  - 💡 Accessible to implement in walkable communities
    - Challenge: how can we accommodate for those who are not able-bodied or
      whose communities are unsafe to walk in?

Craig, Geoffrey, and Wendy Parkins. Slow Living, Bloomsbury Publishing
Plc, 2006. ProQuest Ebook Central,
[https://ebookcentral.proquest.com/lib/washington/detail.action?docID=1643848](https://ebookcentral.proquest.com/lib/washington/detail.action?docID=1643848).

- Space seems less “grounded” and more “virtual”
- "Slow living is not a counter-cultural movement: it does not propose the
  establishment of alternative spaces but the transformation of the spaces we
  currently inhabit." (62)
  - → 💡We aim to reshape our interactions with the spaces in our communities to
    promote sustainable practices of physical, mental, and spiritual vitality.
  - Community spaces in daily life are often taken for granted
- "At the heart of slow living is a certain 'mindful' consciousness where
  activities, practices, and encounters are invested with care and attention and
  such a consciousness requires particular spatial contexts as much as it
  requires a slow temporality." (63)
  - “space is a profoundly social phenomenon” (63)

Bo Han (2018) Social Media Burnout: Definition, Measurement Instrument, and Why
We Care, Journal of Computer Information Systems, 58:2, 122-130, DOI:
10.1080/08874417.2016.1208064

- Three sub-dimensions of social media burnout
  - User’s ambivalence
  - Emotional exhaustion
  - Depersonalization
    - E.g. taking a “Facebook vacation”
- Causes
  - Feeling anxious about being overwhelmed by information
    - Information and social overload
    - Unable to find resolution to mediate pressure
      - Hard to escape cycle
        - Social media as a complement to offline social networks
          - Can overtake in priority
        - Expensive termination cost to something that took a long time to build
          (e.g. online network)
  - Wanting to disconnect from social media, taking vacations from it
- Burnout: emotional exhaustion
- Burnout and gratification can co-exist
  - → 💡Striking a fine balance by providing gamified, yet mindful breaks

“Let's all get up and walk to the North Pole: design and evaluation of a mobile
wellness application.” _Proceedings of the 6th Nordic Conference on
Human-Computer Interaction: Extending Boundaries_, 2010, pp. 3–12,
https://dl.acm.org/doi/abs/10.1145/1868914.1868920.


Block out distractions with Umwelt and enjoy a hero’s journey through nature.

Umwelt — Product Management, Marketing, Web Development


## Process

### Learning GSAP

I created my website from scratch last year to learn React, but I was new to web
development, so I didn't know animation frameworks existed. I ended up using CSS
animations and Javascript to figure out scroll-triggered animation. Earlier this
year, I emailed my favorite web design studio,
[Antinomy Studio](https://antinomy.studio/) to ask how they do their animations.
Their technical director, Baptiste, kindly got back to me and let me know that
they work with Nuxt.js and GSAP. I was surprised (and very touched) that I got a
reply, and promptly looked into their tools of trade. Since my priority was
designing cool animations, I decided to learn GSAP first, hence this website
rebuild.

I learned GSAP by making this atrocity!

![gif of my first GSAP attempt](/img/posts/personal-website-2023/learn-gsap.gif)

Since I had experience with animation timelines and keyframes from fiddling with
CSS last year, the framework was intuitive and easy to pick up. I was relieved
that GSAP has pretty clear documentation and examples on its website and learned
the importance of clear, concise technical writing.

At first, it was challenging to figure out how to get animations to work with
React's useEffect hook. The solution provided in the docs did not work for me,
so I had to comb through the forums to mix and match other solutions. I also
added infinite scrolling to my blog using ScrollTrigger.

### The Blog

I found that the features from the simple tutorial I followed weren't
sophisticated enough for my liking. I took a look at
[the Next.js blog starter template](https://vercel.com/templates/next.js/blog-starter-kit),
as well as
[this template](https://github.com/wutali/nextjs-netlify-blog-template), and
found them much more elegant. I found
[this tutorial](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44)
that showed me how to use frontmatter just the way I wanted to. However, I don't
know Typescript yet (it's on my to-do list), so I had to figure out how to
identify key elements and replicate them in Javascript. I learned a lot about
how Next.js works and how to use API calls, getStaticProps, and getStaticPaths.

## Conclusion

My code is way cleaner than [last year's iteration](https://2022.bellalee.com/),
but I aim to do even better next time. I won't stop until my code is clean,
concise, and an organization-freak's dream.

I can't help but compare my work to those amazing websites I see on
awwwards.com, but I have to remind myself that I'm just starting out, and I'll
get there eventually.

## References & Attributions

- GSAP & animations
  - [Learn GSAP in 23 Minutes](https://www.youtube.com/watch?v=m6PDUIF24v4)
  - [Introducing ScrollTrigger for GSAP](https://www.youtube.com/watch?v=X7IBa7vZjmo)
  - [How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/)
- MDX blog structure
  - [Vercel Blog Starter Kit](https://vercel.com/templates/next.js/blog-starter-kit)
  - [Next.js blogging template for Netlify](https://github.com/wutali/nextjs-netlify-blog-template)
  - [Create a Next.js and MDX blog](https://blog.logrocket.com/create-next-js-mdx-blog/)
  - [Read and render MD files with Next.js and Nx](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44)
- Assets
  - Bee image on loading screen by
    [Freepik](https://www.freepik.com/free-vector/hand-drawn-stencil-element-collection_32177634.htm#query=bee&position=38&from_view=keyword&track=sph)


Process, attributions, and takeaways from designing and developing the 2023 version of my personal website.

Personal Website 2023 — UX Design, Learning Process


![Screenshot of project home page](/img/posts/room-to-budge/1.jpeg)

[View project](https://room-to-budge.web.app/)

For best results, sign in with username b@a.com and password "password".

## Frameworks & Languages Used

React.js, CSS, Firebase, Node.js

## Design Process

Since this project was created for a web development class, we did not focus
much on the design process. To view a more design-heavy project, check out my
writeup for [Itemize](https://www.bellalee.com/blog/posts/itemize).

Though our focus was not on design, but rather the implementation of our
intended functions, we still created
[Figma wireframes](https://www.figma.com/file/8BGlRWDidakOIEQddLzsOH/Room-to-Budge?type=design&node-id=0%3A1&mode=design&t=7T4xWA5SMI7RNOap-1)
for our project. We used the first week of the course to map out our information
architecture and establish a rough visual identity, then focused on learning
through collaboration to bring our product as close to our vision as we could
with the skills we acquired both in and out of class.

## Learning Outcomes

Through this project, I learned how to:

- Store and retrieve data using Firebase
- Create API requests in the useEffect hook
- Handle state more efficiently
- Fetch data through the App component

## Attributions

Project created with Allyson Graylin for the University of Washington course
_INFO 340: Client-Side Web Development_.


For INFO 340: Client-Side Web Development, my team and I created a budgeting application that aims to educate stakeholders on their spending habits.

#projects

Kindle Highlight to MD Formatter — Web Development

WindTech DFMS — Technical Writing

Umwelt — Product Management, Marketing, Web Development

Personal Website 2023 — UX Design, Learning Process

Room to Budge — Web Development