Programmers_AI_BackEnd/index.html at main · soheeGit/Programmers_AI_BackEnd · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="ko">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gugi&family=Jua&family=Poor+Story&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="img/favicon-96x96.png" sizes="96x96" />
	<link rel="icon" type="image/svg+xml" href="img/favicon.svg" />
	<link rel="shortcut icon" href="img/favicon.ico" />
	<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png" />
	<link rel="manifest" href="img/site.webmanifest" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 페이지들</title>
    <style>
        /* 기본 스타일 */
        html {
            font-size: 16px;
            height: 100%;
        }

        body {
            font-family: "Jua", sans-serif;
            background: linear-gradient(to top, #fbc2eb, #a6c1ee) fixed;
            margin: 0;
            padding: 20px 0;
            color: #333;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            overflow-y: auto;
        }

        h1 {
            font-size: 2.5rem;
            color: #6a5acd;
            margin: 20px 0 30px;
            font-weight: 600;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 80%;
            max-width: 1000px;
            padding-bottom: 40px;
        }

        .page-link {
            display: block;
            background-color: #ffdde1;
            color: #6a5acd;
            padding: 15px 30px;
            margin: 0;
            text-decoration: none;
            font-size: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            width: 90%;
            max-width: 500px;
            text-align: center;
        }

        .page-link:hover {
            background-color: #ffb3c1;
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .page-link:active {
            transform: translateY(1px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* 반응형 스타일 */
        @media (max-width: 768px) {
            html {
                font-size: 14px;
            }

            h1 {
                font-size: 2rem;
                margin-bottom: 20px;
            }

            .page-link {
                font-size: 1.3rem;
                padding: 12px 20px;
            }
        }

        @media (max-width: 480px) {
            .container {
                gap: 10px;
                width: 95%;
            }

            .page-link {
                font-size: 1.2rem;
                padding: 10px 15px;
            }
        }
    </style>
</head>
<body>

    <h1>나의 실습 페이지들</h1>

    <div class="container">
        <a href="programming/250121/sample-main/index.html" class="page-link">og, favicon 실습</a>
        <a href="programming/250122/index.html" class="page-link">플렉스, css, 웹폰트 실습</a>
        <a href="review/wordcup/wordcup.html" class="page-link">해리포터 이상형 월드컵</a>
        <a href="programming/250207/ex01/index.html" class="page-link">LLM을 활용한 memo</a>
        <a href="review/llm/llm-project/docs/index.html" class="page-link">LLM을 활용한 스터디 과정 추천(image 생성 추가)</a>
        <a href="programming/250211/supabase2/index.html" class="page-link">마법사 등록 페이지 - supabase 실습</a>
        <a href="https://naver-book-search.onrender.com/" class="page-link">naverAPI 기반 서블릿 실습</a>
        <a href="https://today-taro-card.onrender.com/" class="page-link">나만의 타로카드 만들기-LLM, 서블릿, supabase</a>
        <a href="https://movie-storyline-helper.onrender.com/" class="page-link">영화 포스터 & 줄거리 생성기-LLM, 서블릿</a>
        <a href="https://today-movie-main.onrender.com/" class="page-link">Spring & JSP & supabase & 영화진흥위원회 API & GEMINI - AI 영화 추천 웹사이트</a>
        <a href="https://titan-thoughts.onrender.com/" class="page-link">진격의 거인 사고 변환기 - history 실습</a>
    </div>

</body>
</html>