My-First-Project/index.html at main · Jstrine09/My-First-Project · 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
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>James Strine</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/322a9aeac1.js" crossorigin="anonymous"></script>
</head>
<body>
    <section id="about-me">
        <nav>
            <div class="personal__logo">James Strine</div>
            <ul class=nav__link--list>
                <li class="nav__link">
                    <a href="" class="nav__link--anchor
                    link__hover-effect
                    link__hover-effect--black">Languages
                    </a>
                </li>
                <li class="nav__link">
                    <a href="" class="nav__link--anchor
                    link__hover-effect
                    link__hover-effect--black">Projects
                    </a>
                </li>
                <li class="nav__link">
                    <a href="" class="
                    nav__link--anchor
                    nav__link--anchor-primary"
                    >Contact</a>
                </li>
            </ul>
        </nav>
        <div class="flex flex-1">
            <div class="about-me__info row">
                    <div class="about-me__info--container">
                        <figure class="about-me__picture--mask">
                            <img src="./assets/me.jpeg" class="about-me__picture" alt="Picture of me!">
                        </figure>
                        <h1 class="about-me__info--title">
                            Hey I'm <span class="text--purple"> James Strine</span>👋
                        </h1>
                        <p class="about-me__info--para">I'm a <strong class="text--purple">frontend software engineer</strong> and am passionate about creative design and helping make the world more efficient. Looking to transition into the world of Tech Sales.
                        </p>
                            <div class="about-me__links">
                                <a href="" class="about-me__link">
                                    <i class="fa-brands fa-linkedin-in"></i>
                                </a>
                                <a href="" class="about-me__link">
                                    <i class="fa-brands fa-github"></i>
                                </a>
                                <a href="" class="about-me__link">
                                    <i class="fa-regular fa-envelope"></i>
                                </a>
                                <a href="./assets/Example Resume.pdf" target="_blank" class="about-me__link">
                                    <i class="fa-solid fa-file-pdf"></i>
                                </a>
                            </div>
                            </div>
                <figure class="about-me__img--container">
                    <img src="./assets/undraw_websites.svg" class="about-me__img" alt="">
                </figure>
        </div>
    </section>
    <section id="languages">
        <div class="container">
            <div class="row">
                <h1 class="section__title">This is my <span class="text--purple">technology stack</span></h1>
                <div class="language__list">
                    <div class="language">
                        <figure class="language__img--wrapper">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/HTML5_Badge.svg/240px-HTML5_Badge.svg.png" alt="" class="language__img">
                        </figure>
                        <span class="language__name">HTML</span>
                    </div>
                    <div class="language">
                        <figure class="language__img--wrapper">
                            <img src="https://cdn.iconscout.com/icon/free/png-256/css-131-722685.png" alt="CSS Logo" class="language__img">
                        </figure>
                        <span class="language__name">CSS</span>
                    </div>
                    <div class="language">
                        <figure class="language__img--wrapper">
                            <img src="https://cdn.iconscout.com/icon/free/png-256/javascript-1-225993.png" alt="JavaScript Logo" class="language__img">
                        </figure>
                        <span class="language__name">JavaScript</span>
                    </div>
                    <div class="language">
                        <figure class="language__img--wrapper">
                            <img src="https://cdn.iconscout.com/icon/free/png-256/react-3-1175109.png" alt="React Logo" class="language__img">
                        </figure>
                        <span class="language__name">React</span>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="projects">
        <div class="container">
            <div class="row">
                <h1 class="section__title">Here are some of my <span class="text--purple">projects</span></h1>
                <ul class="project__list">
                    <li class="project">
                        <div class="project__wrapper">
                            <img src="./assets/loopit.png" class="project__img" alt="Car subscription project">
                            <div class="project__description">
                                <h3 class="project_-description--title">Car Sales project</h3>
                                <h4 class="project__description--sub-title">
                                    HTML, CSS, JavaScript
                                </h4>
                                <p class="project__description--para">
                                    A car subscription service website that allows users to browse and subscribe to various car models. Built with HTML, CSS, and JavaScript to create a responsive and user-friendly interface.
                                </p>
                                <div class="project__description--links">
                                    <a href="www.github.com/yourlink" class="project__description--link">
                                        <i class="fa-brands fa-github"></i>
                                    </a>
                                    <a href="www.yourwebsite.com" class="project__description--link">
                                        <i class="fa-solid fa-link"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </section>
</body>

</html>