Portfolio-Website/index.html at main · kamdoescode/Portfolio-Website · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>KAMRYN HANLEY</title>
        <link rel="stylesheet" href="style.css"/>
        <link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;700&display=swap" rel="stylesheet"/>
    </head>
    <body>
        <div id="grid"></div>

        <!-- intro section -->
        <div class="hero">
            <img src="assets/pink-bird-screen.png" class="hero-image"/>
            <div class="contents-list">
                <a href="#about">about</a>
                <a href="#work">work</a>
                <a href="#contact">contact</a>
            </div>
        </div>

        <!-- about section -->
        <div id="about" class="about-section">
            <img src="assets/about-section.png" class="about-image" alt="young woman facing right"/>
            <div class="about-text">
                <p>Affectionately known across the internet as ladyluck, girlwithlaptop, dreamboatkami, among other titles.</p>
                <p>Kamryn is a Designer & Developer practicing at the intersection of art and technology.
                      Canadian born and raised but currently based in London, she studies at University of the Arts London: Creative Computing Institute, working towards a BSc in Creative Computing.
                      With a background in graphic design and a newfound passion for software development, she’s interested in pushing the boundaries of user interfaces and experiences.
                </p>
            </div>
        </div>

        <!-- work section -->
        <div id="work" class="work-section">
            <img src="assets/work-bckg.png" class="work-bckg"/>\
            <div class="work-row">
                <div class="work-item">
                    <img src="assets/dynamic-type.png" alt="webpage with typography displayed"/>
                    <h3>Dyanmic Typography</h3>
                    <p>Physical computing project using sensor data to control typography on a webpage</p>
                </div>
                <div class="work-item">
                    <img src="assets/website.png" alt="Webpage with Kamryn Hanley text in the middle">
                    <h3>Portfolio Site</h3>
                    <p>Fully designed and coded website using HTML, CSS, JavaScript and GSAP animation.</p>
                </div>
                <div class="work-item">
                    <img src="assets/prototype.png" alt="figma wireframe prototype">
                    <h3>Web Extension for Text Readability</h3>
                    <p>HCI Project focusing on accessibility for those with cognitive disorders to custom adjust text for better comprehension</p>
                </div>
            </div>
        </div>


        <!-- contact section -->
         <div id="contact" class="contact-section">
            <img src="assets/contact-bckg.png" class="contact-bckg"/>
            <div class="header">
                <p>contact</p>
            </div>
            <div class="contact-links">
                <a href="mailto:[email protected]">[email protected]</a>
                <a href="https://github.com/kamdoescode">Github</a>
                <a href="https://www.linkedin.com/in/kamryn-hanley/">LinkedIn</a>
                <a href="https://www.instagram.com/girlwithlaptop/">Instagram</a>
            </div>
         </div>


        <!-- GSAP -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

        <!-- GSAP Scrolltrigger plugin -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

        <!-- ScrollTo Plugin -->
        <script src="https://unpkg.com/gsap@3/dist/ScrollToPlugin.min.js"></script>

        <script src="intro.js"></script>
        <script src="main.js"></script>
    </body>
</html>