How to make your online portfolio and promote it to the top in search without a budget

function habr_com(url) { try { var html = UrlFetchApp.fetch(url).getContentText(); let Views = +html.match(/<span class="tm-icon-counter__value">(.*?)K<\/span>/)[1] .replace(/\,/g, '.') * 1000 // let Comments = `?`// +html.match(/class="tm-comments__comments-count">(.*?)<\/span>/)[1] var searchstringComments=" Комментарии " var index = html.search(searchstringComments); if (index >= 0) { var pos = index + searchstringComments.length var Comments = html.substring(pos, pos + 70) Comments = +Comments .split('</span>')[0] .replace(/<\/sp/g, ''); (!Comments || Comments === undefined) ? Comments = 0: Comments } var searchstringBookmarks="bookmarks-button__counter" var index = html.search(searchstringBookmarks); if (index >= 0) { var pos = index + searchstringBookmarks.length var Bookmarks = html.substring(pos, pos + 20) Bookmarks = +Bookmarks.match(/\d{1,4}/); (!Bookmarks || Bookmarks === undefined) ? Bookmarks = 0: Bookmarks } let Ratings = +html.match(/tm-votes-meter__value_appearance-article tm-votes-meter__value_rating\">(.*?)<\/span>/)[1] Logger.log(`Для ${url}:\nПросмотры = ${Views} \nКомментарии = ${Comments} \nЗакладки = ${Bookmarks} \nРейтинг = ${Ratings}.`) return `${Views}|${Comments}|${Bookmarks}|${Ratings}` } catch (error) { Logger.log(`Ошибка чтения данных для ${url}.`) return `?|?|?|?` } }

Or an interesting point – Tinkoff Journal has a hidden api (as the author of T-Z, I have nothing to do with development), but I had to download my indicators into a table, and nothing worked with a simple head-on approach and I had to figure it out. It turned out that each article has an identifier, by contacting directly by which you can easily download all four indicators from JSON. Here link to solution on github.

The script processes about a hundred links in 2-3 minutes and collects all the statistics directly into my table.

You can see the full code on github.

Node.js

Since you always want to have up-to-date data on a business card site and don’t want to do copy-paste, I suggest using Node.js – it seemed to me that this would be a good idea in order to ensure the transformation of data from one format to another.

Also on github posted a script which transforms summary data from a Google spreadsheet into a business card site. True, the script itself may look like a “crutch”, but the output is ready-made pieces of html code in three files:

• piece_publications.txt contains data for Timelines Google Charts on a business card site in html form.

• piece_google_charts_vegachart.txt contains data for word cloud visualization using VegaChart.

• piece_google_charts_timelines.txt contains data about all publications in html formatted form.

I already wrote more about the script in this article.

Recently added to the code a line to add a footer footer to all pdf files with articles that are automatically saved using Puppeteer. You can modify the signature according to your wishes:

console.log(`Генерация pdf по ссылкам из таблицы ${doc.title}, лист ${sheet1.title}.`)
const browser = await puppeteer.launch();

for (var i = 2; i <= rows1.length + 1; i++) { //                
    const page = await browser.newPage();
    await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36');
    await page.setDefaultNavigationTimeout(0);

    type = sheet1.getCellByA1('B' + i).value
    url = sheet1.getCellByA1('D' + i).value
    const footer = `<style>#header, #footer { padding: 0 !important; }</style><div class="footer" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: blue; color: white; width: 100%; text-align: right; font-size: 12px;">${url} | Михаил Шардин, https://shardin.name/ <br /> Страница <span class="pageNumber"></span> из <span class="totalPages"></span> </div>`;
    console.log(`Строка №${i} из ${rows1.length + 1} для ${url}.`)

    if (type == 'Веб' && url != null) {
        path = `./articles/${sheet1.getCellByA1('C' + i).formattedValue}_${url.split(/\/\//)[1].split(/\//)[0].replace(/\./g, '-')}_${sheet1.getCellByA1('F' + i).formattedValue}.pdf`

        await page.goto(url, {
            waitUntil: 'networkidle0'
        });
        await page.waitFor(20 * 1000)
        await page.emulateMediaType('screen');
        const pdf = await page.pdf({
            path: path,
            margin: {
                top: 40,
                bottom: 40,
                left: 20,
                right: 10
            },
            printBackground: true,
            displayHeaderFooter: true,
            footerTemplate: footer,
            format: 'A4',
        });
        console.log(`Создан файл ${path.split(/\//).pop()}.\n`)
        await page.close()
    }
}

Complete PDF generation code you can see it on github.

google and html charts

After all the publications are entered into the table, their views and comments data are downloaded by the script, formatting for Google charts and the list of publications is prepared using another script, pdfs are created from the links – it’s time to insert all this into the business card site template.

You can insert ready-made pieces of previously generated code through Visual Studio Code:

After that, the page of the business card site was completely updated.

Business card site on github hosting

In my opinion, a business card site is a non-commercial project and there is an option not to pay for hosting at all, and also not to bother with hosting it on your own server. Can select GitHub Pages – it’s free. The monthly hosting fee is zero.

In general, github provides an opportunity not to pay for a domain name, but to use an address like username.github.io. In the screenshot below, github pages are used with their domain name:

My experience: top 3 place in the search for full name

Three years have already passed, and about six months after the start of placement, my business card site became the first in the search for my name – I did not take any additional actions to promote or optimize it.

However, I regularly update the information on it – if my article is published on some resource, then I immediately add it to the table and then all the information appears on the business card site.

Results

Your own business card website is beneficial for many reasons:

1. A portfolio website allows you to display your work in a visually appealing and organized way. It provides a platform to showcase your skills, projects, and accomplishments to potential clients, employers, or employees.

2. A portfolio website helps establish your professional online presence. It serves as a central hub where people can learn more about you, your experience and accomplishments. This gives you control over how you present yourself and your work to the world.

3. With a portfolio website, you can reach a global audience. This allows you to showcase your work to people outside of your immediate network or geographic location. This may lead to new opportunities, collaborations or clients.

4. A portfolio website allows you to build and strengthen your personal brand. You can customize the design, layout, and content to reflect your unique style, values, and experience.

5. Unlike physical portfolios or printed materials, a portfolio website is easily accessible online. It can be viewed anytime, anywhere and across devices. This convenience makes it more likely that potential clients or employers will review your work.

All in all, a portfolio website is a powerful tool for showcasing your work, establishing your online presence, and attracting new opportunities in your professional field.

Author: Mikhail Shardin,

June 19, 2023