index.html

<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="app"></div>
	<script src="https://cdn.jsdelivr.net/gh/t109598105/portfolio-demo@latest/dist/polarclockportfolio.min.js"></script>
    <script>
        
		var TianGanDiZhi = '子丑寅卯辰巳午未申酉戌亥';
		
		var hw = TianGanDiZhi.split('').map(function(e, i){
			var order = (i+1).toString().length == 1 ? '0' + (i+1).toString() : (i+1).toString();
			return { 
				text: e,
				url: './hw' + order
			};
		});

        var config = {
            page: {
                loadingBG: '#6A4C9C',
                mainBG: '#6A4C9C',
                prevBG: 'rgba(255, 255, 255, 0.198)',
				smTitle: 'Type Design and Character Encoding'
            },
            polarClock: {
				//polar clock 大小(最大是瀏覽器高度)
                size: innerHeight + 30,
				//polar clock 時針邊框顏色
                fieldTrackColor: '#3d2033',
				//polar clock Tick 圓圈底色
				fieldTickColor: '#222',
				//homework 字體顏色
                hwTextColor: '#a2eafa',
				//polar clock Tick 字體的顏色
				fieldTickStroke: 'black',
				//homework 圓圈底色
                hwCircleColor: '#374669',
				//homework 圓圈邊框顏色
				hwCircleStroke: 'white',
				//圓變漢字部分字體顏色
				nameCircleStroke: 'white',
				//tick 字體顏色
                tickTextColor: 'white',	
				//圓變漢字部分字體顏色 (預設 random)
				nameTextColor: 'green',
                nameText: '顏璟丞',
				//圓變漢字部分圓形顏色
                nameCircleColor: 'rgba(106,76,156,0.3)',
                nameTransitionLoop: true,
                hwFontFamily: 'DFKai-sb',
                hwFontPosition: {
                    dx: '-23px',
                    dy: '15px'
                },
				//圓變漢字時間
				hwTickDuration: 1000,
                hwTickDelay: 2000
            },
            loading: {
                githubAccount: 'SVDLOVE',
                githubRepo: 'ct2022s',
				//自動載入圖片，如果作業有 cross-domain 的話，不要設為 true
				autoLoading: false
            }
        };
		
		window.onload = function(){
			var PCP = PolarClockPortfolio;
			PCP.config = config;
			PCP.hw = hw;
			PCP.fontSource = 'https://fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.ttf';

            PCP.onLoadLoadingPage = function(){
                console.log('Loading Success');
            };
            PCP.onLoadMainPage = function(){
                console.log('Main Page Rendered');
            }

            PCP.resizePreview = true;
			PCP.mount('#app');
			PCP.render();
		};

    </script>

</body>
</html>