portfolio creation
work with tech

We ask a model to review the content of our videos and help with find consistent descriptions of an audience review.

We collect all the information for each video of our channel and create a summary channel.

We create competence descriptions with gen_compentence_summary where we ask an llm to judge our competences based on our source code review. we then create a markdown page which will be converted in article and slides to be published competences.

We use LLMs to update articles metadata like descriptions and keywords enrich metadata. This scripts analyze the content and creates all the summaries and tags we need to produce output we can index.

We extract the most relevant KPIs from the portfolio info to create a portfolio dashboard.

Again the scope, be really consistent with the json:

assets

library of assets in public/ (sound effects, textures, icons…)

config

anim_config.py which handles all json configuration files

director

anim_pictures.py anim_org.py anim_metric.py which will:

• select the .tsx component from remotion
• select the needed assets
• select the transitions between clips

We create anim_clip.py to render the single clip We use Compositor.tsx to render all clips and transitions together

We want to create an automated workflow to enable the creation of videos out of assets:

metrics

metrics_status.json

icons

icon

pictures

pictures

texture

texture

sound effect

sound_effect

We created slide_show.py to read the picture directory and create animations and transitions between the pictures. The software:

To create more movements between the clips we have created a transition utility ref

clip

one picture, animates a gentle movements and creates a clip with alpha channel

transition

texture

a sudden opacity and glow increase

sound

starts at the beginning of the transition

cross clip

a random selection between: fade, wipe, tile, zoom

clip : [-------------------------–—][------------------–—] transition : [------------–—]

We created anim_metrics.py to read portfolio_dash.json and create animated infographic selecting a series of different templates:

bar charts

radar plot

heatmap

table

We have created org_infographic.py to read an org file and create a video:

sections

we scan all the sections and create a slide as in reveal

content

an LLM picks graphic elements, titles, subtitles and text and select the proper animation

animation

we render the slide into a separate clip

transition

we cut all the clips together using transitions

We are writing a tool to animate static information. We want to make sure that the architecture is the same across all components.

anim_metrics.py

animate data from a static json

slide_show.py

animate pictures

org_infographic.py

animate sections from an org file

The architecture should be consistent: each of the python create temporary clips which will be cut using Compositor.tsx adding texture and sound effects. We should have common config dict (animation duration, clip min/max length…) across the python files Once the final clip is done in the ../out directory we need to clean the temp files

in `python3 src/anim_metrics.py –compose`

• [ ] output file in infographic/out/
• [ ] I hear only one sound effect at the beginning
• [ ] sound should be enveloped with an ADSR lasting a 1-2 seconds
• [ ] clips are too short and they don’t end before transition starts
• [ ] the video is 1:20 min long but the last 20 seconds are just black
• [ ] delete the public/tmp/ only before starting creating the clips

in `python3 src/anim_metrics.py –render`

• [ ] GeoMap: zoom out starting from Germany
• [ ] GridKpi: box colors more aligned with the theme
• [ ] LinePlot: labels overlap, reduce the size
• [ ] AreaPlot: use the dark theme sci_fi.css
• [ ] DonutChart: put the legend to the right side in two columns and the total in the center of the donut
• [ ] Progress: use the dark theme sci_fi.css
• [ ] TaskTracker: use the dark theme sci_fi.css
• [ ] TodoTable: items overflow and don’t fit in the page
• [ ] Users: bubbles are not centered

• [ ] PieChart: expand it and fit in the page
• [ ] Heatmap: data is fake
• [ ] AreaPlot: select a lighter color scheme for the foreground elements, increase the labels
• [ ] Sparkline : the lines don’t cover the grid size, they are on top only
• [ ] Quadrant: normalize the graph
• [ ] Funnel: normalize the graph
• [ ] Waterfall: the y axis is not animated any longer
• [ ] PictographGrid:
• [ ] Logo: can you animate the paths combining the logo at the end? Add “name” and “ref”
• [ ] Intro: should stay at the beginning and you can use the information from Board. Make “My Title” dynamic
• [ ] ModalExplainer: text bright
• [ ] FeatureShowcase: icons are black on black
• [ ] Title: parse “Board” from json

in slide_show.py

• picture movement should last as long as the clip lasts
• Wipe zooms too much. It shouldn’t zoom
• the texture should bridge both clips and last as long the transition lasts
• transitions are not applied, I see only hard cut
• only the first sound is played
• Tile instead of cutting the picture it creates multiple copies

in src/anim_org.py

• We need to define the key items as: “text”,“subtitle”,“description”,“image”,“table”,“emphasis”,“arrow”,“diagram”,“plot”…
• For each element add {“popIn”:12,“hold”:60,“fadeOut”:8} with the number of frames for the animation
• Select a texture for each clip and add it into out/compositor_remotion.json
• A list of related icons in out/compositor_remotion.json
• Create a src/OrgClip.tsx starting from src/LoadClip.tsx where we include the ability to render images, tables, charts and diagrams reading some components we have in src/*tsx
• Select a limited collection of those elements we can use and add them to src/OrgClip.tsx
• This information will be read from out/compositor_remotion.json and activated only if the property of that clip is present

• We need a separate LoadClip.tsx capable of managing multiple items as BentoGrid, Board…
• We need a data structure in out/compositor_remotion.json to add images, tables, diagrams, plots…
• The LLM need to select multiple elementary components (FeatureShowcase, PortfolioBreakdown)
• We need to identify “title”, “subtitle”, “description” and animate them (randomly between BoldText.tsx, TypeWriting.tsx, FeatureShowcase.tsx…) sequentially throughout the duration of the clip
• When a table use Table.tsx
• When an image use Snapshot
• Use the complete page
• Gently animate the text moving title, subtitle and text
• Table is messy, use Table.tsx instead
• Animate colors, movements, arrows

in dash_scifi.html we want to improve the UI referring to a/overview.html Mapping portfolio_dash.js -> a/overview.html

• KPIGridid -> reactorTempPanel
• ChatBox -> actionLogContainer
• RadarChart -> radar2-container
• BarChart -> advPulsePanel
• BarChartSmall -> pulsePanel
• MetricCard -> realtimeECGPanel (with circular movement)

Then

• expand more styles and colors like in sci_fi.html
• HeatmapGrid is not displaying the info
• animate lines, bars and images like in a/overview.html with some noise

in `src/anim_org.py`

• [ ] the final output is much longer than the duration of the clips
• [ ] “body” and “text” are the same and truncated, where is the LLM re-writing?
• [ ] Make all clips slower so we can have a better transition
• [ ] Title : animate it, add subtitle and description
• [ ] OrgClip : Typewriting is not finished before the end of the clip
• [ ] FeatureShowcase : make icons bright not black, use css
• [ ] AnimatedPicture : Put a box under the text, is not readable
• [ ] BarChart: labels overlap, extend on x axis. Extract the real names from the table not: series 1, series 2
• [ ] svg it’s a vector so it should be animated as in SvgClip.tsx
• [ ] Each single prop in out/barrique_app.json must have a frame animation {“pop_it”:3,“hold”:50,“fade_out”:20}. One per prop item not prop overall

• [ ] org_files : strip all elements like #+begin, #+name, #+table till #+end
• [ ] highlight : you highlight but repeat the same word

• [ ] as per src/LoadClip.tsx let’s make src/3DClip.tsx using https://devsvideo.com/remotion/remotion-3d-threejs and https://www.remotion.dev/docs/videos/as-threejs-texture and be creative with 3D options